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

package/src/primitives/pointset.js

@@ -2,7 +2,7 @@ import * as THREE from 'three/webgpu';
 import { Label } from './label';
 import { InstancedPoints } from '../three/InstancedPoints';
 import { ZincObject } from './zincObject';
-import { getCircularTexture, toBufferGeometry } from '../utilities';
+import { getCircularTexture, toBufferGeometry, updateWorldMatrixFromAncestors } from '../utilities';
 import { createInstancedPointsMaterial } from '../tsl/pointsMaterial';
 
 //Maximum number of points a programmatically built (addPoints) Pointset can
@@ -124,27 +124,26 @@ const Pointset = function () {
     if (morphVertices) {
       const bottomPositions = positionFrames[bottomFrame];
       const topPositions = positionFrames[topFrame];
+      //pointPositions shares its array with instancePosition
       const positions = mesh.pointPositions;
       const length = activeCount * 3;
       for (let i = 0; i < length; i++) {
         positions[i] = proportion * bottomPositions[i] + (1 - proportion) * topPositions[i];
       }
-      const instancePosition = mesh.geometry.getAttribute('instancePosition');
-      instancePosition.array.set(positions.subarray(0, length));
-      instancePosition.needsUpdate = true;
+      mesh.geometry.getAttribute('instancePosition').needsUpdate = true;
       this.boundingBoxUpdateRequired = true;
     }
     if (morphColours && colorFrames) {
       const bottomColors = colorFrames[Math.min(bottomFrame, colorFrames.length - 1)];
       const topColors = colorFrames[Math.min(topFrame, colorFrames.length - 1)];
-      for (let i = 0; i < activeCount; i++) {
-        const index = i * 3;
-        _tempColor.setRGB(
-          proportion * bottomColors[index] + (1 - proportion) * topColors[index],
-          proportion * bottomColors[index + 1] + (1 - proportion) * topColors[index + 1],
-          proportion * bottomColors[index + 2] + (1 - proportion) * topColors[index + 2],
-        );
-        mesh.setColorAt(i, _tempColor);
+      if (!mesh.instanceColor) {
+        mesh.setColorAt(0, _tempColor);
+      }
+      //Write the blended colours straight into the instance colours
+      const colors = mesh.instanceColor.array;
+      const length = activeCount * 3;
+      for (let i = 0; i < length; i++) {
+        colors[i] = proportion * bottomColors[i] + (1 - proportion) * topColors[i];
       }
       mesh.instanceColor.needsUpdate = true;
     }
@@ -188,14 +187,13 @@ const Pointset = function () {
 
     const mesh = new InstancedPoints(quadGeometry, material, numberOfPoints);
     mesh.count = numberOfPoints;
-    mesh.pointPositions = new Float32Array(numberOfPoints * 3);
-    mesh.pointPositions.set(positionFrames[0]);
-    mesh.userData = this;
-    this.drawRange = numberOfPoints;
-
     const instancePosition = quadGeometry.getAttribute('instancePosition');
     instancePosition.array.set(positionFrames[0]);
     instancePosition.needsUpdate = true;
+    //Share the array to avoid keeping and updating two copies
+    mesh.pointPositions = instancePosition.array;
+    mesh.userData = this;
+    this.drawRange = numberOfPoints;
 
     const initialColorFrame = colorFrames ? colorFrames[0] : extractStaticColorFrame(geometry);
     if (initialColorFrame) {
@@ -230,7 +228,8 @@ const Pointset = function () {
       label.setPosition(coord[0], coord[1], coord[2]);
       const sprite = label.getSprite();
       sprite.material.sizeAttenuation = false;
-      sprite.material.alphaTest = 0.5;
+      //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 = labelDepthTest;
@@ -261,6 +260,7 @@ const Pointset = function () {
    * @param {Number} colour - A hex value of the colour for the points
    */
   this.addPoints = (coords, labels, colour) => {
+    this.requestRender();
     if (coords && coords.length > 0) {
       let mesh = this.getMorph();
       let current = this.drawRange;
@@ -272,7 +272,7 @@ const Pointset = function () {
         material.color.set(colour);
         material.alphaTest = 0.5;
         mesh = new InstancedPoints(quadGeometry, material, DEFAULT_CAPACITY);
-        mesh.pointPositions = new Float32Array(DEFAULT_CAPACITY * 3);
+        mesh.pointPositions = quadGeometry.getAttribute('instancePosition').array;
         mesh.count = 0;
         mesh.userData = this;
         this.setMorph(mesh);
@@ -281,9 +281,6 @@ const Pointset = function () {
       coords.forEach(coord => {
         if (this.drawRange < DEFAULT_CAPACITY) {
           instancePosition.setXYZ(this.drawRange, coord[0], coord[1], coord[2]);
-          mesh.pointPositions[this.drawRange * 3] = coord[0];
-          mesh.pointPositions[this.drawRange * 3 + 1] = coord[1];
-          mesh.pointPositions[this.drawRange * 3 + 2] = coord[2];
           this.drawRange++;
         }
       });
@@ -311,6 +308,7 @@ const Pointset = function () {
    * @param {Number} hex - hex value of color to be set
    */
   this.setColourHex = function(hex) {
+    this.requestRender();
     this._lod._material.color.setHex(hex);
     if (this._lod._secondaryMaterial) {
       this._lod._secondaryMaterial.color.setHex(hex);
@@ -328,6 +326,7 @@ const Pointset = function () {
    * @param {THREE.Color} colour - colour to be set
    */
   this.setColour = (colour) => {
+    this.requestRender();
     this._lod.setColour(colour);
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -343,6 +342,7 @@ const Pointset = function () {
    * should be on or off.
    */
   this.setLabelDepthTest = (flag) => {
+    this.requestRender();
     labelDepthTest = flag;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -357,6 +357,7 @@ const Pointset = function () {
    * @param {Number} fontWeightIn - Default value is 700
    */
   this.setLabelFontWeight = (fontWeightIn) => {
+    this.requestRender();
     fontWeight = fontWeightIn;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -372,6 +373,7 @@ const Pointset = function () {
    * value is 1.
    */
   this.setLabelSize = (size) => {
+    this.requestRender();
     labelSize = size;
     for (let i = 0; i < labelSets.length; i++) {
       if (labelSets[i]) {
@@ -386,6 +388,7 @@ const Pointset = function () {
    * @param {boolean} flag - default value is true
    */
     this.displayLabels = (flag) => {
+      this.requestRender();
       labelVisibility = flag;
       for (let i = 0; i < labelSets.length; i++) {
         if (labelSets[i]) {
@@ -399,6 +402,7 @@ const Pointset = function () {
    * @param {Number} size - size to be set.
    */
   this.setSize = size => {
+    this.requestRender();
     if (this.morph && this.morph.material) {
       this.morph.material.size = size;
       this.morph.material.userData.uniforms.pointSize.value = size;
@@ -413,6 +417,7 @@ const Pointset = function () {
    * should be on or off.
    */
   this.setSizeAttenuation = flag => {
+    this.requestRender();
     if (this.morph && this.morph.material) {
       this.morph.material.sizeAttenuation = flag;
       this.morph.material.userData.uniforms.sizeAttenuation.value = flag ? 1 : 0;
@@ -438,6 +443,7 @@ const Pointset = function () {
    * Edit Vertice in index.
    */
   this.editVertices = function(coords, i) {
+    this.requestRender();
     if (coords && coords.length) {
       const mesh = this.getMorph();
       const maxIndex = i + coords.length - 1;
@@ -452,9 +458,6 @@ const Pointset = function () {
             label.setPosition(coord[0], coord[1], coord[2]);
           }
           instancePosition.setXYZ(index, coord[0], coord[1], coord[2]);
-          mesh.pointPositions[index * 3] = coord[0];
-          mesh.pointPositions[index * 3 + 1] = coord[1];
-          mesh.pointPositions[index * 3 + 2] = coord[2];
           //Keep the base frame consistent for any pointset that also
           //happens to be time varying.
           if (positionFrames[0]) {
@@ -474,6 +477,7 @@ const Pointset = function () {
    * Delete a vertex in index.
    */
     this.deleteVertices = function(index) {
+      this.requestRender();
       const mesh = this.getMorph();
       if (!mesh || 0 > index || index >= this.drawRange) {
         return this.drawRange;
@@ -481,7 +485,8 @@ const Pointset = function () {
       const instancePosition = mesh.geometry.getAttribute('instancePosition');
       const end = this.drawRange - 1;
       instancePosition.array.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
-      mesh.pointPositions.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
+      if (mesh.pointPositions !== instancePosition.array)
+        mesh.pointPositions.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
       if (mesh.instanceColor) {
         mesh.instanceColor.array.copyWithin(index * 3, (index + 1) * 3, this.drawRange * 3);
         mesh.instanceColor.needsUpdate = true;
@@ -560,8 +565,7 @@ const Pointset = function () {
       if (this.boundingBoxUpdateRequired) {
         this._b1.setFromArray(mesh.pointPositions.subarray(0, this.drawRange * 3));
         this.cachedBoundingBox.copy(this._b1);
-        mesh.updateWorldMatrix(true, true);
-        this.cachedBoundingBox.applyMatrix4(mesh.matrixWorld);
+        this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(mesh));
         this.cachedBoundingBox.getCenter(this.center);
         this.radius = this.center.distanceTo(this.cachedBoundingBox.max);
         this.boundingBoxUpdateRequired = false;
@@ -586,6 +590,7 @@ const Pointset = 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) {

package/src/primitives/texturePrimitive.js

@@ -70,4 +70,16 @@ const TexturePrimitive = function (textureIn) {
 
 TexturePrimitive.prototype = Object.create(ZincObject.prototype);
 TexturePrimitive.prototype.constructor = TexturePrimitive;
+
+/**
+ * Free the textures and the other allocated memory.
+ */
+TexturePrimitive.prototype.dispose = function() {
+  const textures = new Set(this.textureList);
+  if (this.texture) textures.add(this.texture);
+  textures.forEach(texture => texture.dispose());
+  this.texture = undefined;
+  this.textureList = [];
+  ZincObject.prototype.dispose.call(this);
+}
 export { TexturePrimitive };

package/src/primitives/textureSlides.js

@@ -2,6 +2,7 @@ import * as THREE from 'three/webgpu';
 //import * as shader from '../shaders/textureSlide.js';
 import { createWebGPUMaterial } from '../tsl/textureSlides.js';
 import { TexturePrimitive } from './texturePrimitive';
+import { updateWorldMatrixFromAncestors } from '../utilities';
 
 
 const cloneData3DTexture = (sourceTex) => {
@@ -73,6 +74,7 @@ const TextureSlides = function (textureIn) {
    * @param {SLIDE_SETTINGS} slideSettings - An array to each slide settings.
    */
   this.createSlides = slideSettings => {
+    this.requestRender();
     slideSettings.forEach(slide => this.createSlide(slide));
   }
 
@@ -123,6 +125,7 @@ const TextureSlides = function (textureIn) {
    * @param {SLIDE_SETTINGS} settings - s.
    */
   this.modifySlideSettings = (settings) => {
+    this.requestRender();
     if (settings && settings.id &&
       settings.id in idTextureMap &&
       idTextureMap[settings.id]) {
@@ -139,6 +142,7 @@ const TextureSlides = function (textureIn) {
    * created mesh's id.
    */
   this.createSlide = settings => {
+    this.requestRender();
     if (this.texture && this.texture.isTextureArray && this.texture.isReady()) {
       if (settings && settings.direction && settings.value !== undefined) {
         const geometry = new THREE.PlaneGeometry(1, 1);
@@ -238,6 +242,7 @@ const TextureSlides = function (textureIn) {
    * @param {Slide} slide - Slide to be remvoed
    */
   this.removeSlide = slide => {
+    this.requestRender();
     if (slide) {
       this.removeSlideWithId(slide.id);
     }
@@ -249,6 +254,7 @@ const TextureSlides = function (textureIn) {
     * @param {Number} id - id of slide to be remvoed
     */
   this.removeSlideWithId = id => {
+    this.requestRender();
     if (this.morph && id in idTextureMap && idTextureMap[id]) {
       if (this.morph.getObjectById(id)) {
         const slide = idTextureMap[id];
@@ -277,6 +283,11 @@ const TextureSlides = function (textureIn) {
       if (slide.material)
         slide.material.dispose();
     });
+    if (maskTexture) {
+      maskTexture.dispose();
+      maskTexture = undefined;
+      maskEnabled = false;
+    }
     TexturePrimitive.prototype.dispose.call(this);
     this.boundingBoxUpdateRequired = true;
   }
@@ -328,14 +339,14 @@ const TextureSlides = function (textureIn) {
         expandBoxWithSettings(this.cachedBoundingBox, slide.material.userData.uniforms,
           vector);
       });
-      this.morph.updateMatrixWorld (true, true);
-      this.cachedBoundingBox.applyMatrix4(this.morph.matrixWorld);
+      this.cachedBoundingBox.applyMatrix4(updateWorldMatrixFromAncestors(this.morph));
       this.boundingBoxUpdateRequired = false;
     }
     return this.cachedBoundingBox;
   }
 
   this.applyTransformation = (rotation, position, scale) => {
+    this.requestRender();
     const matrix = new THREE.Matrix4();
     matrix.set(
       rotation[0],
@@ -364,6 +375,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setRenderOrder = (order) => {
+    this.requestRender();
     //multiilayers
     this.morph.renderOrder = order;
   }
@@ -389,6 +401,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.showEdges = (color) => {
+    this.requestRender();
     if (!edgesLine) {
       const geometry = new THREE.BoxGeometry( 1, 1, 1 );
       geometry.translate(0.5, 0.5, 0.5);
@@ -403,6 +416,7 @@ const TextureSlides = function (textureIn) {
 
 
   this.setUniformsValue = (name, val) => {
+    this.requestRender();
     this.morph.children.forEach((mesh) => {
       const material = mesh.material;
       if (material.userData.uniforms) {
@@ -417,6 +431,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.discardAlphaPixel = (flag) => {
+    this.requestRender();
     discardAlpha = flag;
     this.setUniformsValue("discardAlpha", discardAlpha);
   }
@@ -426,6 +441,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setBrightness = (brightnessIn) => {
+    this.requestRender();
     brightness = brightnessIn;
     this.setUniformsValue("brightness", brightness);
   }
@@ -435,6 +451,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setContrast = (contrastIn) => {
+    this.requestRender();
     if (contrast >= 0 ) {
       contrast = contrastIn;
       this.setUniformsValue("contrast", contrast);
@@ -446,6 +463,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setNumberOfChannels = (numbersIn) => {
+    this.requestRender();
     nChannels = numbersIn;
     this.setUniformsValue("nChannels", nChannels);
   }
@@ -455,6 +473,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.setMask = (maskTextureIn) => {
+    this.requestRender();
     maskTexture = maskTextureIn;
     maskEnabled = maskTexture ? true : false;
     this.morph.children.forEach((mesh) => {
@@ -470,6 +489,7 @@ const TextureSlides = function (textureIn) {
   }
 
   this.hideEdges = () => {
+    this.requestRender();
     if (edgesLine) {
       edgesLine.visible = false;
     }
@@ -508,6 +528,7 @@ const TextureSlides = function (textureIn) {
    * Update the glyphsets if required the render.
    */
   this.setMorphTime = (time) => {
+    this.requestRender();
     let newTime = time;
     if (time > this.duration)
       newTime = this.duration;
@@ -524,7 +545,7 @@ const TextureSlides = function (textureIn) {
   /**
    * Update the glyphsets if required the render.
    */
-  this.render = (delta, playAnimation, options) => {
+  this.render = (delta, playAnimation, cameraControls, options) => {
    //console.log("render", delta, playAnimation, this.textureList)
     if (playAnimation == true && this.timeEnabled &&
         this.textureList.length > 1) {

package/src/primitives/textureVolume.js

@@ -17,6 +17,8 @@ const TextureSlides = function (textureIn) {
   TexturePrimitive.call(this, textureIn);
   this.isTextureVolume = true;
   const textureSettings = [];
+  //Map of mesh id to slide mesh
+  const idTextureMap = {};
   this.morph = new THREE.Group();
   this.group = this.morph;
   this.morph.userData = this;

package/src/primitives/tubeLines.js

@@ -44,6 +44,7 @@ const TubeLines = 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;
@@ -58,6 +59,7 @@ const TubeLines = function () {
      * can be any value between from 0 to 1.0.
      */
     this.setAlpha = function (alpha) {
+        this.requestRender();
         let mesh = this.getMorph();
         mesh.material.opacity = alpha;
         mesh.material.transparent = alpha < 1.0;
@@ -69,6 +71,7 @@ const TubeLines = function () {
      * @param {Boolean} wireframe
      */
     this.setWireframe = (wireframe) => {
+        this.requestRender();
         let mesh = this.getMorph();
         mesh.material.wireframe = wireframe;
     }
@@ -80,6 +83,7 @@ const TubeLines = function () {
      * @param {Integer} radialSegments The number of segments that make up the cross-section.
      */
     this.setTubeLines = (radius, radialSegments) => {
+        this.requestRender();
         if (radius && radialSegments) {
             const { geometryIn } = dataIn;
             let mesh = this.getMorph();