super-three 0.136.0 → 0.141.0

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

@@ -0,0 +1,65 @@
+import NodeMaterial from './NodeMaterial.js';
+import LineBasicNodeMaterial from './LineBasicNodeMaterial.js';
+import MeshBasicNodeMaterial from './MeshBasicNodeMaterial.js';
+import MeshStandardNodeMaterial from './MeshStandardNodeMaterial.js';
+import PointsNodeMaterial from './PointsNodeMaterial.js';
+import SpriteNodeMaterial from './SpriteNodeMaterial.js';
+import { Material } from 'three';
+
+export {
+	NodeMaterial,
+	LineBasicNodeMaterial,
+	MeshBasicNodeMaterial,
+	MeshStandardNodeMaterial,
+	PointsNodeMaterial,
+	SpriteNodeMaterial
+};
+
+const materialLib = {
+	NodeMaterial,
+	LineBasicNodeMaterial,
+	MeshBasicNodeMaterial,
+	MeshStandardNodeMaterial,
+	PointsNodeMaterial,
+	SpriteNodeMaterial
+};
+
+const fromTypeFunction = Material.fromType;
+
+Material.fromType = function ( type ) {
+
+	if ( materialLib[ type ] !== undefined ) {
+
+		return new materialLib[ type ]();
+
+	}
+
+	return fromTypeFunction.call( this, type );
+
+};
+
+NodeMaterial.fromMaterial = function ( material ) {
+
+	const type = material.type.replace( 'Material', 'NodeMaterial' );
+
+	if ( materialLib[ type ] === undefined ) {
+
+		return material; // is already a node material or cannot be converted
+
+	}
+
+	const nodeMaterial = new materialLib[ type ]( material );
+
+	for ( let key in material ) {
+
+		if ( nodeMaterial[ key ] === undefined ) {
+
+			nodeMaterial[ key ] = material[ key ]; // currently this is needed only for material.alphaTest
+
+		}
+
+	}
+
+	return nodeMaterial;
+
+};

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

@@ -1,10 +1,17 @@
+import NodeMaterial from './NodeMaterial.js';
 import { MeshBasicMaterial } from 'three';
 
