How can I make a texture move towards a direction in node material editor?

Hello guys,

I am currently working on a project that needs to deal with the conveyors, I would like to have the following effects which is made by unreal engine using textures.
conveyor_small

I am completely new in dealing with materials and textures and I have no idea how to do this in Babylon.js. I have made an NME (Babylon.js Node Material Editor (babylonjs.com)) to test this, however I cannot even make the UV in the correct direction. Can anyone help me out there or can you guys give me some ideas how I can learn this from scratch? Since I found that the documentation and the YouTube videos are hard to understand.

using the uOffset variable on a texture could help here:

Fake caustics with multiple render passes | Babylon.js Playground (babylonjs.com)

I have also added rotation on the ground to show that it doesn’t matter what the rotation of the mesh, u (or v) offset will always “push” the texture in the same direction

2 Likes

Great thanks! I am able to create the conveyors! However, my conveyors have different sizes and some of them are curve:
chrome-capture-2023-9-16

I would like to NOT have the textures being stretched, and I have tried adjusting the uScale and vScale, and seems that they are not working. I would also like the curves display correctly, currently is seems that the offset the the direction is different from a straight block, is there way to calculate this, or I need to manually adjust it?

cc @PatrickRyan will have some good input about this :slight_smile:

@Ben_Jamin, what you need to do here is carefully plan out your mesh UVs to ensure you don’t get any distortion in your textures. For example, let me show you an approach here. If you were to make a simple tiling texture… here I used a simple 256x256 texture and created the tiling arrow pattern in illustrator and exported as a png file.

The texture is basically the white box here and anything that extends outside of the white box will be cut off in the final texture, but those elements that extend beyond the texture border are needed to ensure the texture tiles correctly.

When I bring it into a DCC tool, in this case Maya, I am going to make a simple 1 x 1 unit asset that will map 1:1 to this texture. Every other asset I create will be a proportion of this original tile. There is one that is a 1 x 4 scale of this original asset and a curved version. Both of those assets are scaled in V so that it retains the same texel density as the original. In the image below, I left a gap between each of the assets so you can see how they align to the texture scale. Importantly, you need to figure out the appropriate scaling for assets that distort the texture like the curve below.

You can see that there is some distortion and that is from the UV layout of the mesh. Each of the other assets are just a simple quad, but this one needs a lot more resolution to assist with the deformation of the texture. You can see the difference here:

All other assets are 2 triangles, while this one is 256 triangles. You will need to test how much resolution you need to make sure that the texture distortion isn’t too bad. In all cases, the meshes are UVed into a square layout and I pay close attention to the direction the texture flows in the UV layout.

This is important as you will want to rotate the assets to align with the path you need in your experience, but you also need to know the flow direction of each piece so that your texture always flows the same direction.

The challenge here is that you will need to scale each asset’s texture based on the proportions of the asset in comparison to the texture. You will also likely need to use instances for your scene so that you can reduce the number of meshes in the scene and manage your draw calls. While they could use the same texture, you will likely need to pass along a custom UV tiling per asset. You can accomplish this with storing mesh color data in custom buffers in the instances. I wrote a medium article about using custom buffers to drive UV offsets in instanced meshes which can be easily adapted to apply to UV scale.

This allows you to both instance your meshes to reduce your draw calls, and use a single node material to drive your custom scale per mesh.

I hope this answers your biggest questions and unblocks you for the moment. If you have more questions, please feel free to ping back.

4 Likes

Amazing! I believe this is the ultimate answer! I am going to try this tomorrow since the project can only be access through campus. My highest respect to you!

1 Like