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

package/src/sceneLoader.js

@@ -27,7 +27,28 @@ const SceneLoader = function (sceneIn) {
   this.progressMap = {};
   let viewLoaded = false;
   let errorDownload = false;
+  let generation = 0;
   const primitivesLoader = new PrimitivesLoader();
+
+  /**
+   * Cancel all pending downloads, objects from the cancelled downloads
+   * will be discarded instead of being added into the scene once they
+   * arrive.
+   */
+  this.cancelPendingLoads = () => {
+    generation++;
+    this.toBeDownloaded = 0;
+    this.progressMap = {};
+    viewLoaded = false;
+    errorDownload = false;
+  }
+
+  //Return a function which returns true if the loads requested before
+  //this call have been cancelled.
+  const createStaleCheck = () => {
+    const requestGeneration = generation;
+    return () => requestGeneration !== generation;
+  }
   /**
    * This function returns a three component array, which contains
    * [totalsize, totalLoaded and errorDownload] of all the downloads happening
@@ -62,7 +83,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   this.onError = finishCallback => {
+    const isStale = createStaleCheck();
     return xhr => {
+      if (isStale()) return;
       this.toBeDownloaded = this.toBeDownloaded - 1;
       errorDownload = true;
       console.error(`There is an issue with external resource ${xhr?.responseURL ? ": " +  xhr?.responseURL: ""}.`);
@@ -116,6 +139,7 @@ const SceneLoader = function (sceneIn) {
   this.loadViewURL = (url, finishCallback) => {
     this.toBeDownloaded += 1;
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -124,6 +148,7 @@ const SceneLoader = function (sceneIn) {
         return response.json();
       })
       .then((viewData) => {
+        if (isStale()) return;
         scene.setupMultipleViews("default", { "default" : viewData });
         scene.resetView();
         viewLoaded = true;
@@ -176,6 +201,7 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadFromViewURL = (targetRegion, jsonFilePrefix, finishCallback) => {
     const requestURL = jsonFilePrefix + "_view.json";
+    const isStale = createStaleCheck();
     fetch(requestURL)
     .then((response) => {
       if (!response.ok) {
@@ -184,6 +210,7 @@ const SceneLoader = function (sceneIn) {
       return response.json();
     })
     .then((viewData) => {
+      if (isStale()) return;
       scene.loadView(viewData);
       const urls = [];
       const filename_prefix = jsonFilePrefix + "_";
@@ -209,7 +236,12 @@ const SceneLoader = function (sceneIn) {
   //Internal loader for a regular zinc geometry.
   const linesloader = (region, localTimeEnabled, localMorphColour, groupName,
     anatomicalId, renderOrder, lod, tubeLines, finishCallback) => {
+      const isStale = createStaleCheck();
       return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newLines = tubeLines ? new TubeLines() : new Lines();
       let material = undefined;
       if (materials && materials[0]) {
@@ -276,7 +308,9 @@ const SceneLoader = function (sceneIn) {
   }
 
   const glyphsetloader = (region, glyphurl, groupName, finishCallback, options) => {
+    const isStale = createStaleCheck();
     return (data) => {
+      if (isStale()) return;
       let glyphsetData = data;
       if (typeof glyphsetData === 'string' || glyphsetData instanceof String) {
         glyphsetData = JSON.parse(data);
@@ -292,6 +326,7 @@ const SceneLoader = function (sceneIn) {
       newGlyphset.setDuration(scene.getDuration());
       newGlyphset.groupName = groupName;
       let myCallback = () => {
+        if (isStale()) return;
         --this.toBeDownloaded;
         if (finishCallback != undefined && (typeof finishCallback == 'function'))
           finishCallback(newGlyphset);
@@ -358,7 +393,12 @@ const SceneLoader = function (sceneIn) {
 
   //Internal loader for zinc pointset.
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       const newPointset = new Pointset();
       let material = new THREE.PointsMaterial(
         {
@@ -408,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));
   }
 
   /**
@@ -426,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));
   }
 
   /**
@@ -458,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 );
@@ -554,7 +593,12 @@ const SceneLoader = function (sceneIn) {
       }
       if (newTexture) {
         newTexture.groupName = groupName;
+        const isStale = createStaleCheck();
         let myCallback = () => {
+          if (isStale()) {
+            newTexture.dispose();
+            return;
+          }
           //Add zincObject after it has sort out all the required download
           region.addZincObject(newTexture);
           --this.toBeDownloaded;
@@ -582,6 +626,7 @@ const SceneLoader = function (sceneIn) {
       loadTexture(region, undefined, url, groupName, finishCallback, options);
     } else {
       const requestURL = url;
+      const isStale = createStaleCheck();
       fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -591,6 +636,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((textureData) => ({ textureData, referenceURL }));
       })
       .then(({textureData, referenceURL}) => {
+        if (isStale()) return;
         loadTexture(region, referenceURL, textureData, groupName, finishCallback, options);
       })
       .catch((error) => {
@@ -662,14 +708,19 @@ const SceneLoader = function (sceneIn) {
     options,
     finishCallback
   ) => {
+    const isStale = createStaleCheck();
     return (geometry, materials) => {
+      if (isStale()) {
+        geometry.dispose();
+        return;
+      }
       let material = undefined;
       if (materials && materials[0]) {
         material = materials[0];
       }
       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);
         }
@@ -682,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)?)?$/;
@@ -831,7 +924,8 @@ const SceneLoader = function (sceneIn) {
    */
   this.loadGLTF = (region, url, finishCallback, allCompletedCallback, options) => {
     const loader = new GLTFToZincJSLoader();
-    loader.load(scene, region, url, finishCallback, allCompletedCallback, options);
+    loader.load(scene, region, url, finishCallback, allCompletedCallback, options,
+      createStaleCheck());
   }
 
   let loadRegions = (currentRegion, referenceURL, regions, callback) => {
@@ -962,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);
     }
   }
