zincjs 2.3.0 → 2.3.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zincjs",
-  "version": "2.3.0",
+  "version": "2.3.1-beta.1",
   "description": "ZincJS (Web-based-Zinc-Visualisation)",
   "type": "module",
   "main": "build/zinc.js",
@@ -68,7 +68,7 @@
     "css-element-queries": "^1.2.2",
     "lodash": "^4.17.19",
     "nifti-reader-js": "0.8.0",
-    "three": "^0.130.1",
+    "three": "^0.185.1",
     "three-spritetext": "1.6.2"
   }
 }

package/src/loaders/niftiReader.js

@@ -228,7 +228,7 @@ function getTransformationFromHeader(header, options) {
 }
 
 function createDataTexture(data, width, height, depth, isRGB) {
-  const dataTexture = new THREE.DataTexture2DArray(
+  const dataTexture = new THREE.DataArrayTexture(
     data, width, height, depth);
   dataTexture.anisotropy = 4;
   if (!isRGB) {

package/src/minimap.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { copyVector3sArray } from "./utilities";
 
 /**
  * This provide a full scale minimap. It will always
@@ -66,8 +67,7 @@ const Minimap = function (sceneIn) {
     let v3 = new THREE.Vector3(1, 1, target.z).unproject(targetScene.camera);
     let v4 = new THREE.Vector3(-1, 1, target.z).unproject(targetScene.camera);
     let array = [v1, v2, v3, v3, v4, v1];
-    positionAttributes.copyVector3sArray(array);
-    positionAttributes.needsUpdate = true;
+    copyVector3sArray(positionAttributes, array);
   }
 
   this.updateCamera = () => {

package/src/primitives/augmentShader.js

@@ -2,27 +2,44 @@
 /**
  * Provide additional shaders to render time dependent color.
  */
-const augmentMorphColor = function() {
-    return function(shader) {
-        shader.vertexShader = shader.vertexShader.replace(
-            '#include <color_pars_vertex>',
-            [
-	            'varying vec3 vColor;',
-                'attribute vec3 morphColor0;',
-                'attribute vec3 morphColor1;'
-            ].join( '\n' )
-        );
-        shader.vertexShader = shader.vertexShader.replace(
-            '#include <color_vertex>',
-            [
-                'vColor.xyz = color.xyz;',
-                '#ifdef USE_MORPHTARGETS',
-                'vColor = morphColor0 * morphTargetInfluences[ 0 ];',
-                'vColor += morphColor1 * morphTargetInfluences[ 1 ];',
-                '#endif'
-            ].join( '\n' )
-        );
-    };
+
+const augmentMorphColor = function(shader) {
+  shader.vertexShader = shader.vertexShader.replace(
+      '#include <morphcolor_vertex>',
+      `
+      #if defined( USE_MORPHCOLORS )
+
+      // morphTargetBaseInfluence is set based on BufferGeometry.morphTargetsRelative value:
+      // When morphTargetsRelative is false, this is set to 1 - sum(influences); this results in normal = sum((target - base) * influence)
+      // When morphTargetsRelative is true, this is set to 1; as a result, all morph targets are simply added to the base after weighting
+      vColor *= morphTargetBaseInfluence;
+
+      for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {
+
+        #if defined( USE_COLOR_ALPHA )
+
+          if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ) * morphTargetInfluences[ i ];
+
+        #elif defined( USE_COLOR )
+
+          if ( morphTargetInfluences[ i ] != 0.0 ) {
+            vColor.rgb += getMorph( gl_VertexID, i, 2 ).rgb * morphTargetInfluences[ i ];
+            vColor.a = 1.0;
+          }
+
+        #endif
+
+      }
+
+      #endif
+      `
+  );
 }
 
-export { augmentMorphColor };
+const printShader = function (shader) {
+  console.log(shader.vertexShader);
+  console.log(shader.fragmentShader);
+}
+
+
+export { augmentMorphColor, printShader };

package/src/primitives/geometry.js

@@ -8,53 +8,36 @@ const createMeshForGeometry =  (geometryIn, materialIn, options) => {
   let geometry = toBufferGeometry(geometryIn, options);
 
   let isTransparent = false;
-  if (1.0 > options.opacity)
-      isTransparent = true;
-
+  if (1.0 > options.opacity) {
+    isTransparent = true;
+  }
   let material = undefined;
   if (geometry._video === undefined) {
-    const morphTargets = options.localTimeEnabled || options.localMorphColour;
     if (materialIn) {
       material = materialIn;
-      material.morphTargets = morphTargets;
-      material.morphNormals = options.localTimeEnabled;
     } else {
-      if (geometry instanceof THREE.BufferGeometry && geometry.attributes.color === undefined) {
-        material = new THREE.MeshPhongMaterial({
-          color : options.colour,
-          morphTargets : morphTargets,
-          morphNormals : options.localTimeEnabled,
-          transparent : isTransparent,
-          opacity : options.opacity,
-          side : THREE.DoubleSide
-        });
-      } else {
-        material = new THREE.MeshPhongMaterial({
-          color : options.colour,
-          morphTargets : morphTargets,
-          morphNormals : options.localTimeEnabled,
-          vertexColors : THREE.VertexColors,
-          transparent : isTransparent,
-          opacity : options.opacity,
-          side : THREE.DoubleSide
-        });
-      }
+      material = new THREE.MeshPhongMaterial({
+        color : options.colour,
+        vertexColors : false,
+        transparent : isTransparent,
+        opacity : options.opacity,
+        side : THREE.DoubleSide
+      });
     }
     //material = PhongToToon(material);
     if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
-      material.onBeforeCompile = augmentMorphColor();
+      material.vertexColors = true;
+      material.onBeforeCompile = augmentMorphColor;
     }
   } else {
     let videoTexture = geometry._video.createCanvasVideoTexture();
     material = new THREE.MeshBasicMaterial({
-      morphTargets : options.localTimeEnabled,
       color : new THREE.Color(1, 1, 1),
       transparent : isTransparent,
       opacity : options.opacity,
       map : videoTexture,
       side : THREE.DoubleSide
     });
-    this.videoHandler = geometry._video;
   }
   return new THREE.Mesh(geometry, material);
 }
@@ -92,6 +75,7 @@ const Geometry = function () {
 		if (this.morph && this.morph.geometry && (geometryIn != undefined))
 			return;
 		const mesh = createMeshForGeometry(geometryIn, materialIn, options);
+    this.videoHandler = mesh.geometry._video;
 		this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
 	}
 
@@ -160,6 +144,17 @@ const Geometry = function () {
     }
   }
 
+  /**
+   * Check if the geometry is time varying.
+   *
+   * @return {Boolean}
+   */
+  this.isTimeVarying = function() {
+    if (this.timeEnabled || this.morphColour || this.videoHandler)
+      return true;
+    return false;
+  }
+
 
 }
 

package/src/primitives/glyphset.js

@@ -295,6 +295,8 @@ const Glyphset = function () {
       }
     }
     this.morph.instanceMatrix.needsUpdate = true;
