@needle-tools/three 0.145.4 → 0.146.2

package/examples/js/misc/Volume.js

@@ -12,7 +12,6 @@
  * @param   {string}        type            The type of data (uint8, uint16, ...)
  * @param   {ArrayBuffer}   arrayBuffer     The buffer with volume data
  */
-
 	class Volume {
 
 		constructor( xLength, yLength, zLength, type, arrayBuffer ) {
@@ -26,17 +25,14 @@
 				/**
        * @member {number} yLength Height of the volume in the IJK coordinate system
        */
-
 				this.yLength = Number( yLength ) || 1;
 				/**
        * @member {number} zLength Depth of the volume in the IJK coordinate system
        */
-
 				this.zLength = Number( zLength ) || 1;
 				/**
        * @member {Array<string>} The order of the Axis dictated by the NRRD header
        */
-
 				this.axisOrder = [ 'x', 'y', 'z' ];
 				/**
        * @member {TypedArray} data Data of the volume
@@ -51,14 +47,12 @@
 					case 'uint8_t':
 						this.data = new Uint8Array( arrayBuffer );
 						break;
-
 					case 'Int8':
 					case 'int8':
 					case 'signed char':
 					case 'int8_t':
 						this.data = new Int8Array( arrayBuffer );
 						break;
-
 					case 'Int16':
 					case 'int16':
 					case 'short':
@@ -68,7 +62,6 @@
 					case 'int16_t':
 						this.data = new Int16Array( arrayBuffer );
 						break;
-
 					case 'Uint16':
 					case 'uint16':
 					case 'ushort':
@@ -77,7 +70,6 @@
 					case 'uint16_t':
 						this.data = new Uint16Array( arrayBuffer );
 						break;
-
 					case 'Int32':
 					case 'int32':
 					case 'int':
@@ -85,7 +77,6 @@
 					case 'int32_t':
 						this.data = new Int32Array( arrayBuffer );
 						break;
-
 					case 'Uint32':
 					case 'uint32':
 					case 'uint':
@@ -93,7 +84,6 @@
 					case 'uint32_t':
 						this.data = new Uint32Array( arrayBuffer );
 						break;
-
 					case 'longlong':
 					case 'long long':
 					case 'long long int':
@@ -108,19 +98,16 @@
 					case 'uint64_t':
 						throw new Error( 'Error in Volume constructor : this type is not supported in JavaScript' );
 						break;
-
 					case 'Float32':
 					case 'float32':
 					case 'float':
 						this.data = new Float32Array( arrayBuffer );
 						break;
-
 					case 'Float64':
 					case 'float64':
 					case 'double':
 						this.data = new Float64Array( arrayBuffer );
 						break;
-
 					default:
 						this.data = new Uint8Array( arrayBuffer );
 
@@ -133,32 +120,27 @@
 				}
 
 			}
+
 			/**
      * @member {Array}  spacing Spacing to apply to the volume from IJK to RAS coordinate system
      */
-
-
 			this.spacing = [ 1, 1, 1 ];
 			/**
      * @member {Array}  offset Offset of the volume in the RAS coordinate system
      */
-
 			this.offset = [ 0, 0, 0 ];
 			/**
      * @member {Martrix3} matrix The IJK to RAS matrix
      */
-
 			this.matrix = new THREE.Matrix3();
 			this.matrix.identity();
 			/**
      * @member {Martrix3} inverseMatrix The RAS to IJK matrix
      */
-
 			/**
      * @member {number} lowerThreshold The voxels with values under this threshold won't appear in the slices.
      *                      If changed, geometryNeedsUpdate is automatically set to true on all the slices associated to this volume
      */
-
 			let lowerThreshold = - Infinity;
 			Object.defineProperty( this, 'lowerThreshold', {
 				get: function () {
@@ -181,7 +163,6 @@
      * @member {number} upperThreshold The voxels with values over this threshold won't appear in the slices.
      *                      If changed, geometryNeedsUpdate is automatically set to true on all the slices associated to this volume
      */
-
 			let upperThreshold = Infinity;
 			Object.defineProperty( this, 'upperThreshold', {
 				get: function () {
@@ -200,16 +181,18 @@
 
 				}
 			} );
+
 			/**
      * @member {Array} sliceList The list of all the slices associated to this volume
      */
-
 			this.sliceList = [];
+
 			/**
      * @member {Array} RASDimensions This array holds the dimensions of the volume in the RAS space
      */
 
 		}
+
 		/**
    * @member {Function} getData Shortcut for data[access(i,j,k)]
    * @memberof Volume
@@ -218,13 +201,12 @@
    * @param {number} k    Third coordinate
    * @returns {number}  value in the data array
    */
-
-
 		getData( i, j, k ) {
 
 			return this.data[ k * this.xLength * this.yLength + j * this.xLength + i ];
 
 		}
+
 		/**
    * @member {Function} access compute the index in the data array corresponding to the given coordinates in IJK system
    * @memberof Volume
@@ -233,21 +215,18 @@
    * @param {number} k    Third coordinate
    * @returns {number}  index
    */
-
-
 		access( i, j, k ) {
 
 			return k * this.xLength * this.yLength + j * this.xLength + i;
 
 		}
+
 		/**
    * @member {Function} reverseAccess 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]
    */
-
-
 		reverseAccess( index ) {
 
 			const z = Math.floor( index / ( this.yLength * this.xLength ) );
@@ -256,6 +235,7 @@
 			return [ x, y, z ];
 
 		}
+
 		/**
    * @member {Function} map Apply a function to all the voxels, be careful, the value will be replaced
    * @memberof Volume
@@ -266,13 +246,10 @@
    * @param {Object}   context    You can specify a context in which call the function, default if this Volume
    * @returns {Volume}   this
    */
-
-
 		map( functionToMap, context ) {
 
 			const length = this.data.length;
 			context = context || this;
-
 			for ( let i = 0; i < length; i ++ ) {
 
 				this.data[ i ] = functionToMap.call( context, this.data[ i ], i, this.data );
@@ -282,6 +259,7 @@
 			return this;
 
 		}
+
 		/**
    * @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.
    * @memberof Volume
@@ -289,8 +267,6 @@
    * @param {number}            index the index of the slice
    * @returns {Object} an object containing all the usefull information on the geometry of the slice
    */
-
-
 		extractPerpendicularPlane( axis, RASIndex ) {
 
 			let firstSpacing, secondSpacing, positionOffset, IJKIndex;
@@ -300,7 +276,6 @@
 				planeMatrix = new THREE.Matrix4().identity(),
 				volume = this;
 			const dimensions = new THREE.Vector3( this.xLength, this.yLength, this.zLength );
-
 			switch ( axis ) {
 
 				case 'x':
@@ -314,7 +289,6 @@
 					positionOffset = ( volume.RASDimensions[ 0 ] - 1 ) / 2;
 					planeMatrix.setPosition( new THREE.Vector3( RASIndex - positionOffset, 0, 0 ) );
 					break;
-
 				case 'y':
 					axisInIJK.set( 0, 1, 0 );
 					firstDirection.set( 1, 0, 0 );
@@ -326,7 +300,6 @@
 					positionOffset = ( volume.RASDimensions[ 1 ] - 1 ) / 2;
 					planeMatrix.setPosition( new THREE.Vector3( 0, RASIndex - positionOffset, 0 ) );
 					break;
-
 				case 'z':
 				default:
 					axisInIJK.set( 0, 0, 1 );
@@ -367,12 +340,13 @@
 				return Math.abs( x.dot( base[ 2 ] ) ) > 0.9;
 
 			} );
-
 			function sliceAccess( i, j ) {
 
 				const si = iDirection === axisInIJK ? IJKIndex : iDirection.arglet === 'i' ? i : j;
 				const sj = jDirection === axisInIJK ? IJKIndex : jDirection.arglet === 'i' ? i : j;
-				const sk = kDirection === axisInIJK ? IJKIndex : kDirection.arglet === 'i' ? i : j; // invert indices if necessary
+				const sk = kDirection === axisInIJK ? IJKIndex : kDirection.arglet === 'i' ? i : j;
+
+				// invert indices if necessary
 
 				const accessI = iDirection.dot( base[ 0 ] ) > 0 ? si : volume.xLength - 1 - si;
 				const accessJ = jDirection.dot( base[ 1 ] ) > 0 ? sj : volume.yLength - 1 - sj;
@@ -391,6 +365,7 @@
 			};
 
 		}
+
 		/**
    * @member {Function} extractSlice Returns a slice corresponding to the given axis and index
    *                        The coordinate are given in the Right Anterior Superior coordinate format
@@ -399,8 +374,6 @@
    * @param {number}            index the index of the slice
    * @returns {VolumeSlice} the extracted slice
    */
-
-
 		extractSlice( axis, index ) {
 
 			const slice = new THREE.VolumeSlice( this, index, axis );
@@ -408,14 +381,13 @@
 			return slice;
 
 		}
+
 		/**
    * @member {Function} repaintAllSlices Call repaint on all the slices extracted from this volume
    * @see THREE.VolumeSlice.repaint
    * @memberof Volume
    * @returns {Volume} this
    */
-
-
 		repaintAllSlices() {
 
 			this.sliceList.forEach( function ( slice ) {
@@ -426,21 +398,20 @@
 			return this;
 
 		}
+
 		/**
    * @member {Function} computeMinMax Compute the minimum and the maximum of the data in the volume
    * @memberof Volume
    * @returns {Array} [min,max]
    */
-
-
 		computeMinMax() {
 
 			let min = Infinity;
-			let max = - Infinity; // buffer the length
+			let max = - Infinity;
 
+			// buffer the length
 			const datasize = this.data.length;
 			let i = 0;
-
 			for ( i = 0; i < datasize; i ++ ) {
 
 				if ( ! isNaN( this.data[ i ] ) ) {

package/examples/js/misc/VolumeSlice.js

@@ -8,7 +8,6 @@
  * @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 ) {
@@ -17,12 +16,10 @@
 			/**
      * @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 () {
@@ -41,25 +38,21 @@
 			/**
      * @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 THREE.Texture( this.canvas );
@@ -73,15 +66,14 @@
 			/**
      * @member {Mesh} mesh The mesh ready to get used in the scene
      */
-
 			this.mesh = new THREE.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
      */
@@ -99,12 +91,11 @@
      */
 
 		}
+
 		/**
    * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
    * @memberof VolumeSlice
    */
-
-
 		repaint() {
 
 			if ( this.geometryNeedsUpdate ) {
@@ -118,18 +109,19 @@
 				sliceAccess = this.sliceAccess,
 				volume = this.volume,
 				canvas = this.canvasBuffer,
-				ctx = this.ctxBuffer; // get the imageData and pixel array from the canvas
+				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
+			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
@@ -157,10 +149,10 @@
 					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
-
+						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;
@@ -180,13 +172,12 @@
 			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 );
@@ -203,11 +194,10 @@
 			if ( this.geometry ) this.geometry.dispose(); // dispose existing geometry
 
 			this.geometry = new THREE.PlaneGeometry( extracted.planeWidth, extracted.planeHeight );
-
 			if ( this.mesh ) {
 
-				this.mesh.geometry = this.geometry; //reset mesh matrix
-
+				this.mesh.geometry = this.geometry;
+				//reset mesh matrix
 				this.mesh.matrix.identity();
 				this.mesh.applyMatrix4( this.matrix );
 

package/examples/js/modifiers/CurveModifier.js

@@ -4,12 +4,12 @@
 	const CHANNELS = 4;
 	const TEXTURE_WIDTH = 1024;
 	const TEXTURE_HEIGHT = 4;
+
 	/**
  * Make a new THREE.DataTexture to store the descriptions of the curves.
  *
  * @param { number } numberOfCurves the number of curves needed to be described by this texture.
  */
-
 	function initSplineTexture( numberOfCurves = 1 ) {
 
 		const dataArray = new Float32Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
@@ -21,6 +21,7 @@
 		return dataTexture;
 
 	}
+
 	/**
  * Write the curve description to the data texture
  *
@@ -28,7 +29,6 @@
  * @param { Curve } splineCurve The curve to describe
  * @param { number } offset Which curve slot to write to
  */
-
 	function updateSplineTexture( texture, splineCurve, offset = 0 ) {
 
 		const numberOfPoints = Math.floor( TEXTURE_WIDTH * ( TEXTURE_HEIGHT / 4 ) );
@@ -36,7 +36,6 @@
 		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 );
@@ -63,20 +62,18 @@
 			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 { THREE.DataTexture } Texture which holds the curve description
  */
-
-
 	function getUniforms( splineTexture ) {
 
 		const uniforms = {
@@ -114,7 +111,6 @@
 
 		if ( material.__ok ) return;
 		material.__ok = true;
-
 		material.onBeforeCompile = shader => {
 
 			if ( shader.__modified ) return;
@@ -132,10 +128,17 @@
 		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
+		`
+			// 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>
@@ -180,10 +183,10 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 		};
 
 	}
+
 	/**
  * A helper class for making meshes bend aroudn curves
  */
-
 	class Flow {
 
 		/**
@@ -212,7 +215,6 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			this.uniforms = uniforms;
 
 		}
-
 		updateCurve( index, curve ) {
 
 			if ( index >= this.curveArray.length ) throw Error( 'Index out of range for Flow' );
@@ -223,7 +225,6 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			updateSplineTexture( this.splineTexure, curve, index );
 
 		}
-
 		moveAlongCurve( amount ) {
 
 			this.uniforms.pathOffset.value += amount;
@@ -232,10 +233,10 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 
 	}
 	const matrix = new THREE.Matrix4();
+
 	/**
  * A helper class for creating instanced versions of flow, where the instances are placed on the curve.
  */
-
 	class InstancedFlow extends Flow {
 
 		/**
@@ -254,14 +255,13 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			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 ] );
@@ -269,28 +269,26 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 			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)' );