From 4eb27e06dc0aa38b6e88f4b5c5846bab7d0fb6de Mon Sep 17 00:00:00 2001 From: "Sid N." <7568554+unrealsid@users.noreply.github.com> Date: Tue, 28 Apr 2026 16:24:47 +0530 Subject: [PATCH] Examples: Make wave speed frame rate independent in `webgl_shaders_ocean`. (#33492) Co-authored-by: Michael Herzog --- examples/webgl_shaders_ocean.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html index 7f9df7a91e1047..5920d1f525a14f 100644 --- a/examples/webgl_shaders_ocean.html +++ b/examples/webgl_shaders_ocean.html @@ -34,7 +34,7 @@ import { Sky } from 'three/addons/objects/Sky.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; - let container, stats; + let container, stats, timer; let camera, scene, renderer; let controls, water, sun, sky, mesh, bloomPass; @@ -67,6 +67,8 @@ camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 ); camera.position.set( 30, 30, 100 ); + timer = new THREE.Timer(); + // sun = new THREE.Vector3(); @@ -217,6 +219,7 @@ function animate() { + timer.update(); render(); stats.update(); @@ -230,7 +233,9 @@ mesh.rotation.x = time * 0.5; mesh.rotation.z = time * 0.51; - water.material.uniforms[ 'time' ].value += 1.0 / 60.0; + const delta = timer.getDelta(); + + water.material.uniforms[ 'time' ].value += delta; sky.material.uniforms[ 'time' ].value = time; renderer.render( scene, camera );