+    this.boundingBoxUpdateRequired = true;
+    this.morph.computeBoundingSphere();
   };
 
   /**
@@ -372,7 +374,6 @@ const Glyphset = function () {
     }
     updateGlyphsetTransformation(current_positions, current_axis1s, current_axis2s, current_axis3s,
       current_scales);
-    this.boundingBoxUpdateRequired = true;
     if (colors != undefined) {
       if (morphColours) {
         const bottom_colors = colors[bottom_frame.toString()];
@@ -472,7 +473,6 @@ const Glyphset = function () {
       updateGlyphsetHexColors(colors["0"]);
     }
     this.ready = true;
-    this.boundingBoxUpdateRequired = true;
   };
 
   /**

package/src/primitives/lines.js

@@ -31,8 +31,10 @@ const Lines = function () {
 	this.createLineSegment = (geometryIn, materialIn, options) => {
 		if (geometryIn && materialIn) {
 			let geometry = toBufferGeometry(geometryIn, options);
-			if (options.localMorphColour && geometry.morphAttributes[ "color" ])
-				materialIn.onBeforeCompile = augmentMorphColor();
+			if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+        materialIn.vertexColors = true;
+				materialIn.onBeforeCompile = augmentMorphColor;
+      }
       let line = new LineSegments(geometry, materialIn);
       this.setMesh(line, options.localTimeEnabled, options.localMorphColour);
 		}

package/src/primitives/marker.js

@@ -3,11 +3,9 @@ import myImage from '../assets/mapMarker.svg';
 import { createNewSpriteText } from '../utilities';
 import { ZincObject } from './zincObject';
 
-const markerImage = new Image(128, 128);
-markerImage.src = myImage;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(myImage);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -197,6 +195,7 @@ const Marker = function(zincObject) {
     }
     if (!label && numberIn) {
       label = createNewSpriteText(numberIn, 0.012, "black", "Asap", 120, 700);
+      label.renderOrder = 10001;
       this.morph.add(label);
     }
     number = numberIn;

package/src/primitives/markerCluster.js

@@ -1,11 +1,11 @@
 import * as THREE from 'three';
 import { ZincObject } from './zincObject';
-const markerImage = new Image(128, 128);
 import mapMarkerOrange from '../assets/mapMarkerOrange.svg';
-markerImage.src = mapMarkerOrange;
-const texture = new THREE.Texture();
-texture.image = markerImage;
-texture.needsUpdate = true;
+import { createNewSpriteText } from '../utilities';
+
+const textureLoader = new THREE.TextureLoader();
+const texture = textureLoader.load(mapMarkerOrange);
+texture.colorSpace = THREE.SRGBColorSpace;
 const size = [0.02, 0.03, 1];
 const spriteMaterial = new THREE.SpriteMaterial({
   map: texture,
@@ -15,7 +15,6 @@ const spriteMaterial = new THREE.SpriteMaterial({
   depthWrite: false,
   sizeAttenuation: false
 });
-import { createNewSpriteText } from '../utilities';
 
 /**
  * A special graphics type with a tear drop shape.
@@ -46,9 +45,9 @@ const MarkerCluster = function(sceneIn) {
    *
    * @param {Number} size - size to be set.
    */
