zincjs 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",

package/src/renderer.js

@@ -38,7 +38,6 @@ const Renderer = function (containerIn) {
   let contextLostCallbackFunctions_id = 0;
   let contextRestoredCallbackFunctions = {};
   let contextRestoredCallbackFunctions_id = 0;
-  let animated_id = undefined;
   let cameraOrtho = undefined,
     sceneOrtho = undefined,
     logoSprite = undefined;
@@ -179,6 +178,8 @@ const Renderer = function (containerIn) {
       }
       renderer = new THREE.WebGPURenderer(parameters);
       await renderer.init();
+      //animate() may have been called before the renderer was ready
+      if (isRendering) renderer.setAnimationLoop(this.render);
       //GPU glyph animation requires the WebGPU backend, the WebGL fallback
       //cannot index storage buffers freely.
       setGlyphComputeSupported(renderer.backend?.isWebGPUBackend === true);
@@ -378,22 +379,13 @@ const Renderer = function (containerIn) {
     currentScene.updateDirectionalLight();
   };
 
-  let runAnimation = () => {
-    if (isRendering) {
-      animated_id = requestAnimationFrame(runAnimation);
-      this.render();
-    } else {
-      cancelAnimationFrame(animated_id);
-      animated_id = undefined;
-    }
-  };
-
   /**
    * Stop the animation and renderer to get into the render loop.
    */
   this.stopAnimate = () => {
     if (isRendering) {
       isRendering = false;
+      renderer?.setAnimationLoop(null);
     }
   };
 
@@ -405,7 +397,10 @@ const Renderer = function (containerIn) {
       clock.reset();
       isRendering = true;
       needsRender = true;
-      runAnimation();
+      //WebGPURenderer always runs its own requestAnimationFrame loop which
+      //updates the node frame and the per frame info, render from that loop
+      //instead of running a second one.
+      renderer?.setAnimationLoop(this.render);
     }
   };
 
@@ -646,7 +641,16 @@ const Renderer = function (containerIn) {
     }
     clock.update();
     const delta = clock.getDelta();
-    let changed = currentScene.renderGeometries(playRate, delta, this.playAnimation);
+    //Objects are only updated on every frame when render on demand is off
+    //or the renderer itself has requested a frame, e.g. on resize
+    const forceUpdate = !renderOnDemand || needsRender;
+    let changed = currentScene.renderGeometries(
+      playRate,
+      delta,
+      this.playAnimation,
+      undefined,
+      forceUpdate,
+    );
     if (additionalActiveScenes.length > 0) {
       //Additional scenes are displayed with the current scene's camera
       sharedCamera.controls = currentScene.getZincCameraControls();
@@ -654,7 +658,9 @@ const Renderer = function (containerIn) {
     }
     for (let i = 0; i < additionalActiveScenes.length; i++) {
       const sceneItem = additionalActiveScenes[i];
-      if (sceneItem.renderGeometries(playRate, delta, this.playAnimation, sharedCamera))
+      if (
+        sceneItem.renderGeometries(playRate, delta, this.playAnimation, sharedCamera, forceUpdate)
+      )
         changed = true;
     }
     for (let key in preRenderCallbackFunctions) {
@@ -756,7 +762,6 @@ const Renderer = function (containerIn) {
    * Dispose all memory allocated, this will effetively destroy all scenes.
    */
   this.dispose = () => {
-    if (isRendering) cancelAnimationFrame(animated_id);
     for (const key in sceneMap) {
       if (sceneMap.hasOwnProperty(key)) {
         sceneMap[key].clearAll();

package/src/scene.js

@@ -624,11 +624,25 @@ const Scene = function (containerIn, rendererIn) {
    * Update geometries and glyphsets based on the calculated time.
    * @private
    */
-  this.renderGeometries = (playRate, delta, playAnimation, sharedCamera) => {
+  this.renderGeometries = (playRate, delta, playAnimation, sharedCamera, forceUpdate) => {
     //Anything requested since the last frame
     let changed = needsRender;
     needsRender = false;
     cameraUpdated = false;
+    //These are plain properties, check if they have changed before
+    //the objects are updated so markers are toggled on this frame
+    if (
+      lastDisplayState.displayMarkers !== this.displayMarkers ||
+      lastDisplayState.displayMinimap !== this.displayMinimap ||
+      lastDisplayState.displayMiniAxes !== this.displayMiniAxes ||
+      lastDisplayState.playAnimation !== playAnimation
+    ) {
+      lastDisplayState.displayMarkers = this.displayMarkers;
+      lastDisplayState.displayMinimap = this.displayMinimap;
+      lastDisplayState.displayMiniAxes = this.displayMiniAxes;
+      lastDisplayState.playAnimation = playAnimation;
+      changed = true;
+    }
     //Additional active scenes are displayed with the current scene's camera
     const cameraControls = sharedCamera ? sharedCamera.controls : zincCameraControls;
     //Reused on every frame to avoid allocations
@@ -680,25 +694,23 @@ const Scene = function (containerIn, rendererIn) {
             zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
           }
         }
-        rootRegion.renderGeometries(playRate, delta, playAnimation, cameraControls, options, true);
+        //Walking every object is costly for large scenes, only do it when
+        //something may have changed, LOD and markers depend on the camera
+        if (
+          forceUpdate ||
+          changed ||
+          options.ndcToBeUpdated ||
+          playAnimation ||
+          //Clusters are recalculated during the walk
+          (markerCluster.isEnabled() && markerCluster.markerUpdateRequired)
+        ) {
+          rootRegion.renderGeometries(playRate, delta, playAnimation, cameraControls, options, true);
+        }
       } else if (!sharedCamera && zincCameraControls.update(0)) {
         changed = true;
         cameraUpdated = true;
       }
     }
-    //These are plain properties, check if they have changed
-    if (
-      lastDisplayState.displayMarkers !== this.displayMarkers ||
-      lastDisplayState.displayMinimap !== this.displayMinimap ||
-      lastDisplayState.displayMiniAxes !== this.displayMiniAxes ||
-      lastDisplayState.playAnimation !== playAnimation
-    ) {
-      lastDisplayState.displayMarkers = this.displayMarkers;
-      lastDisplayState.displayMinimap = this.displayMinimap;
-      lastDisplayState.displayMiniAxes = this.displayMiniAxes;
-      lastDisplayState.playAnimation = playAnimation;
-      changed = true;
-    }
     //The flag is only cleared when the minimap is drawn
     if (this.minimapScissor.updateRequired && (this.displayMinimap || this.displayMiniAxes)) {
       changed = true;