@plastic-software/three 0.167.3 → 0.174.0

package/examples/jsm/misc/Volume.js

@@ -7,18 +7,20 @@ import { VolumeSlice } from '../misc/VolumeSlice.js';
 
 /**
  * This class had been written to handle the output of the NRRD loader.
- * It contains a volume of data and informations about it.
+ * It contains a volume of data and information about it.
  * For now it only handles 3 dimensional data.
  * See the webgl_loader_nrrd.html example and the loaderNRRD.js file to see how to use this class.
  * @class
- * @param   {number}        xLength         Width of the volume
- * @param   {number}        yLength         Length of the volume
- * @param   {number}        zLength         Depth of the volume
- * @param   {string}        type            The type of data (uint8, uint16, ...)
- * @param   {ArrayBuffer}   arrayBuffer     The buffer with volume data
  */
 class Volume {
 
+	/**
+	 * @param   {number}        xLength         Width of the volume
+	 * @param   {number}        yLength         Length of the volume
+	 * @param   {number}        zLength         Depth of the volume
+	 * @param   {string}        type            The type of data (uint8, uint16, ...)
+	 * @param   {ArrayBuffer}   arrayBuffer     The buffer with volume data
+	 */
 	constructor( xLength, yLength, zLength, type, arrayBuffer ) {
 
 		if ( xLength !== undefined ) {
@@ -209,7 +211,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} getData Shortcut for data[access(i,j,k)]
+	 * Shortcut for data[access(i,j,k)]
+	 *
 	 * @memberof Volume
 	 * @param {number} i    First coordinate
 	 * @param {number} j    Second coordinate
@@ -223,7 +226,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} access compute the index in the data array corresponding to the given coordinates in IJK system
+	 * Compute the index in the data array corresponding to the given coordinates in IJK system
+	 *
 	 * @memberof Volume
 	 * @param {number} i    First coordinate
 	 * @param {number} j    Second coordinate
@@ -237,7 +241,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} reverseAccess Retrieve the IJK coordinates of the voxel corresponding of the given index in the data
+	 * Retrieve the IJK coordinates of the voxel corresponding of the given index in the data
+	 *
 	 * @memberof Volume
 	 * @param {number} index index of the voxel
 	 * @returns {Array}  [x,y,z]
@@ -252,7 +257,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} map Apply a function to all the voxels, be careful, the value will be replaced
+	 * Apply a function to all the voxels, be careful, the value will be replaced
+	 *
 	 * @memberof Volume
 	 * @param {Function} functionToMap A function to apply to every voxel, will be called with the following parameters :
 	 *                                 value of the voxel
@@ -277,11 +283,12 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} extractPerpendicularPlane Compute the orientation of the slice and returns all the information relative to the geometry such as sliceAccess, the plane matrix (orientation and position in RAS coordinate) and the dimensions of the plane in both coordinate system.
+	 * Compute the orientation of the slice and returns all the information relative to the geometry such as sliceAccess, the plane matrix (orientation and position in RAS coordinate) and the dimensions of the plane in both coordinate system.
+	 *
 	 * @memberof Volume
 	 * @param {string}            axis  the normal axis to the slice 'x' 'y' or 'z'
-	 * @param {number}            index the index of the slice
-	 * @returns {Object} an object containing all the usefull information on the geometry of the slice
+	 * @param {number}            RASIndex the index of the slice
+	 * @returns {Object} an object containing all the useful information on the geometry of the slice
 	 */
 	extractPerpendicularPlane( axis, RASIndex ) {
 
@@ -401,8 +408,9 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} extractSlice Returns a slice corresponding to the given axis and index
-	 *                        The coordinate are given in the Right Anterior Superior coordinate format
+	 * Returns a slice corresponding to the given axis and index.
+	 * The coordinate are given in the Right Anterior Superior coordinate format.
+	 *
 	 * @memberof Volume
 	 * @param {string}            axis  the normal axis to the slice 'x' 'y' or 'z'
 	 * @param {number}            index the index of the slice
