zincjs 2.4.1-beta.3 → 2.4.1-beta.5

package/src/primitives/zincObject.js

@@ -115,7 +115,15 @@ ZincObject.prototype.getRegion = function() {
  *
  * @return {Object}
  */
- ZincObject.prototype.getMorph = function() {
+ /**
+ * Request the scene to draw the next frame, this is used when render on
+ * demand is enabled. See {@link Renderer#setRenderOnDemand}.
+ */
+ZincObject.prototype.requestRender = function() {
+  this.region?.getScene?.()?.invalidate?.();
+}
+
+ZincObject.prototype.getMorph = function() {
   const morph =  this._lod.getCurrentMorph();
   return morph ? morph : this.morph;
 }
@@ -159,6 +167,7 @@ ZincObject.prototype.checkTransparentMesh = function() {
  * time dependent.
  */
 ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour) {
+  this.requestRender();
   //Note: we assume all layers are consistent with time frame
   //Thus adding them to the same animation group should work.
   //This step is only required for the primary (level 0) mesh.
@@ -267,6 +276,7 @@ ZincObject.prototype.getCurrentTime = function() {
  * @param {Number} time - Can be any value between 0 to duration.
  */
 ZincObject.prototype.setMorphTime = function(time) {
+  this.requestRender();
   let timeChanged = false;
   if (this.clipAction) {
     const ratio = time / this.duration;
@@ -293,7 +303,8 @@ ZincObject.prototype.setMorphTime = function(time) {
     }
   }
   if (timeChanged) {
-    this.boundingBoxUpdateRequired = true;
+    if (this.hasMorphPositions())
+      this.boundingBoxUpdateRequired = true;
     this._lod.updateMorphColorAttribute(true);
     if (this.timeEnabled)
       this.markerUpdateRequired = true;
@@ -325,6 +336,7 @@ ZincObject.prototype.getVisibility = function() {
  * @param {Boolean} visible - a boolean flag indicate the visibility to be set
  */
 ZincObject.prototype.setVisibility = function(visible) {
+  this.requestRender();
   if (visible !== this.visible) {
     this.visible = visible;
     this.group.visible = visible;
@@ -340,6 +352,7 @@ ZincObject.prototype.setVisibility = function(visible) {
  * can be any value between from 0 to 1.0.
  */
 ZincObject.prototype.setAlpha = function(alpha) {
+  this.requestRender();
   const material = this._lod._material;
   let isTransparent = false;
   if (alpha  < 1.0)
@@ -357,6 +370,7 @@ ZincObject.prototype.setAlpha = function(alpha) {
  * @param {Boolean} flag - Set frustrum culling on/off based on this flag.
  */
 ZincObject.prototype.setFrustumCulled = function(flag) {
+  this.requestRender();
   //multilayers - set for all layers
   this._lod.setFrustumCulled(flag);
 }
@@ -368,6 +382,7 @@ ZincObject.prototype.setFrustumCulled = function(flag) {
  * @param {Boolean} vertexColors - Set display with vertex color on/off.
  */
 ZincObject.prototype.setVertexColors = function(vertexColors) {
+  this.requestRender();
   //multilayers - set for all
   this._lod.setVertexColors(vertexColors);
 
@@ -390,6 +405,7 @@ ZincObject.prototype.getColour = function() {
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setColour = function(colour) {
+  this.requestRender();
   this._lod.setColour(colour);
 }
 
@@ -399,6 +415,7 @@ ZincObject.prototype.setColour = function(colour) {
  * @param {THREE.Color} colour - Colour to be set for this geometry.
  */
 ZincObject.prototype.setGreyScale = function(flag) {
+  this.requestRender();
   if (flag) {
     if (!this.origColour) {
       if (this._lod._material) {
@@ -439,6 +456,7 @@ ZincObject.prototype.getColourHex = function() {
  * @param {String} hex - The colour value in hex form.
  */
 ZincObject.prototype.setColourHex = function(hex) {
+  this.requestRender();
   this._lod._material.color.setHex(hex);
   if (this._lod._secondaryMaterial) {
     this._lod._secondaryMaterial.color.setHex(hex);
@@ -451,6 +469,7 @@ ZincObject.prototype.setColourHex = function(hex) {
  * @param {String} colour - The colour value in rgb form.
  */
 ZincObject.prototype.setEmissiveRGB = function(colour) {
+  this.requestRender();
   if (this._lod._material && this._lod._material.emissive) {
     this._lod._material.emissive.setRGB(...colour);
   }
@@ -466,6 +485,7 @@ ZincObject.prototype.setEmissiveRGB = function(colour) {
  * @param {THREE.Material} material - Material to be set for this geometry.
  */
 ZincObject.prototype.setMaterial = function(material) {
+  this.requestRender();
   this._lod.setMaterial(material);
 }
 
@@ -486,10 +506,8 @@ ZincObject.prototype.getClosestVertexIndex = function() {
       let currentDistance = 0;
       for (let i = 0; i < position.count; i++) {
         this._v2.fromArray(position.array, i * 3);
-        currentDistance = this._v2.distanceTo(this._v1);
-        if (distance == -1)
-          distance = currentDistance;
-        else if (distance > (currentDistance)) {
+        currentDistance = this._v2.distanceToSquared(this._v1);
+        if ((distance == -1) || (distance > currentDistance)) {
           distance = currentDistance;
           closestIndex = i;
         }
@@ -565,6 +583,10 @@ ZincObject.prototype.getBoundingBox = function() {
 ZincObject.prototype.dispose = function() {
   //multilayyers
   this._lod.dispose();
+  if (this.marker) {
+    this.marker.dispose();
+    this.marker = undefined;
+  }
   this.animationGroup = undefined;
   this.mixer = undefined;
   this.morph = undefined;
@@ -588,6 +610,44 @@ ZincObject.prototype.markerIsRequired = function(options) {
   return false;
 }
 
+//geometry -> whether its morph targets move the vertices
+const morphPositionsCache = new WeakMap();
+
+/**
+ * Check if the vertices positions change over time, only then will
+ * the bounding box change during playback.
+ *
+ * @return {Boolean}
+ */
+ZincObject.prototype.hasMorphPositions = function() {
+  const geometry = this.getMorph()?.geometry;
+  const morphPositions = geometry?.morphAttributes?.position;
+  if (!morphPositions || morphPositions.length === 0)
+    return false;
+  const cached = morphPositionsCache.get(geometry);
+  if (cached && cached.morphPositions === morphPositions)
+    return cached.result;
+  //Colour only morphs use placeholder targets identical to the base
+  //positions, these never move the vertices.
+  const basePositions = geometry.getAttribute('position')?.array;
+  let result = false;
+  for (let i = 0; i < morphPositions.length && !result; i++) {
+    const array = morphPositions[i].array;
+    if (!basePositions || array.length !== basePositions.length) {
+      result = true;
+    } else if (array !== basePositions) {
+      for (let j = 0; j < array.length; j++) {
+        if (array[j] !== basePositions[j]) {
+          result = true;
+          break;
+        }
+      }
+    }
+  }
+  morphPositionsCache.set(geometry, { morphPositions, result });
+  return result;
+}
+
 /**
  * Update the marker's position and size based on current viewport.
  */
@@ -606,6 +666,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
         if (position) {
           this.marker.setPosition(position.x, position.y, position.z);
           this.markerUpdateRequired = false;
+          ndcToBeUpdated = true;
         }
       }
       if (!this.marker.isEnabled()) {
@@ -623,8 +684,9 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
       } else {
         this.marker.setDefaultSprite();
       }
-      if (options && options.camera && (ndcToBeUpdated ||
-        options.markerCluster.markerUpdateRequired)) {
+      //Only update the screen position when the camera or the
+      //marker has moved, or the marker has just been enabled.
+      if (options && options.camera && ndcToBeUpdated) {
         this.marker.updateNDC(options.camera.cameraObject);
         options.markerCluster.markerUpdateRequired = true;
       }
@@ -633,7 +695,7 @@ ZincObject.prototype.updateMarker = function(playAnimation, options) {
     if (this.marker && this.marker.isEnabled()) {
       this.marker.disable();
       this.group.remove(this.marker.morph);
-      if (options.markersList &&
+      if (options?.markersList &&
         (this.marker.uuid in options.markersList)) {
         options.markerCluster.markerUpdateRequired = true;
         delete options.markersList[this.marker.uuid];
@@ -657,6 +719,7 @@ ZincObject.prototype.initiateMorphColor = function() {
 }
 
 ZincObject.prototype.setRenderOrder = function(renderOrder) {
+  this.requestRender();
   //multiilayers
   this._lod.setRenderOrder(renderOrder);
 }
@@ -695,6 +758,7 @@ ZincObject.prototype.getClosestVertexDOMElementCoords = function(scene) {
  * @return {Boolean}
  */
  ZincObject.prototype.setMarkerMode = function(mode, options) {
+  this.requestRender();
   if (mode !== this.markerMode) {
     if (mode === "on" || mode === "off") {
       this.markerMode = mode;
@@ -729,7 +793,9 @@ ZincObject.prototype.render = function(delta, playAnimation,
     }
     //multilayers
     if (this.visible && delta != 0) {
-      this.boundingBoxUpdateRequired = true;
+      //Only vertices morphing can change the bounding box
+      if (this.hasMorphPositions())
+        this.boundingBoxUpdateRequired = true;
       if (this.morphColour == 1) {
         this._lod.updateMorphColorAttribute(true);
       }
@@ -749,6 +815,7 @@ ZincObject.prototype.addLOD = function(loader, level, url, index, preload) {
  * Add lod from an url into the lod object.
  */
 ZincObject.prototype.addVertices = function(coords) {
+  this.requestRender();
   let mesh = this.getMorph();
   let geometry = undefined;
   if (!mesh) {
@@ -776,6 +843,7 @@ ZincObject.prototype.addVertices = function(coords) {
  * Add lod from an url into the lod object.
  */
 ZincObject.prototype.deleteVertices = function(index) {
+  this.requestRender();
   let mesh = this.getMorph();
   if (mesh?.geometry && this.drawRange >= index) {
     if (removeVertexAtIndex(mesh.geometry, index, true)) {
@@ -794,6 +862,7 @@ ZincObject.prototype.deleteVertices = function(index) {
  * Set the objects position.
  */
 ZincObject.prototype.setPosition = function(x, y, z) {
+  this.requestRender();
   const group = this.getGroup();
   if (group) {
     group.position.set(x, y, z);
@@ -813,6 +882,7 @@ ZincObject.prototype.loadAdditionalSources = function(primitivesLoader, sources)
  * Set the objects scale.
  */
 ZincObject.prototype.setScaleAll = function(scale) {
+  this.requestRender();
   const group = this.getGroup();
   if (group) {
     group.scale.set(scale, scale, scale);

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,14 +483,20 @@ let Region = function (parentIn, sceneIn) {
    * if this is set to true.
    */
   this.clear = transverse => {
+    requestRender();
     if (transverse) {
-      children.forEach(childRegion => childRegion.clear(transverse));
+      children.forEach(childRegion => {
+        childRegion.clear(transverse);
+        group.remove(childRegion.getGroup());
+      });
     }
     zincObjects.forEach(zincObject => {
       group.remove(zincObject.getGroup());
       zincObject.dispose();
     });
-    children = [];
+    if (transverse) {
+      children = [];
+    }
     zincObjects = [];
   }
 
@@ -664,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;
   }
@@ -725,7 +771,7 @@ let Region = function (parentIn, sceneIn) {
     });
     if (transverse) {
       children.forEach(childRegion => {
-        childRegion.setMorphTime(time);
+        childRegion.setMorphTime(time, transverse);
       });
     }
   }
@@ -752,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 };