zincjs 2.4.1-beta.4 → 2.4.1-beta.5

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/utilities.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three/webgpu';
-import SpriteTextModule from 'three-spritetext';
-const SpriteText = SpriteTextModule.default || SpriteTextModule;
 import discPNG from './assets/disc.png';
+import { requestRenderAll } from './renderRequests';
+import { createTextSprite } from './textSprite';
 
 function createNewURL(target, reference) {
   const getNewURL = (target, reference) => {
@@ -31,6 +31,29 @@ function createNewURL(target, reference) {
   }
 }
 
+/*
+ * Compute the world matrix of an object from its ancestors and return it.
+ * three.js only recomputes world matrices flagged by matrixWorldNeedsUpdate,
+ * which objects with matrixAutoUpdate set to false (zinc meshes and region
+ * groups) never set, they would otherwise stay stale until the next render.
+ */
+function updateWorldMatrixFromAncestors(object) {
+  if (object.parent) {
+    updateWorldMatrixFromAncestors(object.parent);
+  }
+  if (object.matrixAutoUpdate) {
+    object.updateMatrix();
+  }
+  if (object.matrixWorldAutoUpdate !== false) {
+    if (object.parent) {
+      object.matrixWorld.multiplyMatrices(object.parent.matrixWorld, object.matrix);
+    } else {
+      object.matrixWorld.copy(object.matrix);
+    }
+  }
+  return object.matrixWorld;
+}
+
 /*
  * Calculate the bounding box of a mesh, values will be
  * set for cachedBox, b1, v1 and v2 and they need to be
@@ -61,8 +84,7 @@ function getBoundingBox(mesh, cachedBox, b1, v1, v2) {
     cachedBox.setFromBufferAttribute(
       mesh.geometry.attributes.position);
   }
-  mesh.updateWorldMatrix(true, true);
-  cachedBox.applyMatrix4(mesh.matrixWorld);
+  cachedBox.applyMatrix4(updateWorldMatrixFromAncestors(mesh));
 }
 
 
@@ -128,31 +150,40 @@ const getColorsRGB = (colors, index) => {
     return [mycolor.r, mycolor.g, mycolor.b];
 }
 
+//morphColor0/morphColor1 attribute -> morph colour target last copied into it
+const morphColorSources = new WeakMap();
+
 const updateMorphColorAttribute = function(targetGeometry, morph) {
   if (morph && targetGeometry && targetGeometry.morphAttributes &&
     targetGeometry.morphAttributes[ "color" ]) {
     const morphColors = targetGeometry.morphAttributes[ "color" ];
     const influences = morph.morphTargetInfluences;
     const length = influences.length;
-    let morphArray = [];
-    for (let i = 0; i < length; i++) {
+    //Find the first two morph targets with non-zero influence
+    let found = 0;
+    let index0 = 0;
+    let index1 = 0;
+    let weight0 = 0;
+    let weight1 = 0;
+    for (let i = 0; i < length && found < 2; i++) {
       if (influences[i] > 0) {
-        morphArray.push([i, influences[i]]);
+        if (found === 0) {
+          index0 = index1 = i;
+          weight0 = influences[i];
+        } else {
+          index1 = i;
+          weight1 = influences[i];
+        }
+        found++;
       }
     }
     //morphColorMix (0 = fully morphColor0, 1 = fully morphColor1) drives the
     //TSL colorNode set up by applyMorphColorNode - keep it in sync with
     //whichever two morph targets currently have non-zero influence.
     let mix = 0;
-    let index0 = 0;
-    let index1 = 0;
-    if (morphArray.length >= 2) {
-      index0 = morphArray[0][0];
-      index1 = morphArray[1][0];
-      const total = morphArray[0][1] + morphArray[1][1];
-      mix = total > 0 ? morphArray[1][1] / total : 0;
-    } else if (morphArray.length == 1) {
-      index0 = index1 = morphArray[0][0];
+    if (found >= 2) {
+      const total = weight0 + weight1;
+      mix = total > 0 ? weight1 / total : 0;
     }
     //Keep morphColor0/morphColor1 as two persistent attributes and mutate
     //their contents in place (array.set + needsUpdate) rather than
@@ -176,10 +207,20 @@ const updateMorphColorAttribute = function(targetGeometry, morph) {
       targetGeometry.setAttribute('morphColor0', attribute0);
       targetGeometry.setAttribute('morphColor1', attribute1);
     }
-    attribute0.array.set(morphColors[index0].array);
-    attribute0.needsUpdate = true;
-    attribute1.array.set(morphColors[index1].array);
-    attribute1.needsUpdate = true;
+    //Only copy and upload when the pair of keyframes changes, between
+    //keyframes only morphColorMix changes.
+    const source0 = morphColors[index0];
+    const source1 = morphColors[index1];
+    if (morphColorSources.get(attribute0) !== source0) {
+      attribute0.array.set(source0.array);
+      attribute0.needsUpdate = true;
+      morphColorSources.set(attribute0, source0);
+    }
+    if (morphColorSources.get(attribute1) !== source1) {
+      attribute1.array.set(source1.array);
+      attribute1.needsUpdate = true;
+      morphColorSources.set(attribute1, source1);
+    }
     const morphColorMix = morph.material && morph.material.userData &&
       morph.material.userData.uniforms && morph.material.userData.uniforms.morphColorMix;
     if (morphColorMix) {
@@ -697,29 +738,81 @@ function createBufferGeometry(length, coords) {
   return undefined;
 };
 
+/*
+ * WebGPURenderer converts 16 bit index buffers to 32 bit and keeps the
+ * converted array, doubling the memory used by indices. WebGPU supports 16
+ * bit indices natively, three.js only converts arrays whose constructor is
+ * exactly Uint16Array while the index format is chosen with
+ * instanceof Uint16Array. Indices are viewed through this subclass so they
+ * stay 16 bit, the values and getX() are unchanged.
+ */
+class IndexUint16Array extends Uint16Array {}
+
+function keepIndexType(geometry) {
+  const index = geometry?.index;
+  if (index && index.array.constructor === Uint16Array) {
+    const array = index.array;
+    //A view of the same buffer, no copy is made
+    index.array = new IndexUint16Array(array.buffer, array.byteOffset, array.length);
+  }
+}
+
+/*
+ * Temporarily view the indices of the object and its descendants as plain
+ * Uint16Array, for code which checks the exact array type such as
+ * GLTFExporter. Returns a function which undoes the change.
+ */
+function useStandardIndexType(object) {
+  const changed = [];
+  object.traverse((child) => {
+    const index = child.geometry?.index;
+    if (index && index.array instanceof IndexUint16Array) {
+      const array = index.array;
+      index.array = new Uint16Array(array.buffer, array.byteOffset, array.length);
+      changed.push([index, array, index.array]);
+    }
+  });
+  return () => {
+    changed.forEach(([index, original, replacement]) => {
+      //Only restore if nothing else has replaced the array since
+      if (index.array === replacement) {
+        index.array = original;
+      }
+    });
+  };
+}
+
+//Shared by all pointsets
+let circularTexture = undefined;
+
 function getCircularTexture() {
+  if (circularTexture) {
+    return circularTexture;
+  }
   const image = new Image();
-  image.src = discPNG;
   const texture = new THREE.Texture();
   texture.image = image;
-  texture.needsUpdate = true;
+  //Only upload once the image is available
+  image.onload = () => {
+    texture.needsUpdate = true;
+    requestRenderAll();
+  };
+  image.src = discPNG;
+  if (image.complete && image.naturalWidth > 0) {
+    texture.needsUpdate = true;
+  }
+  circularTexture = texture;
   return texture;
 }
 
+/*
+ * Create a text sprite, e.g. marker numbers. The canvas resolution is chosen
+ * from the size of the text on screen, pixel is no longer used.
+ */
 function createNewSpriteText(text, height, colour, font, pixel, weight) {
-  const sprite = new SpriteText(text, height, colour, font, pixel, weight);
-  sprite.canvasScale = 4;
-  sprite.fontFace = font;
-  sprite.fontSize = pixel;
-  sprite.fontWeight = weight;
-  const canvasTexture = sprite.material.map; // Snag the canvas texture generated by the library
-  sprite.material = new THREE.SpriteNodeMaterial({
-    map: canvasTexture,
-  });
-  sprite.material.map.generateMipmaps = true;
-  sprite.material.map.anisotropy = 4;
-  sprite.material.sizeAttenuation = false;
-  sprite.material.alphaTest = 0.5;
+  const sprite = createTextSprite(text, height, colour, font, weight);
+  //Only discard fully transparent pixels to keep the smooth edges
+  sprite.material.alphaTest = 0.05;
   sprite.material.transparent = true;
   sprite.material.depthWrite = false;
   sprite.material.depthTest = false;
@@ -775,21 +868,24 @@ function removeVertexAtIndex(geometry, index, maintainLength) {
 
   // Helper to remove elements from a typed array
   const removeElements = (attribute, name) => {
-    let removed = false;
-    const array = Array.from(attribute.array);
-    if (array.length >= (start + deleteCount)) {
-      array.splice(start, deleteCount); // Use splice for removal
-      if (maintainLength) {
-        array.concat(new Array(deleteCount).fill(0));
-      }
-      removed = true;
-      const newArray = new Float32Array(array);
+    const array = attribute.array;
+    if (array.length < (start + deleteCount)) {
+      return false;
+    }
+    if (maintainLength) {
+      //Shift the remaining values in place and clear the end, this keeps
+      //the attribute and its GPU buffer.
+      array.copyWithin(start, start + deleteCount);
+      array.fill(0, array.length - deleteCount);
+      attribute.needsUpdate = true;
+    } else {
+      const newArray = new array.constructor(array.length - deleteCount);
+      newArray.set(array.subarray(0, start));
+      newArray.set(array.subarray(start + deleteCount), start);
       geometry.setAttribute(name, new THREE.BufferAttribute(newArray, itemSize));
       geometry.getAttribute(name).needsUpdate = true;
     }
-    // Create new BufferAttribute with the modified array
-
-    return removed;
+    return true;
   };
 
   removed = removeElements(positionAttribute, 'position');
@@ -875,6 +971,10 @@ export {
   createNewURL,
   getBoundingBox,
   getCircularTexture,
+  keepIndexType,
+  updateWorldMatrixFromAncestors,
+  useStandardIndexType,
+  IndexUint16Array,
   getColorsRGB,
   isRegionGroup,
   loadExternalFile,