super-three 0.136.1 → 0.144.0

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

@@ -1,214 +1,229 @@
+import { Material, ShaderMaterial } from 'three';
+import { getNodesKeys, getCacheKey } from '../core/NodeUtils.js';
+import ExpressionNode from '../core/ExpressionNode.js';
 import {
-	FrontSide,
-	LessEqualDepth,
-	NoColors,
-	NormalBlending,
-	ShaderMaterial
-} from 'three';
-
-import { NodeBuilder } from '../core/NodeBuilder.js';
-import { ColorNode } from '../inputs/ColorNode.js';
-import { PositionNode } from '../accessors/PositionNode.js';
-import { RawNode } from './nodes/RawNode.js';
+	float, vec3, vec4,
+	assign, label, mul, bypass,
+	positionLocal, skinning, instance, modelViewProjection, lightingContext, colorSpace,
+	materialAlphaTest, materialColor, materialOpacity
+} from '../shadernode/ShaderNodeElements.js';
 
 class NodeMaterial extends ShaderMaterial {
 
-	constructor( vertex, fragment ) {
+	constructor() {
 
 		super();
 
-		this.vertex = vertex || new RawNode( new PositionNode( PositionNode.PROJECTION ) );
-		this.fragment = fragment || new RawNode( new ColorNode( 0xFF0000 ) );
+		this.isNodeMaterial = true;
 
-		this.updaters = [];
+		this.type = this.constructor.name;
 
-		this.type = 'NodeMaterial';
+		this.lights = true;
 
 	}
 
-	get properties() {
+	build( builder ) {
 
-		return this.fragment.properties;
+		this.generatePosition( builder );
 
-	}
+		const { lightsNode } = this;
+		const { diffuseColorNode } = this.generateDiffuseColor( builder );
 
-	get needsUpdate() {
+		const outgoingLightNode = this.generateLight( builder, { diffuseColorNode, lightsNode } );
 
-		return this.needsCompile;
+		this.generateOutput( builder, { diffuseColorNode, outgoingLightNode } );
 
 	}
 
-	set needsUpdate( value ) {
+	customProgramCacheKey() {
 
-		if ( value === true ) this.version ++;
-		this.needsCompile = value;
+		return getCacheKey( this );
 
 	}
 
-	onBeforeCompile( shader, renderer ) {
+	generatePosition( builder ) {
 
-		this.build( { renderer: renderer } );
+		const object = builder.object;
 
-		shader.defines = this.defines;
-		shader.uniforms = this.uniforms;
-		shader.vertexShader = this.vertexShader;
-		shader.fragmentShader = this.fragmentShader;
+		// < VERTEX STAGE >
 
-		shader.extensionDerivatives = ( this.extensions.derivatives === true );
-		shader.extensionFragDepth = ( this.extensions.fragDepth === true );
-		shader.extensionDrawBuffers = ( this.extensions.drawBuffers === true );
-		shader.extensionShaderTextureLOD = ( this.extensions.shaderTextureLOD === true );
+		let vertex = positionLocal;
 
-	}
+		if ( this.positionNode !== null ) {
 
-	customProgramCacheKey() {
+			vertex = bypass( vertex, assign( positionLocal, this.positionNode ) );
 
-		const hash = this.getHash();
+		}
 
-		return hash;
+		if ( object.instanceMatrix?.isInstancedBufferAttribute === true && builder.isAvailable( 'instance' ) === true ) {
 
-	}
+			vertex = bypass( vertex, instance( object ) );
+
+		}
 
-	getHash() {
+		if ( object.isSkinnedMesh === true ) {
 
-		let hash = '{';
+			vertex = bypass( vertex, skinning( object ) );
 
-		hash += '"vertex":' + this.vertex.getHash() + ',';
-		hash += '"fragment":' + this.fragment.getHash();
+		}
 
-		hash += '}';
+		builder.context.vertex = vertex;
 
-		return hash;
+		builder.addFlow( 'vertex', modelViewProjection() );
 
 	}
 
-	updateFrame( frame ) {
+	generateDiffuseColor( builder ) {
+
+		// < FRAGMENT STAGE >
+
+		let colorNode = vec4( this.colorNode || materialColor );
+		let opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
+
+		// COLOR
+
+		colorNode = builder.addFlow( 'fragment', label( colorNode, 'Color' ) );
+		const diffuseColorNode = builder.addFlow( 'fragment', label( colorNode, 'DiffuseColor' ) );
+
+		// OPACITY
+
+		opacityNode = builder.addFlow( 'fragment', label( opacityNode, 'OPACITY' ) );
+		builder.addFlow( 'fragment', assign( diffuseColorNode.a, mul( diffuseColorNode.a, opacityNode ) ) );
+
+		// ALPHA TEST
+
+		if ( this.alphaTestNode || this.alphaTest > 0 ) {
+
+			const alphaTestNode = this.alphaTestNode ? float( this.alphaTestNode ) : materialAlphaTest;
 
-		for ( let i = 0; i < this.updaters.length; ++ i ) {
+			builder.addFlow( 'fragment', label( alphaTestNode, 'AlphaTest' ) );
 
-			frame.updateNode( this.updaters[ i ] );
+			// @TODO: remove ExpressionNode here and then possibly remove it completely
+			builder.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );
 
 		}
 
+		return { colorNode, diffuseColorNode };
+
 	}
 
-	build( params = {} ) {
+	generateLight( builder, { diffuseColorNode, lightingModelNode, lightsNode = builder.lightsNode } ) {
 
-		const builder = params.builder || new NodeBuilder();
+		// < ANALYTIC LIGHTS >
 
-		builder.setMaterial( this, params.renderer );
-		builder.build( this.vertex, this.fragment );
+		// OUTGOING LIGHT
 
-		this.vertexShader = builder.getCode( 'vertex' );
-		this.fragmentShader = builder.getCode( 'fragment' );
+		let outgoingLightNode = diffuseColorNode.xyz;
+		if ( lightsNode && lightsNode.hasLight !== false ) outgoingLightNode = builder.addFlow( 'fragment', label( lightingContext( lightsNode, lightingModelNode ), 'Light' ) );
 
-		this.defines = builder.defines;
-		this.uniforms = builder.uniforms;
-		this.extensions = builder.extensions;
-		this.updaters = builder.updaters;
+		return outgoingLightNode;
 
-		this.fog = builder.requires.fog;
-		this.lights = builder.requires.lights;
+	}
 
-		this.transparent = builder.requires.transparent || this.blending > NormalBlending;
+	generateOutput( builder, { diffuseColorNode, outgoingLightNode } ) {
 
-		return this;
+		// OUTPUT
 
-	}
+		let outputNode = vec4( outgoingLightNode, diffuseColorNode.a );
 
-	copy( source ) {
+		// ENCODING
 
-		const uuid = this.uuid;
+		outputNode = colorSpace( outputNode, builder.renderer.outputEncoding );
 
-		for ( const name in source ) {
+		// FOG
 
-			this[ name ] = source[ name ];
+		if ( builder.fogNode ) outputNode = vec4( vec3( builder.fogNode.mix( outputNode ) ), outputNode.w );
 
-		}
+		// RESULT
+
+		builder.addFlow( 'fragment', label( outputNode, 'Output' ) );
+
+		return outputNode;
+
+	}
+
+	setDefaultValues( values ) {
 
-		this.uuid = uuid;
+		// This approach is to reuse the native refreshUniforms*
+		// and turn available the use of features like transmission and environment in core
 
-		if ( source.userData !== undefined ) {
+		for ( const property in values ) {
 
-			this.userData = JSON.parse( JSON.stringify( source.userData ) );
+			const value = values[ property ];
+
+			if ( this[ property ] === undefined ) {
+
+				this[ property ] = value?.clone?.() || value;
+
+			}
 
 		}
 
-		return this;
+		Object.assign( this.defines, values.defines );
 
 	}
 
 	toJSON( meta ) {
 
-		const isRootObject = ( meta === undefined || typeof meta === 'string' );
+		const isRoot = ( meta === undefined || typeof meta === 'string' );
 
-		if ( isRootObject ) {
+		if ( isRoot ) {
 
 			meta = {
+				textures: {},
+				images: {},
 				nodes: {}
 			};
 
 		}
 
-		if ( meta && ! meta.materials ) meta.materials = {};
+		const data = Material.prototype.toJSON.call( this, meta );
+		const nodeKeys = getNodesKeys( this );
 
-		if ( ! meta.materials[ this.uuid ] ) {
+		data.inputNodes = {};
 
-			const data = {};
+		for ( const name of nodeKeys ) {
 
-			data.uuid = this.uuid;
-			data.type = this.type;
+			data.inputNodes[ name ] = this[ name ].toJSON( meta ).uuid;
 
-			meta.materials[ data.uuid ] = data;
+		}
 
-			if ( this.name !== '' ) data.name = this.name;
+		// TODO: Copied from Object3D.toJSON
 
-			if ( this.size !== undefined ) data.size = this.size;
-			if ( this.sizeAttenuation !== undefined ) data.sizeAttenuation = this.sizeAttenuation;
+		function extractFromCache( cache ) {
 
-			if ( this.blending !== NormalBlending ) data.blending = this.blending;
-			if ( this.flatShading === true ) data.flatShading = this.flatShading;
-			if ( this.side !== FrontSide ) data.side = this.side;
-			if ( this.vertexColors !== NoColors ) data.vertexColors = this.vertexColors;
+			const values = [];
 
-			if ( this.depthFunc !== LessEqualDepth ) data.depthFunc = this.depthFunc;
-			if ( this.depthTest === false ) data.depthTest = this.depthTest;
-			if ( this.depthWrite === false ) data.depthWrite = this.depthWrite;
+			for ( const key in cache ) {
 
-			if ( this.linewidth !== 1 ) data.linewidth = this.linewidth;
-			if ( this.dashSize !== undefined ) data.dashSize = this.dashSize;
-			if ( this.gapSize !== undefined ) data.gapSize = this.gapSize;
-			if ( this.scale !== undefined ) data.scale = this.scale;
+				const data = cache[ key ];
+				delete data.metadata;
+				values.push( data );
 
-			if ( this.dithering === true ) data.dithering = true;
+			}
 
-			if ( this.wireframe === true ) data.wireframe = this.wireframe;
-			if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
-			if ( this.wireframeLinecap !== 'round' ) data.wireframeLinecap = this.wireframeLinecap;
-			if ( this.wireframeLinejoin !== 'round' ) data.wireframeLinejoin = this.wireframeLinejoin;
+			return values;
 
-			if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
-			if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
+		}
 
-			if ( this.visible === false ) data.visible = false;
-			if ( JSON.stringify( this.userData ) !== '{}' ) data.userData = this.userData;
+		if ( isRoot ) {
 
-			data.fog = this.fog;
-			data.lights = this.lights;
+			const textures = extractFromCache( meta.textures );
+			const images = extractFromCache( meta.images );
+			const nodes = extractFromCache( meta.nodes );
 
-			data.vertex = this.vertex.toJSON( meta ).uuid;
-			data.fragment = this.fragment.toJSON( meta ).uuid;
+			if ( textures.length > 0 ) data.textures = textures;
+			if ( images.length > 0 ) data.images = images;
+			if ( nodes.length > 0 ) data.nodes = nodes;
 
 		}
 
-		meta.material = this.uuid;
-
-		return meta;
+		return data;
 
 	}
 
-}
+	static fromMaterial( /*material*/ ) { }
 
-NodeMaterial.prototype.isNodeMaterial = true;
+}
 
-export { NodeMaterial };
+export default NodeMaterial;

package/examples/jsm/{renderers/nodes → nodes}/materials/PointsNodeMaterial.js

@@ -1,10 +1,17 @@
+import NodeMaterial from './NodeMaterial.js';
 import { PointsMaterial } from 'three';
 
-class PointsNodeMaterial extends PointsMaterial {
+const defaultValues = new PointsMaterial();
+
+class PointsNodeMaterial extends NodeMaterial {
 
 	constructor( parameters ) {
 
-		super( parameters );
+		super();
+
+		this.isPointsNodeMaterial = true;
+
+		this.transparent = true;
 
 		this.colorNode = null;
 		this.opacityNode = null;
@@ -17,6 +24,10 @@ class PointsNodeMaterial extends PointsMaterial {
 
 		this.positionNode = null;
 
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
+
 	}
 
 	copy( source ) {
@@ -38,6 +49,4 @@ class PointsNodeMaterial extends PointsMaterial {
 
 }
 
-PointsNodeMaterial.prototype.isNodeMaterial = true;
-
 export default PointsNodeMaterial;

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

@@ -1,27 +1,106 @@
-import { SpriteNode } from './nodes/SpriteNode.js';
-import { NodeMaterial } from './NodeMaterial.js';
-import { NodeUtils } from '../core/NodeUtils.js';
+import NodeMaterial from './NodeMaterial.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();
 
 class SpriteNodeMaterial extends NodeMaterial {
 
-	constructor() {
+	constructor( parameters ) {
+
+		super();
+
+		this.isSpriteNodeMaterial = true;
+
+		this.lights = true;
+
+		this.colorNode = null;
+		this.opacityNode = null;
 
-		const node = new SpriteNode();
+		this.alphaTestNode = null;
 
-		super( node, node );
+		this.lightNode = null;
 
-		this.type = 'SpriteNodeMaterial';
+		this.positionNode = null;
+		this.rotationNode = null;
+		this.scaleNode = null;
+
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
 
 	}
 
-}
+	generatePosition( builder ) {
+
+		// < VERTEX STAGE >
+
+		const { positionNode, rotationNode, scaleNode } = this;
+
+		const vertex = positionLocal;
+
+		let mvPosition = mul( modelViewMatrix, positionNode ? vec4( positionNode.xyz, 1 ) : vec4( 0, 0, 0, 1 ) );
+
+		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 ) )
+		);
+
+		if ( scaleNode !== null ) {
+
+			scale = mul( scale, scaleNode );
+
+		}
+
+		let alignedPosition = vertex.xy;
+
+		if ( builder.object.center?.isVector2 === true ) {
+
+			alignedPosition = sub( alignedPosition, sub( uniform( builder.object.center ), vec2( 0.5 ) ) );
 
-NodeUtils.addShortcuts( SpriteNodeMaterial.prototype, 'fragment', [
-	'color',
-	'alpha',
-	'mask',
-	'position',
-	'spherical'
-] );
+		}
+
+		alignedPosition = mul( alignedPosition, 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 ) )
+		);
+
+		mvPosition = vec4( add( mvPosition.xy, rotatedPosition.xy ), mvPosition.z, mvPosition.w );
+
+		const modelViewProjection = mul( cameraProjectionMatrix, mvPosition );
+
+		builder.context.vertex = vertex;
+
+		builder.addFlow( 'vertex', 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;
+
+		return super.copy( source );
+
+	}
+
+}
 
-export { SpriteNodeMaterial };
+export default SpriteNodeMaterial;