add fps limit of 30

www/js/webgl-demo.js

@@ -70,21 +70,29 @@ function renderShader(gl, vsSource, fsSource) {
   // Draw the scene
   // drawScene(gl, programInfo, buffers, 0);
 
+  const fpsLimit = 30;
+  const fpsDelta = 1000 / 30;
   // let timePrev = 0;
   // requestAnimationFrame asks the browser to call render,
   // providing the time in milliseconds since the page loaded
   function render(time) {
     time *= 0.001; // convert to seconds
-    // deltaTime = time - prevTime;
-    // prevTime = time;
+    // delta = time - timePrev;
 
     drawScene(gl, programInfo, buffers, time);
+
+    setTimeout(() => requestAnimationFrame(render), fpsDelta);
+  }
+  function update() {
     requestAnimationFrame(render);
   }
-  requestAnimationFrame(render);
 
   // XXX: TODO: read this guide it's great! https://stackoverflow.com/questions/56998225/why-is-rendering-blurred-in-webgl
   // window.addEventListener('resize', render);
+
+  requestAnimationFrame(render);
+  // update();
+  // setInterval(update, 1000 / fpsLimit);
 }
 
 function fetchShader(name) {