-class MeshBasicNodeMaterial extends MeshBasicMaterial {
+const defaultValues = new MeshBasicMaterial();
+
+class MeshBasicNodeMaterial extends NodeMaterial {
 
 	constructor( parameters ) {
 
-		super( parameters );
+		super();
+
+		this.isMeshBasicNodeMaterial = true;
+
+		this.lights = true;
 
 		this.colorNode = null;
 		this.opacityNode = null;
@@ -15,6 +22,10 @@ class MeshBasicNodeMaterial extends MeshBasicMaterial {
 
 		this.positionNode = null;
 
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
+
 	}
 
 	copy( source ) {
@@ -34,6 +45,4 @@ class MeshBasicNodeMaterial extends MeshBasicMaterial {
 
 }
 
-MeshBasicNodeMaterial.prototype.isNodeMaterial = true;
-
 export default MeshBasicNodeMaterial;

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

@@ -1,31 +1,171 @@
-import { MeshStandardNode } from './nodes/MeshStandardNode.js';
-import { NodeMaterial } from './NodeMaterial.js';
-import { NodeUtils } from '../core/NodeUtils.js';
+import NodeMaterial from './NodeMaterial.js';
+import {
+	float, vec3, vec4, normalView, add, context,
+	assign, label, mul, invert, mix, texture, uniform,
+	materialRoughness, materialMetalness, materialEmissive
+} from '../shadernode/ShaderNodeElements.js';
+import LightsNode from '../lighting/LightsNode.js';
+import EnvironmentNode from '../lighting/EnvironmentNode.js';
+import AONode from '../lighting/AONode.js';
+import getRoughness from '../functions/material/getRoughness.js';
+import PhysicalLightingModel from '../functions/PhysicalLightingModel.js';
+import NormalMapNode from '../display/NormalMapNode.js';
 
-class MeshStandardNodeMaterial extends NodeMaterial {
+import { MeshStandardMaterial } from 'three';
 
-	constructor() {
+const defaultValues = new MeshStandardMaterial();
 
-		const node = new MeshStandardNode();
+export default class MeshStandardNodeMaterial extends NodeMaterial {
 
-		super( node, node );
+	constructor( parameters ) {
 
-		this.type = 'MeshStandardNodeMaterial';
+		super();
+
+		this.isMeshStandardNodeMaterial = true;
+
+		this.colorNode = null;
+		this.opacityNode = null;
+
+		this.alphaTestNode = null;
+
+		this.normalNode = null;
+
+		this.emissiveNode = null;
+
+		this.metalnessNode = null;
+		this.roughnessNode = null;
+
+		this.clearcoatNode = null;
+		this.clearcoatRoughnessNode = null;
+
+		this.envNode = null;
+
+		this.lightsNode = null;
+
+		this.positionNode = null;
+
+		this.setDefaultValues( defaultValues );
+
+		this.setValues( parameters );
 
 	}
 
-}
+	build( builder ) {
+
+		this.generatePosition( builder );
+
+		let { colorNode, diffuseColorNode } = this.generateDiffuseColor( builder );
+		const envNode = this.envNode || builder.scene.environmentNode;
+
+		diffuseColorNode = this.generateStandardMaterial( builder, { colorNode, diffuseColorNode } );
+
+		if ( this.lightsNode ) builder.lightsNode = this.lightsNode;
+
+		const materialLightsNode = [];
+
+		if ( envNode ) {
+
+			materialLightsNode.push( new EnvironmentNode( envNode ) );
+
+		}
+
+		if ( builder.material.aoMap ) {
+
+			materialLightsNode.push( new AONode( texture( builder.material.aoMap ) ) );
+
+		}
+
+		if ( materialLightsNode.length > 0 ) {
+
+			builder.lightsNode = new LightsNode( [ ...builder.lightsNode.lightNodes, ...materialLightsNode ] );
+
+		}
+
+		const outgoingLightNode = this.generateLight( builder, { diffuseColorNode, lightingModelNode: PhysicalLightingModel } );
+
+		this.generateOutput( builder, { diffuseColorNode, outgoingLightNode } );
+
+	}
+
+	generateStandardMaterial( builder, { colorNode, diffuseColorNode } ) {
+
+		const { material } = builder;
+
+		// METALNESS
+
+		let metalnessNode = this.metalnessNode ? float( this.metalnessNode ) : materialMetalness;
+
+		metalnessNode = builder.addFlow( 'fragment', label( metalnessNode, 'Metalness' ) );
+		builder.addFlow( 'fragment', assign( diffuseColorNode, vec4( mul( diffuseColorNode.rgb, invert( metalnessNode ) ), diffuseColorNode.a ) ) );
+
+		// ROUGHNESS
 
-NodeUtils.addShortcuts( MeshStandardNodeMaterial.prototype, 'properties', [
-	'color',
-	'roughness',
-	'metalness',
-	'map',
-	'normalMap',
-	'normalScale',
-	'metalnessMap',
-	'roughnessMap',
-	'envMap'
-] );
-
-export { MeshStandardNodeMaterial };
+		let roughnessNode = this.roughnessNode ? float( this.roughnessNode ) : materialRoughness;
+		roughnessNode = getRoughness.call( { roughness: roughnessNode } );
+
+		builder.addFlow( 'fragment', label( roughnessNode, 'Roughness' ) );
+
+		// SPECULAR COLOR
+
+		const specularColorNode = mix( vec3( 0.04 ), colorNode.rgb, metalnessNode );
+
+		builder.addFlow( 'fragment', label( specularColorNode, 'SpecularColor' ) );
+
+		// NORMAL VIEW
+
+		const normalNode = this.normalNode ? vec3( this.normalNode ) : ( material.normalMap ? new NormalMapNode( texture( material.normalMap ), uniform( material.normalScale ) ) : normalView );
+
+		builder.addFlow( 'fragment', label( normalNode, 'TransformedNormalView' ) );
+
+		return diffuseColorNode;
+
+	}
+
+	generateLight( builder, { diffuseColorNode, lightingModelNode, lightsNode = builder.lightsNode } ) {
+
+		const renderer = builder.renderer;
+
+		// OUTGOING LIGHT
+
+		let outgoingLightNode = super.generateLight( builder, { diffuseColorNode, lightingModelNode, lightsNode } );
+
+		// EMISSIVE
+
+		outgoingLightNode = add( vec3( this.emissiveNode || materialEmissive ), outgoingLightNode );
+
+		// TONE MAPPING
+
+		if ( renderer.toneMappingNode ) outgoingLightNode = context( renderer.toneMappingNode, { color: outgoingLightNode } );
+
+		return outgoingLightNode;
+
+	}
+
+	copy( source ) {
+
+		this.colorNode = source.colorNode;
+		this.opacityNode = source.opacityNode;
+
+		this.alphaTestNode = source.alphaTestNode;
+
+		this.normalNode = source.normalNode;
+
+		this.emissiveNode = source.emissiveNode;
+
+		this.metalnessNode = source.metalnessNode;
+		this.roughnessNode = source.roughnessNode;
+
+		this.clearcoatNode = source.clearcoatNode;
+		this.clearcoatRoughnessNode = source.clearcoatRoughnessNode;
+
+		this.envNode = source.envNode;
+
+		this.lightsNode = source.lightsNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}

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

@@ -1,214 +1,229 @@
+import { Material, ShaderMaterial } from 'three';
+import { getNodesKeys } 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 this.uuid + '-' + this.version;
 
 	}
 
-	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;