From 19425a097337197d0c398812b9908c204f52c6ff Mon Sep 17 00:00:00 2001
From: Timo Hausmann <hello.timohausmann@gmail.com>
Date: Wed, 2 Jun 2021 13:46:53 +0200
Subject: [PATCH] use more precise THREE.Clock for u_time

---
 04/README-ch.md        | 5 +++--
 04/README-de.md        | 5 +++--
 04/README-es.md        | 5 +++--
 04/README-fa.md        | 5 +++--
 04/README-fr.md        | 5 +++--
 04/README-id.md        | 5 +++--
 04/README-it.md        | 5 +++--
 04/README-jp.md        | 5 +++--
 04/README-kr.md        | 5 +++--
 04/README-pt.md        | 5 +++--
 04/README-ru.md        | 5 +++--
 04/README-vi.md        | 5 +++--
 04/README.md           | 5 +++--
 04/three_js/index.html | 5 +++--
 14 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/04/README-ch.md b/04/README-ch.md
index 30fa14f..5ca6419 100644
--- a/04/README-ch.md
+++ b/04/README-ch.md
@@ -34,7 +34,7 @@
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -47,6 +47,7 @@
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -85,7 +86,7 @@
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-de.md b/04/README-de.md
index 3c0335c..aa0ecfd 100644
--- a/04/README-de.md
+++ b/04/README-de.md
@@ -62,7 +62,7 @@ Hier folgt ein Beispiel für den HTML- und JS-Code, den Du für Deine ersten Exp
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -75,6 +75,7 @@ Hier folgt ein Beispiel für den HTML- und JS-Code, den Du für Deine ersten Exp
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -119,7 +120,7 @@ Hier folgt ein Beispiel für den HTML- und JS-Code, den Du für Deine ersten Exp
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-es.md b/04/README-es.md
index 15eb09d..f776f4f 100644
--- a/04/README-es.md
+++ b/04/README-es.md
@@ -32,7 +32,7 @@ Aqui abajo hay un ejemplo del HTML y JS necesario para poder empezar a utilizar
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -45,6 +45,7 @@ Aqui abajo hay un ejemplo del HTML y JS necesario para poder empezar a utilizar
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -89,7 +90,7 @@ Aqui abajo hay un ejemplo del HTML y JS necesario para poder empezar a utilizar
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-fa.md b/04/README-fa.md
index ecdf55e..ae3f2aa 100644
--- a/04/README-fa.md
+++ b/04/README-fa.md
@@ -63,7 +63,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -76,6 +76,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -120,7 +121,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-fr.md b/04/README-fr.md
index dc753e2..09b280b 100644
--- a/04/README-fr.md
+++ b/04/README-fr.md
@@ -81,7 +81,7 @@ Notez bien la balise de script appelée `id="fragmentShader"`, c'est là qu'il f
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -94,6 +94,7 @@ Notez bien la balise de script appelée `id="fragmentShader"`, c'est là qu'il f
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -138,7 +139,7 @@ Notez bien la balise de script appelée `id="fragmentShader"`, c'est là qu'il f
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-id.md b/04/README-id.md
index 1d0cf24..ca9a83c 100644
--- a/04/README-id.md
+++ b/04/README-id.md
@@ -63,7 +63,7 @@ Di bawah ini adalah contoh HTML dan JS yang Anda butuhkan untuk memulai shader d
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -76,6 +76,7 @@ Di bawah ini adalah contoh HTML dan JS yang Anda butuhkan untuk memulai shader d
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -120,7 +121,7 @@ Di bawah ini adalah contoh HTML dan JS yang Anda butuhkan untuk memulai shader d
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-it.md b/04/README-it.md
index 928a80d..ac0ede7 100644
--- a/04/README-it.md
+++ b/04/README-it.md
@@ -62,7 +62,7 @@ Di seguito è riportato un esempio di codice HTML e JS per iniziare con gli shad
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -75,6 +75,7 @@ Di seguito è riportato un esempio di codice HTML e JS per iniziare con gli shad
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -119,7 +120,7 @@ Di seguito è riportato un esempio di codice HTML e JS per iniziare con gli shad
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-jp.md b/04/README-jp.md
index cd406c4..9fa188c 100644
--- a/04/README-jp.md
+++ b/04/README-jp.md
@@ -64,7 +64,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -77,6 +77,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -121,7 +122,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-kr.md b/04/README-kr.md
index 5e2c453..aa38605 100644
--- a/04/README-kr.md
+++ b/04/README-kr.md
@@ -32,7 +32,7 @@ Ricardo Cabello (aka [MrDoob](https://twitter.com/mrdoob) ) 가 다른 참여자
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -45,6 +45,7 @@ Ricardo Cabello (aka [MrDoob](https://twitter.com/mrdoob) ) 가 다른 참여자
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -83,7 +84,7 @@ Ricardo Cabello (aka [MrDoob](https://twitter.com/mrdoob) ) 가 다른 참여자
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-pt.md b/04/README-pt.md
index 6114e32..cc7bf77 100644
--- a/04/README-pt.md
+++ b/04/README-pt.md
@@ -62,7 +62,7 @@ Abaixo, um exemplo do HTML e JS que você precisa para começar com shaders em t
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -75,6 +75,7 @@ Abaixo, um exemplo do HTML e JS que você precisa para começar com shaders em t
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -119,7 +120,7 @@ Abaixo, um exemplo do HTML e JS que você precisa para começar com shaders em t
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-ru.md b/04/README-ru.md
index 78f9fa4..f42381c 100644
--- a/04/README-ru.md
+++ b/04/README-ru.md
@@ -62,7 +62,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -75,6 +75,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -119,7 +120,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README-vi.md b/04/README-vi.md
index 57201e1..835711d 100644
--- a/04/README-vi.md
+++ b/04/README-vi.md
@@ -64,7 +64,7 @@ Dưới đây là một ví dụ về code HTML và JS mà bạn cần để b
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -77,6 +77,7 @@ Dưới đây là một ví dụ về code HTML và JS mà bạn cần để b
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -121,7 +122,7 @@ Dưới đây là một ví dụ về code HTML và JS mà bạn cần để b
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/README.md b/04/README.md
index bbe8591..3dde2f2 100644
--- a/04/README.md
+++ b/04/README.md
@@ -64,7 +64,7 @@ Below is an example of the HTML and JS you need to get started with shaders in t
     </script>
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
 
         init();
@@ -77,6 +77,7 @@ Below is an example of the HTML and JS you need to get started with shaders in t
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -121,7 +122,7 @@ Below is an example of the HTML and JS you need to get started with shaders in t
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>
diff --git a/04/three_js/index.html b/04/three_js/index.html
index 03ee6b6..c873bb1 100644
--- a/04/three_js/index.html
+++ b/04/three_js/index.html
@@ -22,7 +22,7 @@
 
     <script>
         var container;
-        var camera, scene, renderer;
+        var camera, scene, renderer, clock;
         var uniforms;
         var mouse = {x:0, y:0};
 
@@ -43,6 +43,7 @@
             camera.position.z = 1;
 
             scene = new THREE.Scene();
+            clock = new THREE.Clock();
 
             var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
@@ -84,7 +85,7 @@
         }
 
         function render() {
-            uniforms.u_time.value += 0.05;
+            uniforms.u_time.value += clock.getDelta();
             renderer.render( scene, camera );
         }
     </script>