zincjs 2.4.0 → 2.4.1-beta.0

package/src/loaders/OBJLoader.js

@@ -12,7 +12,7 @@ import {
 	Points,
 	PointsMaterial,
 	Vector3
-} from 'three';
+} from 'three/webgpu';
 
 // o object_name | g group_name
 const _object_pattern = /^[og]\s*(.+)?/;

package/src/loaders/STLLoader.js

@@ -6,7 +6,7 @@ import {
 	Loader,
 	LoaderUtils,
 	Vector3
-} from 'three';
+} from 'three/webgpu';
 
 /**
  * Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.

package/src/loaders/niftiReader.js

@@ -1,5 +1,5 @@
 import * as nifti from 'nifti-reader-js';
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { TextureArray } from '../texture/textureArray';
 import { TextureSlides } from '../primitives/textureSlides';
 
@@ -228,12 +228,13 @@ function getTransformationFromHeader(header, options) {
 }
 
 function createDataTexture(data, width, height, depth, isRGB) {
-  const dataTexture = new THREE.DataArrayTexture(
+  const dataTexture = new THREE.Data3DTexture(
     data, width, height, depth);
   dataTexture.anisotropy = 4;
   if (!isRGB) {
     dataTexture.format = THREE.RedFormat;
   }
+  dataTexture.colorSpace = THREE.SRGBColorSpace;
   dataTexture.minFilter = THREE.NearestFilter;
   dataTexture.magFilter = THREE.NearestFilter;
   dataTexture.needsUpdate = true;
@@ -243,8 +244,9 @@ function createDataTexture(data, width, height, depth, isRGB) {
 function createTextureArray(sources) {
   if (sources?.data) {
     const tArray = new TextureArray();
-    tArray.impl = new createDataTexture(
-      sources.data, sources.width, sources.height, sources.depth);
+    const dataTexutre = new createDataTexture(
+        sources.data, sources.width, sources.height, sources.depth);
+    tArray.setDataTexture(dataTexutre);
     tArray.size = {
       width: sources.width,
       height: sources.height,

package/src/loaders/primitivesLoader.js

@@ -1,5 +1,6 @@
 import { JSONLoader } from './JSONLoader';
-import * as THREE from 'three';
+import { mergeGeometries as mergeBufferGeometries } from '../utilities';
+import * as THREE from 'three/webgpu';
 const FileLoader = THREE.FileLoader;
 
 const mergeGlyphData = (glyphData) => {
@@ -30,16 +31,13 @@ const mergeGlyphData = (glyphData) => {
 }
 
 const mergeGeometries = (geometries) => {
-  const merge = (geometry1, geometry2) => {
-    geometry1.merge(geometry2);
-  }
-
   if (geometries && geometries.length > 0) {
-    while (geometries.length > 1) {
-      const geometry2 = geometries.splice(1,1);
-      merge(geometries[0], geometry2[0]);
+    if (geometries.length === 1) {
+      return geometries[0];
     }
-    return geometries[0];
+    const merged = mergeBufferGeometries(geometries);
+    geometries.forEach((geometry) => geometry.dispose());
+    return merged;
   }
   return undefined;
 }

package/src/minimap.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { copyVector3sArray } from "./utilities";
 
 /**

package/src/primitives/geometry.js

@@ -1,6 +1,6 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { toBufferGeometry } from '../utilities';
-import { augmentMorphColor } from './augmentShader';
+import { applyMorphColorNode } from '../tls/morphColorMaterial';
 import { ZincObject} from './zincObject';
 
 const createMeshForGeometry =  (geometryIn, materialIn, options) => {
@@ -24,10 +24,16 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
         side : THREE.DoubleSide
       });
     }
-    //material = PhongToToon(material);
     if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
-      material.vertexColors = true;
-      material.onBeforeCompile = augmentMorphColor;
+      //Force vertexColors off (even if materialIn already had it true) -
+      //NodeMaterial would otherwise multiply our morph colour blend by
+      //the static, non-morph 'color' attribute (vertexColor() in
+      //setupDiffuseColor), which zeroes out whatever channel that static
+      //colour never needed (e.g. blue on an originally pure-red vertex),
+      //turning parts of the blend black instead of the intended hue.
+      //applyMorphColorNode's colorNode fully replaces vertex colouring.
+      material.vertexColors = false;
+      material = applyMorphColorNode(material);
     }
   } else {
     let videoTexture = geometry._video.createCanvasVideoTexture();
@@ -79,30 +85,6 @@ const Geometry = function () {
 		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
 	}
 
-  /**
-   * Calculate the UV for texture rendering.
-   */
-	this.calculateUVs = () => {
-    //Multilayers
-		this.geometry.computeBoundingBox();
-		const max = this.geometry.boundingBox.max, min = this.geometry.boundingBox.min;
-		const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
-		const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
-		this.geometry.faceVertexUvs[0] = [];
-		for (let i = 0; i < this.geometry.faces.length ; i++) {
-		    const v1 = this.geometry.vertices[this.geometry.faces[i].a];
-		    const v2 = this.geometry.vertices[this.geometry.faces[i].b];
-		    const v3 = this.geometry.vertices[this.geometry.faces[i].c];
-		    geometry.faceVertexUvs[0].push(
-		        [
-		            new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y),
-		            new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y),
-		            new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y)
-		        ]);
-		}
-		geometry.uvsNeedUpdate = true;
-	}
-
   /**
    * Handle transparent mesh, create a clone for backside rendering if it is
    * transparent.

package/src/primitives/glyph.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Label } from './label';
 import { ZincObject } from './zincObject';
 

package/src/primitives/glyphset.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Glyph } from './glyph';
 import { ZincObject } from './zincObject';
 import { JSONLoader } from '../loaders/JSONLoader';
@@ -521,11 +521,9 @@ const Glyphset = function () {
 
   var meshloader = (finishCallback, displayLabels) => {
     return (geometry, materials) => {
-      const tempGeometry = geometry.toBufferGeometry();
-      this.geometry.copy(tempGeometry);
+      this.geometry.copy(geometry);
       this.geometry.computeBoundingSphere();
       this.geometry.computeBoundingBox();
-      tempGeometry.dispose();
       if (materials && materials[0])
         this.morph.material = materials[0];
       createGlyphs(displayLabels);

package/src/primitives/label.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import SpriteTextModule from 'three-spritetext';
 const SpriteText = SpriteTextModule.default || SpriteTextModule;
 

package/src/primitives/lines.js

@@ -1,6 +1,6 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { toBufferGeometry } from '../utilities';
-import { augmentMorphColor } from './augmentShader';
+import { applyMorphColorNode } from '../tls/morphColorMaterial';
 import { LineSegments } from '../three/line/LineSegments';
 import { ZincObject } from './zincObject';
 
@@ -30,10 +30,17 @@ const Lines = function () {
    */
 	this.createLineSegment = (geometryIn, materialIn, options) => {
 		if (geometryIn && materialIn) {
-			let geometry = toBufferGeometry(geometryIn, options);
+			let geometry = toBufferGeometry(geometryIn, options );
 			if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
-        materialIn.vertexColors = true;
-				materialIn.onBeforeCompile = augmentMorphColor;
+        //Force vertexColors off (even if the caller/material already set
+        //it true from the file's declared material) - NodeMaterial would
+        //otherwise multiply our morph colour blend by the static,
+        //non-morph 'color' attribute (vertexColor() in setupDiffuseColor),
+        //zeroing out whatever channel that static colour never needed and
+        //turning parts of the blend black instead of the intended hue.
+        //applyMorphColorNode's colorNode fully replaces vertex colouring.
+        materialIn.vertexColors = false;
+				materialIn = applyMorphColorNode(materialIn);
       }
       let line = new LineSegments(geometry, materialIn);
       this.setMesh(line, options.localTimeEnabled, options.localMorphColour);

package/src/primitives/lines2.js

@@ -1,8 +1,9 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Lines } from './lines';
 import { LineSegments2 } from '../three/line/LineSegments2';
