@plastic-software/three 0.167.4 → 0.174.0

package/src/{nodes/materials → materials/nodes}/Line2NodeMaterial.js

@@ -1,66 +1,149 @@
-import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
-import { temp } from '../core/VarNode.js';
-import { varying } from '../core/VaryingNode.js';
-import { property, varyingProperty } from '../core/PropertyNode.js';
-import { attribute } from '../core/AttributeNode.js';
-import { cameraProjectionMatrix } from '../accessors/CameraNode.js';
-import { materialColor, materialLineScale, materialLineDashSize, materialLineGapSize, materialLineDashOffset, materialLineWidth } from '../accessors/MaterialNode.js';
-import { modelViewMatrix } from '../accessors/ModelNode.js';
-import { positionGeometry } from '../accessors/PositionNode.js';
-import { mix, smoothstep } from '../math/MathNode.js';
-import { Fn, float, vec2, vec3, vec4, If } from '../shadernode/ShaderNode.js';
-import { uv } from '../accessors/UVNode.js';
-import { viewport } from '../display/ViewportNode.js';
-import { dashSize, gapSize } from '../core/PropertyNode.js';
-
-import { LineDashedMaterial } from '../../materials/LineDashedMaterial.js';
+import NodeMaterial from './NodeMaterial.js';
+import { dashSize, gapSize, varyingProperty } from '../../nodes/core/PropertyNode.js';
+import { attribute } from '../../nodes/core/AttributeNode.js';
+import { cameraProjectionMatrix } from '../../nodes/accessors/Camera.js';
+import { materialColor, materialLineScale, materialLineDashSize, materialLineGapSize, materialLineDashOffset, materialLineWidth, materialOpacity } from '../../nodes/accessors/MaterialNode.js';
+import { modelViewMatrix } from '../../nodes/accessors/ModelNode.js';
+import { positionGeometry } from '../../nodes/accessors/Position.js';
+import { mix, smoothstep } from '../../nodes/math/MathNode.js';
+import { Fn, float, vec2, vec3, vec4, If } from '../../nodes/tsl/TSLBase.js';
+import { uv } from '../../nodes/accessors/UV.js';
+import { viewport } from '../../nodes/display/ScreenNode.js';
+import { viewportSharedTexture } from '../../nodes/display/ViewportSharedTextureNode.js';
+
+import { LineDashedMaterial } from '../LineDashedMaterial.js';
+import { NoBlending } from '../../constants.js';
 
 const _defaultValues = /*@__PURE__*/ new LineDashedMaterial();
 
