super-three 0.147.1 → 0.154.0

package/examples/jsm/nodes/materials/NodeMaterial.js

@@ -1,12 +1,24 @@
-import { Material, ShaderMaterial } from 'three';
-import { getNodesKeys, getCacheKey } from '../core/NodeUtils.js';
-import ExpressionNode from '../core/ExpressionNode.js';
-import {
-	float, vec3, vec4,
-	assign, label, mul, bypass, attribute,
-	positionLocal, skinning, instance, modelViewProjection, lightingContext, colorSpace,
-	materialAlphaTest, materialColor, materialOpacity
-} from '../shadernode/ShaderNodeElements.js';
+import { Material, ShaderMaterial, NoColorSpace } from 'three';
+import { getNodeChildren, getCacheKey } from '../core/NodeUtils.js';
+import { attribute } from '../core/AttributeNode.js';
+import { diffuseColor } from '../core/PropertyNode.js';
+import { materialNormal } from '../accessors/ExtendedMaterialNode.js';
+import { materialAlphaTest, materialColor, materialOpacity, materialEmissive } from '../accessors/MaterialNode.js';
+import { modelViewProjection } from '../accessors/ModelViewProjectionNode.js';
+import { transformedNormalView } from '../accessors/NormalNode.js';
+import { instance } from '../accessors/InstanceNode.js';
+import { positionLocal, positionView } from '../accessors/PositionNode.js';
+import { skinning } from '../accessors/SkinningNode.js';
+import { morph } from '../accessors/MorphNode.js';
+import { texture } from '../accessors/TextureNode.js';
+import { cubeTexture } from '../accessors/CubeTextureNode.js';
+import { lightsWithoutWrap } from '../lighting/LightsNode.js';
+import { mix, dFdx, dFdy } from '../math/MathNode.js';
+import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
+import AONode from '../lighting/AONode.js';
+import EnvironmentNode from '../lighting/EnvironmentNode.js';
+
+const NodeMaterials = new Map();
 
 class NodeMaterial extends ShaderMaterial {
 
@@ -18,156 +30,343 @@ class NodeMaterial extends ShaderMaterial {
 
 		this.type = this.constructor.name;
 
+		this.forceSinglePass = false;
+
 		this.lights = true;
+		this.normals = true;
+
+		this.lightsNode = null;
+		this.envNode = null;
+
+		this.colorNode = null;
+		this.normalNode = null;
+		this.opacityNode = null;
+		this.backdropNode = null;
+		this.backdropAlphaNode = null;
+		this.alphaTestNode = null;
+
+		this.positionNode = null;
+		this.outputNode = null;
 
 	}
 
-	build( builder ) {
+	customProgramCacheKey() {
 
-		this.generatePosition( builder );
+		return this.type + getCacheKey( this );
 
-		const { lightsNode } = this;
-		const { diffuseColorNode } = this.generateDiffuseColor( builder );
+	}
 
-		const outgoingLightNode = this.generateLight( builder, { diffuseColorNode, lightsNode } );
+	build( builder ) {
 
-		this.generateOutput( builder, { diffuseColorNode, outgoingLightNode } );
+		this.construct( builder );
 
 	}
 
-	customProgramCacheKey() {
+	construct( builder ) {
+
+		// < VERTEX STAGE >
+
+		builder.addStack();
+
+		builder.stack.outputNode = this.constructPosition( builder );
+
+		builder.addFlow( 'vertex', builder.removeStack() );
+
+		// < FRAGMENT STAGE >
+
+		builder.addStack();
+
+		if ( this.isUnlit === false ) {
+
+			if ( this.normals === true ) this.constructNormal( builder );
+
+			this.constructDiffuseColor( builder );
+			this.constructVariants( builder );
+
+			const outgoingLightNode = this.constructLighting( builder );
 
-		return getCacheKey( this );
+			builder.stack.outputNode = this.constructOutput( builder, vec4( outgoingLightNode, diffuseColor.a ) );
+
+		} else {
+
+			builder.stack.outputNode = this.constructOutput( builder, this.outputNode || vec4( 0, 0, 0, 1 ) );
+
+		}
+
+		builder.addFlow( 'fragment', builder.removeStack() );
 
 	}
 
-	generatePosition( builder ) {
+	constructPosition( builder ) {
 
 		const object = builder.object;
+		const geometry = object.geometry;
 
-		// < VERTEX STAGE >
+		builder.addStack();
 
-		let vertex = positionLocal;
+		if ( geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color ) {
 
-		if ( this.positionNode !== null ) {
+			builder.stack.add( morph( object ) );
+
+		}
+
+		if ( object.isSkinnedMesh === true ) {
 
-			vertex = bypass( vertex, assign( positionLocal, this.positionNode ) );
+			builder.stack.add( skinning( object ) );
 
 		}
 
-		if ( object.instanceMatrix?.isInstancedBufferAttribute === true && builder.isAvailable( 'instance' ) === true ) {
+		if ( ( object.instanceMatrix && object.instanceMatrix.isInstancedBufferAttribute === true ) && builder.isAvailable( 'instance' ) === true ) {
 
-			vertex = bypass( vertex, instance( object ) );
+			builder.stack.add( instance( object ) );
 
 		}
 
-		if ( object.isSkinnedMesh === true ) {
+		if ( this.positionNode !== null ) {
 
-			vertex = bypass( vertex, skinning( object ) );
+			builder.stack.assign( positionLocal, this.positionNode );
 
 		}
 
-		builder.context.vertex = vertex;
+		builder.context.vertex = builder.removeStack();
 
-		builder.addFlow( 'vertex', modelViewProjection() );
+		return modelViewProjection();
 
 	}
 
-	generateDiffuseColor( builder ) {
+	constructDiffuseColor( { stack, geometry } ) {
 
-		// < FRAGMENT STAGE >
-
-		let colorNode = vec4( this.colorNode || materialColor );
-		let opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
+		let colorNode = this.colorNode ? vec4( this.colorNode ) : materialColor;
 
 		// VERTEX COLORS
 
-		if ( this.vertexColors === true && builder.geometry.hasAttribute( 'color' ) ) {
+		if ( this.vertexColors === true && geometry.hasAttribute( 'color' ) ) {
+
+			colorNode = vec4( colorNode.xyz.mul( attribute( 'color' ) ), colorNode.a );
 
-			colorNode = vec4( mul( colorNode.xyz, attribute( 'color' ) ), colorNode.a );
-		
 		}
 
 		// COLOR
 
-		colorNode = builder.addFlow( 'fragment', label( colorNode, 'Color' ) );
-		const diffuseColorNode = builder.addFlow( 'fragment', label( colorNode, 'DiffuseColor' ) );
+		stack.assign( diffuseColor, colorNode );
 
 		// OPACITY
 
-		opacityNode = builder.addFlow( 'fragment', label( opacityNode, 'OPACITY' ) );
-		builder.addFlow( 'fragment', assign( diffuseColorNode.a, mul( diffuseColorNode.a, opacityNode ) ) );
+		const opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
+		stack.assign( diffuseColor.a, diffuseColor.a.mul( opacityNode ) );
 
 		// ALPHA TEST
 
-		if ( this.alphaTestNode || this.alphaTest > 0 ) {
+		if ( this.alphaTestNode !== null || this.alphaTest > 0 ) {
+
+			const alphaTestNode = this.alphaTestNode !== null ? float( this.alphaTestNode ) : materialAlphaTest;
+
+			stack.add( diffuseColor.a.lessThanEqual( alphaTestNode ).discard() );
+
+		}
+
+	}
+
+	constructVariants( /*builder*/ ) {
+
+		// Interface function.
+
+	}
+
+	constructNormal( { stack } ) {
+
+		// NORMAL VIEW
+
+		if ( this.flatShading === true ) {
+
+			const fdx = dFdx( positionView );
+			const fdy = dFdy( positionView.negate() ); // use -positionView ?
+			const normalNode = fdx.cross( fdy ).normalize();
+
+			stack.assign( transformedNormalView, normalNode );
+
+		} else {
+
+			const normalNode = this.normalNode ? vec3( this.normalNode ) : materialNormal;
+
+			stack.assign( transformedNormalView, normalNode );
+
+		}
+
+	}
+
+	getEnvNode( builder ) {
+
+		let node = null;
+
+		if ( this.envNode ) {
+
+			node = this.envNode;
+
+		} else if ( this.envMap ) {
+
+			node = this.envMap.isCubeTexture ? cubeTexture( this.envMap ) : texture( this.envMap );
+
+		} else if ( builder.environmentNode ) {
+
+			node = builder.environmentNode;
+
+		}
+
+		return node;
+
+	}
+
+	constructLights( builder ) {
+
+		const envNode = this.getEnvNode( builder );
+
+		//
+
+		const materialLightsNode = [];
+
+		if ( envNode ) {
+
+			materialLightsNode.push( new EnvironmentNode( envNode ) );
+
+		}
+
+		if ( builder.material.aoMap ) {
+
+			materialLightsNode.push( new AONode( texture( builder.material.aoMap ) ) );
+
+		}
 
-			const alphaTestNode = this.alphaTestNode ? float( this.alphaTestNode ) : materialAlphaTest;
+		let lightsNode = this.lightsNode || builder.lightsNode;
 
-			builder.addFlow( 'fragment', label( alphaTestNode, 'AlphaTest' ) );
+		if ( materialLightsNode.length > 0 ) {
 
-			// @TODO: remove ExpressionNode here and then possibly remove it completely
-			builder.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );
+			lightsNode = lightsWithoutWrap( [ ...lightsNode.lightNodes, ...materialLightsNode ] );
 
 		}
 
-		return { colorNode, diffuseColorNode };
+		return lightsNode;
 
 	}
 
-	generateLight( builder, { diffuseColorNode, lightingModelNode, lightsNode = builder.lightsNode } ) {
+	constructLightingModel( /*builder*/ ) {
 
-		// < ANALYTIC LIGHTS >
+		// Interface function.
+
+	}
+
+	constructLighting( builder ) {
+
+		const { material } = builder;
+		const { backdropNode, backdropAlphaNode, emissiveNode } = this;
 
 		// OUTGOING LIGHT
 
-		let outgoingLightNode = diffuseColorNode.xyz;
-		if ( lightsNode && lightsNode.hasLight !== false ) outgoingLightNode = builder.addFlow( 'fragment', label( lightingContext( lightsNode, lightingModelNode ), 'Light' ) );
+		const lights = this.lights === true || this.lightsNode !== null;
+
+		const lightsNode = lights ? this.constructLights( builder ) : null;
+
+		let outgoingLightNode = diffuseColor.rgb;
+
+		if ( lightsNode && lightsNode.hasLight !== false ) {
+
+			const lightingModelNode = this.constructLightingModel( builder );
+
+			outgoingLightNode = lightsNode.lightingContext( lightingModelNode, backdropNode, backdropAlphaNode );
+
+		} else if ( backdropNode !== null ) {
+
+			outgoingLightNode = vec3( backdropAlphaNode !== null ? mix( outgoingLightNode, backdropNode, backdropAlphaNode ) : backdropNode );
+
+		}
+
+		// EMISSIVE
+
+		if ( ( emissiveNode && emissiveNode.isNode === true ) || ( material.emissive && material.emissive.isColor === true ) ) {
+
+			outgoingLightNode = outgoingLightNode.add( emissiveNode ? vec3( emissiveNode ) : materialEmissive );
+
+		}
 
 		return outgoingLightNode;
 
 	}
 
-	generateOutput( builder, { diffuseColorNode, outgoingLightNode } ) {
+	constructOutput( builder, outputNode ) {
+
+		const renderer = builder.renderer;
+
+		// TONE MAPPING
+
+		const toneMappingNode = builder.toneMappingNode;
 
-		// OUTPUT
+		if ( toneMappingNode ) {
 
-		let outputNode = vec4( outgoingLightNode, diffuseColorNode.a );
+			outputNode = vec4( toneMappingNode.context( { color: outputNode.rgb } ), outputNode.a );
+
+		}
 
 		// ENCODING
 
-		outputNode = colorSpace( outputNode, builder.renderer.outputEncoding );
+		const renderTarget = renderer.getRenderTarget();
 
-		// FOG
+		let outputColorSpace;
+
+		if ( renderTarget !== null ) {
+
+			outputColorSpace = renderTarget.texture.colorSpace;
+
+		} else {
 
-		if ( builder.fogNode ) outputNode = vec4( vec3( builder.fogNode.mix( outputNode ) ), outputNode.w );
+			outputColorSpace = renderer.outputColorSpace;
+
+		}
+
+		if ( outputColorSpace !== NoColorSpace ) outputNode = outputNode.linearToColorSpace( outputColorSpace );
+
+		// FOG
 
-		// RESULT
+		const fogNode = builder.fogNode;
 
-		builder.addFlow( 'fragment', label( outputNode, 'Output' ) );
+		if ( fogNode ) outputNode = vec4( fogNode.mixAssign( outputNode.rgb ), outputNode.a );
 
 		return outputNode;
 
 	}
 
-	setDefaultValues( values ) {
+	setDefaultValues( material ) {
 
 		// This approach is to reuse the native refreshUniforms*
 		// and turn available the use of features like transmission and environment in core
 
-		for ( const property in values ) {
+		for ( const property in material ) {
 
-			const value = values[ property ];
+			const value = material[ property ];
 
 			if ( this[ property ] === undefined ) {
 
-				this[ property ] = value?.clone?.() || value;
+				this[ property ] = value;
+
+				if ( value && value.clone ) this[ property ] = value.clone();
 
 			}
 
 		}
 
-		Object.assign( this.defines, values.defines );
+		Object.assign( this.defines, material.defines );
+
+		const descriptors = Object.getOwnPropertyDescriptors( material.constructor.prototype );
+
+		for ( const key in descriptors ) {
+
+			if ( Object.getOwnPropertyDescriptor( this.constructor.prototype, key ) === undefined &&
+			     descriptors[ key ].get !== undefined ) {
+
+				Object.defineProperty( this.constructor.prototype, key, descriptors[ key ] );
+
+			}
+
+		}
 
 	}
 
@@ -186,13 +385,13 @@ class NodeMaterial extends ShaderMaterial {
 		}
 
 		const data = Material.prototype.toJSON.call( this, meta );
-		const nodeKeys = getNodesKeys( this );
+		const nodeChildren = getNodeChildren( this );
 
 		data.inputNodes = {};
 
-		for ( const name of nodeKeys ) {
+		for ( const { property, childNode } of nodeChildren ) {
 
-			data.inputNodes[ name ] = this[ name ].toJSON( meta ).uuid;
+			data.inputNodes[ property ] = childNode.toJSON( meta ).uuid;
 
 		}
 
@@ -230,8 +429,82 @@ class NodeMaterial extends ShaderMaterial {
 
 	}
 
-	static fromMaterial( /*material*/ ) { }
+	get isUnlit() {
+
+		return this.constructor === NodeMaterial.prototype.constructor;
+
+	}
+
+	copy( source ) {
+
+		this.lightsNode = source.lightsNode;
+		this.envNode = source.envNode;
+
+		this.colorNode = source.colorNode;
+		this.normalNode = source.normalNode;
+		this.opacityNode = source.opacityNode;
+		this.backdropNode = source.backdropNode;
+		this.backdropAlphaNode = source.backdropAlphaNode;
+		this.alphaTestNode = source.alphaTestNode;
+
+		this.positionNode = source.positionNode;
+		this.outputNode = source.outputNode;
+
+		return super.copy( source );
+
+	}
+
+	static fromMaterial( material ) {
+
+		if ( material.isNodeMaterial === true ) { // is already a node material
+
+			return material;
+
+		}
+
+		const type = material.type.replace( 'Material', 'NodeMaterial' );
+
+		const nodeMaterial = createNodeMaterialFromType( type );
+
+		if ( nodeMaterial === undefined ) {
+
+			throw new Error( `NodeMaterial: Material "${ material.type }" is not compatible.` );
+
+		}
+
+		for ( const key in material ) {
+
+			nodeMaterial[ key ] = material[ key ];
+
+		}
+
+		return nodeMaterial;
+
+	}
 
 }
 
 export default NodeMaterial;
+
+export function addNodeMaterial( nodeMaterial ) {
+
+	if ( typeof nodeMaterial !== 'function' || ! nodeMaterial.name ) throw new Error( `Node material ${ nodeMaterial.name } is not a class` );
+	if ( NodeMaterials.has( nodeMaterial.name ) ) throw new Error( `Redefinition of node material ${ nodeMaterial.name }` );
+
+	NodeMaterials.set( nodeMaterial.name, nodeMaterial );
+
+}
+
+export function createNodeMaterialFromType( type ) {
+
+	const Material = NodeMaterials.get( type );
+
+	if ( Material !== undefined ) {
+
+		return new Material();
+
+	}
+
+}
+
+addNodeMaterial( NodeMaterial );

package/examples/jsm/nodes/materials/PointsNodeMaterial.js

@@ -1,4 +1,5 @@
-import NodeMaterial from './NodeMaterial.js';
+import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
+
 import { PointsMaterial } from 'three';
 
 const defaultValues = new PointsMaterial();
@@ -11,6 +12,9 @@ class PointsNodeMaterial extends NodeMaterial {
 
 		this.isPointsNodeMaterial = true;
 
+		this.lights = false;
+		this.normals = false;
+
 		this.transparent = true;
 
 		this.colorNode = null;
@@ -32,17 +36,8 @@ class PointsNodeMaterial extends NodeMaterial {
 
 	copy( source ) {
 
-		this.colorNode = source.colorNode;
-		this.opacityNode = source.opacityNode;
-
-		this.alphaTestNode = source.alphaTestNode;
-
-		this.lightNode = source.lightNode;
-
 		this.sizeNode = source.sizeNode;
 
-		this.positionNode = source.positionNode;
-
 		return super.copy( source );
 
 	}
@@ -50,3 +45,5 @@ class PointsNodeMaterial extends NodeMaterial {
 }
 
 export default PointsNodeMaterial;
+
+addNodeMaterial( PointsNodeMaterial );

package/examples/jsm/nodes/materials/SpriteNodeMaterial.js

@@ -1,11 +1,12 @@
-import NodeMaterial from './NodeMaterial.js';
+import NodeMaterial, { addNodeMaterial } from './NodeMaterial.js';
+import { uniform } from '../core/UniformNode.js';
+import { cameraProjectionMatrix } from '../accessors/CameraNode.js';
+import { materialRotation } from '../accessors/MaterialNode.js';
+import { modelViewMatrix, modelWorldMatrix } from '../accessors/ModelNode.js';
+import { positionLocal } from '../accessors/PositionNode.js';
+import { vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
+
 import { SpriteMaterial } from 'three';
-import {
-	vec2, vec3, vec4,
-	uniform, add, mul, sub,
-	positionLocal, length, cos, sin,
-	modelViewMatrix, cameraProjectionMatrix, modelWorldMatrix, materialRotation
-} from '../shadernode/ShaderNodeElements.js';
 
 const defaultValues = new SpriteMaterial();
 
@@ -17,7 +18,8 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		this.isSpriteNodeMaterial = true;
 
-		this.lights = true;
+		this.lights = false;
+		this.normals = false;
 
 		this.colorNode = null;
 		this.opacityNode = null;
@@ -36,7 +38,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 	}
 
-	generatePosition( builder ) {
+	constructPosition( { object, context } ) {
 
 		// < VERTEX STAGE >
 
@@ -44,55 +46,48 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		const vertex = positionLocal;
 
-		let mvPosition = mul( modelViewMatrix, positionNode ? vec4( positionNode.xyz, 1 ) : vec4( 0, 0, 0, 1 ) );
+		let mvPosition = modelViewMatrix.mul( vec3( positionNode || 0 ) );
 
-		let scale = vec2(
-			length( vec3( modelWorldMatrix[ 0 ].x, modelWorldMatrix[ 0 ].y, modelWorldMatrix[ 0 ].z ) ),
-			length( vec3( modelWorldMatrix[ 1 ].x, modelWorldMatrix[ 1 ].y, modelWorldMatrix[ 1 ].z ) )
-		);
+		let scale = vec2( modelWorldMatrix[ 0 ].xyz.length(), modelWorldMatrix[ 1 ].xyz.length() );
 
 		if ( scaleNode !== null ) {
 
-			scale = mul( scale, scaleNode );
+			scale = scale.mul( scaleNode );
 
 		}
 
 		let alignedPosition = vertex.xy;
 
-		if ( builder.object.center?.isVector2 === true ) {
+		if ( object.center && object.center.isVector2 === true ) {
 
-			alignedPosition = sub( alignedPosition, sub( uniform( builder.object.center ), vec2( 0.5 ) ) );
+			alignedPosition = alignedPosition.sub( uniform( object.center ).sub( 0.5 ) );
 
 		}
 
-		alignedPosition = mul( alignedPosition, scale );
+		alignedPosition = alignedPosition.mul( scale );
 
 		const rotation = rotationNode || materialRotation;
 
-		const rotatedPosition = vec2(
-			sub( mul( cos( rotation ), alignedPosition.x ), mul( sin( rotation ), alignedPosition.y ) ),
-			add( mul( sin( rotation ), alignedPosition.x ), mul( cos( rotation ), alignedPosition.y ) )
+		const cosAngle = rotation.cos();
+		const sinAngle = rotation.sin();
+
+		const rotatedPosition = vec2( // @TODO: Maybe we can create mat2 and write something like rotationMatrix.mul( alignedPosition )?
+			vec2( cosAngle, sinAngle.negate() ).dot( alignedPosition ),
+			vec2( sinAngle, cosAngle ).dot( alignedPosition )
 		);
 
-		mvPosition = vec4( add( mvPosition.xy, rotatedPosition.xy ), mvPosition.z, mvPosition.w );
+		mvPosition = vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw );
 
-		const modelViewProjection = mul( cameraProjectionMatrix, mvPosition );
+		const modelViewProjection = cameraProjectionMatrix.mul( mvPosition );
 
-		builder.context.vertex = vertex;
+		context.vertex = vertex;
 
-		builder.addFlow( 'vertex', modelViewProjection );
+		return modelViewProjection;
 
 	}
 
 	copy( source ) {
 
-		this.colorNode = source.colorNode;
-		this.opacityNode = source.opacityNode;
-
-		this.alphaTestNode = source.alphaTestNode;
-
-		this.lightNode = source.lightNode;
-
 		this.positionNode = source.positionNode;
 		this.rotationNode = source.rotationNode;
 		this.scaleNode = source.scaleNode;
@@ -104,3 +99,5 @@ class SpriteNodeMaterial extends NodeMaterial {
 }
 
 export default SpriteNodeMaterial;
+
+addNodeMaterial( SpriteNodeMaterial );