@needle-tools/three 0.169.20 → 0.183.2-canary.0

package/src/materials/nodes/NodeMaterials.js

@@ -3,7 +3,6 @@
 export { default as NodeMaterialObserver } from './manager/NodeMaterialObserver.js';
 
 export { default as NodeMaterial } from './NodeMaterial.js';
-export { default as InstancedPointsNodeMaterial } from './InstancedPointsNodeMaterial.js';
 export { default as LineBasicNodeMaterial } from './LineBasicNodeMaterial.js';
 export { default as LineDashedNodeMaterial } from './LineDashedNodeMaterial.js';
 export { default as Line2NodeMaterial } from './Line2NodeMaterial.js';

package/src/materials/nodes/PointsNodeMaterial.js

@@ -1,10 +1,39 @@
-import NodeMaterial from './NodeMaterial.js';
+import SpriteNodeMaterial from './SpriteNodeMaterial.js';
+import { viewportSize, screenDPR } from '../../nodes/display/ScreenNode.js';
+import { positionGeometry, positionLocal, positionView } from '../../nodes/accessors/Position.js';
+import { modelViewMatrix } from '../../nodes/accessors/ModelNode.js';
+import { materialPointSize } from '../../nodes/accessors/MaterialNode.js';
+import { rotate } from '../../nodes/utils/RotateNode.js';
+import { float, uniform, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 
 import { PointsMaterial } from '../PointsMaterial.js';
+import { Vector2 } from '../../math/Vector2.js';
 
 const _defaultValues = /*@__PURE__*/ new PointsMaterial();
-
-class PointsNodeMaterial extends NodeMaterial {
+const _size = /*@__PURE__*/ new Vector2();
+
+/**
+ * Node material version of {@link PointsMaterial}.
+ *
+ * This material can be used in two ways:
+ *
+ * - By rendering point primitives with {@link Points}. Since WebGPU only supports point primitives
+ * with a pixel size of `1`, it's not possible to define a size.
+ *
+ * ```js
+ * const pointCloud = new THREE.Points( geometry, new THREE.PointsNodeMaterial() );
+ * ```
+ *
+ * - By rendering point primitives with {@link Sprites}. In this case, size is honored,
+ * see {@link PointsNodeMaterial#sizeNode}.
+ *
+ * ```js
+ * const instancedPoints = new THREE.Sprite( new THREE.PointsNodeMaterial( { positionNode: instancedBufferAttribute( positionAttribute ) } ) );
+ * ```
+ *
+ * @augments SpriteNodeMaterial
+ */
+class PointsNodeMaterial extends SpriteNodeMaterial {
 
 	static get type() {
 
@@ -12,31 +41,171 @@ class PointsNodeMaterial extends NodeMaterial {
 
 	}
 
+	/**
+	 * Constructs a new points node material.
+	 *
+	 * @param {Object} [parameters] - The configuration parameter.
+	 */
 	constructor( parameters ) {
 
 		super();
 
-		this.isPointsNodeMaterial = true;
-
-		this.lights = false;
-		this.transparent = true;
-
+		/**
+		 * This node property provides an additional way to set the point size.
+		 *
+		 * Note that WebGPU only supports point primitives with 1 pixel size. Consequently,
+		 * this node has no effect when the material is used with {@link Points} and a WebGPU
+		 * backend. If an application wants to render points with a size larger than 1 pixel,
+		 * the material should be used with {@link Sprite} and instancing.
+		 *
+		 * @type {?Node<vec2>}
+		 * @default null
+		 */
 		this.sizeNode = null;
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isPointsNodeMaterial = true;
+
 		this.setDefaultValues( _defaultValues );
 
 		this.setValues( parameters );
 
 	}
 
-	copy( source ) {
+	setupPositionView() {
 
-		this.sizeNode = source.sizeNode;
+		const { positionNode } = this;
 
-		return super.copy( source );
+		return modelViewMatrix.mul( vec3( positionNode || positionLocal ) ).xyz;
+
+	}
+
+	setupVertexSprite( builder ) {
+
+		const { material, camera } = builder;
+
+		const { rotationNode, scaleNode, sizeNode, sizeAttenuation } = this;
+
+		let mvp = super.setupVertex( builder );
+
+		// skip further processing if the material is not a node material
+
+		if ( material.isNodeMaterial !== true ) {
+
+			return mvp;
+
+		}
+
+		// point size
+
+		let pointSize = sizeNode !== null ? vec2( sizeNode ) : materialPointSize;
+
+		pointSize = pointSize.mul( screenDPR );
+
+		// size attenuation
+
+		if ( camera.isPerspectiveCamera && sizeAttenuation === true ) {
+
+			// follow WebGLRenderer's implementation, and scale by half the canvas height in logical units
+
+			pointSize = pointSize.mul( scale.div( positionView.z.negate() ) );
+
+		}
+
+		// scale
+
+		if ( scaleNode && scaleNode.isNode ) {
+
+			pointSize = pointSize.mul( vec2( scaleNode ) );
+
+		}
+
+		// compute offset
+
+		let offset = positionGeometry.xy;
+
+		// apply rotation
+
+		if ( rotationNode && rotationNode.isNode ) {
+
+			const rotation = float( rotationNode );
+
+			offset = rotate( offset, rotation );
+
+		}
+
+		// account for point size
+
+		offset = offset.mul( pointSize );
+
+		// scale by viewport size
+
+		offset = offset.div( viewportSize.div( 2 ) );
+
+		// compensate for the perspective divide
+
+		offset = offset.mul( mvp.w );
+
+		// add offset
+
+		mvp = mvp.add( vec4( offset, 0, 0 ) );
+
+		return mvp;
+
+	}
+
+	setupVertex( builder ) {
+
+		if ( builder.object.isPoints ) {
+
+			return super.setupVertex( builder );
+
+
+		} else {
+
+			return this.setupVertexSprite( builder );
+
+		}
+
+	}
+
+	/**
+	 * Whether alpha to coverage should be used or not.
+	 *
+	 * @type {boolean}
+	 * @default true
+	 */
+	get alphaToCoverage() {
+
+		return this._useAlphaToCoverage;
+
+	}
+
+	set alphaToCoverage( value ) {
+
+		if ( this._useAlphaToCoverage !== value ) {
+
+			this._useAlphaToCoverage = value;
+			this.needsUpdate = true;
+
+		}
 
 	}
 
 }
 
+const scale = /*@__PURE__*/ uniform( 1 ).onFrameUpdate( function ( { renderer } ) {
+
+	const size = renderer.getSize( _size ); // logical units
+
+	this.value = 0.5 * size.y;
+
+} );
+
 export default PointsNodeMaterial;

package/src/materials/nodes/ShadowNodeMaterial.js

@@ -5,6 +5,11 @@ import { ShadowMaterial } from '../ShadowMaterial.js';
 
 const _defaultValues = /*@__PURE__*/ new ShadowMaterial();
 
+/**
+ * Node material version of {@link ShadowMaterial}.
+ *
+ * @augments NodeMaterial
+ */
 class ShadowNodeMaterial extends NodeMaterial {
 
 	static get type() {
@@ -13,20 +18,53 @@ class ShadowNodeMaterial extends NodeMaterial {
 
 	}
 
+	/**
+	 * Constructs a new shadow node material.
+	 *
+	 * @param {Object} [parameters] - The configuration parameter.
+	 */
 	constructor( parameters ) {
 
 		super();
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isShadowNodeMaterial = true;
 
+		/**
+		 * Set to `true` because so it's possible to implement
+		 * the shadow mask effect.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.lights = true;
 
+		/**
+		 * Overwritten since shadow materials are transparent
+		 * by default.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.transparent = true;
+
 		this.setDefaultValues( _defaultValues );
 
 		this.setValues( parameters );
 
 	}
 
+	/**
+	 * Setups the lighting model.
+	 *
+	 * @return {ShadowMaskModel} The lighting model.
+	 */
 	setupLightingModel( /*builder*/ ) {
 
 		return new ShadowMaskModel();

package/src/materials/nodes/SpriteNodeMaterial.js

@@ -1,8 +1,7 @@
 import NodeMaterial from './NodeMaterial.js';
-import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
 import { materialRotation } from '../../nodes/accessors/MaterialNode.js';
 import { modelViewMatrix, modelWorldMatrix } from '../../nodes/accessors/ModelNode.js';
-import { positionLocal } from '../../nodes/accessors/Position.js';
+import { positionGeometry } from '../../nodes/accessors/Position.js';
 import { rotate } from '../../nodes/utils/RotateNode.js';
 import { float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
 
@@ -11,6 +10,11 @@ import { reference } from '../../nodes/accessors/ReferenceBaseNode.js';
 
 const _defaultValues = /*@__PURE__*/ new SpriteMaterial();
 
+/**
+ * Node material version of {@link SpriteMaterial}.
+ *
+ * @augments NodeMaterial
+ */
 class SpriteNodeMaterial extends NodeMaterial {
 
 	static get type() {
@@ -19,57 +23,116 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 	}
 
+	/**
+	 * Constructs a new sprite node material.
+	 *
+	 * @param {Object} [parameters] - The configuration parameter.
+	 */
 	constructor( parameters ) {
 
 		super();
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isSpriteNodeMaterial = true;
 
-		this.lights = false;
 		this._useSizeAttenuation = true;
 
+		/**
+		 * This property makes it possible to define the position of the sprite with a
+		 * node. That can be useful when the material is used with instanced rendering
+		 * and node data are defined with an instanced attribute node:
+		 * ```js
+		 * const positionAttribute = new InstancedBufferAttribute( new Float32Array( positions ), 3 );
+		 * material.positionNode = instancedBufferAttribute( positionAttribute );
+		 * ```
+		 * Another possibility is to compute the instanced data with a compute shader:
+		 * ```js
+		 * const positionBuffer = instancedArray( particleCount, 'vec3' );
+		 * particleMaterial.positionNode = positionBuffer.toAttribute();
+		 * ```
+		 *
+		 * @type {?Node<vec2>}
+		 * @default null
+		 */
 		this.positionNode = null;
+
+		/**
+		 * The rotation of sprite materials is by default inferred from the `rotation`,
+		 * property. This node property allows to overwrite the default and define
+		 * the rotation with a node instead.
+		 *
+		 * If you don't want to overwrite the rotation but modify the existing
+		 * value instead, use {@link materialRotation}.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
 		this.rotationNode = null;
+
+		/**
+		 * This node property provides an additional way to scale sprites next to
+		 * `Object3D.scale`. The scale transformation based in `Object3D.scale`
+		 * is multiplied with the scale value of this node in the vertex shader.
+		 *
+		 * @type {?Node<vec2>}
+		 * @default null
+		 */
 		this.scaleNode = null;
 
+		/**
+		 * In Sprites, the transparent property is enabled by default.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.transparent = true;
+
 		this.setDefaultValues( _defaultValues );
 
 		this.setValues( parameters );
 
 	}
 
-	setupPosition( { object, camera, context } ) {
-
-		const sizeAttenuation = this.sizeAttenuation;
-
-		// < VERTEX STAGE >
+	/**
+	 * Setups the position node in view space. This method implements
+	 * the sprite specific vertex shader.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {Node<vec3>} The position in view space.
+	 */
+	setupPositionView( builder ) {
 
-		const { positionNode, rotationNode, scaleNode } = this;
+		const { object, camera } = builder;
 
-		const vertex = positionLocal;
+		const { positionNode, rotationNode, scaleNode, sizeAttenuation } = this;
 
-		let mvPosition = modelViewMatrix.mul( vec3( positionNode || 0 ) );
+		const mvPosition = modelViewMatrix.mul( vec3( positionNode || 0 ) );
 
 		let scale = vec2( modelWorldMatrix[ 0 ].xyz.length(), modelWorldMatrix[ 1 ].xyz.length() );
 
 		if ( scaleNode !== null ) {
 
-			scale = scale.mul( scaleNode );
+			scale = scale.mul( vec2( scaleNode ) );
 
 		}
 
-
-		if ( ! sizeAttenuation && camera.isPerspectiveCamera ) {
+		if ( camera.isPerspectiveCamera && sizeAttenuation === false ) {
 
 			scale = scale.mul( mvPosition.z.negate() );
 
 		}
 
-		let alignedPosition = vertex.xy;
+		let alignedPosition = positionGeometry.xy;
 
 		if ( object.center && object.center.isVector2 === true ) {
 
-			const center = reference( 'center', 'vec2' );
+			const center = reference( 'center', 'vec2', object );
 
 			alignedPosition = alignedPosition.sub( center.sub( 0.5 ) );
 
@@ -81,13 +144,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		const rotatedPosition = rotate( alignedPosition, rotation );
 
-		mvPosition = vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw );
-
-		const modelViewProjection = cameraProjectionMatrix.mul( mvPosition );
-
-		context.vertex = vertex;
-
-		return modelViewProjection;
+		return vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw );
 
 	}
 
@@ -101,6 +158,12 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 	}
 
+	/**
+	 * Whether to use size attenuation or not.
+	 *
+	 * @type {boolean}
+	 * @default true
+	 */
 	get sizeAttenuation() {
 
 		return this._useSizeAttenuation;

package/src/materials/nodes/VolumeNodeMaterial.js

@@ -1,14 +1,12 @@
 import NodeMaterial from './NodeMaterial.js';
-import { property } from '../../nodes/core/PropertyNode.js';
-import { materialReference } from '../../nodes/accessors/MaterialReferenceNode.js';
-import { modelWorldMatrixInverse } from '../../nodes/accessors/ModelNode.js';
-import { cameraPosition } from '../../nodes/accessors/Camera.js';
-import { positionGeometry } from '../../nodes/accessors/Position.js';
-import { Fn, varying, float, vec2, vec3, vec4 } from '../../nodes/tsl/TSLBase.js';
-import { min, max } from '../../nodes/math/MathNode.js';
-import { Loop, Break } from '../../nodes/utils/LoopNode.js';
-import { texture3D } from '../../nodes/accessors/Texture3DNode.js';
-
+import VolumetricLightingModel from '../../nodes/functions/VolumetricLightingModel.js';
+import { BackSide } from '../../constants.js';
+
+/**
+ * Volume node material.
+ *
+ * @augments NodeMaterial
+ */
 class VolumeNodeMaterial extends NodeMaterial {
 
 	static get type() {
@@ -17,89 +15,64 @@ class VolumeNodeMaterial extends NodeMaterial {
 
 	}
 
-	constructor( params = {} ) {
+	/**
+	 * Constructs a new volume node material.
+	 *
+	 * @param {Object} [parameters] - The configuration parameter.
+	 */
+	constructor( parameters ) {
 
 		super();
 
-		this.lights = false;
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isVolumeNodeMaterial = true;
-		this.testNode = null;
 
-		this.setValues( params );
+		/**
+		 * Number of steps used for raymarching.
+		 *
+		 * @type {number}
+		 * @default 25
+		 */
+		this.steps = 25;
+
+		/**
+		 * Offsets the distance a ray has been traveled through a volume.
+		 * Can be used to implement dithering to reduce banding.
+		 *
+		 * @type {Node<float>}
+		 * @default null
+		 */
+		this.offsetNode = null;
+
+		/**
+		 * Node used for scattering calculations.
+		 *
+		 * @type {Function|FunctionNode<vec4>}
+		 * @default null
+		 */
+		this.scatteringNode = null;
+
+		this.lights = true;
+
+		this.transparent = true;
+		this.side = BackSide;
+
+		this.depthTest = false;
+		this.depthWrite = false;
+
+		this.setValues( parameters );
 
 	}
 
-	setup( builder ) {
-
-		const map = texture3D( this.map, null, 0 );
-
-		const hitBox = Fn( ( { orig, dir } ) => {
-
-			const box_min = vec3( - 0.5 );
-			const box_max = vec3( 0.5 );
-
-			const inv_dir = dir.reciprocal();
-
-			const tmin_tmp = box_min.sub( orig ).mul( inv_dir );
-			const tmax_tmp = box_max.sub( orig ).mul( inv_dir );
-
-			const tmin = min( tmin_tmp, tmax_tmp );
-			const tmax = max( tmin_tmp, tmax_tmp );
-
-			const t0 = max( tmin.x, max( tmin.y, tmin.z ) );
-			const t1 = min( tmax.x, min( tmax.y, tmax.z ) );
-
-			return vec2( t0, t1 );
-
-		} );
-
-		this.fragmentNode = Fn( () => {
-
-			const vOrigin = varying( vec3( modelWorldMatrixInverse.mul( vec4( cameraPosition, 1.0 ) ) ) );
-			const vDirection = varying( positionGeometry.sub( vOrigin ) );
-
-			const rayDir = vDirection.normalize();
-			const bounds = vec2( hitBox( { orig: vOrigin, dir: rayDir } ) ).toVar();
-
-			bounds.x.greaterThan( bounds.y ).discard();
-
-			bounds.assign( vec2( max( bounds.x, 0.0 ), bounds.y ) );
-
-			const p = vec3( vOrigin.add( bounds.x.mul( rayDir ) ) ).toVar();
-			const inc = vec3( rayDir.abs().reciprocal() ).toVar();
-			const delta = float( min( inc.x, min( inc.y, inc.z ) ) ).toVar( 'delta' ); // used 'delta' name in loop
-
-			delta.divAssign( materialReference( 'steps', 'float' ) );
-
-			const ac = vec4( materialReference( 'base', 'color' ), 0.0 ).toVar();
-
-			Loop( { type: 'float', start: bounds.x, end: bounds.y, update: '+= delta' }, () => {
-
-				const d = property( 'float', 'd' ).assign( map.uv( p.add( 0.5 ) ).r );
-
-				if ( this.testNode !== null ) {
-
-					this.testNode( { map: map, mapValue: d, probe: p, finalColor: ac } ).append();
-
-				} else {
-
-					// default to show surface of mesh
-					ac.a.assign( 1 );
-					Break();
-
-				}
-
-				p.addAssign( rayDir.mul( delta ) );
-
-			} );
-
-			ac.a.equal( 0 ).discard();
-
-			return vec4( ac );
-
-		} )();
+	setupLightingModel() {
 
-		super.setup( builder );
+		return new VolumetricLightingModel();
 
 	}