Is update() the smoothest animate loop?

🌵 Needle Engine
1

I’m using the ocean plugin from this example three.js webgl - shaders - ocean

and in Update we are animating the water uniforms over time but the effect is not always smooth even in a pretty much empty scene, it occasionally judders as if update is not constant.

    update(){
        {
            //@ts-ignore
            this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
        }
    }

SeaWater.ts

Original Post on Discord

by user 103054507105067008

2

That script attached can be added to an empty in your scene to spawn the water

by user 103054507105067008

3

You should use this.context.time.deltaTime to update time uniforms

4

or you can set this.context.time.time directly

5

Otherwise you’ll see different water speeds depending on the framerate your scene runs on (e.g. on mobile vs desktop)

6

btw you can use ?stats in your url to show the framerate and memory

7

Somehow it still isn’t smooth, stats shows 2ms too it just jutters at a regular interval

by user 103054507105067008

8

Swapped update to

    update(){
        {
            //@ts-ignore
            this.water.material.uniforms[ 'time' ].value += this.context.time.deltaTime;
        }
    }

It’s only me that notices it so far so might just leave it lol

by user 103054507105067008