-import { LineMaterial } from '../three/line/LineMaterial';
+//import { LineMaterial } from '../three/line/LineMaterial';
 import { LineSegmentsGeometry } from '../three/line/LineSegmentsGeometry';
+
 /**
  * Provides an object which stores lines.
  * This is created when a valid json file containing lines is read into a {@link Zinc.Scene}
@@ -157,13 +158,12 @@ const Lines2 = function () {
       this.addVertices(coords);
       let mesh = this.getMorph();
       if (!mesh) {
-        const material = new LineMaterial( {
+        const material = new THREE.Line2NodeMaterial( {
           color: colour,
           linewidth:1,
           vertexColors: false,
           worldUnits: false,
         });
-        material.resolution.set( window.innerWidth, window.innerHeight );
         const options = { localTimeEnabled: false, localMorphColour: false};
         this.createLineSegment(positions, material, options);
       }
@@ -171,10 +171,6 @@ const Lines2 = function () {
     }
 	}
 
-  this.render = (delta, playAnimation, cameraControls, options) => {
-    const material = this.getMorph().material;
-    material.resolution.set( window.innerWidth, window.innerHeight );
-  }
 }
 
 Lines2.prototype = Object.create(Lines.prototype);

package/src/primitives/lod.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { toBufferGeometry, updateMorphColorAttribute } from '../utilities';
 import { LineSegments } from '../three/line/LineSegments';
 
@@ -216,6 +216,7 @@ const LOD = function (parent) {
       const options = {
         localTimeEnabled: this._parent.timeEnabled,
         localMorphColour: this._parent.morphColour,
+        isLines: this._parent.isLines,
       }
       const geometry = toBufferGeometry(geometryIn, options);
       let mesh = undefined;
@@ -234,8 +235,13 @@ const LOD = function (parent) {
   this.updateMorphColorAttribute = (currentOnly) => {
     //Multilayers - set all
     if (this._material) {
-      if ((this._material.vertexColors == THREE.VertexColors) ||
-        (this._material.vertexColors == true)) {
+      //Gate on our own morphColorMix uniform rather than
+      //material.vertexColors - that flag is deliberately left false for
+      //morph colour materials now (see applyMorphColorNode's callers), so
+      //NodeMaterial doesn't multiply the blend by the static 'color'
+      //attribute on top of it.
+      if (this._material.userData && this._material.userData.uniforms &&
+        this._material.userData.uniforms.morphColorMix) {
         if (currentOnly) {
           const morph = this.getCurrentMorph();
           updateMorphColorAttribute(morph.geometry, morph);

package/src/primitives/marker.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import myImage from '../assets/mapMarker.svg';
 import { createNewSpriteText } from '../utilities';
 import { ZincObject } from './zincObject';

package/src/primitives/markerCluster.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { ZincObject } from './zincObject';
 import mapMarkerOrange from '../assets/mapMarkerOrange.svg';
 import { createNewSpriteText } from '../utilities';