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

package/src/primitives/glyphset.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three/webgpu';
 import { Glyph } from './glyph';
 import { ZincObject } from './zincObject';
+import { updateWorldMatrixFromAncestors } from '../utilities';
 import { JSONLoader } from '../loaders/JSONLoader';
 import { createGlyphTransformCompute, dispatchAndReadbackGlyphTransform, readbackGlyphTransform } from '../tsl/glyphTransform';
 import { createGlyphInstancedMaterial } from '../tsl/glyphRenderMaterial';
@@ -71,6 +72,9 @@ const Glyphset = function () {
   // for ACCURATE_RESYNC_DEBOUNCE_MS of quiet.
   let accurateResyncTimer = undefined;
   const ACCURATE_RESYNC_DEBOUNCE_MS = 500;
+  //Set to false when the static (non morphing) transformation needs to be
+  //re-applied, e.g. after a scale change.
+  let staticTransformationApplied = false;
   for (let i = 0; i < 8; i++) {
     _points[i] = new THREE.Vector3();
   }
@@ -443,6 +447,7 @@ const Glyphset = function () {
    * completely unchanged downstream.
    */
   const applyGlyphComputeResult = (result) => {
+    this.requestRender();
     const matrixArray = this.morph.instanceMatrix.array;
     const updateLabels = this.canShowLabel();
     for (let i = 0; i < numberOfVertices; i++) {
@@ -543,6 +548,7 @@ const Glyphset = function () {
    * all, bouding box will not be updated.
    */
   const dispatchGlyphComputeFast = (bottom_frame, top_frame, proportion) => {
+    this.requestRender();
     const renderer = this.region?.getScene?.()?.getRenderer?.();
     if (!renderer) return false;
     glyphCompute.uniforms.bottomFrame.value = bottom_frame;
@@ -666,8 +672,13 @@ const Glyphset = function () {
       current_axis3s = axis3s["0"];
       current_scales = scales["0"];
     }
-    updateGlyphsetTransformation(current_positions, current_axis1s, current_axis2s, current_axis3s,
-      current_scales);
+    //Colour only morphing does not change the transformation, skip it
+    //unless it is out of date.
+    if (morphVertices || !staticTransformationApplied) {
+      updateGlyphsetTransformation(current_positions, current_axis1s, current_axis2s, current_axis3s,
+        current_scales);
+      staticTransformationApplied = !morphVertices;
+    }
     if (colors != undefined) {
       if (morphColours) {
         const bottom_colors = colors[bottom_frame.toString()];
@@ -713,6 +724,7 @@ const Glyphset = function () {
    * Display the label of the glyphs in the glyphset.
    */
   this.showLabel = () => {
+    this.requestRender();
     if (glyphList?.length) {
       labelsOn = true;
       for (let i = 0; i < glyphList.length; i++) {
@@ -725,6 +737,7 @@ const Glyphset = function () {
    * Hide label with the choosen colour.
    */
     this.hideLabel = () => {
+      this.requestRender();
       for (let i = 0; i < glyphList.length; i++) {
         glyphList[i].hideLabel();
       }
@@ -804,6 +817,7 @@ const Glyphset = function () {
     //Update the transformation of the glyphs.
     updateGlyphsetTransformation(positions["0"], axis1s["0"],
       axis2s["0"], axis3s["0"], scales["0"]);
+    staticTransformationApplied = true;
     if (colors != undefined) {
       updateGlyphsetHexColors(colors["0"], !!(glyphCompute && glyphCompute.outputs.color));
     }
@@ -819,6 +833,7 @@ const Glyphset = function () {
    * @param {Glyph} Glyph to be added.
    */
   this.addCustomGlyph = glyph => {
+    this.requestRender();
     if (glyph.isGlyph)
       glyphList.push(glyph);
     this.ready = true;
@@ -832,6 +847,7 @@ const Glyphset = function () {
    * @param {Number} id of the mesh.
    */
   this.addMeshAsGlyph = (mesh, id) => {
+    this.requestRender();
     if (mesh.isMesh) {
       const glyph = new Glyph(undefined, undefined, id, this);
       glyph.fromMesh(mesh);
@@ -944,8 +960,7 @@ const Glyphset = function () {
     if (this.morph && this.ready && this.morph.visible) {
       if (glyphCompute && !boundsAreExact && allFramesBoundingBox) {
         this.cachedBoundingBox.copy(allFramesBoundingBox);
-        this.morph.updateWorldMatrix(true, true);
-        this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+        this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(this.morph));
         return this.cachedBoundingBox;
       }
       if (this.boundingBoxUpdateRequired) {
@@ -962,8 +977,7 @@ const Glyphset = function () {
         }
         if (_boundingBox3) {
           this.cachedBoundingBox.copy(_boundingBox3);
-          this.morph.updateWorldMatrix(true, true);
-          this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+          this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(this.morph));
           this.boundingBoxUpdateRequired = false;
         } else
           return undefined;
@@ -979,6 +993,7 @@ const Glyphset = function () {
    * @param {Number} time - Can be any value between 0 to duration.
    */
   this.setMorphTime = time => {
+    this.requestRender();
     if (time > this.duration)
       this.inbuildTime = this.duration;
     else if (0 > time)
@@ -1027,8 +1042,7 @@ const Glyphset = function () {
     const renderer = this.region?.getScene?.()?.getRenderer?.();
     if (!renderer) return;
     renderer.compute(glyphCompute.compute);
-    const colorResult = new Float32Array(
-      await renderer.getArrayBufferAsync(glyphCompute.outputs.color.value));
+    const colorResult = (await readbackGlyphTransform(renderer, glyphCompute)).color;
     // setColorAt(0, ...) is only here to lazily allocate instanceColor the
     // same way the stock InstancedMesh API would; the loop below overwrites
     // every instance (including 0) with the real snapshot right after.
@@ -1062,7 +1076,9 @@ const Glyphset = function () {
    * @return {THREE.Box3}.
    */
   this.setScaleAll = function(scale) {
+    this.requestRender();
     this.globalScale = scale;
+    staticTransformationApplied = false;
     updateMorphGlyphsets(false);
   }
 
@@ -1098,12 +1114,13 @@ const Glyphset = function () {
   /**
    * Update the glyphsets if required the render.
    */
-  this.render = (delta, playAnimation, options) => {
+  this.render = (delta, playAnimation, cameraControls, options) => {
     if (glyphCompute && !renderBuffersInitialized) {
       const renderer = this.region?.getScene?.()?.getRenderer?.();
       if (renderer) {
         renderer.compute(glyphCompute.compute);
         renderBuffersInitialized = true;
+        this.requestRender();
       }
     }
     if (playAnimation == true) {

package/src/primitives/label.js

@@ -1,6 +1,9 @@
-import * as THREE from 'three/webgpu';
-import SpriteTextModule from 'three-spritetext';
-const SpriteText = SpriteTextModule.default || SpriteTextModule;
+import {
+  applyTextSpriteTextureSettings,
+  createTextSprite,
+  releaseTextSprite,
+  setTextSpriteHeight,
+} from '../textSprite';
 
 /**
  * Bitmap labels, this is used with {@link Glyph} to
@@ -21,25 +24,16 @@ const Label = function (textIn, colourIn) {
   let size = 1.0;
   let fontWeight = 500;
   const textHeight = 0.012;
-  if (colourIn)
-    sprite = new SpriteText(text, textHeight, colourIn.getStyle());
-  else
-    sprite = new SpriteText(text, textHeight);
-  sprite.fontFace = "Asap";
-  sprite.fontSize = 90;
-  sprite.fontWeight = fontWeight;
-  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.minFilter = THREE.LinearMipmapLinearFilter; // Smooth downscaling
-  sprite.material.magFilter = THREE.LinearFilter;
-  sprite.material.sizeAttenuation = false;
+  //The canvas resolution is chosen from the size of the text on screen
+  sprite = createTextSprite(text, textHeight,
+    colourIn ? colourIn.getStyle() : undefined, "Asap", fontWeight);
   sprite.center.x = -0.05;
   sprite.center.y = 0;
-
+  //SpriteText replaces the texture whenever the text, colour or size
+  //changes, the settings need to be re-applied to the new texture.
+  const applyTextureSettings = () => {
+    applyTextSpriteTextureSettings(sprite);
+  }
 
 
   /**
@@ -78,7 +72,13 @@ const Label = function (textIn, colourIn) {
    */
   this.setColour = colourIn => {
     if (colourIn) {
-      sprite.color = colourIn.getStyle();
+      //Changing the colour redraws the canvas and creates a new texture,
+      //only do it when the colour has changed.
+      const style = colourIn.getStyle();
+      if (style !== sprite.color) {
+        sprite.color = style;
+        applyTextureSettings();
+      }
       colour = colourIn;
     }
   }
@@ -111,7 +111,8 @@ const Label = function (textIn, colourIn) {
    */
   this.setSize = sizeIn => {
     if (sizeIn > 0.0) {
-      sprite.textHeight = textHeight * sizeIn;
+      //Redraw at the resolution matching the new size
+      setTextSpriteHeight(sprite, textHeight * sizeIn);
       size = sizeIn;
     }
   }
@@ -124,6 +125,7 @@ const Label = function (textIn, colourIn) {
   this.setFontWeight = fontWeightIn => {
     if (fontWeightIn && fontWeightIn !== fontWeight) {
       sprite.fontWeight = fontWeightIn;
+      applyTextureSettings();
       fontWeight = fontWeightIn;
     }
   }
@@ -149,9 +151,10 @@ const Label = function (textIn, colourIn) {
         sprite._canvas.height = 1;
       }
       sprite.text = textIn;
-      sprite.textHeight = textHeight * size;
+      setTextSpriteHeight(sprite, textHeight * size);
       text = textIn;
       if (sprite.material && sprite.material.map) {
+        applyTextureSettings();
         sprite.material.map.needsUpdate = true;
       }
     }
@@ -170,7 +173,19 @@ const Label = function (textIn, colourIn) {
    * Free up the memory
    */
   this.dispose = () => {
-    //sprite.dispose();
+    if (sprite) {
+      releaseTextSprite(sprite);
+      sprite.removeFromParent();
+      if (sprite.material) {
+        sprite.material.map?.dispose();
+        sprite.material.dispose();
+      }
+      //Release the canvas memory
+      if (sprite._canvas) {
+        sprite._canvas.width = 0;
+        sprite._canvas.height = 0;
+      }
+    }
   }
 
   /**

package/src/primitives/lines.js

@@ -53,6 +53,7 @@ const Lines = function () {
    * @param {Number} width - Width of the lines.
    */
 	this.setWidth = width => {
+		this.requestRender();
 		if (this.morph && this.morph.material) {
 			this.morph.material.linewidth = width;
 			this.morph.material.needsUpdate = true;
@@ -67,6 +68,7 @@ const Lines = function () {
    * @param {Number} colour - A hex value of the colour for the points
    */
 	this.addLines = (coords, colour)  => {
+    this.requestRender();
     if (coords && coords.length > 0) {
       const geometry = this.addVertices(coords);
       let mesh = this.getMorph();

package/src/primitives/lines2.js

@@ -16,7 +16,70 @@ import { LineSegmentsGeometry } from '../three/line/LineSegmentsGeometry';
 const Lines2 = function () {
   Lines.call(this);
 	this.isLines2 = true;
-  let positions = new Array(300);
+  //Shared with the GPU buffer of the mesh, edits are made in place
+  let positions = new Float32Array(300);
+
+  //Grow the positions array if required, returns true if it has
+  //been reallocated.
+  const ensureCapacity = (length) => {
+    if (length > positions.length) {
+      //Each segment has two vertices, six values
+      const capacity = Math.ceil(Math.max(positions.length * 2, length) / 6) * 6;
+      const newPositions = new Float32Array(capacity);
+      newPositions.set(positions);
+      positions = newPositions;
+      return true;
+    }
+    return false;
+  }
+
+  //Fill the unused part of the array with degenerate segments at coord
+  const fillUnused = (start, coord) => {
+    for (let index = start; index + 2 < positions.length; index += 3) {
+      positions[index] = coord[0];
+      positions[index + 1] = coord[1];
+      positions[index + 2] = coord[2];
+    }
+  }
+
+  //Update the line distances without allocating new buffers
+  const updateLineDistances = (mesh) => {
+    const geometry = mesh.geometry;
+    const distanceStart = geometry.attributes.instanceDistanceStart;
+    const instanceStart = geometry.attributes.instanceStart;
+    if (!distanceStart || distanceStart.data.array.length !== instanceStart.count * 2) {
+      mesh.computeLineDistances();
+      return;
+    }
+    const distances = distanceStart.data.array;
+    let total = 0;
+    for (let i = 0; i < instanceStart.count; i++) {
+      const offset = i * 6;
+      const dx = positions[offset + 3] - positions[offset];
+      const dy = positions[offset + 4] - positions[offset + 1];
+      const dz = positions[offset + 5] - positions[offset + 2];
+      distances[i * 2] = total;
+      total += Math.sqrt(dx * dx + dy * dy + dz * dz);
+      distances[i * 2 + 1] = total;
+    }
+    distanceStart.data.needsUpdate = true;
+  }
+
+  //Upload the positions after they have been changed
+  const updatePositions = (mesh, reallocated) => {
+    const instanceStart = mesh.geometry.getAttribute('instanceStart');
+    if (reallocated || !instanceStart || instanceStart.data.array !== positions) {
+      //Only happens when the capacity has been increased
+      mesh.geometry.setPositions(positions);
+      mesh.computeLineDistances();
+    } else {
+      instanceStart.data.needsUpdate = true;
+      updateLineDistances(mesh);
+      mesh.geometry.computeBoundingBox();
+      mesh.geometry.computeBoundingSphere();
+    }
+    this.boundingBoxUpdateRequired = true;
+  }
 
   /**
    * Create the line segements using geometry and material.
@@ -47,6 +110,7 @@ const Lines2 = function () {
    * @param {Number} width - Width of the lines.
    */
 	this.setWidth = width => {
+		this.requestRender();
 		if (this.morph && this.morph.material) {
 			this.morph.material.linewidth = width;
 			this.morph.material.needsUpdate = true;
@@ -57,12 +121,14 @@ const Lines2 = function () {
    * Add new vertices into the array
    */
   this.addVertices = function(coords) {
+    this.requestRender();
     if (coords && coords.length) {
       let mesh = this.getMorph();
       if (!mesh) {
         this.drawRange = 0;
       }
       let index = this.drawRange * 3;
+      const reallocated = ensureCapacity(index + coords.length * 3);
       coords.forEach(coord => {
         positions[index++] = coord[0];
         positions[index++] = coord[1];
@@ -71,19 +137,12 @@ const Lines2 = function () {
       });
       //fill the rest of the array.
       if (!mesh) {
-        while (index < 300) {
-          positions[index++] = coords[0][0];
-          positions[index++] = coords[0][1];
-          positions[index++] = coords[0][2];
+        fillUnused(index, coords[0]);
+      } else {
+        if (reallocated) {
+          fillUnused(index, coords[0]);
         }
-      }
-
-      if (mesh) {
-        mesh.geometry.setPositions(positions);
-        mesh.computeLineDistances();
-        mesh.geometry.computeBoundingBox();
-        mesh.geometry.computeBoundingSphere();
-        this.boundingBoxUpdateRequired = true;
+        updatePositions(mesh, reallocated);
       }
     }
     return positions;
@@ -117,6 +176,7 @@ const Lines2 = function () {
    * Edit Vertice in index.
    */
   this.editVertices = function(coords, i) {
+    this.requestRender();
     if (coords && coords.length) {
       let mesh = this.getMorph();
       const maxIndex = i + coords.length - 1;
@@ -130,17 +190,8 @@ const Lines2 = function () {
           positions[index++] = coord[1];
           positions[index++] = coord[2];
         });
-        index = this.drawRange * 3;
-        while (index < 300) {
-          positions[index++] = coords[0][0];
-          positions[index++] = coords[0][1];
-          positions[index++] = coords[0][2];
-        }
-        mesh.geometry.setPositions(positions);
-        mesh.computeLineDistances();
-        mesh.geometry.computeBoundingBox();
-        mesh.geometry.computeBoundingSphere();
-        this.boundingBoxUpdateRequired = true;
+        fillUnused(this.drawRange * 3, coords[0]);
+        updatePositions(mesh, false);
       }
     }
     return positions;
@@ -154,6 +205,7 @@ const Lines2 = function () {
    * @param {Number} colour - A hex value of the colour for the points
    */
 	this.addLines = (coords, colour)  => {
+    this.requestRender();
     if (coords && coords.length > 0) {
       this.addVertices(coords);
       let mesh = this.getMorph();

package/src/primitives/lod.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three/webgpu';
-import { toBufferGeometry, updateMorphColorAttribute } from '../utilities';
+import { keepIndexType, toBufferGeometry, updateMorphColorAttribute } from '../utilities';
 import { LineSegments } from '../three/line/LineSegments';
 
 /**
@@ -34,6 +34,7 @@ const LOD = function (parent) {
    */
   this.addLevel = (object, distanceIn) => {
     if (object) {
+      keepIndexType(object.geometry);
       const distance = Math.abs(distanceIn);
       let l;
       for (l = 0; l < this.levels.length; l++) {
@@ -59,6 +60,7 @@ const LOD = function (parent) {
    */
   this.levelLoaded = (object, distanceIn) => {
     if (object) {
+      keepIndexType(object.geometry);
       const distance = Math.abs(distanceIn);
       for (let l = 0; l < this.levels.length; l++) {
         if (distance === this.levels[l].distance) {
@@ -70,6 +72,7 @@ const LOD = function (parent) {
         }
       }
       this.checkTransparentMesh();
+      this._parent?.requestRender?.();
     }
   }
 
@@ -288,10 +291,13 @@ const LOD = function (parent) {
         this._material = material;
         if (this._secondaryMaterial) {
           this._secondaryMaterial.dispose();
+          this._secondaryMaterial = undefined;
+        }
+        if (material.transparent || this.levels.some((level) => level.secondaryMesh)) {
+          this._secondaryMaterial = material.clone()
+          this._secondaryMaterial.side = THREE.FrontSide;
+          this._secondaryMaterial.transparent = true;
         }
-        this._secondaryMaterial = material.clone()
-        this._secondaryMaterial.side = THREE.FrontSide;
-        this._secondaryMaterial.transparent = true;
         this.levels.forEach((level) => {
           if (level.morph) {
             level.morph.material = this._material;
@@ -384,6 +390,7 @@ const LOD = function (parent) {
       if (this._currentLevel != visibleIndex) {
         this._currentLevel = visibleIndex;
         this.checkTransparentMesh();
+        this._parent?.requestRender?.();
       }
     }
   }

package/src/primitives/marker.js

@@ -2,9 +2,11 @@ import * as THREE from 'three/webgpu';
 import myImage from '../assets/mapMarker.svg';
 import { createNewSpriteText } from '../utilities';
 import { ZincObject } from './zincObject';
+import { requestRenderAll } from '../renderRequests';
+import { releaseTextSprite } from '../textSprite';
 
 const textureLoader = new THREE.TextureLoader();
-const texture = textureLoader.load(myImage);
+const texture = textureLoader.load(myImage, requestRenderAll);
 texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
@@ -153,6 +155,7 @@ const Marker = function(zincObject) {
         userImage.crossOrigin = "anonymous"
         userImage.onload = () => {
           this.setImageForUserSprite(userImage, size);
+          this.parent?.requestRender?.();
         };
         userImage.src = url;
       } else {
@@ -173,6 +176,7 @@ const Marker = function(zincObject) {
       sprite = undefined;
     }
     if (label) {
+      releaseTextSprite(label);
       label.material.map.dispose();
       label.material.dispose();
       label = undefined;
@@ -188,6 +192,7 @@ const Marker = function(zincObject) {
       //remove label
       if (label) {
         this.morph.remove(label);
+        releaseTextSprite(label);
         label.material.map.dispose();
         label.material.dispose();
         label = undefined;

package/src/primitives/markerCluster.js

@@ -1,10 +1,12 @@
 import * as THREE from 'three/webgpu';
 import { ZincObject } from './zincObject';
+import { requestRenderAll } from '../renderRequests';
+import { releaseTextSprite } from '../textSprite';
 import mapMarkerOrange from '../assets/mapMarkerOrange.svg';
 import { createNewSpriteText } from '../utilities';
 
 const textureLoader = new THREE.TextureLoader();
-const texture = textureLoader.load(mapMarkerOrange);
+const texture = textureLoader.load(mapMarkerOrange, requestRenderAll);
 texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
@@ -96,6 +98,7 @@ const MarkerCluster = function(sceneIn) {
     if (sprite.label === undefined || (number !== sprite.number)) {
       if (sprite.label) {
         sprite.group.remove(sprite.label);
+        releaseTextSprite(sprite.label);
         sprite.label.material.map.dispose();
         sprite.label.material.dispose();
       }
@@ -178,6 +181,7 @@ const MarkerCluster = function(sceneIn) {
         let clusters = [];
         getCluster({...this.markers}, clusters);
         drawClusters(clusters);
+        scene?.invalidate?.();
         start = Date.now();
         this.markerUpdateRequired = false;
       }