Mapping on an image instead of an object?!

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 :open_mouth:

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? :open_mouth:

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?

image

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 :slight_smile:

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.

Screen Shot 2021-08-17 at 2.08.58 PM


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.

Maybe this can be helpful

[UPDATE 2]

https://www.babylonjs-playground.com/#1B6Z67#31

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 :smiley: