@anov/3d 0.0.1 → 0.0.2

package/examples/jsm/misc/VolumeSlice.js

@@ -0,0 +1,229 @@
+import {
+	ClampToEdgeWrapping,
+	DoubleSide,
+	LinearFilter,
+	Mesh,
+	MeshBasicMaterial,
+	PlaneGeometry,
+	Texture,
+	SRGBColorSpace
+} from 'three';
+
+/**
+ * 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
+ */
+class VolumeSlice {
+
+	constructor( volume, index, axis ) {
+
+		const slice = this;
+		/**
+		 * @member {Volume} volume The associated volume
+		 */
+		this.volume = volume;
+		/**
+		 * @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', {
+			get: function () {
+
+				return index;
+
+			},
+			set: function ( value ) {
+
+				index = value;
+				slice.geometryNeedsUpdate = true;
+				return index;
+
+			}
+		} );
+		/**
+		 * @member {String} axis The normal axis
+		 */
+		this.axis = axis || 'z';
+
+		/**
+		 * @member {HTMLCanvasElement} canvas The final canvas used for the texture
+		 */
+		/**
+		 * @member {CanvasRenderingContext2D} ctx Context of the canvas
+		 */
+		this.canvas = document.createElement( 'canvas' );
+		/**
+		 * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
+		 */
+		/**
+		 * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
+		 */
+		this.canvasBuffer = document.createElement( 'canvas' );
+		this.updateGeometry();
+
+
+		const canvasMap = new Texture( this.canvas );
+		canvasMap.minFilter = LinearFilter;
+		canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
+		canvasMap.colorSpace = SRGBColorSpace;
+		const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
+		/**
+		 * @member {Mesh} mesh The mesh ready to get used in the scene
+		 */
+		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
+		 */
+		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} 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
+		 */
+
+
+	}
+
+	/**
+	 * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
+	 * @memberof VolumeSlice
+	 */
+	repaint() {
+
+		if ( this.geometryNeedsUpdate ) {
+
+			this.updateGeometry();
+
+		}
+
+		const iLength = this.iLength,
+			jLength = this.jLength,
+			sliceAccess = this.sliceAccess,
+			volume = this.volume,
+			canvas = this.canvasBuffer,
+			ctx = this.ctxBuffer;
+
+
+		// get the imageData and pixel array from the canvas
+		const imgData = ctx.getImageData( 0, 0, iLength, jLength );
+		const data = imgData.data;
+		const volumeData = volume.data;
+		const upperThreshold = volume.upperThreshold;
+		const lowerThreshold = volume.lowerThreshold;
+		const windowLow = volume.windowLow;
+		const windowHigh = volume.windowHigh;
+
+		// manipulate some pixel elements
+		let pixelCount = 0;
+
+		if ( volume.dataType === 'label' ) {
+
+			//this part is currently useless but will be used when colortables will be handled
+			for ( let j = 0; j < jLength; j ++ ) {
+
+				for ( let i = 0; i < iLength; i ++ ) {
+
+					let label = volumeData[ sliceAccess( i, j ) ];
+					label = label >= this.colorMap.length ? ( label % this.colorMap.length ) + 1 : label;
+					const color = this.colorMap[ label ];
+					data[ 4 * pixelCount ] = ( color >> 24 ) & 0xff;
+					data[ 4 * pixelCount + 1 ] = ( color >> 16 ) & 0xff;
+					data[ 4 * pixelCount + 2 ] = ( color >> 8 ) & 0xff;
+					data[ 4 * pixelCount + 3 ] = color & 0xff;
+					pixelCount ++;
+
+				}
+
+			}
+
+		} else {
+
+			for ( let j = 0; j < jLength; j ++ ) {
+
+				for ( let i = 0; i < iLength; i ++ ) {
+
+					let value = volumeData[ sliceAccess( i, j ) ];
+					let alpha = 0xff;
+					//apply threshold
+					alpha = upperThreshold >= value ? ( lowerThreshold <= value ? alpha : 0 ) : 0;
+					//apply window level
+					value = Math.floor( 255 * ( value - windowLow ) / ( windowHigh - windowLow ) );
+					value = value > 255 ? 255 : ( value < 0 ? 0 : value | 0 );
+
+					data[ 4 * pixelCount ] = value;
+					data[ 4 * pixelCount + 1 ] = value;
+					data[ 4 * pixelCount + 2 ] = value;
+					data[ 4 * pixelCount + 3 ] = alpha;
+					pixelCount ++;
+
+				}
+
+			}
+
+		}
+
+		ctx.putImageData( imgData, 0, 0 );
+		this.ctx.drawImage( canvas, 0, 0, iLength, jLength, 0, 0, this.canvas.width, this.canvas.height );
+
+
+		this.mesh.material.map.needsUpdate = true;
+
+	}
+
+	/**
+	 * @member {Function} Refresh the geometry according to axis and index
+	 * @see Volume.extractPerpendicularPlane
+	 * @memberof VolumeSlice
+	 */
+	updateGeometry() {
+
+		const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
+		this.sliceAccess = extracted.sliceAccess;
+		this.jLength = extracted.jLength;
+		this.iLength = extracted.iLength;
+		this.matrix = extracted.matrix;
+
+		this.canvas.width = extracted.planeWidth;
+		this.canvas.height = extracted.planeHeight;
+		this.canvasBuffer.width = this.iLength;
+		this.canvasBuffer.height = this.jLength;
+		this.ctx = this.canvas.getContext( '2d' );
+		this.ctxBuffer = this.canvasBuffer.getContext( '2d' );
+
+		if ( this.geometry ) this.geometry.dispose(); // dispose existing geometry
+
+		this.geometry = new PlaneGeometry( extracted.planeWidth, extracted.planeHeight );
+
+		if ( this.mesh ) {
+
+			this.mesh.geometry = this.geometry;
+			//reset mesh matrix
+			this.mesh.matrix.identity();
+			this.mesh.applyMatrix4( this.matrix );
+
+		}
+
+		this.geometryNeedsUpdate = false;
+
+	}
+
+}
+
+export { VolumeSlice };