@@ -417,8 +425,9 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} repaintAllSlices Call repaint on all the slices extracted from this volume
-	 * @see VolumeSlice.repaint
+	 * Call repaint on all the slices extracted from this volume
+	 *
+	 * @see {@link VolumeSlice#repaint}
 	 * @memberof Volume
 	 * @returns {Volume} this
 	 */
@@ -435,7 +444,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} computeMinMax Compute the minimum and the maximum of the data in the volume
+	 * Compute the minimum and the maximum of the data in the volume
+	 *
 	 * @memberof Volume
 	 * @returns {Array} [min,max]
 	 */

package/examples/jsm/misc/VolumeSlice.js

@@ -12,13 +12,15 @@ import {
 /**
  * This class has been made to hold a slice of a volume data
  * @class
- * @param   {Volume} volume    The associated volume
- * @param   {number}       [index=0] The index of the slice
- * @param   {string}       [axis='z']      For now only 'x', 'y' or 'z' but later it will change to a normal vector
- * @see Volume
+ * @see {@link Volume}
  */
 class VolumeSlice {
 
+	/**
+ 	 * @param {Volume} volume     The associated volume
+ 	 * @param {number} [index=0]  The index of the slice
+ 	 * @param {string} [axis='z'] For now only 'x', 'y' or 'z' but later it will change to a normal vector
+	 */
 	constructor( volume, index, axis ) {
 
 		const slice = this;
@@ -27,7 +29,7 @@ class VolumeSlice {
 		 */
 		this.volume = volume;
 		/**
-		 * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
+		 * @member {number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
 		 */
 		index = index || 0;
 		Object.defineProperty( this, 'index', {
@@ -45,7 +47,7 @@ class VolumeSlice {
 			}
 		} );
 		/**
-		 * @member {String} axis The normal axis
+		 * @member {string} axis The normal axis
 		 */
 		this.axis = axis || 'z';
 
@@ -68,6 +70,7 @@ class VolumeSlice {
 
 		const canvasMap = new Texture( this.canvas );
 		canvasMap.minFilter = LinearFilter;
+		canvasMap.generateMipmaps = false;
 		canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
 		canvasMap.colorSpace = SRGBColorSpace;
 		const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
@@ -77,32 +80,32 @@ class VolumeSlice {
 		this.mesh = new Mesh( this.geometry, material );
 		this.mesh.matrixAutoUpdate = false;
 		/**
-		 * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
+		 * @member {boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
 		 */
 		this.geometryNeedsUpdate = true;
 		this.repaint();
 
 		/**
-		 * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
+		 * @member {number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
 		 */
 
 		/**
-		 * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
+		 * @member {number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
 		 */
 
 		/**
 		 * @member {Function} sliceAccess Function that allow the slice to access right data
-		 * @see Volume.extractPerpendicularPlane
-		 * @param {Number} i The first coordinate
-		 * @param {Number} j The second coordinate
-		 * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
+		 * @see {@link Volume#extractPerpendicularPlane}
+		 * @param {number} i The first coordinate
+		 * @param {number} j The second coordinate
+		 * @returns {number} the index corresponding to the voxel in volume.data of the given position in the slice
 		 */
 
 
 	}
 
 	/**
-	 * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
+	 * Refresh the texture and the geometry if geometryNeedsUpdate is set to true
 	 * @memberof VolumeSlice
 	 */
 	repaint() {
@@ -188,8 +191,8 @@ class VolumeSlice {
 	}
 
 	/**
-	 * @member {Function} Refresh the geometry according to axis and index
-	 * @see Volume.extractPerpendicularPlane
+	 * Refresh the geometry according to axis and index
+	 * @see {@link Volume#extractPerpendicularPlane}
 	 * @memberof VolumeSlice
 	 */
 	updateGeometry() {

package/examples/jsm/modifiers/CurveModifier.js

@@ -20,6 +20,7 @@ import {
  * Make a new DataTexture to store the descriptions of the curves.
  *
  * @param { number } numberOfCurves the number of curves needed to be described by this texture.
+ * @returns { DataTexture }
  */
 export function initSplineTexture( numberOfCurves = 1 ) {
 
@@ -93,7 +94,8 @@ function setTextureValue( texture, index, x, y, z, o ) {
 /**
  * Create a new set of uniforms for describing the curve modifier
  *
- * @param { DataTexture } Texture which holds the curve description
+ * @param { DataTexture } splineTexture which holds the curve description
+ * @returns { Object } The uniforms object to be used in the shader
  */
 export function getUniforms( splineTexture ) {
 
@@ -137,10 +139,10 @@ export function modifyShader( material, uniforms, numberOfCurves = 1 ) {
 		// chunk import moved in front of modified shader below
 			.replace( '#include <beginnormal_vertex>', '' )
 
-			// vec3 transformedNormal declaration overriden below
+			// vec3 transformedNormal declaration overridden below
 			.replace( '#include <defaultnormal_vertex>', '' )
 
-			// vec3 transformed declaration overriden below
+			// vec3 transformed declaration overridden below
 			.replace( '#include <begin_vertex>', '' )
 
 			// shader override
@@ -196,7 +198,7 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 }
 
 /**
- * A helper class for making meshes bend aroudn curves
+ * A helper class for making meshes bend around curves
  */
 export class Flow {
 
@@ -207,8 +209,8 @@ export class Flow {
 	constructor( mesh, numberOfCurves = 1 ) {
 
 		const obj3D = mesh.clone();
-		const splineTexure = initSplineTexture( numberOfCurves );
-		const uniforms = getUniforms( splineTexure );
+		const splineTexture = initSplineTexture( numberOfCurves );
+		const uniforms = getUniforms( splineTexture );
 		obj3D.traverse( function ( child ) {
 
 			if (
@@ -245,7 +247,7 @@ export class Flow {
 		this.curveLengthArray = new Array( numberOfCurves );
 
 		this.object3D = obj3D;
-		this.splineTexure = splineTexure;
+		this.splineTexture = splineTexture;
 		this.uniforms = uniforms;
 
 	}
@@ -257,7 +259,7 @@ export class Flow {
 		this.uniforms.spineLength.value = curveLength;
 		this.curveLengthArray[ index ] = curveLength;
 		this.curveArray[ index ] = curve;
-		updateSplineTexture( this.splineTexure, curve, index );
+		updateSplineTexture( this.splineTexture, curve, index );
 
 	}
 

package/examples/jsm/modifiers/CurveModifierGPU.js

@@ -0,0 +1,235 @@
+// Original src: https://github.com/zz85/threejs-path-flow
+const CHANNELS = 4;
+const TEXTURE_WIDTH = 1024;
+const TEXTURE_HEIGHT = 4;
+
+import {
+	DataTexture,
+	DataUtils,
+	RGBAFormat,
+	HalfFloatType,
+	RepeatWrapping,
+	Mesh,
+	InstancedMesh,
+	LinearFilter
+} from 'three';
+
+import { modelWorldMatrix, normalLocal, vec2, vec3, vec4, mat3, varyingProperty, texture, reference, Fn, select, positionLocal } from 'three/tsl';
+
+/**
+ * Make a new DataTexture to store the descriptions of the curves.
+ *
+ * @param { number } [numberOfCurves=1] the number of curves needed to be described by this texture.
+ * @returns { DataTexture } The new DataTexture
+ */
+export function initSplineTexture( numberOfCurves = 1 ) {
+
+	const dataArray = new Uint16Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
+	const dataTexture = new DataTexture(
+		dataArray,
+		TEXTURE_WIDTH,
+		TEXTURE_HEIGHT * numberOfCurves,
+		RGBAFormat,
+		HalfFloatType
+	);
+
+	dataTexture.wrapS = RepeatWrapping;
+	dataTexture.wrapY = RepeatWrapping;
+	dataTexture.magFilter = LinearFilter;
+	dataTexture.minFilter = LinearFilter;
+	dataTexture.needsUpdate = true;
+
+	return dataTexture;
+
+}
+
+/**
+ * Write the curve description to the data texture
+ *
+ * @param { DataTexture } texture The DataTexture to write to
+ * @param { Curve } splineCurve The curve to describe
+ * @param { number } offset Which curve slot to write to
+ */
+export function updateSplineTexture( texture, splineCurve, offset = 0 ) {
+
+	const numberOfPoints = Math.floor( TEXTURE_WIDTH * ( TEXTURE_HEIGHT / 4 ) );
+	splineCurve.arcLengthDivisions = numberOfPoints / 2;
+	splineCurve.updateArcLengths();
+	const points = splineCurve.getSpacedPoints( numberOfPoints );
+	const frenetFrames = splineCurve.computeFrenetFrames( numberOfPoints, true );
+
+	for ( let i = 0; i < numberOfPoints; i ++ ) {
+
+		const rowOffset = Math.floor( i / TEXTURE_WIDTH );
+		const rowIndex = i % TEXTURE_WIDTH;
+
+		let pt = points[ i ];
+		setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 0 + rowOffset + ( TEXTURE_HEIGHT * offset ) );
+		pt = frenetFrames.tangents[ i ];
+		setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 1 + rowOffset + ( TEXTURE_HEIGHT * offset ) );
+		pt = frenetFrames.normals[ i ];
+		setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 2 + rowOffset + ( TEXTURE_HEIGHT * offset ) );
+		pt = frenetFrames.binormals[ i ];
+		setTextureValue( texture, rowIndex, pt.x, pt.y, pt.z, 3 + rowOffset + ( TEXTURE_HEIGHT * offset ) );
+
+	}
+
+	texture.needsUpdate = true;
+
+}
+
+
+function setTextureValue( texture, index, x, y, z, o ) {
+
+	const image = texture.image;
+	const { data } = image;
+	const i = CHANNELS * TEXTURE_WIDTH * o; // Row Offset
+
+	data[ index * CHANNELS + i + 0 ] = DataUtils.toHalfFloat( x );
+	data[ index * CHANNELS + i + 1 ] = DataUtils.toHalfFloat( y );
+	data[ index * CHANNELS + i + 2 ] = DataUtils.toHalfFloat( z );
+	data[ index * CHANNELS + i + 3 ] = DataUtils.toHalfFloat( 1 );
+
+}
+
+/**
+ * Create a new set of uniforms for describing the curve modifier
+ *
+ * @param { DataTexture } splineTexture which holds the curve description
+ * @returns { Object } The uniforms object
+ */
+export function getUniforms( splineTexture ) {
+
+	return {
+		spineTexture: splineTexture,
+		pathOffset: 0, // time of path curve
+		pathSegment: 1, // fractional length of path
+		spineOffset: 161,
+		spineLength: 400,
+		flow: 1, // int
+	};
+
+}
+
+export function modifyShader( material, uniforms, numberOfCurves ) {
+
+	const spineTexture = uniforms.spineTexture;
+
+	const pathOffset = reference( 'pathOffset', 'float', uniforms );
+	const pathSegment = reference( 'pathSegment', 'float', uniforms );
+	const spineOffset = reference( 'spineOffset', 'float', uniforms );
+	const spineLength = reference( 'spineLength', 'float', uniforms );
+	const flow = reference( 'flow', 'float', uniforms );
+
+	material.positionNode = Fn( () => {
+
+		const textureStacks = TEXTURE_HEIGHT / 4;
+		const textureScale = TEXTURE_HEIGHT * numberOfCurves;
+
+		const worldPos = modelWorldMatrix.mul( vec4( positionLocal, 1 ) ).toVar();
+
+		const bend = flow.greaterThan( 0 ).toVar();
+		const xWeight = select( bend, 0, 1 ).toVar();
+
+		const spinePortion = select( bend, worldPos.x.add( spineOffset ).div( spineLength ), 0 );
+		const mt = spinePortion.mul( pathSegment ).add( pathOffset ).mul( textureStacks ).toVar();
+
+		mt.assign( mt.mod( textureStacks ) );
+
+		const rowOffset = mt.floor().toVar();
+
+		const spinePos = texture( spineTexture, vec2( mt, rowOffset.add( 0.5 ).div( textureScale ) ) ).xyz;
+
+		const a = texture( spineTexture, vec2( mt, rowOffset.add( 1.5 ).div( textureScale ) ) ).xyz;
+		const b = texture( spineTexture, vec2( mt, rowOffset.add( 2.5 ).div( textureScale ) ) ).xyz;
+		const c = texture( spineTexture, vec2( mt, rowOffset.add( 3.5 ).div( textureScale ) ) ).xyz;
+
+		const basis = mat3( a, b, c ).toVar();
+
+		varyingProperty( 'vec3', 'curveNormal' ).assign( basis.mul( normalLocal ) );
+
+		return basis.mul( vec3( worldPos.x.mul( xWeight ), worldPos.y, worldPos.z ) ).add( spinePos );
+
+	} )();
+
+	material.normalNode = varyingProperty( 'vec3', 'curveNormal' );
+
+}
+
+/**
+ * A helper class for making meshes bend around curves
+ */
+export class Flow {
+
+	/**
+	 * @param {Mesh} mesh The mesh to clone and modify to bend around the curve
+	 * @param {number} numberOfCurves The amount of space that should preallocated for additional curves
+	 */
+	constructor( mesh, numberOfCurves = 1 ) {
+
+		const obj3D = mesh.clone();
+		const splineTexture = initSplineTexture( numberOfCurves );
+		const uniforms = getUniforms( splineTexture );
+
+		obj3D.traverse( function ( child ) {
+
+			if (
+				child instanceof Mesh ||
+				child instanceof InstancedMesh
+			) {
+
+				if ( Array.isArray( child.material ) ) {
+
+					const materials = [];
+
+					for ( const material of child.material ) {
+
+						const newMaterial = material.clone();
+						modifyShader( newMaterial, uniforms, numberOfCurves );
+						materials.push( newMaterial );
+
+					}
+
+					child.material = materials;
+
+				} else {
+
+					child.material = child.material.clone();
+					modifyShader( child.material, uniforms, numberOfCurves );
+
+				}
+
+			}
+
+		} );
+
+		this.curveArray = new Array( numberOfCurves );
+		this.curveLengthArray = new Array( numberOfCurves );
+
+		this.object3D = obj3D;
+		this.splineTexture = splineTexture;
+		this.uniforms = uniforms;
+
+	}
+
+	updateCurve( index, curve ) {
+
+		if ( index >= this.curveArray.length ) throw Error( 'Index out of range for Flow' );
+
+		const curveLength = curve.getLength();
+
+		this.uniforms.spineLength = curveLength;
+		this.curveLengthArray[ index ] = curveLength;
+		this.curveArray[ index ] = curve;
+
+		updateSplineTexture( this.splineTexture, curve, index );
+
+	}
+
+	moveAlongCurve( amount ) {
+
+		this.uniforms.pathOffset += amount;
+
+	}
+
+}

package/examples/jsm/modifiers/SimplifyModifier.js

@@ -29,7 +29,7 @@ class SimplifyModifier {
 		delete geometry.morphAttributes.normal;
 		const attributes = geometry.attributes;
 
-		// this modifier can only process indexed and non-indexed geomtries with at least a position attribute
+		// this modifier can only process indexed and non-indexed geometries with at least a position attribute
 
 		for ( const name in attributes ) {
 
@@ -584,7 +584,7 @@ class Vertex {
 
 		// these will be computed in computeEdgeCostAtVertex()
 		this.collapseCost = 0; // cost of collapsing this vertex, the less the better. aka objdist
-		this.collapseNeighbor = null; // best candinate for collapsing
+		this.collapseNeighbor = null; // best candidate for collapsing
 
 	}
 

package/examples/jsm/objects/GroundedSkybox.js

@@ -1,9 +1,9 @@
 import { Mesh, MeshBasicMaterial, SphereGeometry, Vector3 } from 'three';
 
 /**
- * A ground-projected skybox. The height is how far the camera that took the photo was above the ground - 
- * a larger value will magnify the downward part of the image. By default the object is centered at the camera, 
- * so it is often helpful to set skybox.position.y = height to put the ground at the origin. Set the radius 
+ * A ground-projected skybox. The height is how far the camera that took the photo was above the ground -
+ * a larger value will magnify the downward part of the image. By default the object is centered at the camera,
+ * so it is often helpful to set skybox.position.y = height to put the ground at the origin. Set the radius
  * large enough to ensure your user's camera stays inside.
  */
 
@@ -18,7 +18,7 @@ class GroundedSkybox extends Mesh {
 		}
 
 		const geometry = new SphereGeometry( radius, 2 * resolution, resolution );
-		geometry.scale( 1, 1, -1 );
+		geometry.scale( 1, 1, - 1 );
 
 		const pos = geometry.getAttribute( 'position' );
 		const tmp = new Vector3();