zincjs 2.4.0 → 2.4.1-beta.0

package/src/primitives/tubeLines.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { mergeGeometries } from '../utilities';
 import { ZincObject } from './zincObject';
 
@@ -31,7 +31,7 @@ const TubeLines = function () {
     this.createLineSegment = (geometryIn, materialIn, options) => {
         if (geometryIn && materialIn) {
             dataIn = { geometryIn, materialIn, options };
-            const geometry = getTubeLinesGeometry(geometryIn.vertices);
+            const geometry = getTubeLinesGeometry(extractVertices(geometryIn));
             const material = new THREE.MeshStandardMaterial({ color: materialIn.color });
             const mesh = new THREE.Mesh(geometry, material);
             this.setMesh(mesh, options.localTimeEnabled, options.localMorphColour);
@@ -86,10 +86,27 @@ const TubeLines = function () {
             mesh.geometry.dispose();
 
             geometryConfig = Object.assign(geometryConfig, { radius, radialSegments });
-            mesh.geometry = getTubeLinesGeometry(geometryIn.vertices);
+            mesh.geometry = getTubeLinesGeometry(extractVertices(geometryIn));
         }
     }
 
+    /**
+     * Read the position attribute of a BufferGeometry into an array of
+     * THREE.Vector3, since TubeGeometry/CatmullRomCurve3/LineCurve3 need
+     * actual Vector3 instances to work with, not a flat typed array.
+     *
+     * @param {THREE.BufferGeometry} geometry
+     * @returns {Array}
+     */
+    const extractVertices = (geometry) => {
+        const position = geometry.getAttribute('position');
+        const vertices = [];
+        for (let i = 0; i < position.count; i++) {
+            vertices.push(new THREE.Vector3().fromBufferAttribute(position, i));
+        }
+        return vertices;
+    }
+
     /**
      * Get merged geometry from list of geometry vertices
      *

package/src/primitives/zincObject.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import {
   createBufferGeometry,
   getBoundingBox,
@@ -183,6 +183,10 @@ ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour
         this.clipAction.loop = THREE.LoopRepeat;
         this.clipAction.clampWhenFinished = true;
         this.clipAction.play();
+        //Evaluate the clip immediately so morphTargetInfluences reflects
+        //time 0 right away, rather than staying at its all-zero default
+        //until the first mixer.update() from playback/setMorphTime.
+        this.mixer.update(0);
       }
     }
   }
@@ -200,6 +204,14 @@ ZincObject.prototype.setMesh = function(mesh, localTimeEnabled, localMorphColour
       geometry.setAttribute('morphTarget1', geometry.getAttribute( 'position' ) );
     }
   }
+  if (this.morphColour) {
+    //Make sure morphColor0/morphColor1 exist before this mesh is ever
+    //rendered. WebGPU builds its pipeline against whatever attributes the
+    //geometry has at first render, and adding these two afterwards doesn't
+    //get picked up by an already-built pipeline - the object would render
+    //black forever after, since the colour shader can no longer see them.
+    this.initiateMorphColor();
+  }
   this.boundingBoxUpdateRequired = true;
 }
 

package/src/region.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Pointset } from './primitives/pointset';
 import { Lines2 } from './primitives/lines2';
 import { Geometry } from './primitives/geometry';

package/src/renderer.js

@@ -1,5 +1,4 @@
-import * as THREE from 'three';
-//import { WebGPURenderer } from 'three/webgpu';
+import * as THREE from 'three/webgpu';
 import { ResizeSensor } from 'css-element-queries';
 import { Scene } from './scene';
 /**
@@ -77,8 +76,9 @@ const Renderer = function (containerIn) {
 	 */
 	this.onWindowResize = () => {
 		currentScene.onWindowResize();
-		const width = this.getDrawingWidth();
-		const height = this.getDrawingHeight();
+		//Give it a miniumum size of 1 x 1
+		const width = this.getDrawingWidth() || 1;
+		const height = this.getDrawingHeight() || 1;
 		if (renderer != undefined) {
 			let localRect = undefined;
 			if (container) {
@@ -109,7 +109,7 @@ const Renderer = function (containerIn) {
 	/**
 	 * Initialise the renderer and its visualisations.
 	 */
-	this.initialiseVisualisation = parameters => {
+	this.initialiseVisualisation = async (parameters) => {
 		if (!isInitialised) {
 			parameters = parameters || {};
 			if (parameters['antialias'] === undefined) {
@@ -132,10 +132,10 @@ const Renderer = function (containerIn) {
 				canvas = parameters["canvas"];
 			}
       //parameters["forceWebGL"] = true;
-			//renderer = new WebGPURenderer(parameters);
-      //await renderer.init();
+			renderer = new THREE.WebGPURenderer(parameters);
+      await renderer.init();
 
-      renderer = new THREE.WebGLRenderer(parameters);
+      //renderer = new THREE.WebGLRenderer(parameters);
 			if (container !== undefined) {
 				container.appendChild( renderer.domElement );
 			}
@@ -208,10 +208,10 @@ const Renderer = function (containerIn) {
 	 * @return {Zinc.Scene}
 	 */
 	this.getSceneByName = name => {
-		return sceneMap[name];
-	}
+    return sceneMap[name];
+  }
 
-	/**
+  /*
 	 * Create a new scene with the provided name if scene with the same name exists,
 	 * return undefined.
 	 *
@@ -244,6 +244,10 @@ const Renderer = function (containerIn) {
 				logoSprite.position.set(calculatedWidth, calculatedHeight, 1 );
 			}
 		}
+		return sceneMap[name];
+	}
+
+	/**
 	};
 
 	const updateOrthoCamera = () => {
@@ -573,11 +577,11 @@ const Renderer = function (containerIn) {
 	}
 
 	this.forceContextLoss = () => {
-		renderer.forceContextLoss();
+	//	renderer.forceContextLoss();
 	}
 
 	this.forceContextRestore= () => {
-		renderer.forceContextRestore();
+	//	renderer.forceContextRestore();
 	}
 
 	/**

package/src/scene.js

@@ -1,13 +1,15 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { CameraControls, StereoEffect } from './controls';
 import { LineSegments } from './three/line/LineSegments';
 import { MarkerCluster } from './primitives/markerCluster';
 import { Minimap } from './minimap';
 import { Region } from './region';
-import { Points } from './three/Points';
+import { InstancedPoints } from './three/InstancedPoints';
 import { SceneExporter } from './sceneExporter';
 import { SceneLoader } from './sceneLoader';
 import { Viewport } from './controls';
+import { createPointQuadGeometry } from './primitives/pointset';
+import { createInstancedPointsMaterial } from './tls/pointsMaterial';
 import {
   createBufferGeometry,
   createNewSpriteText,
@@ -1233,12 +1235,22 @@ const Scene = function (containerIn, rendererIn) {
    * with clearTemporaryPrimitives method.
 	 */
   this.addTemporaryPoints = (coords, colour) => {
-    const geometry = createBufferGeometry(coords.length, coords);
-    let material = new THREE.PointsMaterial({ alphaTest: 0.5, size: 15,
-      color: colour, sizeAttenuation: false });
-    const texture = getCircularTexture();
-    material.map = texture;
-    let point = new Points(geometry, material);
+    const geometry = createPointQuadGeometry(coords.length);
+    const material = createInstancedPointsMaterial(getCircularTexture());
+    material.color.set(colour);
+    material.size = 15;
+    material.userData.uniforms.pointSize.value = 15;
+    material.alphaTest = 0.5;
+    const point = new InstancedPoints(geometry, material, coords.length);
+    point.pointPositions = new Float32Array(coords.length * 3);
+    const instancePosition = geometry.getAttribute('instancePosition');
+    coords.forEach((coord, index) => {
+      instancePosition.setXYZ(index, coord[0], coord[1], coord[2]);
+      point.pointPositions[index * 3] = coord[0];
+      point.pointPositions[index * 3 + 1] = coord[1];
+      point.pointPositions[index * 3 + 2] = coord[2];
+    });
+    instancePosition.needsUpdate = true;
     tempGroup.add(point);
     return point;
   }

package/src/sceneLoader.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { GLTFToZincJSLoader } from './loaders/GLTFToZincJSLoader';
 import { OBJLoader } from './loaders/OBJLoader';
 import { PrimitivesLoader } from './loaders/primitivesLoader';

package/src/shaders/rgbVolumeRender.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 const glslVersion = null;
 
 const fs =

package/src/shaders/textureSlide.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 const glslVersion = THREE.GLSL3;
 
 const fs =

package/src/texture/texture.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 
 /**
  * Base texture object for importing images and turning them into

package/src/texture/textureArray.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { Texture } from './texture';
 
 /**
@@ -12,8 +12,15 @@ import { Texture } from './texture';
 const TextureArray = function () {
   Texture.call(this);
   this.isTextureArray = true;
+  this.imageData = undefined;
 
 
+  this.setDataTexture = (dataTexture) => {
+    this.impl = dataTexture;
+    console.log("setDataTexture", dataTexture);
+    this.imageData = dataTexture.image.data;
+  }
+
   /**
    * Read images from an array containg src locations.
    *
@@ -48,7 +55,7 @@ const TextureArray = function () {
         length += data.length;
       });
 
-      this.impl = new THREE.DataArrayTexture(fullArray, w, h, d);
+      this.impl = new THREE.Data3DTexture(fullArray, w, h, d);
       this.size = {
         width: w,
         height: h,

package/src/three/GLTFExporter.js

@@ -1,5 +1,6 @@
 import {
 	BufferAttribute,
+	BufferGeometry,
 	ClampToEdgeWrapping,
 	DoubleSide,
 	InterpolateDiscrete,
@@ -19,7 +20,7 @@ import {
 	RepeatWrapping,
 	Scene,
 	Vector3
-} from 'three';
+} from 'three/webgpu';
 
 
 class GLTFExporter {
@@ -1291,6 +1292,48 @@ class GLTFWriter {
 
 	}
 
+	/**
+	 * A Pointset's {@link InstancedPoints} draws every point as an instance of a
+	 * small camera facing quad - its `geometry` only carries that quad, the
+	 * actual point positions/colours live in `pointPositions`/`instanceColor`.
+	 * Temporarily substitute a plain points geometry built from that data (and
+	 * flag the object as `isPoints`) so the regular POINTS export path below
+	 * produces a correct round trip, then return a function that restores the
+	 * object to its original state.
+	 *
+	 * @param {InstancedPoints} object Object to substitute the geometry of
+	 * @return {Function} Restores `object` to its pre-substitution state
+	 */
+	substituteInstancedPointsGeometry( object ) {
+
+		const count = object.count;
+		const geometry = new BufferGeometry();
+		geometry.setAttribute( 'position',
+			new BufferAttribute( object.pointPositions.slice( 0, count * 3 ), 3 ) );
+
+		if ( object.instanceColor ) {
+
+			geometry.setAttribute( 'color',
+				new BufferAttribute( object.instanceColor.array.slice( 0, count * 3 ), 3 ) );
+
+		}
+
+		const originalGeometry = object.geometry;
+		const originalIsPoints = object.isPoints;
+
+		object.geometry = geometry;
+		object.isPoints = true;
+
+		return function () {
+
+			object.geometry = originalGeometry;
+			object.isPoints = originalIsPoints;
+			geometry.dispose();
+
+		};
+
+	}
+
 	/**
 	 * Process mesh
 	 * @param  {THREE.Mesh} mesh Mesh to process
@@ -1887,10 +1930,20 @@ class GLTFWriter {
 
 		this.serializeUserData( object, nodeDef );
 
-		if ( object.isMesh || object.isLine || object.isPoints ) {
+		if ( object.isMesh || object.isLine || object.isPoints || object.isInstancedPoints ) {
+
+			let restoreInstancedPoints;
+
+			if ( object.isInstancedPoints ) {
+
+				restoreInstancedPoints = this.substituteInstancedPointsGeometry( object );
+
+			}
 
 			const meshIndex = this.processMesh( object );
 
+			if ( restoreInstancedPoints ) restoreInstancedPoints();
+
 			if ( meshIndex !== null ) nodeDef.mesh = meshIndex;
 
 		} else if ( object.isCamera ) {

package/src/three/InstancedPoints.js

@@ -0,0 +1,73 @@
+import {
+  InstancedMesh,
+  Matrix4,
+  Ray,
+  Vector3,
+} from 'three/webgpu';
+
+const _inverseMatrix = /*@__PURE__*/ new Matrix4();
+const _ray = /*@__PURE__*/ new Ray();
+const _position = /*@__PURE__*/ new Vector3();
+
+/**
+ * An {@link THREE.InstancedMesh} used to draw a {@link Pointset}. Every
+ * instance is a small quad billboarded towards the camera on the GPU (see
+ * {@link createInstancedPointsMaterial}), so the usual matrix/geometry based
+ * raycasting and bounding logic performed by `THREE.InstancedMesh` does not
+ * apply - the true, already time-blended location of every point is instead
+ * kept in `pointPositions` (local space) and used here directly, mirroring
+ * the distance-to-point approach the legacy `THREE.Points` override used.
+ */
+class InstancedPoints extends InstancedMesh {
+
+  constructor(geometry, material, count) {
+    super(geometry, material, count);
+    this.type = 'InstancedPoints';
+    this.isInstancedPoints = true;
+    this.frustumCulled = false;
+    this.pointSize = 10;
+    this.sizePerPixel = 1;
+    //Flat [x0, y0, z0, x1, y1, z1, ...] array of the current, already
+    //time-blended local positions of every active point.
+    this.pointPositions = new Float32Array(0);
+  }
+
+  raycast(raycaster, intersects) {
+    const matrixWorld = this.matrixWorld;
+    const threshold = raycaster.params.Points ? raycaster.params.Points.threshold : 1;
+    const count = this.count;
+    const positions = this.pointPositions;
+
+    if (!count || !positions || positions.length < count * 3) return;
+
+    _inverseMatrix.copy(matrixWorld).invert();
+    _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
+
+    const averageScale = (this.scale.x + this.scale.y + this.scale.z) / 3;
+    const localThreshold = threshold / averageScale * this.pointSize * this.sizePerPixel;
+    const localThresholdSq = localThreshold * localThreshold;
+
+    for (let i = 0; i < count; i++) {
+      _position.fromArray(positions, i * 3);
+      const rayPointDistanceSq = _ray.distanceSqToPoint(_position);
+      if (rayPointDistanceSq < localThresholdSq) {
+        const intersectPoint = new Vector3();
+        _ray.closestPointToPoint(_position, intersectPoint);
+        intersectPoint.applyMatrix4(matrixWorld);
+        const distance = raycaster.ray.origin.distanceTo(intersectPoint);
+        if (distance < raycaster.near || distance > raycaster.far) continue;
+        intersects.push({
+          distance: distance,
+          distanceToRay: Math.sqrt(rayPointDistanceSq),
+          point: intersectPoint,
+          index: i,
+          face: null,
+          object: this,
+        });
+      }
+    }
+  }
+
+}
+
+export { InstancedPoints };

package/src/three/Loader.js

@@ -18,7 +18,7 @@ import {
   MaterialLoader,
   TextureLoader,
   Color
-} from 'three';
+} from 'three/webgpu';
 
 /**
  * @author alteredq / http://alteredqualia.com/

package/src/three/line/Line.js

@@ -7,7 +7,7 @@ import {
   Ray,
 	Sphere,
 	Vector3
-} from 'three';
+} from 'three/webgpu';
 
 
 const _start = /*@__PURE__*/ new Vector3();

package/src/three/line/LineSegments.js

@@ -2,7 +2,7 @@ import { Line } from './Line.js';
 import {
   Float32BufferAttribute,
 	Vector3
-} from 'three';
+} from 'three/webgpu';
 
 const _start = /*@__PURE__*/ new Vector3();
 const _end = /*@__PURE__*/ new Vector3();

package/src/three/line/LineSegments2.js

@@ -8,12 +8,11 @@ import {
 	Mesh,
 	Sphere,
 	Vector3,
-	Vector4
-} from 'three';
+	Vector4,
+	Line2NodeMaterial,
+	Vector2
+} from 'three/webgpu';
 import { LineSegmentsGeometry } from './LineSegmentsGeometry.js';
-import { LineMaterial } from './LineMaterial.js';
-
-const _viewport = new Vector4();
 
 const _start = new Vector3();
 const _end = new Vector3();
@@ -30,6 +29,7 @@ const _closestPoint = new Vector3();
 const _box = new Box3();
 const _sphere = new Sphere();
 const _clipToWorldVector = new Vector4();
+const _viewport = new Vector4();
 
 let _ray, _lineWidth;
 
@@ -94,10 +94,10 @@ function raycastWorldUnits( lineSegments, intersects ) {
 function raycastScreenSpace( lineSegments, camera, intersects ) {
 
 	const projectionMatrix = camera.projectionMatrix;
-	const material = lineSegments.material;
-	const resolution = material.resolution;
 	const matrixWorld = lineSegments.matrixWorld;
 
+	const resolution = lineSegments._resolution;
+
 	const geometry = lineSegments.geometry;
 	const instanceStart = geometry.attributes.instanceStart;
 	const instanceEnd = geometry.attributes.instanceEnd;
@@ -231,22 +231,11 @@ function raycastScreenSpace( lineSegments, camera, intersects ) {
  * to be in world units. {@link Line2} extends this object, forming a polyline instead of individual
  * segments.
  *
- * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
- * import the class from `lines/webgpu/LineSegments2.js`.
- *
- *  ```js
- * const geometry = new LineSegmentsGeometry();
- * geometry.setPositions( positions );
- * geometry.setColors( colors );
- *
- * const material = new LineMaterial( { linewidth: 5, vertexColors: true } };
- *
- * const lineSegments = new LineSegments2( geometry, material );
- * scene.add( lineSegments );
- * ```
+ * This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
+ * import the class from `lines/LineSegments2.js`.
  *
  * @augments Mesh
- * @three_import import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
+ * @three_import import { LineSegments2 } from 'three/addons/lines/webgpu/LineSegments2.js';
  */
 class LineSegments2 extends Mesh {
 
@@ -254,9 +243,9 @@ class LineSegments2 extends Mesh {
 	 * Constructs a new wide line.
 	 *
 	 * @param {LineSegmentsGeometry} [geometry] - The line geometry.
-	 * @param {LineMaterial} [material] - The line material.
+	 * @param {Line2NodeMaterial} [material] - The line material.
 	 */
-	constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
+	constructor( geometry = new LineSegmentsGeometry(), material = new Line2NodeMaterial( { color: Math.random() * 0xffffff } ) ) {
 
 		super( geometry, material );
 
@@ -271,6 +260,8 @@ class LineSegments2 extends Mesh {
 
 		this.type = 'LineSegments2';
 
+		this._resolution = new Vector2();
+
 	}
 
 	/**
@@ -309,6 +300,13 @@ class LineSegments2 extends Mesh {
 
 	}
 
+	onBeforeRender( renderer ) {
+
+		renderer.getViewport( _viewport );
+		this._resolution.set( _viewport.z, _viewport.w );
+
+	}
+
 	/**
 	 * Computes intersection points between a casted ray and this instance.
 	 *
@@ -328,7 +326,7 @@ class LineSegments2 extends Mesh {
 
 		// early out if no resolution has been set (line was not rendered yet)
 
-		if ( worldUnits === false && ( this.material.resolution.x === 0 || this.material.resolution.y === 0 ) ) {
+		if ( worldUnits === false && ( this._resolution.x === 0 || this._resolution.y === 0 ) ) {
 
 			return;
 
@@ -362,7 +360,7 @@ class LineSegments2 extends Mesh {
 		} else {
 
 			const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( _ray.origin ) );
-			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution );
+			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, this._resolution );
 
 		}
 
@@ -392,7 +390,7 @@ class LineSegments2 extends Mesh {
 		} else {
 
 			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray.origin ) );
-			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution );
+			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, this._resolution );
 
 		}
 
@@ -416,19 +414,6 @@ class LineSegments2 extends Mesh {
 
 	}
 
-	onBeforeRender( renderer ) {
-
-		const uniforms = this.material.uniforms;
-
-		if ( uniforms && uniforms.resolution ) {
-
-			renderer.getViewport( _viewport );
-			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
-
-		}
-
-	}
-
 }
 
 export { LineSegments2 };

package/src/three/line/LineSegmentsGeometry.js

@@ -7,7 +7,7 @@ import {
 	Sphere,
 	Vector3,
 	WireframeGeometry
-} from 'three';
+} from 'three/webgpu';
 
 const _box = new Box3();
 const _vector = new Vector3();

package/src/tls/morphColorMaterial.js

@@ -0,0 +1,65 @@
+import * as THREE from 'three/webgpu';
+import { Fn, attribute, materialColor, materialOpacity, mix, uniform, vec4 } from 'three/tsl';
+
+//Maps a classic material's constructor name to its NodeMaterial
+//equivalent, since only NodeMaterial exposes colorNode.
+const NODE_MATERIAL_CLASSES = {
+  MeshBasicMaterial: THREE.MeshBasicNodeMaterial,
+  MeshLambertMaterial: THREE.MeshLambertNodeMaterial,
+  MeshPhongMaterial: THREE.MeshPhongNodeMaterial,
+  MeshStandardMaterial: THREE.MeshStandardNodeMaterial,
+  LineBasicMaterial: THREE.LineBasicNodeMaterial,
+};
+
+/**
+ * Give `material` a colorNode that blends between the two morph colour
+ * targets {@link updateMorphColorAttribute} (in utilities.js) keeps
+ * published as the 'morphColor0'/'morphColor1' geometry attributes -
+ * whichever two morph targets currently have non-zero influence.
+ *
+ * This replaces the legacy `material.onBeforeCompile = augmentMorphColor`
+ * approach, which patched raw GLSL into the classic WebGL shader and has no
+ * effect once a material is compiled through the WebGPU/TSL pipeline.
+ * three.js's own built-in WebGPU morph target system packs morph colour
+ * data into its morph texture (see three's Morph.js) but its blend loop
+ * only ever applies the result to position/normal, never colour, so this
+ * has to be done by hand.
+ *
+ * Converts `material` to its NodeMaterial equivalent first if it isn't one
+ * already, since only NodeMaterial exposes `colorNode`.
+ *
+ * @param {THREE.Material} material - Material to give the morph colour
+ * blend to; only used for its constructor type if not already a
+ * NodeMaterial - all of its usual properties (color, opacity, map, side,
+ * etc.) are preserved.
+ * @return {THREE.NodeMaterial} The (possibly newly converted) material.
+ * Its `userData.uniforms.morphColorMix` uniform drives the blend (0 = fully
+ * morphColor0, 1 = fully morphColor1) - kept in sync automatically by
+ * updateMorphColorAttribute.
+ */
+const applyMorphColorNode = (material) => {
+  let target = material;
+  if (!target.isNodeMaterial) {
+    const NodeMaterialClass = NODE_MATERIAL_CLASSES[material.type] || THREE.MeshBasicNodeMaterial;
+    target = new NodeMaterialClass();
+    target.copy(material);
+  }
+
+  const morphColorMix = uniform(0);
+
+  //materialColor already folds in material.color and, if present, .map -
+  //multiplying it by the blended per vertex morph colour keeps that
+  //compositing instead of replacing it outright.
+  target.colorNode = Fn(() => {
+    const colorA = attribute('morphColor0', 'vec3');
+    const colorB = attribute('morphColor1', 'vec3');
+    const blended = mix(colorA, colorB, morphColorMix);
+    return vec4(blended.mul(materialColor), materialOpacity);
+  })();
+
+  target.userData.uniforms = { ...target.userData.uniforms, morphColorMix };
+
+  return target;
+};
+
+export { applyMorphColorNode };