Product Customizer - UI and applying/projecting elements (text, image) to the specific part of the UV space

Questions
1

Hi,

I am not really sure how to ask this question properly, so I will use a few examples to try to give you some insight.
First, what is main idea here is to have a product (packaging box, bag or something) and to create that product customizer (something like this Customize your Mailer Box | Packlane ) . So you could add text, custom textures, change colors…

UI of the app would be something like this. https://my.deejo.fr/ So fancy 3d-like UI.

My question is, what would be the best way to achieve this, meaning that I can choose front of the box let’s say and apply certain image, then choose back of the box and apply some text maybe.

My idea was to split box into 6 separated planes and it would be easy to control this, but the final product of this app will probably be some kind of the bag or chair, meaning I will have some unwrapped mesh from external software. And splitting that type of model into planes or segments can be complex and not efficient.

So, my option is to have one solid mesh with unwrapped UVs. So with that constraint what is best option to control where for example the custom image that someone uploads will apply? Is it possible to somehow project image on the mesh (from left, right, top, front…) ,or maybe use some color mapped UVs as a filters, or alpha masking, or maybe with using some dynamic textures.

Also, In the UI link example I pasted, I think it is done using HTML CSS and controling rotate and perspective properties. I was thinking implementing Babylon GUI instead of that approach. Do you have any ideas on what would be better to do there.

Any idea would help. And please I am sorry if I didn’t explain this properly and if this a long question. Be free to ask anything for clarification.

2

Hello!
So for a 3D UI, you are right, GUI is the best option (as you can use the projected mode like here: https://www.babylonjs-playground.com/#ZI9AK7#1). This will give you all the controls you need to build your UI (with labels, buttons, connectors, etc…)

For your question regarding the textures, I would go a DynamicTexture that you can easily move over your mesh with uOffset and vOffset: https://www.babylonjs-playground.com/#5ZCGRM#45

3

Thank you Deltakosh for your answer.

My concern here is how to control that on some more complex shape. Here is a same thing on the box.
https://www.babylonjs-playground.com/#5ZCGRM#46

How could I control which side is affected. Let’s say I want that top face have static text, while front face has text that moves around with u/vOffset (like in example). And right face has some texture on it.

Plus I need to enable functions like translation, rotation, and scaling depending on the user input. So I need to have those separate controls on each face, but without having separate meshes.

Things become a bit more complicated if I use some custom mesh (bag) with the unwrapped UVs inside external software. Something like this https://cdn.shopify.com/s/files/1/0404/2041/products/grocery-bag-orange_1024x1024.jpg?v=1482481123

And how could I add text on the front side, and maybe some flower image on back side of it.

That’s why i was wondering if some projection is possible, or some kind of filtering (color mapping, alpha masking)

4

You can then use multiple uvs per mesh and then each texture will pick one up set (using texture.coordinateIndex)

You can scale rotate and translate any texture with uOffset, uScale and uAng (and same for v or course)

5

Okay, I will try some things out and see what can be done. Thank you so much for your answer, it was helpful.

6

https://www.babylonjs-playground.com/#5ZCGRM#47

faceUV ?

https://www.babylonjs-playground.com/#5ZCGRM#48

7

Okay, let’s see. IF the final result (the bag) will be rendered realistically (bumpy surface)… then it might be wise to use decals. Click on the cat: https://www.babylonjs-playground.com/#1BAPRM#183

Decals are fancy tech, which causes them to have some limitations. They are TERRIBLE-at being translated/dragged, scaled, or rotated… after they have been created. The are “grown” precisely contoured for the surface beneath them. If you move them in ANY WAY (after creation/render)… they CAN look like crap (because the original contour of the decal… does not match the contour of its new pos, rot, or scale).

Sooo… to translate, scale, and rotate a decal that already exists… you instead… translate, rotate, scale… a “proxy” object or gizmo. When the user is done positioning, scaling, or rotating the proxy object (such as a box), THEN user presses the RENDER IT button, and you delete the old decal, and create a new one, based upon the proxy box (which “holds” the position, rotation, and scaling adjustments that the user did… during the editing.) Then, re-hide the proxy box/plane. It appears only in “edit mode”.

With me? You cannot position, scale, or rotate the actual decal. You instead… do that to a box or plane or something. Perhaps this “adjusting box” comes into view… when the user right-clicks on the graphic/decal. The user can position, scale, and rotate the box/proxy, but not the decal.

Then, user presses “show changes” and that’s when you delete old decal and make new one. (Am I repeating myself?) heh.

Perhaps others know more about decals than I do. I know they do one thing very well… allow you to place an image… nicely… on bumpy surfaces… at any location upon that surface. Caution: decals struggle when wrap-around angles nearing 90 degrees.

Secret: Each decal IS a mesh. You can set decal.showBoundingBox=true; … for fun… to see the mesh, temporarily.

It’s just another idea. :slight_smile: Probably a bad one.

For text… projected as a decal… phew - not sure about that. Perhaps it would use a dynamicTexture AS a decal. I don’t know if anyone has tried that, yet. :slight_smile:

PS: You CAN constantly delete old decals and create new ones… DURING onPointerMove or other dragging actions, but I think it would be “painful” and possibly flicker violently. Not sure. I’d like to see any demos you make… that try that. Please share. :slight_smile:

8

This is very interesting technique but I am not sure I will use it in this project. But I really want to play with this so I will probably make sometimes something with it. Thank you for your answer as always.

9

Yes, I was thinking about that. But what happens when I import custom mesh? As I understood faceUVs are working only with the meshes with the distinct faces like box, while it doesn’t work on sphere or some custom mesh with complex topology.

Am I right?

10

Cool.

Where is the BabylonJS spotlight-based slide projector when we need it most, eh? :smiley:

But image projectors don’t contour the image around corners. Though shalt not bend light, nor colorize shadowMaps. heh.

11

How was your project going?

12

Hi.

This was such a long time ago. To be honest, I don’t quite know what happened with this, but I think the project was abandoned at that time. Or replaced with much simplified version.

With that said, I was actually following the thread you created on the similar topic, and I don’t think I can add more than people already suggested. I didn’t spend enough time on this to provide more input. Sorry

13

No problem, I already have valuable information about the project, appreciate your answer.

14

@PatrickRyan has actually been working on a super cool customizer as a documentation/teaching tool :smiley:

15

Very good news. That would be interesting for new babyloners.

16

I’m sure eager to read that :grin: