zincjs 2.4.1-beta.2 → 2.4.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.4.1-beta.2",
+  "version": "2.4.1-beta.4",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",

package/src/loaders/GLTFToZincJSLoader.js

@@ -1,13 +1,63 @@
-import * as THREE from 'three/webgpu';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { Geometry } from '../primitives/geometry';
 import { Lines } from '../primitives/lines';
 import { Pointset } from '../primitives/pointset';
+import { applyMorphColorNode } from '../tsl/morphColorMaterial';
 
 const GLTFToZincJSLoader = function () {
 
   const _this = this;
 
+  /*
+   * glTF stores morph targets as offsets from the base attribute and
+   * GLTFLoader keeps them that way (morphTargetsRelative), but zinc expects
+   * absolute morph targets. GLTFLoader also only keeps the target names in
+   * morphTargetDictionary, while zinc builds its animation clip from the
+   * attribute names, so copy the names back onto the attributes.
+   */
+  const convertMorphTargets = (object) => {
+    const geometry = object.geometry;
+    if (!geometry || !geometry.morphAttributes) return;
+    const names = [];
+    if (object.morphTargetDictionary) {
+      for (const key in object.morphTargetDictionary) {
+        names[object.morphTargetDictionary[key]] = key;
+      }
+    }
+    for (const attributeName in geometry.morphAttributes) {
+      const base = geometry.attributes[attributeName];
+      geometry.morphAttributes[attributeName].forEach((attribute, i) => {
+        if (geometry.morphTargetsRelative && base) {
+          const array = attribute.array;
+          const baseArray = base.array;
+          const length = Math.min(array.length, baseArray.length);
+          for (let j = 0; j < length; j++) {
+            array[j] += baseArray[j];
+          }
+          attribute.needsUpdate = true;
+        }
+        if (names[i] !== undefined) attribute.name = names[i];
+      });
+    }
+    geometry.morphTargetsRelative = false;
+  }
+
+  /*
+   * Zinc renders colour morphs with its own colorNode (see geometry.js and
+   * lines.js), so swap it into the materials GLTFLoader created. Without it
+   * the colours stay at the first frame.
+   */
+  const applyMorphColourMaterial = (object) => {
+    const setup = (material) => {
+      //Same as geometry.js - vertexColors would multiply the blend by the
+      //static colour attribute.
+      material.vertexColors = false;
+      return applyMorphColorNode(material);
+    };
+    object.material = Array.isArray(object.material) ?
+      object.material.map(setup) : setup(object.material);
+  }
+
   this.parseGLTFObjects = (object, region, depth, finishCallback) => {
     let childRegion = region;
     if (depth !== 0) {
@@ -36,10 +86,14 @@ const GLTFToZincJSLoader = function () {
           let localTimeEnabled = false;
           let localMorphColour = false;
           if (object.geometry && object.geometry.morphAttributes) {
+            convertMorphTargets(object);
             localTimeEnabled = object.geometry.morphAttributes.position ? true : false;
             localMorphColour = object.geometry.morphAttributes.color ? true : false;
           }
-          zincGeometry.setMesh(object.clone(), localTimeEnabled, localMorphColour);
+          const mesh = object.clone();
+          if (localMorphColour && !zincGeometry.isPointset)
+            applyMorphColourMaterial(mesh);
+          zincGeometry.setMesh(mesh, localTimeEnabled, localMorphColour);
           const morph = zincGeometry.getMorph();
           zincGeometry.groupName = morph.name;
           morph.matrixAutoUpdate = true;
@@ -69,13 +123,16 @@ const GLTFToZincJSLoader = function () {
    * @param {String} url - URL to the GLTF file
    * @param {Function} finishCallback - Callback function which will be called
    * once the glyphset is succssfully load in.
+   * @param {Function} isCancelled - Optional function returning true if this
+   * load has been cancelled, the loaded content will be discarded.
    */
-  this.load = (scene, region, url, finishCallback, allCompletedCallback, options) => {
+  this.load = (scene, region, url, finishCallback, allCompletedCallback, options, isCancelled) => {
     const path = url.substring(0, url.lastIndexOf("/") + 1);
     const filename = url.substring(url.lastIndexOf("/") + 1, url.length);
     const loader = new GLTFLoader().setPath(path);
 
     loader.load( filename, function ( gltf ) {
+      if (isCancelled && isCancelled()) return;
       console.log(gltf)
       _this.parseGLTFObjects(gltf.scene, region, 0, finishCallback);
       _this.setCamera(scene);

package/src/loaders/JSONLoader.js

@@ -302,7 +302,7 @@ Object.assign( JSONLoader.prototype, {
 
 					}
 
-					const attribute = new Float32BufferAttribute( array, 3 );
+					const attribute = new BufferAttribute( array, 3 );
 					attribute.name = json.morphTargets[ i ].name;
 					morphPositions.push( attribute );
 
@@ -321,7 +321,7 @@ Object.assign( JSONLoader.prototype, {
 						const srcNormals = json.morphNormals[ i ].normals;
 						const array = Float32Array.from( srcNormals );
 
-						const attribute = new Float32BufferAttribute( array, 3 );
+						const attribute = new BufferAttribute( array, 3 );
 						attribute.name = morphPositions[ i ].name;
 						morphNormals[ i ] = attribute;
 

package/src/loaders/niftiReader.js

@@ -234,7 +234,7 @@ function createDataTexture(data, width, height, depth, isRGB) {
   if (!isRGB) {
     dataTexture.format = THREE.RedFormat;
   }
-  dataTexture.colorSpace = THREE.SRGBColorSpace;
+  dataTexture.colorSpace = THREE.NoColorSpace;
   dataTexture.minFilter = THREE.NearestFilter;
   dataTexture.magFilter = THREE.NearestFilter;
   dataTexture.needsUpdate = true;
@@ -244,7 +244,7 @@ function createDataTexture(data, width, height, depth, isRGB) {
 function createTextureArray(sources) {
   if (sources?.data) {
     const tArray = new TextureArray();
-    const dataTexutre = new createDataTexture(
+    const dataTexutre = createDataTexture(
         sources.data, sources.width, sources.height, sources.depth);
     tArray.setDataTexture(dataTexutre);
     tArray.size = {

package/src/loaders/primitivesLoader.js

@@ -124,7 +124,7 @@ const IndexedSourcesHandler = function(urlIn, crossOrigin, onDownloadedCallback)
       if (data) {
         processItemDownloaded(item);
       } else {
-        processItemError(error);
+        processItemError(item);
       }
     } else if (downloading) {
       //quene it up

package/src/primitives/geometry.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three/webgpu';
 import { toBufferGeometry } from '../utilities';
-import { applyMorphColorNode } from '../tls/morphColorMaterial';
+import { applyMorphColorNode } from '../tsl/morphColorMaterial';
 import { ZincObject} from './zincObject';
 
 const createMeshForGeometry =  (geometryIn, materialIn, options) => {

package/src/primitives/glyph.js

@@ -27,6 +27,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
   let labelString = undefined;
   this.isGlyph = true;
   let _position = [0, 0, 0];
+  let _colour = undefined;
 
   /**
    * Create a glyph using mesh
@@ -72,7 +73,9 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
   /**
    * Display label with the choosen colour. It will replace the current
    * label.
-   * @param   {THREE.Color} colour - Colour for the label.
+   * @param   {THREE.Color} colour - Colour to fall back to for the label if
+   * this glyph doesn't already have its own colour (see setColour()/
+   * getColour()) - e.g. genuinely no colour data at all for this glyphset.
    */
   this.showLabel = (colour) => {
     if (label) {
@@ -82,7 +85,7 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
       label = undefined;
     }
     if (labelString && (typeof labelString === 'string' || labelString instanceof String)) {
-      label = new Label(labelString, colour);
+      label = new Label(labelString, _colour || colour);
       label.setPosition(_position[0], _position[1], _position[2]);
       const sprite = label.getSprite();
       sprite.material.alphaTest = 0.5;
@@ -158,20 +161,31 @@ const Glyph = function (geometry, materialIn, idIn, glyphsetIn) {
   }
 
   /**
-   * Set the color of the glyph and its label.
+   * Set the color of the glyph and its label. Remembered (see showLabel())
+   * so a label created/recreated later - e.g. by Glyphset.showLabel(),
+   * which otherwise only has a single shared material colour to fall back
+   * on - starts out with this glyph's own correct colour rather than that
+   * shared one.
    *
    * @param {THREE.Color} color - Colour to be set.
    */
   this.setColour = (color) => {
+    _colour = color ? color.clone() : undefined;
     if (label)
       label.setColour(color);
     if (this.secondaryMesh && this.secondaryMesh.material)
-      this.secondaryMesh.material.color = colour;
+      this.secondaryMesh.material.color = color;
     if (this.geometry) {
       this.geometry.colorsNeedUpdate = true;
     }
   }
 
+  /**
+   * Get the last colour set via setColour(), if any.
+   * @return {THREE.Color|undefined}
+   */
+  this.getColour = () => _colour;
+
   /**
    * Clear and free its memory.
    */