Rotate World-Positioned texture so it is flat to each surface normal

[Chrisor9]

Hi, I am trying to create a shader that will use a world positioned texture, that ‘projects’ over the mesh, but avoid the stretching that occurs on faces that are facing different directions. heres what I have so far (the basic world positioned texture mapping:

Babylon.js Node Material Editor

Heres what it looks like with the stretching visible; essentially i want the dots to show the same on all planes, with the same orientation on the side planes as well:

I guess that I need to take the surface normal and perturb the vector from world position that is mapping the texture, but I don’t know the way to do this…

(I have tried triplanar mapping btw but it doesnt quite do what I want)

The end result is to have multiple, different sized meshes in the world that use the same materials and have the same density texture on them (no stretching or scaling)

Any pointers would be much appreciated Thanks a lot

[Pryme8]

You would need 3d noise.

[Chrisor9]

sorry, the noise part isnt important, I want to be able to use it with a 2d image texture as well (like tiled bricks)

[Pryme8]

Then you need to do tri-planar sampling, but you said that did not work for you. So now I am not too sure what you really want.

Triplanar Mapping

[Chrisor9]

so my thinking is, here is the data thats mapping the texture correctly (ie from 0-1 on both axes) on one side but not others:

and here is the data we are receiving from the face normal, with the ‘correct’ face being a vector of (0,1,0 / blue) i guess:

is there a way to use this normal vector to transform/effect the vector we’re getting from world position, so that it maps the texture correctly whichever way it is facing?

[Evgeni_Popov]

You need to apply the Triplanar math “by hand”, as your input is not a texture (the Triplanar block needs a texture for the input):

Babylon.js Node Material Editor

I have implemented this code (" Box/RoundCube/Triplanar mapping" section):

Inigo Quilez

[lxq100]

I encountered a similar problem when creating a node material, as shown in the picture.
The end result is to have multiple, different sized meshes in the world that use the same materials and have the same density texture on them (no stretching or scaling).
figure 1:

When the model is scaled, the desired effect is shown in Figure 2.
figure 2:

Thank you very much if you can help!

[Chrisor9]

in that case i believe @Evgeni_Popov 's solution above should work? Could you perhaps mock it up in a Babylon Playground for us to see?

[lxq100]

At present, the node material I found is like this. When modifying the model size, modify the widthScale heightScale depthScale of the node material at the same time
I believe there is a better solution, but I haven’t found it yet. At present, I can only use this method
example address:

Babylon.js Playground

[Chrisor9]

so i took that above playground, and swapped out the material for the one that was posted above by @Evgeni_Popov , and in the scene observables removed the call to change the scale height/width (ie commented out lines 189/195/201). As you can see the texture stays the same, and isn’t stretched, so I would look into using that material as a starting point.

If youre doing a top down road then you might even want to use the triplanar node built into node materials, but be careful about rotation.

Babylon.js Playground