zincjs 2.4.0 → 2.4.1-beta.1

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 };

package/src/tls/pointsMaterial.js

@@ -0,0 +1,79 @@
+import * as THREE from 'three/webgpu';
+import {
+  Fn,
+  attribute,
+  cameraProjectionMatrix,
+  materialColor,
+  materialOpacity,
+  mix,
+  modelViewMatrix,
+  positionGeometry,
+  screenDPR,
+  texture,
+  uniform,
+  uv,
+  vec4,
+  viewportSize,
+} from 'three/tsl';
+
+/**
+ * Provide the node material used to render a {@link Pointset}.
+ *
+ * Every point is a single instance of a small quad which is billboarded
+ * towards the camera and kept at a constant size in pixels (mirroring the
+ * behaviour of the legacy `THREE.PointsMaterial` with `sizeAttenuation`
+ * set to `false`). Per instance position comes from the `instancePosition`
+ * buffer attribute rather than `instanceMatrix`, since the on screen offset
+ * of the quad's corners is entirely computed on the GPU and does not need
+ * a per instance transform.
+ *
+ * @param {THREE.Texture} mapTexture - Texture used to draw a circular dot,
+ * its alpha channel is used for the alpha test cut out.
+ * @return {THREE.MeshBasicNodeMaterial}
+ */
+const _rendererSize = /*@__PURE__*/ new THREE.Vector2();
+
+const createInstancedPointsMaterial = (mapTexture) => {
+  const material = new THREE.MeshBasicNodeMaterial();
+
+  const uniforms = {
+    pointSize: uniform(10),
+    sizeAttenuation: uniform(0),
+    viewportScale: uniform(1).onFrameUpdate(function ({ renderer }) {
+      const size = renderer.getSize(_rendererSize);
+      this.value = 0.5 * size.y;
+    }),
+  };
+
+  material.vertexNode = Fn(() => {
+    const instancePosition = attribute('instancePosition', 'vec3');
+    const mvPosition = modelViewMatrix.mul(vec4(instancePosition, 1.0));
+
+    let pointSize = uniforms.pointSize.mul(screenDPR);
+    const attenuatedSize = pointSize.mul(uniforms.viewportScale.div(mvPosition.z.negate()));
+    pointSize = mix(pointSize, attenuatedSize, uniforms.sizeAttenuation);
+
+    let offset = positionGeometry.xy.mul(pointSize);
+    offset = offset.div(viewportSize.div(2));
+
+    const clip = cameraProjectionMatrix.mul(mvPosition);
+    offset = offset.mul(clip.w);
+
+    return vec4(clip.xy.add(offset), clip.z, clip.w);
+  })();
+
+  material.colorNode = Fn(() => {
+    const texColor = texture(mapTexture, uv());
+    return vec4(texColor.rgb.mul(materialColor), texColor.a.mul(materialOpacity));
+  })();
+
+  material.userData.uniforms = uniforms;
+  //Plain, introspectable mirrors of the uniforms above - matches the
+  //legacy THREE.PointsMaterial API (material.size/sizeAttenuation).
+  material.size = uniforms.pointSize.value;
+  material.sizeAttenuation = !!uniforms.sizeAttenuation.value;
+
+  return material;
+};
+
+export { createInstancedPointsMaterial };

package/src/tls/textureSlides.js

