How to implement a selection of fabric from the database in an online store?

Question

PHP

Good day dear programmers! On the site, it is necessary to implement a program for selecting upholstery fabrics for upholstered furniture. Here are a couple of examples:
1st example:
www.dekoria.co.uk/offer/product/364/139/737/?rf=0
2nd example:
www.bemz.com/en-us/product-page/ product/sofa-cover...
Apparently they use similar selection techniques. At first I thought, why not just fill the object areas with textures in Photoshop, then when you click on the fabric sample, load the image from the database. But when I saw these examples, I decided that it would be much better to automate this process.
The only question is - how to implement it so that it works in browsers, starting with IE 8. And from which side to approach. How do you think? Does it use 3D? Then it's probably better to forget about the 8th explorer and keep up with the times. In that case, what is the best library to use for this kind of task?
But what if it's just a regular white 2D drawing with a translucent fill applied to it?
Then it's even easier, no need to create a 3D model for each product. Then which is better to use?
Or maybe return 2007 and use flash? Although this technology is definitely improving. But I heard from the corner of my ear that HTML5 is replacing it.
All the same, I would like to make it easier - on a white regular drawing, mark the areas for applying the pattern programmatically, and this model will already load only the pattern from the database and fill the marked areas with it. But if you can't do without 3D modeling, let it be 3D. Maybe someone is familiar with this selection system, which is in the examples?

Answer 1

From the point of view of the web - when clicking on the texture - a large image is reloaded, with the desired id
cdn.dekoria.pl/image/djpg/364/364_ 1825 .1/380/0/Beddinge-sofa-cover-long_1825.jpg
cdn.dekoria .pl/image/djpg/364/364_ 1568 .1/380/0/Beddinge-sofa-cover-long_1561.jpg
This is done on jquery in half an hour (jquery dom, ajax). How you prepare the images - render or in Photoshop - depends on your abilities.

Answer 2

And what exactly is the problem? Take a ready-made solution: ELARBIS - furniture "dressing up" program.
elarbis.com is a site where you can see solutions, including those for the web.
Examples of the program work below:
elarbis.assets2.izhpt.com/elarbis/Schlossatelier/i...
And this is the quality of the picture in the desktop version of ELARBIS
If you need details and terms of use, please contact us! Always happy to help.

Answer 3

I searched for half a day - I found the most primitive version on JS
www.forema.ru/color_3.php
Just take and copy the source
www.forema.ru/layout/js/colorselect.js
You just need to prepare the layer
Here are examples
www.forema.ru/uploads/color_calc /model_35.png
www.forema.ru/uploads/color_calc/model_40.png
www.forema.ru/uploads/color_calc/model_45.png