zincjs 2.4.1-beta.4 → 2.4.1-beta.6

package/src/region.js

@@ -2,6 +2,7 @@ import * as THREE from 'three/webgpu';
 import { Pointset } from './primitives/pointset';
 import { Lines2 } from './primitives/lines2';
 import { Geometry } from './primitives/geometry';
+import { updateWorldMatrixFromAncestors } from './utilities';
 
 let uniqueiId = 0;
 
@@ -33,6 +34,10 @@ let Region = function (parentIn, sceneIn) {
   this.isRegion = true;
   this.uuid = getUniqueId();
 
+  //Ask the scene to draw the next frame, used by render on demand.
+  const requestRender = () => {
+    scene?.invalidate?.();
+  }
 
   /**
    * Hide all primitives belong to this region.
@@ -57,6 +62,7 @@ let Region = function (parentIn, sceneIn) {
    * @param {Boolean} flag - A flag indicating either the visibilty to be on/off.
    */
   this.setVisibility = (flag) => {
+    requestRender();
     if (flag != group.visible) {
       group.visible = flag;
       this.pickableUpdateRequired = true;
@@ -90,9 +96,17 @@ let Region = function (parentIn, sceneIn) {
    * used for the transformation.
    */
   this.setTransformation = transformation => {
+    requestRender();
     tMatrix.set(...transformation);
     group.matrix.copy(tMatrix);
-    group.updateMatrixWorld();
+    //The group does not update its matrix automatically, compute its world
+    //matrix from the ancestors and update the descendants.
+    updateWorldMatrixFromAncestors(group);
+    group.updateMatrixWorld(true);
+    //Bounding boxes of everything in this region have moved
+    this.getAllObjects(true).forEach((zincObject) => {
+      zincObject.boundingBoxUpdateRequired = true;
+    });
   }
 
   /**
@@ -178,6 +192,7 @@ let Region = function (parentIn, sceneIn) {
    * @return {Region}
    */
   this.createChild = (nameIn) => {
+    requestRender();
     let childRegion = new Region(this, scene);
     childRegion.setName(nameIn);
     children.push(childRegion);
@@ -306,6 +321,7 @@ let Region = function (parentIn, sceneIn) {
    * this region.
    */
   this.addZincObject = zincObject => {
+    requestRender();
     if (zincObject) {
       zincObject.setRegion(this);
       group.add(zincObject.getGroup());
@@ -325,6 +341,7 @@ let Region = function (parentIn, sceneIn) {
    * @param {ZincObject} zincObject - object to be removed from this region.
    */
   this.removeZincObject = zincObject => {
+    requestRender();
     for (let i = 0; i < zincObjects.length; i++) {
       if (zincObject === zincObjects[i]) {
         group.remove(zincObject.getGroup());
@@ -359,11 +376,28 @@ let Region = function (parentIn, sceneIn) {
     return false;
   }
 
+  /**
+   * Clear the pickable update flag for this region and its descendants,
+   * used when a region is hidden and none of its objects are pickable.
+   *
+   * @private
+   */
+  this.clearPickableUpdateRequired = (transverse) => {
+    this.pickableUpdateRequired = false;
+    if (transverse) {
+      children.forEach(childRegion => {
+        childRegion.clearPickableUpdateRequired(transverse);
+      });
+    }
+  }
+
   /**
    * Get all pickable objects.
    */
   this.getPickableThreeJSObjects = (objectsList,  transverse) => {
-    if (group.visible) {
+    if (!group.visible) {
+      this.clearPickableUpdateRequired(transverse);
+    } else {
       zincObjects.forEach(zincObject => {
         if (zincObject.isPickable && zincObject.getGroup() && zincObject.getGroup().visible) {
           let marker = zincObject.marker;
@@ -411,30 +445,35 @@ let Region = function (parentIn, sceneIn) {
    * @returns {THREE.Box3}
    */
   this.getBoundingBox = transverse => {
-    let boundingBox1 = undefined, boundingBox2 = undefined;
-    zincObjects.forEach(zincObject => {
-      boundingBox2 = zincObject.getBoundingBox();
-      if (boundingBox2) {
-        if (boundingBox1 == undefined) {
-          boundingBox1 = boundingBox2.clone();
-        } else {
-          boundingBox1.union(boundingBox2);
-        }
+    const boundingBox = new THREE.Box3();
+    if (this.accumulateBoundingBox(boundingBox, transverse)) {
+      return boundingBox;
+    }
+    return undefined;
+  }
+
+  /**
+   * Expand the target by the bounding box of this region.
+   *
+   * @return {Boolean} - true if any bounding box has been found.
+   * @private
+   */
+  this.accumulateBoundingBox = (target, transverse) => {
+    let found = false;
+    for (let i = 0; i < zincObjects.length; i++) {
+      const boundingBox = zincObjects[i].getBoundingBox();
+      if (boundingBox) {
+        target.union(boundingBox);
+        found = true;
       }
-    });
+    }
     if (transverse) {
-      children.forEach(childRegion => {
-        boundingBox2 = childRegion.getBoundingBox(transverse);
-        if (boundingBox2) {
-          if (boundingBox1 == undefined) {
-            boundingBox1 = boundingBox2.clone();
-          } else {
-            boundingBox1.union(boundingBox2);
-          }
-        }
-      });
+      for (let i = 0; i < children.length; i++) {
+        if (children[i].accumulateBoundingBox(target, transverse))
+          found = true;
+      }
     }
-    return boundingBox1;
+    return found;
   }
 
   /**
@@ -444,6 +483,7 @@ let Region = function (parentIn, sceneIn) {
    * if this is set to true.
    */
   this.clear = transverse => {
+    requestRender();
     if (transverse) {
       children.forEach(childRegion => {
         childRegion.clear(transverse);
@@ -669,13 +709,14 @@ let Region = function (parentIn, sceneIn) {
    * set to true.
    * @returns {Array}
    */
-  this.getAllObjects = transverse => {
-    const objectsArray = [...zincObjects];
+  this.getAllObjects = (transverse, objectsArray = []) => {
+    for (let i = 0; i < zincObjects.length; i++) {
+      objectsArray.push(zincObjects[i]);
+    }
     if (transverse) {
-      children.forEach(childRegion => {
-        let childObjects = childRegion.getAllObjects(transverse);
-        objectsArray.push(...childObjects);
-      });
+      for (let i = 0; i < children.length; i++) {
+        children[i].getAllObjects(transverse, objectsArray);
+      }
     }
     return objectsArray;
   }
@@ -730,7 +771,7 @@ let Region = function (parentIn, sceneIn) {
     });
     if (transverse) {
       children.forEach(childRegion => {
-        childRegion.setMorphTime(time);
+        childRegion.setMorphTime(time, transverse);
       });
     }
   }
@@ -757,14 +798,23 @@ let Region = function (parentIn, sceneIn) {
 
   /**
    * Update geometries and glyphsets based on the calculated time.
+   * Render the objects in this region and optionally its descendants,
+   * the tree is walked in place to avoid allocations on every frame.
    * @private
    */
+  this.renderObjects = (delta, playAnimation, cameraControls, options, transverse) => {
+    for (let i = 0; i < zincObjects.length; i++) {
+      zincObjects[i].render(delta, playAnimation, cameraControls, options);
+    }
+    if (transverse) {
+      for (let i = 0; i < children.length; i++) {
+        children[i].renderObjects(delta, playAnimation, cameraControls, options, transverse);
+      }
+    }
+  }
+
   this.renderGeometries = (playRate, delta, playAnimation, cameraControls, options, transverse) => {
-    // Let video dictates the progress if one is present
-    const allObjects = this.getAllObjects(transverse);
-    allObjects.forEach(zincObject => {
-      zincObject.render(playRate * delta, playAnimation, cameraControls, options);
-    });
+    this.renderObjects(playRate * delta, playAnimation, cameraControls, options, transverse);
     //process markers visibility and size, as long as there are more than
     //one entry in markersList is greater than 1, markers have been enabled.
     if (options && (playAnimation === false) &&

package/src/renderRequests.js

@@ -0,0 +1,20 @@
+/*
+ * Frame requests from resources that do not belong to a scene, e.g. shared
+ * textures loaded asynchronously. Renderers in render on demand mode
+ * subscribe to these so the result is drawn once it arrives.
+ */
+const listeners = new Set();
+
+const onRenderRequest = (callback) => {
+  listeners.add(callback);
+}
+
+const offRenderRequest = (callback) => {
+  listeners.delete(callback);
+}
+
+const requestRenderAll = () => {
+  listeners.forEach((callback) => callback());
+}
+
+export { onRenderRequest, offRenderRequest, requestRenderAll };

package/src/renderer.js

@@ -1,6 +1,8 @@
 import * as THREE from 'three/webgpu';
 import { ResizeSensor } from 'css-element-queries';
 import { Scene } from './scene';
+import { onRenderRequest, offRenderRequest } from './renderRequests';
+import { setTextPixelsPerUnit } from './textSprite';
 /**
  * Create a Zinc 3D renderer in the container provided.
  * The primary function of a Zinc 3D renderer is to display the current
@@ -48,6 +50,15 @@ const Renderer = function (containerIn) {
 	const _this = this;
 	const currentSize = [0, 0];
 	const currentOffset = [0, 0];
+	//Render on demand is opt-in, when enabled the scene is only drawn when
+	//something has changed.
+	let renderOnDemand = false;
+	let needsRender = true;
+	const requestRender = () => {
+		needsRender = true;
+	}
+	//Camera of the current scene shared with additional active scenes
+	const sharedCamera = { controls: undefined, updated: false };
 
 	this.getDrawingWidth = () => {
 		if (container) {
@@ -75,6 +86,7 @@ const Renderer = function (containerIn) {
 	 * Call this to resize the renderer, this is normally call automatically.
 	 */
 	this.onWindowResize = () => {
+		needsRender = true;
 		currentScene.onWindowResize();
 		//Give it a miniumum size of 1 x 1
 		const width = this.getDrawingWidth() || 1;
@@ -103,6 +115,12 @@ const Renderer = function (containerIn) {
 			renderer.getSize(target);
 			currentSize[0] = target.x;
 			currentSize[1] = target.y;
+			//Text sprites are drawn at the resolution they occupy on screen
+			const fov = currentScene?.camera?.fov;
+			if (fov) {
+				setTextPixelsPerUnit(currentSize[1] * renderer.getPixelRatio() /
+					(2 * Math.tan(fov * Math.PI / 360)));
+			}
 		}
 	}
 
@@ -134,10 +152,10 @@ const Renderer = function (containerIn) {
       //WebGPURenderer otherwise requests a device with the default
       //maxTextureArrayLayers (256 on many adapters), which is too low for
       //some currnetly sypported scaffold, and the default
-      //maxStorageBuffersPerShaderStage (8 on many adapters), which is too
-      //low for compute passes like glyphset.js's GPU glyph-transform (11
-      //storage buffers). We will request the highest possible on the device
-      //for both.
+      //maxStorageBuffersPerShaderStage (8 on many adapters). The glyph
+      //transform compute pass only needs two storage buffers, the higher
+      //limit is kept as headroom. We will request the highest possible on
+      //the device for both.
       if (parameters.device === undefined && parameters.requiredLimits === undefined &&
         typeof navigator !== 'undefined' && navigator.gpu) {
         try {
@@ -172,6 +190,7 @@ const Renderer = function (containerIn) {
 			renderer.autoClear = false;
 			const scene = this.createScene("default");
 			this.setCurrentScene(scene);
+			onRenderRequest(requestRender);
 			isInitialised = true;
 		}
 	}
@@ -218,6 +237,7 @@ const Renderer = function (containerIn) {
 			}
 			currentScene.setInteractiveControlEnable(true);
 			currentScene.setAdditionalScenesGroup(scenesGroup);
+			needsRender = true;
 			this.onWindowResize();
 		}
 	}
@@ -377,6 +397,7 @@ const Renderer = function (containerIn) {
     if (!isRendering) {
       clock.reset();
       isRendering = true;
+      needsRender = true;
       runAnimation();
     }
 	}
@@ -486,6 +507,41 @@ const Renderer = function (containerIn) {
 	 */
 	this.setPlayRate = playRateIn => {
 		playRate = playRateIn;
+		needsRender = true;
+	}
+
+	/**
+	 * Enable or disable render on demand, it is disabled by default.
+	 * When enabled, the scenes are only drawn when something has changed,
+	 * e.g. camera movement, animation, loading and changes made through
+	 * the Zinc APIs. Call {@link Renderer#invalidate} after modifying
+	 * THREE.js objects directly or after changing the THREE.js renderer,
+	 * e.g. setClearColor.
+	 * Pre-render callbacks are called on every frame, post-render callbacks
+	 * are only called when the scenes are drawn.
+	 *
+	 * @param {Boolean} flag - Enable or disable render on demand.
+	 */
+	this.setRenderOnDemand = flag => {
+		renderOnDemand = flag ? true : false;
+		needsRender = true;
+	}
+
+	/**
+	 * Check if render on demand is enabled.
+	 *
+	 * @return {Boolean}
+	 */
+	this.isRenderOnDemand = () => {
+		return renderOnDemand;
+	}
+
+	/**
+	 * Request the scenes to be drawn on the next frame, this is only
+	 * required when render on demand is enabled.
+	 */
+	this.invalidate = () => {
+		needsRender = true;
 	}
 
 	this.getCurrentTime = () => {
@@ -534,6 +590,7 @@ const Renderer = function (containerIn) {
 			cameraOrtho.position.z = 10;
 		}
 		sceneOrtho.add(object)
+		needsRender = true;
 	}
 
 	const createHUDSprites = logoSprite => {
@@ -575,22 +632,33 @@ const Renderer = function (containerIn) {
 		}
     clock.update();
 		const delta = clock.getDelta();
-		currentScene.renderGeometries(playRate, delta, this.playAnimation);
+		let changed = currentScene.renderGeometries(playRate, delta, this.playAnimation);
+		if (additionalActiveScenes.length > 0) {
+			//Additional scenes are displayed with the current scene's camera
+			sharedCamera.controls = currentScene.getZincCameraControls();
+			sharedCamera.updated = currentScene.isCameraUpdated();
+		}
 	    for(let i = 0; i < additionalActiveScenes.length; i++) {
 	        const sceneItem = additionalActiveScenes[i];
-	        sceneItem.renderGeometries(playRate, delta, this.playAnimation);
+	        if (sceneItem.renderGeometries(playRate, delta, this.playAnimation, sharedCamera))
+	          changed = true;
 	    }
-		if (cameraOrtho != undefined && sceneOrtho != undefined) {
-			renderer.clearDepth();
-			renderer.render( sceneOrtho, cameraOrtho );
-		}
-    for (let key of Object.keys(preRenderCallbackFunctions)) {
+    for (let key in preRenderCallbackFunctions) {
       if (preRenderCallbackFunctions.hasOwnProperty(key)) {
         preRenderCallbackFunctions[key].call();
       }
     }
+		//Pre-render callbacks may have requested a frame
+		if (renderOnDemand && !changed && !needsRender) {
+			return;
+		}
+		needsRender = false;
     currentScene.render(renderer);
-    for (let key of Object.keys(postRenderCallbackFunctions)) {
+		if (cameraOrtho != undefined && sceneOrtho != undefined) {
+			renderer.clearDepth();
+			renderer.render( sceneOrtho, cameraOrtho );
+		}
+    for (let key in postRenderCallbackFunctions) {
       if (postRenderCallbackFunctions.hasOwnProperty(key)) {
         postRenderCallbackFunctions[key].call();
       }
@@ -639,6 +707,7 @@ const Renderer = function (containerIn) {
 		if (!this.isSceneActive(additionalScene)) {
 			additionalActiveScenes.push(additionalScene);
 			scenesGroup.add(additionalScene.getThreeJSScene());
+			needsRender = true;
 		}
 	}
 
@@ -653,6 +722,7 @@ const Renderer = function (containerIn) {
 			if (sceneItem === additionalScene) {
 				additionalActiveScenes.splice(i, 1);
 				scenesGroup.remove(additionalScene.getThreeJSScene());
+				needsRender = true;
 				return;
 			}
 		}
@@ -666,6 +736,7 @@ const Renderer = function (containerIn) {
 			scenesGroup.remove(additionalActiveScenes[i].getThreeJSScene());
 		}
 		additionalActiveScenes.splice(0,additionalActiveScenes.length);
+		needsRender = true;
 	}
 
   /**
@@ -686,7 +757,7 @@ const Renderer = function (containerIn) {
     preRenderCallbackFunctions = {};
     preRenderCallbackFunctions_id = 0;
     postRenderCallbackFunctions = {};
-    postRenderCallbackFunctions = 0;
+    postRenderCallbackFunctions_id = 0;
     contextLostCallbackFunctions = {};
     contextLostCallbackFunctions_id = 0;
     contextRestoredCallbackFunctions = {};
@@ -697,6 +768,7 @@ const Renderer = function (containerIn) {
     const scene = this.createScene("default");
     this.setCurrentScene(scene);
     sensor = undefined;
+    offRenderRequest(requestRender);
     renderer?.dispose();
   }