@@ -993,6 +1087,7 @@ const SceneLoader = function (sceneIn) {
     */
   this.loadMetadataURL = (targetRegion, url, finishCallback, allCompletedCallback, options) => {
     const requestURL = url;
+    const isStale = createStaleCheck();
     fetch(requestURL)
       .then((response) => {
         if (!response.ok) {
@@ -1002,6 +1097,7 @@ const SceneLoader = function (sceneIn) {
         return response.json().then((metadata) => ({ metadata, referenceURL }));
       })
       .then(({metadata, referenceURL}) => {
+        if (isStale()) return;
         scene.resetMetadata();
         scene.resetDuration();
         viewLoaded = false;

package/src/textSprite.js

@@ -0,0 +1,211 @@
+import * as THREE from 'three/webgpu';
+import SpriteTextModule from 'three-spritetext';
+import { requestRenderAll } from './renderRequests';
+const SpriteText = SpriteTextModule.default || SpriteTextModule;
+
+/*
+ * Text sprites (labels, marker numbers) are drawn on a canvas by
+ * three-spritetext. To keep the text sharp the canvas resolution is chosen
+ * from the size of the text on screen instead of a fixed font size, and it
+ * is redrawn once web fonts have finished loading.
+ */
+
+//Canvas pixels per screen pixel, a little oversampling smooths the edges
+const OVERSAMPLE = 1.5;
+const MIN_FONT_SIZE = 16;
+const MAX_FONT_SIZE = 256;
+//Only redraw when the screen scale has changed by more than this ratio
+const RESCALE_THRESHOLD = 0.1;
+
+/*
+ * Screen pixels per unit of sprite height. Text sprites do not use size
+ * attenuation, their height is in view units at a distance of one, so this
+ * is viewportHeight * pixelRatio / (2 * tan(fov / 2)). Default to a 1000
+ * pixels viewport with the 40 degrees field of view used by the scenes.
+ */
+let pixelsPerUnit = 1000 / (2 * Math.tan(20 * Math.PI / 180));
+
+//Weak references to every live text sprite, so they can be redrawn
+const sprites = new Set();
+let fontListenerAdded = false;
+
+const fontSizeForHeight = (textHeight) => {
+  const size = Math.round(textHeight * pixelsPerUnit * OVERSAMPLE);
+  return Math.min(Math.max(size, MIN_FONT_SIZE), MAX_FONT_SIZE);
+}
+
+/*
+ * The canvas matches the on screen size so mipmaps are not required,
+ * they blur the text when it is shrunk.
+ */
+const applyTextureSettings = (sprite) => {
+  const texture = sprite.material?.map;
+  if (texture) {
+    texture.generateMipmaps = false;
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    texture.anisotropy = 1;
+  }
+}
+
+/*
+ * SpriteText redraws its canvas and creates a new texture in every setter,
+ * set all font properties before a single redraw instead.
+ */
+const setFont = (sprite, fontFace, fontSize, fontWeight) => {
+  if ('_fontFace' in sprite && typeof sprite._genCanvas === 'function') {
+    sprite._fontFace = fontFace;
+    sprite._fontSize = fontSize;
+    sprite._fontWeight = fontWeight;
+    sprite._genCanvas();
+  } else {
+    sprite.fontFace = fontFace;
+    sprite.fontSize = fontSize;
+    sprite.fontWeight = fontWeight;
+  }
+}
+
+/*
+ * Redraw the sprite at the resolution required for its current height.
+ */
+const refreshTextSprite = (sprite, force = false) => {
+  const fontSize = fontSizeForHeight(sprite.textHeight);
+  if (force || fontSize !== sprite.fontSize) {
+    setFont(sprite, sprite.fontFace, fontSize, sprite.fontWeight);
+    applyTextureSettings(sprite);
+  }
+}
+
+const forEachSprite = (callback) => {
+  sprites.forEach((ref) => {
+    const sprite = ref.deref();
+    if (sprite) {
+      callback(sprite);
+    } else {
+      sprites.delete(ref);
+    }
+  });
+}
+
+const redrawAll = () => {
+  forEachSprite((sprite) => refreshTextSprite(sprite, true));
+  requestRenderAll();
+}
+
+/*
+ * The canvas is drawn with a fallback font if a web font has not been
+ * loaded yet, redraw once it is available.
+ */
+const waitForFont = (sprite) => {
+  if (typeof document === 'undefined' || !document.fonts) {
+    return;
+  }
+  if (!fontListenerAdded && document.fonts.addEventListener) {
+    //Catch fonts from stylesheets added after the sprites are created
+    document.fonts.addEventListener('loadingdone', redrawAll);
+    fontListenerAdded = true;
+  }
+  const font = `${sprite.fontWeight} ${sprite.fontSize}px ${sprite.fontFace}`;
+  try {
+    if (!document.fonts.check(font)) {
+      document.fonts.load(font).then(() => {
+        refreshTextSprite(sprite, true);
+        requestRenderAll();
+      }).catch(() => {});
+    }
+  } catch {
+    //Invalid font string, keep the fallback font
+  }
+}
+
+const registerTextSprite = (sprite) => {
+  sprites.add(new WeakRef(sprite));
+}
+
+/**
+ * Stop tracking a text sprite, call this when it is disposed.
+ */
+const releaseTextSprite = (sprite) => {
+  sprites.forEach((ref) => {
+    const trackedSprite = ref.deref();
+    if (!trackedSprite || trackedSprite === sprite) {
+      sprites.delete(ref);
+    }
+  });
+}
+
+/**
+ * Create a text sprite rendered with a node material, the canvas resolution
+ * is chosen from the size of the text on screen.
+ *
+ * @param {String} text - Text to display.
+ * @param {Number} textHeight - Height of a line of text in view units.
+ * @param {String} colour - CSS colour of the text.
+ * @param {String} fontFace - Font family.
+ * @param {Number|String} fontWeight - Font weight.
+ * @return {SpriteText}
+ */
+const createTextSprite = (text, textHeight, colour, fontFace, fontWeight) => {
+  const sprite = colour ? new SpriteText(text, textHeight, colour) :
+    new SpriteText(text, textHeight);
+  setFont(sprite, fontFace, fontSizeForHeight(textHeight), fontWeight);
+  //Replace the SpriteMaterial created by SpriteText with a node material
+  //using the same canvas texture.
+  const originalMaterial = sprite.material;
+  sprite.material = new THREE.SpriteNodeMaterial({
+    map: originalMaterial.map,
+  });
+  originalMaterial.map = null;
+  originalMaterial.dispose();
+  sprite.material.sizeAttenuation = false;
+  applyTextureSettings(sprite);
+  registerTextSprite(sprite);
+  waitForFont(sprite);
+  return sprite;
+}
+
+/**
+ * Set the height of a text sprite and redraw it once at the matching
+ * resolution.
+ */
+const setTextSpriteHeight = (sprite, textHeight) => {
+  if ('_textHeight' in sprite) {
+    sprite._textHeight = textHeight;
+    refreshTextSprite(sprite, true);
+  } else {
+    sprite.textHeight = textHeight;
+    refreshTextSprite(sprite);
+  }
+}
+
+/**
+ * Update the number of screen pixels per unit of text height, e.g. when the
+ * viewport is resized. Text sprites are redrawn if it has changed
+ * significantly.
+ *
+ * @param {Number} value - viewportHeight * pixelRatio / (2 * tan(fov / 2))
+ */
+const setTextPixelsPerUnit = (value) => {
+  if (!(value > 0) || !isFinite(value)) {
+    return;
+  }
+  if (Math.abs(value / pixelsPerUnit - 1) > RESCALE_THRESHOLD) {
+    pixelsPerUnit = value;
+    forEachSprite((sprite) => refreshTextSprite(sprite));
+    requestRenderAll();
+  }
+}
+
+const getTextPixelsPerUnit = () => pixelsPerUnit;
+
+export {
+  applyTextureSettings as applyTextSpriteTextureSettings,
+  createTextSprite,
+  fontSizeForHeight,
+  getTextPixelsPerUnit,
+  refreshTextSprite,
+  registerTextSprite,
+  releaseTextSprite,
+  setTextPixelsPerUnit,
+  setTextSpriteHeight,
+};

package/src/texture/texture.js

@@ -70,6 +70,16 @@ Texture.prototype.loadFromImages = async function (srcArrays) {
   return
 }
 
+/**
+ * Free the memory allocated for this texture.
+ */
+Texture.prototype.dispose = function () {
+  if (this.impl) {
+    this.impl.dispose();
+    this.impl = undefined;
+  }
+}
+
 /**
  * Return true if the texture is ready for consumption.
  *

package/src/texture/textureArray.js

@@ -121,4 +121,13 @@ const TextureArray = function () {
 }
 
 TextureArray.prototype = Object.create(Texture.prototype);
+
+/**
+ * Free the memory allocated for this texture array.
+ */
+TextureArray.prototype.dispose = function () {
+  Texture.prototype.dispose.call(this);
+  this.imageData = undefined;
+}
+
 export { TextureArray };