Decal on a Flat view

Questions
1

Hello everyone,

I need to display a decal on a plane view of my model’s texture.
As you can see in this playground: https://playground.babylonjs.com/#XWBES1#387
There are the model and the texture associated with the albedo above it on a plane. When I click on the model, a decal is added to it and what I need is to display the decal on my plane in the correct position based on where I clicked.
I tried several things but none worked so far.

Thanks for your help
PS: @Deltakosh, It seems I have failed :hugs: :grinning_face_with_smiling_eyes:

1 Like
2

Heya, so I used getTextureCoordinates to get the UVs and multiplied them by the plane size to get the position on the plane. And just used (0, 0, -1) for the normal since that’s what direction the plane is facing. And also had to disable backFaceCulling to see the decals from behind when rotating. :slight_smile:

EDIT: Hmm I noticed it looks odd from behind because the texture is mirrored on back of the plane. But you could e.g. reverse the backUVs and then clone the decal with position.x multiplied by -1. Then it looks more normal when clicking on the back of the model IMO. :slight_smile:

6 Likes
3

Thanks a lot @Blake ! This is exactly what I was looking for.

I made further tests using a custom texture with a rotation and it works great: https://playground.babylonjs.com/#XWBES1#390

The only thing which does not match yet between the Shirt and the Plane is the scale of the decal. If you put it on the back of the Shirt where it is written “Plasma purpose”, you can clearly see that it is way bigger on the plane. I could use a fixed ratio to adjust it but I want that stuff to work whatever the model and the UV maps. Do you know a way to do that?

4

Your welcome. :slight_smile: Hmm but I can’t think of any way to calculate that size ratio programmatically… That’s a tricky one. :thinking: Ooh it looks like the front decal needs to be rotated 180 degrees too. :point_down:

2 Likes
5

With this model, you can just divide the decal size by 2 and it seems to be perfect:

Then I tried with another model which contains several meshes and it stops working:

Maybe the function getTextureCoordinates stops being accurate with several Meshes?

6

Hmm it looks like the issue with the UVs is that they need to have wrapping applied (these ones weren’t between 0 and 1). I did the uv wrapping/sanitizing on line 88. EDIT: actually that looks like it’s working pretty well but v is inverted for this one I guess… :slight_smile:

1 Like
7

Cool, I understand that the UV Map on the model I used was not the best. One thing to be very careful about for this use case indeed!

Now I said rotation works but in this example, you can see that the rotation of the decal is always the same on the plane when it should also depend on how it is applied to the 3D Mesh.

My instinct is that it is the normal of the 3D Decal that might allow us to determine the correct rotation on the plane but I wouldn’t know what formula to use.

8

The rotation of the decals looks okay to me. Maybe you could use a screenshot to show/highlight what you mean? :thinking:

But if you’re talking about the v inversion thou, that could be fixed by inverting v when creating the plane (lines 31 and 32) and inverting the v returned by getTextureCoordinates (line 94). Not sure how to tell which models that would need to be done for thou, I guess it depends on how the UVs were mapped for that model… :frowning:

9

Yep this is better after your v inversion. Actually, it is even more correct with these frontUVs/backUVs parameters as it shows the texture as it really is so this is awesome thanks!

Here is a screenshot to highlight the rotation issue:

Screenshot 2022-10-18 at 17.20.33
Screenshot 2022-10-18 at 17.20.33700×1202 162 KB

If we follow the stitching both in 3D and 2D (red lines), we can see that the text is not applied the same way. I would say that on a flat surface it works great but as soon as you go to edges or curvy parts of the Tshirt, it becomes less reliable.
Is there a way to correct that rotation with the normal vector from pick maybe?

10

Heya, so I’m still struggling to understand how it should look and why it should look that way… Maybe it will make sense to people more familiar with modeling thou, I’m really more of a code monkey than an artist/modeler LOL so this part is stretching my brain! :sweat: :wink: :smile:

11

Hello @PichouPichou just checking in if you have any more questions

12

Maybe this can help you:

It describes a technic to project decals into a texture and then use this texture as an additional diffuse texture when rendering the mesh.

5 Likes
13

Thanks for your additional pieces of information.
@Evgeni_Popov for my need the text must not be distorted on the Texture view so it doesn’t work but that was an interesting read and I learned a bit more about Projection Matrix :+1:

The best idea I have so far is to do several picks along the text decal on the 3D view to then calculate a better approximation of the rotation needed on the texture view.

The project has been put on hold on my side, that’s why I didn’t come back on this thread :wink:

1 Like