Examples: Make wave speed frame rate independent in `webgl_shaders_ocean`. (#33492)

Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

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 );