-  this.setSpriteSize = size => {
+  this.setSpriteSize = sizeIn => {
     sprite.scale.set(0.015, 0.02, 1);
-    sprite.scale.multiplyScalar(size);
+    sprite.scale.multiplyScalar(sizeIn);
   }
 
   this.clear = () => {
@@ -101,6 +100,7 @@ const MarkerCluster = function(sceneIn) {
         sprite.label.material.dispose();
       }
       sprite.label = createNewSpriteText(number, 0.012, "black", "Asap", 120, 700);
+      sprite.label.renderOrder = 10001;
       sprite.number = number;
       sprite.group.add(sprite.label);
     }

package/src/primitives/pointset.js

@@ -3,6 +3,7 @@ import { Label } from './label';
 import { Points } from '../three/Points';
 import { ZincObject } from './zincObject';
 import { getCircularTexture, toBufferGeometry } from '../utilities';
+import { augmentMorphColor } from './augmentShader';
 
 /**
  * Provides an object which stores points and provides method which controls its position.
@@ -36,11 +37,15 @@ const Pointset = function () {
   this.createMesh = (geometryIn, materialIn, options) => {
     if (geometryIn && materialIn) {
       let geometry = toBufferGeometry(geometryIn, options);
+      console.log(geometry, options)
+      if (options.localMorphColour && geometry.morphAttributes[ "color" ]) {
+        materialIn.vertexColors = true;
+        materialIn.onBeforeCompile = augmentMorphColor;
+      }
       const texture = getCircularTexture();
       materialIn.map = texture;
       let point = new Points(geometry, materialIn);
-      this.setMesh(point, options.localTimeEnabled,
-        options.localMorphColour);
+      this.setMesh(point, options.localTimeEnabled, options.localMorphColour);
     }
   }
 

package/src/primitives/zincObject.js

@@ -45,7 +45,6 @@ const ZincObject = function() {
   this.duration = 6000;
   this.clipAction = undefined;
   this.userData = {};
-  this.videoHandler = undefined;
   this.marker = undefined;
   this.markerNumber = undefined;
   this.markerUpdateRequired = true;

package/src/region.js

@@ -816,8 +816,6 @@ let Region = function (parentIn, sceneIn) {
     const zincGeometry = new Geometry();
     const material = new THREE.MeshPhongMaterial({
       color : colour,
-      morphTargets : false,
-      morphNormals : false,
       transparent : true,
       opacity : opacity,
       side : THREE.DoubleSide

package/src/renderer.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+//import { WebGPURenderer } from 'three/webgpu';
 import { ResizeSensor } from 'css-element-queries';
 import { Scene } from './scene';
 /**
@@ -130,7 +131,11 @@ const Renderer = function (containerIn) {
 				container = undefined;
 				canvas = parameters["canvas"];
 			}
-			renderer = new THREE.WebGLRenderer(parameters);
+      //parameters["forceWebGL"] = true;
+			//renderer = new WebGPURenderer(parameters);
+      //await renderer.init();
+
+      renderer = new THREE.WebGLRenderer(parameters);
 			if (container !== undefined) {
 				container.appendChild( renderer.domElement );
 			}

package/src/scene.js

@@ -157,7 +157,7 @@ const Scene = function (containerIn, rendererIn) {
     this.ambient = new THREE.AmbientLight(0xffffff, 0.2);
     scene.add(this.ambient);
 
-    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.7 * Math.PI);
     scene.add(this.directionalLight);
     zincCameraControls = new CameraControls(this.camera, rendererIn.domElement, rendererIn, this);
 
@@ -625,8 +625,6 @@ const Scene = function (containerIn, rendererIn) {
 				  zincCameraControls.update(0);
 			  }
 			  //console.log(videoHandler.video.currentTime / videoHandler.getVideoDuration() * 6000);
-		  } else {
-			  myPlayRate = 0;
 		  }
 	  } else {
 		  if (0 == sceneLoader.toBeDownloaded) {

package/src/sceneLoader.js

@@ -158,7 +158,7 @@ const SceneLoader = function (sceneIn) {
       let localTimeEnabled = 0;
       if (timeEnabled != undefined && timeEnabled[i] != undefined)
         localTimeEnabled = timeEnabled[i] ? true : false;
-      let localMorphColour = 0;
+      let localMorphColour = false;
       if (morphColour != undefined && morphColour[i] != undefined)
         localMorphColour = morphColour[i] ? true : false;
       primitivesLoader.load(filename, meshloader(region, colour, opacity, localTimeEnabled, localMorphColour, undefined, undefined,
@@ -218,7 +218,6 @@ const SceneLoader = function (sceneIn) {
           material.transparent = true;
         }
         material.opacity = materials[0].opacity;
-        material.morphTargets = localTimeEnabled;
         material.vertexColors = materials[0].vertexColors;
       }
       let options = {};
@@ -361,15 +360,19 @@ const SceneLoader = function (sceneIn) {
   const pointsetloader = (region, localTimeEnabled, localMorphColour, groupName, anatomicalId, renderOrder, finishCallback) => {
     return (geometry, materials) => {
       const newPointset = new Pointset();
-      let material = new THREE.PointsMaterial({ alphaTest: 0.5, size: 10, sizeAttenuation: false });
+      let material = new THREE.PointsMaterial(
+        {
+          alphaTest: 0.05,
+          size: 10,
+          sizeAttenuation: false,
+        });
       if (materials && materials[0]) {
         if (1.0 > materials[0].opacity) {
           material.transparent = true;
         }
         material.opacity = materials[0].opacity;
         material.color = materials[0].color;
-        material.morphTargets = localTimeEnabled;
-        material.vertexColors = materials[0].vertexColors;
+        material.vertexColors = false;
       }
       let options = {};
       options.localTimeEnabled = localTimeEnabled;
@@ -638,8 +641,9 @@ const SceneLoader = function (sceneIn) {
       newGeometry.setDuration(scene.getDuration());
       if (finishCallback != undefined && (typeof finishCallback == 'function'))
         finishCallback(newGeometry);
-      if (newGeometry.videoHandler)
+      if (newGeometry.videoHandler) {
         scene.setVideoHandler(newGeometry.videoHandler);
+      }
       return newGeometry;
     }
     return undefined;

package/src/texture/textureArray.js

@@ -48,7 +48,7 @@ const TextureArray = function () {
         length += data.length;
       });
 
-      this.impl = new THREE.DataTexture2DArray(fullArray, w, h, d);
+      this.impl = new THREE.DataArrayTexture(fullArray, w, h, d);
       this.size = {
         width: w,
         height: h,