@@ -0,0 +1,126 @@
+import * as THREE from 'three/webgpu';
+import {
+  Fn,
+  uniform,
+  vec3,
+  vec4,
+  texture3D,
+  mix,
+  positionLocal,
+  Discard,
+  If,
+  varying,
+  float,
+} from 'three/tsl';
+
+export function createWebGPUMaterial() {
+  const material = new THREE.MeshBasicNodeMaterial({
+    side: THREE.DoubleSide
+  });
+
+const dummyData = new Uint8Array(32);
+
+const placeholderTexture = new THREE.Data3DTexture(dummyData, 2, 2, 2);
+placeholderTexture.image = {
+    data: dummyData,
+    width: 2,
+    height: 2,
+    depth: 2,
+};
+
+placeholderTexture.format = THREE.RGBAFormat;
+placeholderTexture.type = THREE.UnsignedByteType; // Be explicit for WebGPU
+placeholderTexture.minFilter = THREE.LinearFilter;
+placeholderTexture.magFilter = THREE.LinearFilter;
+placeholderTexture.generateMipmaps = false; // WebGPU cannot auto-generate mipmaps for custom Data3D
+placeholderTexture.unpackAlignment = 1;
+placeholderTexture.needsUpdate = true;
+
+  // Define Uniforms
+  const uniforms = {
+    brightness:   uniform(0),
+    contrast:     uniform(1),
+    depth:        uniform(1),
+    discardAlpha: uniform(true),
+    direction:    uniform(1),
+    flipY:        uniform(true),
+    flipZ:        uniform(false),
+    nChannels:    uniform(1),
+    maskEnabled:  uniform(false),
+    slide:        uniform(new THREE.Vector3(0, 0, 1)),
+    time:         uniform(0)
+  };
+
+  // Share Varyings via TSL
+  // A TSL varying automatically wires itself from the vertex stage to the fragment stage.
+  const vUw = varying(vec3(0.0), 'vUw');
+  uniforms.diffuse0 = texture3D(placeholderTexture, vUw);
+  uniforms.diffuse1 = texture3D(placeholderTexture, vUw);
+  uniforms.mask = texture3D(placeholderTexture, vUw);
+
+  // Vertex Node
+  const vertexNode = Fn(() => {
+    // positionLocal provides position.xyz out-of-the-box
+    const slidePos = vec3(positionLocal).toVar();
+
+    // Handle direction branching
+    If(uniforms.direction.equal(1), () => {
+      slidePos.assign(vec3(uniforms.slide.x, positionLocal.y, positionLocal.x));
+    });
+    If(uniforms.direction.equal(2), () => {
+      slidePos.assign(vec3(positionLocal.x, uniforms.slide.y, positionLocal.y));
+    });
+    If(uniforms.direction.equal(3), () => {
+      slidePos.assign(vec3(positionLocal.x, positionLocal.y, uniforms.slide.z));
+    });
+
+    // Handle flipping
+    If(uniforms.flipY, () => {
+      slidePos.y.assign(float(1.0).sub(slidePos.y));
+    });
+    If(uniforms.flipZ, () => {
+      slidePos.z.assign(float(1.0).sub(slidePos.z));
+    });
+
+    // Write to our varying
+    vUw.assign(vec3(slidePos.x, slidePos.y, slidePos.z));
+
+    return positionLocal;
+  });
+
+
+  // Fragment Node
+  const fragmentNode = Fn(() => {
+    // diffuse0/diffuse1/mask are already-built texture3D sampling nodes.
+    const color0 = uniforms.diffuse0.r;
+    const color1 = uniforms.diffuse1.r;
+
+    const color = mix(color0, color1, uniforms.time).toVar();
+
+    // Mask implementation & discard logic
+    If(uniforms.maskEnabled.and(uniforms.discardAlpha), () => {
+      const maskVal = uniforms.mask.r;
+      If(maskVal.equal(0.0), () => {
+        Discard();
+      });
+    });
+
+    // Brightness calculations
+    const brightenedColor = vec3(color).add(vec3(uniforms.brightness));
+
+    // Contrast calculations
+    const contrastedColor = brightenedColor.sub(vec3(0.5)).mul(uniforms.contrast).add(vec3(0.5));
+
+    return vec4(contrastedColor, 1.0);
+  });
+
+   // Assign to NodeMaterial slots
+  // TSL handles the base vertex transformation automatically, positionNode hooks custom vertex behaviour.
+  material.positionNode = vertexNode();
+  material.colorNode = fragmentNode();
+
+  // Expose the uniforms reference so your application loop can update them via material.userData
+  material.userData.uniforms = uniforms;
+
+  return material;
+}

package/src/utilities.js

@@ -1,5 +1,4 @@
-import * as THREE from 'three';
-import { Geometry as THREEGeometry } from './three/Geometry';
+import * as THREE from 'three/webgpu';
 import SpriteTextModule from 'three-spritetext';
 const SpriteText = SpriteTextModule.default || SpriteTextModule;
 import discPNG from './assets/disc.png';
