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

package/src/scene.js

@@ -47,6 +47,21 @@ const Scene = function (containerIn, rendererIn) {
   const container = containerIn;
   let cameraHelper = undefined;
   let videoHandler = undefined;
+  //Set when something has changed and the scene needs to be drawn,
+  //used for render on demand.
+  let needsRender = true;
+  //Set when the camera has been updated on the current frame
+  let cameraUpdated = false;
+  //Options passed to the objects on every frame
+  const renderOptions = {};
+  //Values of the display properties on the last frame, changing them
+  //requires the scene to be drawn.
+  const lastDisplayState = {
+    displayMarkers: undefined,
+    displayMinimap: undefined,
+    displayMiniAxes: undefined,
+    playAnimation: undefined,
+  };
   let sceneLoader = new SceneLoader(this);
   let minimap = undefined;
   let zincObjectAddedCallbacks = {};
@@ -130,6 +145,7 @@ const Scene = function (containerIn, rendererIn) {
 
   //called from Renderer when panel has been resized
   this.onWindowResize = () => {
+    needsRender = true;
     const wHeight = getDrawingHeight();
     this.camera.aspect = getDrawingWidth() / wHeight;
     this.camera.updateProjectionMatrix();
@@ -142,6 +158,7 @@ const Scene = function (containerIn, rendererIn) {
    * Reset the viewport of this scene to its original state.
    */
   this.resetView = () => {
+    needsRender = true;
     this.onWindowResize();
     zincCameraControls.resetView();
   }
@@ -150,6 +167,7 @@ const Scene = function (containerIn, rendererIn) {
    * Set the zoom level by unit scroll rate
    */
   this.changeZoomByScrollRateUnit = unit => {
+    needsRender = true;
     zincCameraControls.changeZoomByScrollRateUnit(unit);
   }
 
@@ -178,6 +196,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Zinc.Viewport} viewData - Viewport data to be loaded.
    */
   this.loadView = settings => {
+    needsRender = true;
     const viewPort = new Viewport();
     viewPort.setFromObject(settings);
     zincCameraControls.setCurrentCameraSettings(viewPort);
@@ -214,6 +233,7 @@ const Scene = function (containerIn, rendererIn) {
    * which we the viewport should be displaying.
    */
   this.viewAllWithBoundingBox = boundingBox => {
+    needsRender = true;
     if (boundingBox) {
       const viewport = zincCameraControls.getViewportFromBoundingBox(boundingBox, 1.0);
       zincCameraControls.setCurrentCameraSettings(viewport);
@@ -226,6 +246,7 @@ const Scene = function (containerIn, rendererIn) {
    * Adjust zoom distance to include all primitives in scene only.
    */
   this.viewAll = () => {
+    needsRender = true;
     const boundingBox = this.getBoundingBox();
     this.viewAllWithBoundingBox(boundingBox);
     markerCluster.markerUpdateRequired = true;
@@ -400,6 +421,7 @@ const Scene = function (containerIn, rendererIn) {
    * @returns {THREE.Vector3}
    */
   this.addZincObject = zincObject => {
+    needsRender = true;
     if (zincObject) {
       rootRegion.addZincObject(zincObject);
       if (zincCameraControls)
@@ -530,6 +552,7 @@ const Scene = function (containerIn, rendererIn) {
 
   //Update the directional light for this scene.
   this.updateDirectionalLight = () => {
+    needsRender = true;
     zincCameraControls.updateDirectionalLight();
   }
 
@@ -538,6 +561,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {THREE.Object} object - to be addded into this scene.
    */
   this.addObject = object => {
+    needsRender = true;
     scene.add(object);
   }
 
@@ -546,6 +570,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {THREE.Object} object - to be removed from this scene.
    */
   this.removeObject = object => {
+    needsRender = true;
     scene.remove(object);
   }
 
@@ -569,6 +594,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} time  - Value to set the time to.
    */
   this.setMorphsTime = (time) => {
+    needsRender = true;
     if (videoHandler != undefined) {
       videoHandler.setMorphTime(time, duration);
     }
@@ -591,16 +617,22 @@ const Scene = function (containerIn, rendererIn) {
    * Update geometries and glyphsets based on the calculated time.
    * @private
    */
-  this.renderGeometries = (playRate, delta, playAnimation) => {
-    // Let video dictates the progress if one is present
-    let options = {};
-    options.camera = zincCameraControls;
+  this.renderGeometries = (playRate, delta, playAnimation, sharedCamera) => {
+    //Anything requested since the last frame
+    let changed = needsRender;
+    needsRender = false;
+    cameraUpdated = false;
+    //Additional active scenes are displayed with the current scene's camera
+    const cameraControls = sharedCamera ? sharedCamera.controls : zincCameraControls;
+    //Reused on every frame to avoid allocations
+    const options = renderOptions;
+    options.camera = cameraControls;
     //Global markers flag, marker can be set at individual zinc object level
     //overriding this flag.
     options.displayMarkers =  this.displayMarkers;
     options.markerCluster = markerCluster;
     options.markersList = markerCluster.markers;
-    options.ndcToBeUpdated = false;
+    options.ndcToBeUpdated = sharedCamera ? sharedCamera.updated : false;
     //Always set marker cluster update required when playAnimation is true
     //to make sure it is updated when it stops
     if (playAnimation) {
@@ -616,29 +648,90 @@ const Scene = function (containerIn, rendererIn) {
         const currentTime = videoHandler.video.currentTime /
           videoHandler.getVideoDuration() * duration;
 			  if (0 == sceneLoader.toBeDownloaded) {
-				  zincCameraControls.setTime(currentTime);
-				  options.ndcToBeUpdated = zincCameraControls.update(0);
-          if (options.ndcToBeUpdated) {
-            zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+				  if (!sharedCamera) {
+				    zincCameraControls.setTime(currentTime);
+				    options.ndcToBeUpdated = zincCameraControls.update(0);
+            if (options.ndcToBeUpdated) {
+              zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+            }
           }
           rootRegion.setMorphTime(currentTime, true);
-          rootRegion.renderGeometries(0, 0, playAnimation, zincCameraControls, options, true);
-			  } else {
-				  zincCameraControls.update(0);
+          rootRegion.renderGeometries(0, 0, playAnimation, cameraControls, options, true);
+			  } else if (!sharedCamera && zincCameraControls.update(0)) {
+				  changed = true;
+				  cameraUpdated = true;
 			  }
 			  //console.log(videoHandler.video.currentTime / videoHandler.getVideoDuration() * 6000);
 		  }
+		  //The video texture changes while playing or loading
+		  if (playAnimation || !videoHandler.isReadyToPlay())
+		    changed = true;
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {
-        options.ndcToBeUpdated = zincCameraControls.update(delta);
-        if (options.ndcToBeUpdated) {
-          zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+        if (!sharedCamera) {
+          options.ndcToBeUpdated = zincCameraControls.update(delta);
+          if (options.ndcToBeUpdated) {
+            zincCameraControls.calculateHeightPerPixelAtZeroDepth(getDrawingHeight());
+          }
         }
-        rootRegion.renderGeometries(playRate, delta, playAnimation, zincCameraControls, options, true);
-		  } else {
-			  zincCameraControls.update(0);
+        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;
+    }
+    if (!sharedCamera && options.ndcToBeUpdated)
+      cameraUpdated = true;
+    if (options.ndcToBeUpdated ||
+      (playAnimation && this.isTimeVarying()) ||
+      //Objects appear as they are loaded
+      sceneLoader.toBeDownloaded > 0 ||
+      //Clusters are recalculated on a later frame
+      (markerCluster.isEnabled() && markerCluster.markerUpdateRequired)) {
+      changed = true;
+    }
+    //Changes made during this frame, e.g. LOD switching
+    if (needsRender) {
+      changed = true;
+      needsRender = false;
+    }
+    return changed;
+  }
+
+  /**
+   * Request this scene to be drawn on the next frame, this is only
+   * required when render on demand is enabled on the renderer.
+   * See {@link Renderer#setRenderOnDemand}.
+   */
+  this.invalidate = () => {
+    needsRender = true;
+  }
+
+  /**
+   * Check if the camera of this scene has been updated during the last
+   * call to renderGeometries.
+   *
+   * @return {Boolean}
+   * @private
+   */
+  this.isCameraUpdated = () => {
+    return cameraUpdated;
   }
 
   /**
@@ -650,6 +743,7 @@ const Scene = function (containerIn, rendererIn) {
   }
 
   this.setVideoHandler = (videoHandlerIn) => {
+    needsRender = true;
     if (!videoHandler)
       videoHandler = videoHandlerIn;
   }
@@ -770,6 +864,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} durationIn - duration of the scene.
    */
   this.setDuration = durationIn => {
+    needsRender = true;
     rootRegion.setDuration(durationIn);
     duration = durationIn;
     zincCameraControls.setPathDuration(durationIn);
@@ -790,6 +885,7 @@ const Scene = function (containerIn, rendererIn) {
    * should be enabled or disabled.
    */
   this.setStereoEffectEnable = stereoFlag => {
+    needsRender = true;
     if (stereoFlag == true) {
       if (!stereoEffect) {
         stereoEffect = new StereoEffect(rendererIn);
@@ -819,6 +915,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Number} transitionTime - Duration to perform the transition.
    */
   this.alignBoundingBoxToCameraView = (boundingBox, transitionTime) => {
+    needsRender = true;
     if (boundingBox) {
       boundingBox.getCenter(_v3);
       const viewport = this.getZincCameraControls().getCurrentViewport();
@@ -886,6 +983,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {ZincObject} zincObject - the bounding box to target
    */
   this.setCameraTargetToObject = zincObject => {
+    needsRender = true;
     if (this.objectIsInScene(zincObject)) {
       const boundingBox = zincObject.getBoundingBox();
       const viewport = this.getZincCameraControls().getCurrentViewport();
@@ -923,6 +1021,7 @@ const Scene = function (containerIn, rendererIn) {
    * @param {Zinc.Object} zincObject - object to be removed from this scene.
    */
   this.removeZincObject = zincObject => {
+    needsRender = true;
     rootRegion.removeZincObject(zincObject);
     if (zincCameraControls) {
       zincCameraControls.calculateMaxAllowedDistance(this);
@@ -1021,6 +1120,7 @@ const Scene = function (containerIn, rendererIn) {
    * This does not remove obejcts that are added using the addObject APIs.
    */
   this.clearAll = () => {
+    needsRender = true;
     markerCluster.clear();
     rootRegion.clear(true);
     this.clearZincObjectAddedCallbacks();
@@ -1259,6 +1359,7 @@ const Scene = function (containerIn, rendererIn) {
    * with clearTemporaryPrimitives method.
 	 */
   this.addTemporaryPoints = (coords, colour) => {
+    needsRender = true;
     const geometry = createPointQuadGeometry(coords.length);
     const material = createInstancedPointsMaterial(getCircularTexture());
     material.color.set(colour);
@@ -1266,13 +1367,11 @@ const Scene = function (containerIn, rendererIn) {
     material.userData.uniforms.pointSize.value = 15;
     material.alphaTest = 0.5;
     const point = new InstancedPoints(geometry, material, coords.length);
-    point.pointPositions = new Float32Array(coords.length * 3);
     const instancePosition = geometry.getAttribute('instancePosition');
+    //Share the array with the instance positions
+    point.pointPositions = instancePosition.array;
     coords.forEach((coord, index) => {
       instancePosition.setXYZ(index, coord[0], coord[1], coord[2]);
-      point.pointPositions[index * 3] = coord[0];
-      point.pointPositions[index * 3 + 1] = coord[1];
-      point.pointPositions[index * 3 + 2] = coord[2];
     });
     instancePosition.needsUpdate = true;
     tempGroup.add(point);
@@ -1284,6 +1383,7 @@ const Scene = function (containerIn, rendererIn) {
    * with clearTemporaryPrimitives method.
 	 */
   this.addTemporaryLines = (coords, colour) => {
+    needsRender = true;
     const geometry = createBufferGeometry(coords.length, coords);
     const material = new THREE.LineBasicMaterial({color:colour});
     const line = new LineSegments(geometry, material);
@@ -1296,6 +1396,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Display frustum
 	 */
   this.enableFrustumDisplay = () => {
+    needsRender = true;
     if (this.camera && !cameraHelper) {
       cameraHelper = new THREE.CameraHelper(this.camera);
       scene.add(cameraHelper);
@@ -1306,6 +1407,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Hide frustum
 	 */
   this.disableFrustumDisplay = () => {
+    needsRender = true;
     if (cameraHelper) {
       scene.remove(cameraHelper);
       cameraHelper.dispose();
@@ -1317,6 +1419,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Remove object from temporary objects list
 	 */
   this.removeTemporaryPrimitive = (object) => {
+    needsRender = true;
     tempGroup.remove(object);
     object.geometry.dispose();
     object.material.dispose();
@@ -1327,6 +1430,7 @@ const Scene = function (containerIn, rendererIn) {
    * Return number of primitives removed;
 	 */
   this.clearTemporaryPrimitives = () => {
+    needsRender = true;
     let i = 0;
     const children = tempGroup.children;
     children.forEach(child => {
@@ -1344,6 +1448,7 @@ const Scene = function (containerIn, rendererIn) {
 	 */
   this.addBoundingBoxPrimitive = (regionPath, group, colour, opacity,
     visibility, boundingBox = undefined) => {
+    needsRender = true;
     let region = rootRegion.findChildFromPath(regionPath);
     if (region === undefined) {
       region = rootRegion.createChildFromPath(regionPath);
@@ -1365,6 +1470,7 @@ const Scene = function (containerIn, rendererIn) {
 	 */
   this.addSlicesPrimitive = (regionPath, groups, colours, opacity,
     visibility, boundingBox = undefined) => {
+    needsRender = true;
     if (groups && groups.length >= 3 &&
       colours && colours.length >= 3) {
       let region = rootRegion.findChildFromPath(regionPath);
@@ -1418,6 +1524,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Enable marker cluster to work with markers
 	 */
   this.enableMarkerCluster = (flag) => {
+    needsRender = true;
     if (flag) {
       markerCluster.markerUpdateRequired = true;
       markerCluster.enable();
@@ -1432,6 +1539,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Destory static axis display object
 	 */
   this.destroyAxisDisplay = () => {
+    needsRender = true;
     this.displayMiniAxes = false;
     if (axisDisplay.main) {
       this.enableAxisDisplay(false, false);
@@ -1459,6 +1567,7 @@ const Scene = function (containerIn, rendererIn) {
 	 * Create static axis display object
 	 */
   this.createAxisDisplay = (fitBoundingBox = false) => {
+    needsRender = true;
     this.destroyAxisDisplay();
     const XYZ = [
       {
@@ -1511,6 +1620,7 @@ const Scene = function (containerIn, rendererIn) {
    * before the axis can be display.
 	 */
   this.enableAxisDisplay = (enable, miniaxes = false) => {
+    needsRender = true;
     if (miniaxes && axisDisplay?.mini?.length) {
       this.displayMiniAxes = enable;
       axisDisplay.mini.forEach(axis => {

package/src/sceneExporter.js

@@ -1,5 +1,6 @@
 import { BufferAttribute } from 'three/webgpu';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
+import { useStandardIndexType } from './utilities';
 
 /*
  * GLTFExporter only writes POSITION and NORMAL morph targets. glTF allows
@@ -89,6 +90,8 @@ const SceneExporter = function (sceneIn) {
         glyphsetsToRestore.push(zincObject);
       }
     }
+    //GLTFExporter only accepts plain typed arrays
+    const restoreIndexType = useStandardIndexType(scene.getThreeJSScene());
     const exporter = new GLTFExporter();
     exporter.register(writer => new GLTFMorphColourPlugin(writer));
     const options = { binary, animations, onlyVisible: true };
@@ -106,6 +109,7 @@ const SceneExporter = function (sceneIn) {
           options );
       });
     } finally {
+      restoreIndexType();
       glyphsetsToRestore.forEach(zincObject => zincObject.clearColorExportState());
     }
 	}

package/src/sceneLoader.js

@@ -27,8 +27,6 @@ const SceneLoader = function (sceneIn) {
   this.progressMap = {};
   let viewLoaded = false;
   let errorDownload = false;
-  //Incremented when pending loads are cancelled, loads requested
-  //before the increment are discarded once they complete.
   let generation = 0;
   const primitivesLoader = new PrimitivesLoader();
 
@@ -450,7 +448,8 @@ const SceneLoader = function (sceneIn) {
     const loader = new STLLoader();
     loader.crossOrigin = "Anonymous";
     loader.load(url, meshloader(region, colour, opacity, false,
-      false, groupName, undefined, undefined, undefined, finishCallback));
+      false, groupName, undefined, undefined, {}, finishCallback),
+      this.onProgress(url), this.onError(finishCallback));
   }
 
   /**
@@ -468,8 +467,9 @@ const SceneLoader = function (sceneIn) {
     const opacity = Zinc.defaultOpacity;
     const loader = new OBJLoader();
     loader.crossOrigin = "Anonymous";
-    loader.load(url, meshloader(region, colour, opacity, false,
-      false, groupName, undefined, undefined, undefined, finishCallback));
+    loader.load(url, objloader(region, colour, opacity, false,
+      false, groupName, undefined, undefined, {}, finishCallback),
+      this.onProgress(url), this.onError(finishCallback));
   }
 
   /**
@@ -500,17 +500,14 @@ const SceneLoader = function (sceneIn) {
     if (morphColour != undefined)
       localMorphColour = morphColour ? true : false;
     let loader = primitivesLoader;
-    if (fileFormat !== undefined) {
-      if (fileFormat == "STL") {
-        loader = new STLLoader();
-      } else if (fileFormat == "OBJ") {
-        loader = new OBJLoader();
-        loader.crossOrigin = "Anonymous";
-        loader.load(url, objloader(region, colour, opacity, localTimeEnabled,
-          localMorphColour, groupName, anatomicalId, finishCallback), this.onProgress(url), this.onError,
-          options.loaderOptions);
-        return;
-      }
+    if (fileFormat == "STL" || fileFormat == "OBJ") {
+      const typedLoader = fileFormat == "STL" ? meshloader : objloader;
+      loader = fileFormat == "STL" ? new STLLoader() : new OBJLoader();
+      loader.crossOrigin = "Anonymous";
+      loader.load(url, typedLoader(region, colour, opacity, localTimeEnabled,
+        localMorphColour, groupName, anatomicalId, renderOrder, options ? options : {},
+        finishCallback), this.onProgress(url), this.onError(finishCallback));
+      return;
     }
     if (isInline) {
       const object = primitivesLoader.parse( url );
@@ -723,7 +720,7 @@ const SceneLoader = function (sceneIn) {
       }
       const zincGeometry = addZincGeometry(region, geometry, colour, opacity,
         localTimeEnabled, localMorphColour, undefined, material, groupName, renderOrder, anatomicalId);
-      if (options.lod && options.lod.levels) {
+      if (options?.lod?.levels) {
         for (const [key, value] of Object.entries(options.lod.levels)) {
           zincGeometry.addLOD(primitivesLoader, key, value.URL, value.Index, options.lod.preload);
         }
@@ -736,6 +733,48 @@ const SceneLoader = function (sceneIn) {
     };
   }
 
+  //Internal loader for OBJ files, OBJLoader returns a group and each mesh
+  //in it is added as a separate zinc geometry.
+  const objloader = (
+    region,
+    colour,
+    opacity,
+    localTimeEnabled,
+    localMorphColour,
+    groupName,
+    anatomicalId,
+    renderOrder,
+    options,
+    finishCallback
+  ) => {
+    const isStale = createStaleCheck();
+    const onMeshLoaded = meshloader(region, colour, opacity, localTimeEnabled,
+      localMorphColour, groupName, anatomicalId, renderOrder, options, finishCallback);
+    return (group) => {
+      const meshes = [];
+      group.traverse((child) => {
+        if (child.isMesh && child.geometry) {
+          meshes.push(child);
+        }
+        if (child.material) {
+          const materials = Array.isArray(child.material) ? child.material : [child.material];
+          materials.forEach((material) => material.dispose());
+        }
+      });
+      if (isStale()) {
+        meshes.forEach((mesh) => mesh.geometry.dispose());
+        return;
+      }
+      if (meshes.length === 0) {
+        --this.toBeDownloaded;
+        return;
+      }
+      //meshloader decrements the counter once per mesh
+      this.toBeDownloaded += meshes.length - 1;
+      meshes.forEach((mesh) => onMeshLoaded(mesh.geometry));
+    };
+  }
+
   //Turn ISO 8601 duration string into an array.
   const parseDuration = (durationString) => {
     const regex = /P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)W)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/;
@@ -1017,9 +1056,9 @@ const SceneLoader = function (sceneIn) {
     // view file does not receive callback
     let callback = new metaFinishCallback(numberOfObjects, finishCallback, allCompletedCallback);
     // Prioritise the view file and settings before loading anything else
-    for (let i = 0; i < metadata.length; i++)
+    for (let i = 0; i < filteredMetada.length; i++)
       readViewAndSettingsItem(referenceURL, filteredMetada[i], callback);
-    for (let i = 0; i < metadata.length; i++) {
+    for (let i = 0; i < filteredMetada.length; i++) {
       readVersionOneRegionPath(targetRegion, referenceURL, filteredMetada[i], i, callback);
     }
   }