Problem with dt when launching the Animated Texture Tutorial

Help & Support
1

Hi there,

I am playing with the Animated Textures Tutorial here.
My goal is to find an efficient (fast) way to scroll a simple texture on a material dependent of the camera direction and speed.

I read about faster code when trying to avoid the update() function and also about the possibility to create new shader chunks writing glsl.

To start with I fork the above mentioned tutorial and hit the Launch button inside the editor but… the water/river sprite doesn’t move.
I tried to figure out what the problem might be and found a problem with scale(dt) inside scrolling-texture.js.

When I was replacing tmp.scale(dt) with tmp.scale(0.017) the water texture moves.
Next I was trying to find a workaround to this behavior but I couldn’t - nothing I can do worked so far.

Could someone please help me with that?
Or should I avoid using the material.update() function at all and start learning to deal with vertex and fragment shader?

Best Jürgen

2

Just checked out the project. There is a little “bug”. If the material has a zero offset when it is created, it is optimized so that it doesn’t include the shader code for the transform.

I’ve updated the project do this: this.material.diffuseMapOffset = this.material.diffuseMapOffset.add(tmp); (assigning the vector instead of modifying it). Which forces the shader to be recompiled if necessary. The example now works.

The other way around this is to start the material with a non-zero offset, say 0.5,0.5.

3

Hey, I just had this problem - the code example in the web page tutorial https://developer.playcanvas.com/en/tutorials/animated-textures/

has not been updated.

cheers