@@ -135,40 +134,63 @@ const updateMorphColorAttribute = function(targetGeometry, morph) {
     const morphColors = targetGeometry.morphAttributes[ "color" ];
     const influences = morph.morphTargetInfluences;
     const length = influences.length;
-    targetGeometry.deleteAttribute( 'morphColor0' );
-    targetGeometry.deleteAttribute( 'morphColor1' );
-    let bound = 0;
     let morphArray = [];
-    for (let i = 0; (1 > bound) || (i < length); i++) {
+    for (let i = 0; i < length; i++) {
       if (influences[i] > 0) {
-        bound++;
         morphArray.push([i, influences[i]]);
       }
     }
-    if (morphArray.length == 2) {
-      targetGeometry.setAttribute('morphColor0', morphColors[ morphArray[0][0] ] );
-      targetGeometry.setAttribute('morphColor1', morphColors[ morphArray[1][0] ] );
+    //morphColorMix (0 = fully morphColor0, 1 = fully morphColor1) drives the
+    //TSL colorNode set up by applyMorphColorNode - keep it in sync with
+    //whichever two morph targets currently have non-zero influence.
+    let mix = 0;
+    let index0 = 0;
+    let index1 = 0;
+    if (morphArray.length >= 2) {
+      index0 = morphArray[0][0];
+      index1 = morphArray[1][0];
+      const total = morphArray[0][1] + morphArray[1][1];
+      mix = total > 0 ? morphArray[1][1] / total : 0;
     } else if (morphArray.length == 1) {
-      targetGeometry.setAttribute('morphColor0', morphColors[ morphArray[0][0] ] );
-      targetGeometry.setAttribute('morphColor1', morphColors[ morphArray[0][0] ] );
+      index0 = index1 = morphArray[0][0];
+    }
+    //Keep morphColor0/morphColor1 as two persistent attributes and mutate
+    //their contents in place (array.set + needsUpdate) rather than
+    //swapping which BufferAttribute object is bound under those names
+    //every call. WebGPU's pipeline is built once against whichever
+    //attribute object first occupies a given slot; a brand new object
+    //bound in later (as deleteAttribute/setAttribute would do every frame)
+    //isn't guaranteed to be picked up by an already-built pipeline, which
+    //silently renders black. Mutating a single long-lived attribute is the
+    //standard, well tested update path both the WebGL and WebGPU
+    //backends use everywhere else.
+    let attribute0 = targetGeometry.getAttribute('morphColor0');
+    let attribute1 = targetGeometry.getAttribute('morphColor1');
+    if (!attribute0 || !attribute1) {
+      attribute0 = new THREE.Float32BufferAttribute(
+        new Float32Array(morphColors[0].array.length), morphColors[0].itemSize);
+      attribute1 = new THREE.Float32BufferAttribute(
+        new Float32Array(morphColors[0].array.length), morphColors[0].itemSize);
+      attribute0.setUsage(THREE.DynamicDrawUsage);
+      attribute1.setUsage(THREE.DynamicDrawUsage);
+      targetGeometry.setAttribute('morphColor0', attribute0);
+      targetGeometry.setAttribute('morphColor1', attribute1);
+    }
+    attribute0.array.set(morphColors[index0].array);
+    attribute0.needsUpdate = true;
+    attribute1.array.set(morphColors[index1].array);
+    attribute1.needsUpdate = true;
+    const morphColorMix = morph.material && morph.material.userData &&
+      morph.material.userData.uniforms && morph.material.userData.uniforms.morphColorMix;
+    if (morphColorMix) {
+      morphColorMix.value = mix;
     }
   }
 }
 
 
-const toBufferGeometry = (geometryIn, options) => {
-  let geometry = undefined;
-  if (geometryIn instanceof THREEGeometry) {
-    if (options.localTimeEnabled && !geometryIn.morphNormalsReady &&
-      (geometryIn.morphNormals == undefined || geometryIn.morphNormals.length == 0))
-      geometryIn.computeMorphNormals();
-    geometry = geometryIn.toIndexedBufferGeometry();
-    if (options.localMorphColour) {
-      copyMorphColorsToIndexedBufferGeometry(geometryIn, geometry);
-    }
-  } else if (geometryIn instanceof THREE.BufferGeometry) {
-    geometry = geometryIn.clone();
-  }
+const toBufferGeometry = (geometryIn) => {
+  const geometry = geometryIn.clone();
   geometry.colorsNeedUpdate = true;
   geometry.computeBoundingBox();
   geometry.computeBoundingSphere();
@@ -177,50 +199,6 @@ const toBufferGeometry = (geometryIn, options) => {
   return geometry;
 }
 
-const copyMorphColorsToBufferGeometry = (geometry, bufferGeometry) => {
-  if (geometry && geometry.morphColors && geometry.morphColors.length > 0 ) {
-    let array = [];
-    let morphColors = geometry.morphColors;
-    for ( var i = 0, l = morphColors.length; i < l; i ++ ) {
-      let morphColor = morphColors[ i ];
-      let colorArray = [];
-      for ( var j = 0; j < geometry.faces.length; j ++ ) {
-        let face = geometry.faces[j];
-        let color = getColorsRGB(morphColor.colors, face.a);
-        colorArray.push(color[0], color[1], color[2]);
-        color = getColorsRGB(morphColor.colors, face.b);
-        colorArray.push(color[0], color[1], color[2]);
-        color = getColorsRGB(morphColor.colors, face.c);
-        colorArray.push(color[0], color[1], color[2]);
-      }
-      var attribute = new THREE.Float32BufferAttribute( geometry.faces.length * 3 * 3, 3 );
-      attribute.name = morphColor.name;
-      array.push( attribute.copyArray( colorArray ) );
-    }
-    bufferGeometry.morphAttributes[ "color" ] = array;
-  }
-}
-
-
-const copyMorphColorsToIndexedBufferGeometry = (geometry, bufferGeometry) => {
-  if (geometry && geometry.morphColors && geometry.morphColors.length > 0 ) {
-    let array = [];
-    let morphColors = geometry.morphColors;
-    for ( let i = 0, l = morphColors.length; i < l; i ++ ) {
-      const morphColor = morphColors[ i ];
-      const colorArray = [];
-      for ( let j = 0; j < morphColor.colors.length * 3; j ++ ) {
-        let color = getColorsRGB(morphColor.colors, j);
-        colorArray.push(color[0], color[1], color[2]);
-      }
-      const attribute = new THREE.Float32BufferAttribute( colorArray, 3 );
-      attribute.name = morphColor.name;
-      array.push( attribute );
-    }
-    bufferGeometry.morphAttributes[ "color" ] = array;
-  }
-}
-
 /**
  * Merges a set of attributes into a single instance. All attributes must have compatible properties and types.
  * Instances of {@link InterleavedBufferAttribute} are not supported.
@@ -884,7 +862,6 @@ function copyColorsArray(attribute, colors) {
 }
 
 export {
-  copyMorphColorsToBufferGeometry,
   copyColorsArray,
   copyVector2sArray,
   copyVector3sArray,

package/src/videoHandler.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 
 /**
  * Provide basic functionality to display video as texture.
@@ -75,7 +75,6 @@ const VideoHandler = function(srcIn)  {
 		_this.videoTexture = new THREE.VideoTexture( _this.video );
 		_this.videoTexture.minFilter = THREE.LinearFilter;
 		_this.videoTexture.magFilter = THREE.LinearFilter;
-		_this.videoTexture.format = THREE.RGBFormat;
     _this.video.currentTime = 0;
 		return _this.videoTexture;
 	}

package/src/workers/geometryCSG.worker.js

@@ -1,7 +1,7 @@
 
 import { Geometry } from '../primitives/geometry';
 import { GeometryCSGInternal } from './geometryCSGInternal';
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 
 const JSONLoader = THREE.BufferGeometryLoader;
 let core = undefined;

package/src/workers/geometryCSGInternal.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import { ThreeBSPWrapper } from '../three-js-csg';
 const ThreeBSP = ThreeBSPWrapper(THREE);
 

package/src/zinc.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import * as THREE from 'three/webgpu';
 import PACKAGE from '../package.json';
 
 // Import all internal primitives and modules

package/vite.config.js

@@ -23,7 +23,9 @@ export default defineConfig({
         extend: true,
         globals: {
           'css-element-queries': 'cssElememtQueries',
-          three: 'THREE',
+          'three': 'THREE',
+          'three/tsl': 'THREE',
+          'three/webgpu': 'THREE',
           'three-spritetext': 'SpriteText',
           'three/examples/jsm/loaders/GLTFLoader': 'GLTFLoader',
           'fflate': 'fflate'

package/src/primitives/augmentShader.js

@@ -1,45 +0,0 @@
-
-/**
- * Provide additional shaders to render time dependent color.
- */
-
-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
-      `
-  );
-}
-
-const printShader = function (shader) {
-  console.log(shader.vertexShader);
-  console.log(shader.fragmentShader);
-}
-
-
-export { augmentMorphColor, printShader };