Hi~! Ever since I started having fun with Babylon, I have been noticing how some websites are presenting their products and all.
Of course, some are done by Photoshop, but some are done with 3D modeling.
Here comes an interesting one. I randomly encountered this website called “Placeit ” where it allows clients to customize products and show the visualized products.
However, I could not find any 3D model on the DevTool
Could this be done without 3D modeling?
I get that distortion of an image can be done, surely, yes. The problem is the wrinkles/folded parts on a shirt.
How could this be done?
or possibly, they are actually using 3D tech and mapped texture on a server and just send back screenshot/image of mapped model?
Would you like to share your opinions?! Thanks!
I think it could be something like this -
https://snorpey.github.io/distort-grid/
where they are using a distort grid and all of the grid values are preset - then the image is masked over the area
If you look the overlays are not perfectly accurate (the top of the overlap should not be straight here)
If you wanted to use Babylon I think you could by modifying the UV positions of a subdivided plane?
1 Like
Wow! That is so cool!!
I just noticed that on “placeit,” it keeps console.log-ing THREE.WebGL haha
but I don’t see any 3D model on network in DevTool though.
Hmm… I took a look at Snorpey that you introduced, but I don’t think it is accurate or enough to reproduce wrinkles/overlays like “Placeit’s”
Do you, by any chance, know any other library like this with multiple distort points?
If you give me until tomorrow I can replicate it in babylon js? I think it will be pretty straightforward
Do you mean something like this?
with multiple distort points on a 2D image?
Babylon can do that?
Yeah definitely, will be straight forward
I found a great example of what I want, but I am not sure how I could build in with Babylon.
Is there a terminology for calling this kind of technique?
Is it just matrix transformation? I could not find anything by Googling “Babylonjs image matrix tranform”
I feel like, perhaps, this(Mesh Behaviours ) can be used?
[UPDATE]!!
WOW! I just found this post on Babylon forum.
Hi, my goal is select a point of vertice and drag (or move) to manipulate the mesh: Sample Select Vertices
Also i tried to add one box by point of vertice to be more easy drag the point (could be heavy :-/ ), but not working.
Is possible drag the vertices with this approach ?
Thank you!
Maybe this can be helpful
[UPDATE 2]
I tried to convert the above PG example for 2D image on a plane, but hmm it’s not working yet.
Hey Doehoonlee,
What about something like this?
https://playground.babylonjs.com/#N5IFVE
Code needs refactoring but you get the general idea
Cheers
1 Like
WOW!! This is great!!
Thank you for the amazing work! Let me look into it and see how it works