+/**
+ * This node material can be used to render lines with a size larger than one
+ * by representing them as instanced meshes.
+ *
+ * @augments NodeMaterial
+ */
 class Line2NodeMaterial extends NodeMaterial {
 
-	constructor( params = {} ) {
+	static get type() {
+
+		return 'Line2NodeMaterial';
+
+	}
+
+	/**
+	 * Constructs a new node material for wide line rendering.
+	 *
+	 * @param {?Object} parameters - The configuration parameter.
+	 */
+	constructor( parameters = {} ) {
 
 		super();
 
-		this.normals = false;
-		this.lights = false;
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
+		this.isLine2NodeMaterial = true;
 
 		this.setDefaultValues( _defaultValues );
 
-		this.useAlphaToCoverage = true;
-		this.useColor = params.vertexColors;
-		this.useDash = params.dashed;
-		this.useWorldUnits = false;
-
+		/**
+		 * Whether vertex colors should be used or not.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.useColor = parameters.vertexColors;
+
+		/**
+		 * The dash offset.
+		 *
+		 * @type {number}
+		 * @default 0
+		 */
 		this.dashOffset = 0;
+
+		/**
+		 * The line width.
+		 *
+		 * @type {number}
+		 * @default 0
+		 */
 		this.lineWidth = 1;
 
+		/**
+		 * Defines the lines color.
+		 *
+		 * @type {?Node<vec3>}
+		 * @default null
+		 */
 		this.lineColorNode = null;
 
+		/**
+		 * Defines the offset.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
 		this.offsetNode = null;
+
+		/**
+		 * Defines the dash scale.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
 		this.dashScaleNode = null;
-		this.dashSizeNode = null;
-		this.gapSizeNode = null;
 
-		this.setValues( params );
+		/**
+		 * Defines the dash size.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.dashSizeNode = null;
 
-	}
+		/**
+		 * Defines the gap size.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.gapSizeNode = null;
 
-	setup( builder ) {
+		/**
+		 * Blending is set to `NoBlending` since transparency
+		 * is not supported, yet.
+		 *
+		 * @type {number}
+		 * @default 0
+		 */
+		this.blending = NoBlending;
 
-		this.setupShaders();
+		this._useDash = parameters.dashed;
+		this._useAlphaToCoverage = true;
+		this._useWorldUnits = false;
 
-		super.setup( builder );
+		this.setValues( parameters );
 
 	}
 
-	setupShaders() {
+	/**
+	 * Setups the vertex and fragment stage of this node material.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 */
+	setup( builder ) {
+
+		const { renderer } = builder;
 
-		const useAlphaToCoverage = this.alphaToCoverage;
+		const useAlphaToCoverage = this._useAlphaToCoverage;
 		const useColor = this.useColor;
-		const useDash = this.dashed;
-		const useWorldUnits = this.worldUnits;
+		const useDash = this._useDash;
+		const useWorldUnits = this._useWorldUnits;
 
 		const trimSegment = Fn( ( { start, end } ) => {
 
@@ -72,22 +155,39 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			return vec4( mix( start.xyz, end.xyz, alpha ), end.w );
 
+		} ).setLayout( {
+			name: 'trimSegment',
+			type: 'vec4',
+			inputs: [
+				{ name: 'start', type: 'vec4' },
+				{ name: 'end', type: 'vec4' }
+			]
 		} );
 
 		this.vertexNode = Fn( () => {
 
-			varyingProperty( 'vec2', 'vUv' ).assign( uv() );
-
 			const instanceStart = attribute( 'instanceStart' );
 			const instanceEnd = attribute( 'instanceEnd' );
 
 			// camera space
 
-			const start = property( 'vec4', 'start' );
-			const end = property( 'vec4', 'end' );
+			const start = vec4( modelViewMatrix.mul( vec4( instanceStart, 1.0 ) ) ).toVar( 'start' );
+			const end = vec4( modelViewMatrix.mul( vec4( instanceEnd, 1.0 ) ) ).toVar( 'end' );
+
+			if ( useDash ) {
+
+				const dashScaleNode = this.dashScaleNode ? float( this.dashScaleNode ) : materialLineScale;
+				const offsetNode = this.offsetNode ? float( this.offsetNode ) : materialLineDashOffset;
+
+				const instanceDistanceStart = attribute( 'instanceDistanceStart' );
+				const instanceDistanceEnd = attribute( 'instanceDistanceEnd' );
+
+				let lineDistance = positionGeometry.y.lessThan( 0.5 ).select( dashScaleNode.mul( instanceDistanceStart ), dashScaleNode.mul( instanceDistanceEnd ) );
+				lineDistance = lineDistance.add( offsetNode );
 
-			start.assign( modelViewMatrix.mul( vec4( instanceStart, 1.0 ) ) ); // force assignment into correct place in flow
-			end.assign( modelViewMatrix.mul( vec4( instanceEnd, 1.0 ) ) );
+				varyingProperty( 'float', 'lineDistance' ).assign( lineDistance );
+
+			}
 
 			if ( useWorldUnits ) {
 
@@ -128,13 +228,13 @@ class Line2NodeMaterial extends NodeMaterial {
 			const ndcEnd = clipEnd.xyz.div( clipEnd.w );
 
 			// direction
-			const dir = ndcEnd.xy.sub( ndcStart.xy ).temp();
+			const dir = ndcEnd.xy.sub( ndcStart.xy ).toVar();
 
 			// account for clip-space aspect ratio
 			dir.x.assign( dir.x.mul( aspect ) );
 			dir.assign( dir.normalize() );
 
-			const clip = temp( vec4() );
+			const clip = vec4().toVar();
 
 			if ( useWorldUnits ) {
 
@@ -177,16 +277,14 @@ class Line2NodeMaterial extends NodeMaterial {
 
 				// shift the depth of the projected points so the line
 				// segments overlap neatly
-				const clipPose = temp( vec3() );
+				const clipPose = vec3().toVar();
 
 				clipPose.assign( positionGeometry.y.lessThan( 0.5 ).select( ndcStart, ndcEnd ) );
 				clip.z.assign( clipPose.z.mul( clip.w ) );
 
 			} else {
 
-				const offset = property( 'vec2', 'offset' );
-
-				offset.assign( vec2( dir.y, dir.x.negate() ) );
+				const offset = vec2( dir.y, dir.x.negate() ).toVar( 'offset' );
 
 				// undo aspect ratio adjustment
 				dir.x.assign( dir.x.div( aspect ) );
@@ -249,36 +347,26 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		} );
 
-		this.fragmentNode = Fn( () => {
+		this.colorNode = Fn( () => {
 
-			const vUv = varyingProperty( 'vec2', 'vUv' );
+			const vUv = uv();
 
 			if ( useDash ) {
 
-				const offsetNode = this.offsetNode ? float( this.offsetNodeNode ) : materialLineDashOffset;
-				const dashScaleNode = this.dashScaleNode ? float( this.dashScaleNode ) : materialLineScale;
 				const dashSizeNode = this.dashSizeNode ? float( this.dashSizeNode ) : materialLineDashSize;
-				const gapSizeNode = this.dashSizeNode ? float( this.dashGapNode ) : materialLineGapSize;
+				const gapSizeNode = this.gapSizeNode ? float( this.gapSizeNode ) : materialLineGapSize;
 
 				dashSize.assign( dashSizeNode );
 				gapSize.assign( gapSizeNode );
 
-				const instanceDistanceStart = attribute( 'instanceDistanceStart' );
-				const instanceDistanceEnd = attribute( 'instanceDistanceEnd' );
-
-				const lineDistance = positionGeometry.y.lessThan( 0.5 ).select( dashScaleNode.mul( instanceDistanceStart ), materialLineScale.mul( instanceDistanceEnd ) );
-
-				const vLineDistance = varying( lineDistance.add( materialLineDashOffset ) );
-				const vLineDistanceOffset = offsetNode ? vLineDistance.add( offsetNode ) : vLineDistance;
+				const vLineDistance = varyingProperty( 'float', 'lineDistance' );
 
 				vUv.y.lessThan( - 1.0 ).or( vUv.y.greaterThan( 1.0 ) ).discard(); // discard endcaps
-				vLineDistanceOffset.mod( dashSize.add( gapSize ) ).greaterThan( dashSize ).discard(); // todo - FIX
+				vLineDistance.mod( dashSize.add( gapSize ) ).greaterThan( dashSize ).discard(); // todo - FIX
 
 			}
 
-			 // force assignment into correct place in flow
-			const alpha = property( 'float', 'alpha' );
-			alpha.assign( 1 );
+			const alpha = float( 1 ).toVar( 'alpha' );
 
 			if ( useWorldUnits ) {
 
@@ -298,7 +386,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 				if ( ! useDash ) {
 
-					if ( useAlphaToCoverage ) {
+					if ( useAlphaToCoverage && renderer.samples > 1 ) {
 
 						const dnorm = norm.fwidth();
 						alpha.assign( smoothstep( dnorm.negate().add( 0.5 ), dnorm.add( 0.5 ), norm ).oneMinus() );
@@ -315,16 +403,14 @@ class Line2NodeMaterial extends NodeMaterial {
 
 				// round endcaps
 
-				if ( useAlphaToCoverage ) {
+				if ( useAlphaToCoverage && renderer.samples > 1 ) {
 
 					const a = vUv.x;
 					const b = vUv.y.greaterThan( 0.0 ).select( vUv.y.sub( 1.0 ), vUv.y.add( 1.0 ) );
 
 					const len2 = a.mul( a ).add( b.mul( b ) );
 
-					// force assignment out of following 'if' statement - to avoid uniform control flow errors
-					const dlen = property( 'float', 'dlen' );
-					dlen.assign( len2.fwidth() );
+					const dlen = float( len2.fwidth() ).toVar( 'dlen' );
 
 					If( vUv.y.abs().greaterThan( 1.0 ), () => {
 
@@ -377,56 +463,82 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		} )();
 
-	}
+		if ( this.transparent ) {
+
+			const opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
+
+			this.outputNode = vec4( this.colorNode.rgb.mul( opacityNode ).add( viewportSharedTexture().rgb.mul( opacityNode.oneMinus() ) ), this.colorNode.a );
 
+		}
+
+		super.setup( builder );
 
+	}
+
+	/**
+	 * Whether the lines should sized in world units or not.
+	 * When set to `false` the unit is pixel.
+	 *
+	 * @type {boolean}
+	 * @default false
+	 */
 	get worldUnits() {
 
-		return this.useWorldUnits;
+		return this._useWorldUnits;
 
 	}
 
 	set worldUnits( value ) {
 
-		if ( this.useWorldUnits !== value ) {
+		if ( this._useWorldUnits !== value ) {
 
-			this.useWorldUnits = value;
+			this._useWorldUnits = value;
 			this.needsUpdate = true;
 
 		}
 
 	}
 
-
+	/**
+	 * Whether the lines should be dashed or not.
+	 *
+	 * @type {boolean}
+	 * @default false
+	 */
 	get dashed() {
 
-		return this.useDash;
+		return this._useDash;
 
 	}
 
 	set dashed( value ) {
 
-		if ( this.useDash !== value ) {
+		if ( this._useDash !== value ) {
 
-			this.useDash = value;
+			this._useDash = value;
 			this.needsUpdate = true;
 
 		}
 
 	}
 
-
+	/**
+	 * Whether alpha to coverage should be used or not.
+	 *
+	 * @type {boolean}
+	 * @default true
+	 */
 	get alphaToCoverage() {
 
-		return this.useAlphaToCoverage;
+		return this._useAlphaToCoverage;
 
 	}
 
 	set alphaToCoverage( value ) {
 
-		if ( this.useAlphaToCoverage !== value ) {
+		if ( this._useAlphaToCoverage !== value ) {
 
-			this.useAlphaToCoverage = value;
+			this._useAlphaToCoverage = value;
 			this.needsUpdate = true;
 
 		}
@@ -436,5 +548,3 @@ class Line2NodeMaterial extends NodeMaterial {
 }
 
 export default Line2NodeMaterial;
-
-addNodeMaterial( 'Line2NodeMaterial', Line2NodeMaterial );

package/src/materials/nodes/LineBasicNodeMaterial.js

@@ -0,0 +1,46 @@
+import NodeMaterial from './NodeMaterial.js';
+
+import { LineBasicMaterial } from '../LineBasicMaterial.js';
+
+const _defaultValues = /*@__PURE__*/ new LineBasicMaterial();
+
+/**
+ * Node material version of `LineBasicMaterial`.
+ *
+ * @augments NodeMaterial
+ */
+class LineBasicNodeMaterial extends NodeMaterial {
+
+	static get type() {
+
+		return 'LineBasicNodeMaterial';
+
+	}
+
+	/**
+	 * Constructs a new line basic 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.isLineBasicNodeMaterial = true;
+
+		this.setDefaultValues( _defaultValues );
+
+		this.setValues( parameters );
+
+	}
+
+}
+
+export default LineBasicNodeMaterial;

package/src/materials/nodes/LineDashedNodeMaterial.js

@@ -0,0 +1,132 @@
+import NodeMaterial from './NodeMaterial.js';
+import { attribute } from '../../nodes/core/AttributeNode.js';
+import { materialLineDashOffset, materialLineDashSize, materialLineGapSize, materialLineScale } from '../../nodes/accessors/MaterialNode.js';
+import { dashSize, gapSize } from '../../nodes/core/PropertyNode.js';
+import { varying, float } from '../../nodes/tsl/TSLBase.js';
+
+import { LineDashedMaterial } from '../LineDashedMaterial.js';
+
+const _defaultValues = /*@__PURE__*/ new LineDashedMaterial();
+
+/**
+ * Node material version of `LineDashedMaterial`.
+ *
+ * @augments NodeMaterial
+ */
+class LineDashedNodeMaterial extends NodeMaterial {
+
+	static get type() {
+
+		return 'LineDashedNodeMaterial';
+
+	}
+
+	/**
+	 * Constructs a new line dashed 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.isLineDashedNodeMaterial = true;
+
+		this.setDefaultValues( _defaultValues );
+
+		/**
+		 * The dash offset.
+		 *
+		 * @type {number}
+		 * @default 0
+		 */
+		this.dashOffset = 0;
+
+		/**
+		 * The offset of dash materials is by default inferred from the `dashOffset`
+		 * property. This node property allows to overwrite the default
+		 * and define the offset with a node instead.
+		 *
+		 * If you don't want to overwrite the offset but modify the existing
+		 * value instead, use {@link materialLineDashOffset}.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.offsetNode = null;
+
+		/**
+		 * The scale of dash materials is by default inferred from the `scale`
+		 * property. This node property allows to overwrite the default
+		 * and define the scale with a node instead.
+		 *
+		 * If you don't want to overwrite the scale but modify the existing
+		 * value instead, use {@link materialLineScale}.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.dashScaleNode = null;
+
+		/**
+		 * The dash size of dash materials is by default inferred from the `dashSize`
+		 * property. This node property allows to overwrite the default
+		 * and define the dash size with a node instead.
+		 *
+		 * If you don't want to overwrite the dash size but modify the existing
+		 * value instead, use {@link materialLineDashSize}.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.dashSizeNode = null;
+
+		/**
+		 * The gap size of dash materials is by default inferred from the `gapSize`
+		 * property. This node property allows to overwrite the default
+		 * and define the gap size with a node instead.
+		 *
+		 * If you don't want to overwrite the gap size but modify the existing
+		 * value instead, use {@link materialLineGapSize}.
+		 *
+		 * @type {?Node<float>}
+		 * @default null
+		 */
+		this.gapSizeNode = null;
+
+		this.setValues( parameters );
+
+	}
+
+	/**
+	 * Setups the dash specific node variables.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 */
+	setupVariants( /* builder */ ) {
+
+		const offsetNode = this.offsetNode ? float( this.offsetNode ) : materialLineDashOffset;
+		const dashScaleNode = this.dashScaleNode ? float( this.dashScaleNode ) : materialLineScale;
+		const dashSizeNode = this.dashSizeNode ? float( this.dashSizeNode ) : materialLineDashSize;
+		const gapSizeNode = this.gapSizeNode ? float( this.gapSizeNode ) : materialLineGapSize;
+
+		dashSize.assign( dashSizeNode );
+		gapSize.assign( gapSizeNode );
+
+		const vLineDistance = varying( attribute( 'lineDistance' ).mul( dashScaleNode ) );
+		const vLineDistanceOffset = offsetNode ? vLineDistance.add( offsetNode ) : vLineDistance;
+
+		vLineDistanceOffset.mod( dashSize.add( gapSize ) ).greaterThan( dashSize ).discard();
+
+	}
+
+}
+
+export default LineDashedNodeMaterial;