package/examples/jsm/modifiers/CurveModifier.js

@@ -0,0 +1,326 @@
+// Original src: https://github.com/zz85/threejs-path-flow
+const CHANNELS = 4;
+const TEXTURE_WIDTH = 1024;
+const TEXTURE_HEIGHT = 4;
+
+import {
+	DataTexture,
+	RGBAFormat,
+	FloatType,
+	RepeatWrapping,
+	Mesh,
+	InstancedMesh,
+	NearestFilter,
+	DynamicDrawUsage,
+	Matrix4
+} from 'three';
+
+/**
+ * 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.
+ */
+export function initSplineTexture( numberOfCurves = 1 ) {
+
+	const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
+	const dataTexture = new DataTexture(
+		dataArray,
+		TEXTURE_WIDTH,
+		TEXTURE_HEIGHT * numberOfCurves,
+		RGBAFormat,
+		FloatType
+	);
+
+	dataTexture.wrapS = RepeatWrapping;
+	dataTexture.wrapY = RepeatWrapping;
+	dataTexture.magFilter = NearestFilter;
+	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 ] = x;
+	data[ index * CHANNELS + i + 1 ] = y;
+	data[ index * CHANNELS + i + 2 ] = z;
+	data[ index * CHANNELS + i + 3 ] = 1;
+
+}
+
+/**
+ * Create a new set of uniforms for describing the curve modifier
+ *
+ * @param { DataTexture } Texture which holds the curve description
+ */
+export function getUniforms( splineTexture ) {
+
+	const uniforms = {
+		spineTexture: { value: splineTexture },
+		pathOffset: { type: 'f', value: 0 }, // time of path curve
+		pathSegment: { type: 'f', value: 1 }, // fractional length of path
+		spineOffset: { type: 'f', value: 161 },
+		spineLength: { type: 'f', value: 400 },
+		flow: { type: 'i', value: 1 },
+	};
+	return uniforms;
+
+}
+
+export function modifyShader( material, uniforms, numberOfCurves = 1 ) {
+
+	if ( material.__ok ) return;
+	material.__ok = true;
+
+	material.onBeforeCompile = ( shader ) => {
+
+		if ( shader.__modified ) return;
+		shader.__modified = true;
+
+		Object.assign( shader.uniforms, uniforms );
+
+		const vertexShader = `
+		uniform sampler2D spineTexture;
+		uniform float pathOffset;
+		uniform float pathSegment;
+		uniform float spineOffset;
+		uniform float spineLength;
+		uniform int flow;
+
+		float textureLayers = ${TEXTURE_HEIGHT * numberOfCurves}.;
+		float textureStacks = ${TEXTURE_HEIGHT / 4}.;
+
+		${shader.vertexShader}
+		`
+		// chunk import moved in front of modified shader below
+			.replace( '#include <beginnormal_vertex>', '' )
+
+			// vec3 transformedNormal declaration overriden below
+			.replace( '#include <defaultnormal_vertex>', '' )
+
+			// vec3 transformed declaration overriden below
+			.replace( '#include <begin_vertex>', '' )
+
+			// shader override
+			.replace(
+				/void\s*main\s*\(\)\s*\{/,
+				`
+void main() {
+#include <beginnormal_vertex>
+
+vec4 worldPos = modelMatrix * vec4(position, 1.);
+
+bool bend = flow > 0;
+float xWeight = bend ? 0. : 1.;
+
+#ifdef USE_INSTANCING
+float pathOffsetFromInstanceMatrix = instanceMatrix[3][2];
+float spineLengthFromInstanceMatrix = instanceMatrix[3][0];
+float spinePortion = bend ? (worldPos.x + spineOffset) / spineLengthFromInstanceMatrix : 0.;
+float mt = (spinePortion * pathSegment + pathOffset + pathOffsetFromInstanceMatrix)*textureStacks;
+#else
+float spinePortion = bend ? (worldPos.x + spineOffset) / spineLength : 0.;
+float mt = (spinePortion * pathSegment + pathOffset)*textureStacks;
+#endif
+
+mt = mod(mt, textureStacks);
+float rowOffset = floor(mt);
+
+#ifdef USE_INSTANCING
+rowOffset += instanceMatrix[3][1] * ${TEXTURE_HEIGHT}.;
+#endif
+
+vec3 spinePos = texture2D(spineTexture, vec2(mt, (0. + rowOffset + 0.5) / textureLayers)).xyz;
+vec3 a =        texture2D(spineTexture, vec2(mt, (1. + rowOffset + 0.5) / textureLayers)).xyz;
+vec3 b =        texture2D(spineTexture, vec2(mt, (2. + rowOffset + 0.5) / textureLayers)).xyz;
+vec3 c =        texture2D(spineTexture, vec2(mt, (3. + rowOffset + 0.5) / textureLayers)).xyz;
+mat3 basis = mat3(a, b, c);
+
+vec3 transformed = basis
+	* vec3(worldPos.x * xWeight, worldPos.y * 1., worldPos.z * 1.)
+	+ spinePos;
+
+vec3 transformedNormal = normalMatrix * (basis * objectNormal);
+			` ).replace(
+				'#include <project_vertex>',
+				`vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
+				gl_Position = projectionMatrix * mvPosition;`
+			);
+
+		shader.vertexShader = vertexShader;
+
+	};
+
+}
+
+/**
+ * A helper class for making meshes bend aroudn 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 splineTexure = initSplineTexture( numberOfCurves );
+		const uniforms = getUniforms( splineTexure );
+		obj3D.traverse( function ( child ) {
+
+			if (
+				child instanceof Mesh ||
+				child instanceof InstancedMesh
+			) {
+
+				child.material = child.material.clone();
+				modifyShader( child.material, uniforms, numberOfCurves );
+
+			}
+
+		} );
+
+		this.curveArray = new Array( numberOfCurves );
+		this.curveLengthArray = new Array( numberOfCurves );
+
+		this.object3D = obj3D;
+		this.splineTexure = splineTexure;
+		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.value = curveLength;
+		this.curveLengthArray[ index ] = curveLength;
+		this.curveArray[ index ] = curve;
+		updateSplineTexture( this.splineTexure, curve, index );
+
+	}
+
+	moveAlongCurve( amount ) {
+
+		this.uniforms.pathOffset.value += amount;
+
+	}
+
+}
+const matrix = new Matrix4();
+
+/**
+ * A helper class for creating instanced versions of flow, where the instances are placed on the curve.
+ */
+export class InstancedFlow extends Flow {
+
+	/**
+	 *
+	 * @param {number} count The number of instanced elements
+	 * @param {number} curveCount The number of curves to preallocate for
+	 * @param {Geometry} geometry The geometry to use for the instanced mesh
+	 * @param {Material} material The material to use for the instanced mesh
+	 */
+	constructor( count, curveCount, geometry, material ) {
+
+		const mesh = new InstancedMesh(
+			geometry,
+			material,
+			count
+		);
+		mesh.instanceMatrix.setUsage( DynamicDrawUsage );
+		mesh.frustumCulled = false;
+		super( mesh, curveCount );
+
+		this.offsets = new Array( count ).fill( 0 );
+		this.whichCurve = new Array( count ).fill( 0 );
+
+	}
+
+	/**
+	 * The extra information about which curve and curve position is stored in the translation components of the matrix for the instanced objects
+	 * This writes that information to the matrix and marks it as needing update.
+	 *
+	 * @param {number} index of the instanced element to update
+	 */
+	writeChanges( index ) {
+
+		matrix.makeTranslation(
+			this.curveLengthArray[ this.whichCurve[ index ] ],
+			this.whichCurve[ index ],
+			this.offsets[ index ]
+		);
+		this.object3D.setMatrixAt( index, matrix );
+		this.object3D.instanceMatrix.needsUpdate = true;
+
+	}
+
+	/**
+	 * Move an individual element along the curve by a specific amount
+	 *
+	 * @param {number} index Which element to update
+	 * @param {number} offset Move by how much
+	 */
+	moveIndividualAlongCurve( index, offset ) {
+
+		this.offsets[ index ] += offset;
+		this.writeChanges( index );
+
+	}
+
+	/**
+	 * Select which curve to use for an element
+	 *
+	 * @param {number} index the index of the instanced element to update
+	 * @param {number} curveNo the index of the curve it should use
+	 */
+	setCurve( index, curveNo ) {
+
+		if ( isNaN( curveNo ) ) throw Error( 'curve index being set is Not a Number (NaN)' );
+		this.whichCurve[ index ] = curveNo;
+		this.writeChanges( index );
+
+	}
+
+}