Add support for time and frame in web viewer

Author: hybridherbst

javascript/MaterialXView/source/index.js

@@ -170,17 +170,19 @@ function onWindowResize()
 function animate()
 {
     requestAnimationFrame(animate);
+    const scene = viewer.getScene();
 
     if (turntableEnabled)
     {
         turntableStep = (turntableStep + 1) % 360;
         var turntableAngle = turntableStep * (360.0 / turntableSteps) / 180.0 * Math.PI;
-        viewer.getScene()._scene.rotation.y = turntableAngle;
-        viewer.getScene().setUpdateTransforms();
+        scene._scene.rotation.y = turntableAngle;
+        scene.setUpdateTransforms();
     }
 
-    renderer.render(viewer.getScene().getScene(), viewer.getScene().getCamera());
-    viewer.getScene().updateTransforms();
+    scene.updateUniforms();
+    renderer.render(scene.getScene(), scene.getCamera());
+    scene.updateTransforms();
 
     if (captureRequested)
     {

javascript/MaterialXView/source/viewer.js

@@ -43,7 +43,8 @@ export class Scene
         const cameraFarDist = 100.0;
         const cameraFOV = 60.0;
         this._camera = new THREE.PerspectiveCamera(cameraFOV, aspectRatio, cameraNearDist, cameraFarDist);
-
+        this._frame = 0;
+        
         this.#_gltfLoader = new GLTFLoader();
 
         this.#_normalMat = new THREE.Matrix3();
@@ -265,6 +266,37 @@ export class Scene
         });
     }
 
+    /**
+     * Update uniforms for all scene objects. This is called once per frame
+     * and updates time and frame count uniforms.
+     */
+    updateUniforms() {
+        this._frame++;
+
+        const scene = this.getScene();
+        const time = performance.now() / 1000.0;
+        const frame = this._frame;
+
+        scene.traverse((child) =>
+        {
+            if (child.isMesh && child.material && child.material.uniforms)
+            {
+                const uniforms = child.material.uniforms;
+                if (uniforms)
+                {
+                    if (uniforms.u_time)
+                    {
+                        uniforms.u_time.value = time;
+                    }
+                    if (uniforms.u_frame)
+                    {
+                        uniforms.u_frame.value = frame;
+                    }
+                }
+            }
+        });
+    }
+
     // Determine string DAG path based on individual node names.
     getDagPath(node)
     {