TSL: Introduction to fragmentNode (#27239)

* Introduction to fragmentNode

* revision

examples/jsm/nodes/materials/InstancedPointsNodeMaterial.js

@@ -81,7 +81,7 @@ class InstancedPointsNodeMaterial extends NodeMaterial {
 
 		} )();
 
-		this.colorNode = tslFn( () => {
+		this.fragmentNode = tslFn( () => {
 
 			const vUv = varying( vec2(), 'vUv' );
 

examples/jsm/nodes/materials/Line2NodeMaterial.js

@@ -255,7 +255,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 		} );
 
-		this.colorNode = tslFn( () => {
+		this.fragmentNode = tslFn( () => {
 
 			const vUv = varyingProperty( 'vec2', 'vUv' );
 

examples/jsm/nodes/materials/NodeMaterial.js

@@ -32,8 +32,6 @@ class NodeMaterial extends ShaderMaterial {
 
 		this.forceSinglePass = false;
 
-		this.unlit = this.constructor === NodeMaterial.prototype.constructor; // Extended materials are not unlit by default
-
 		this.fog = true;
 		this.lights = true;
 		this.normals = true;
@@ -52,7 +50,9 @@ class NodeMaterial extends ShaderMaterial {
 
 		this.positionNode = null;
 
-		this.outputNode = null; // @TODO: Rename to fragmentNode
+		this.outputNode = null;
+
+		this.fragmentNode = null;
 		this.vertexNode = null;
 
 	}
@@ -83,9 +83,9 @@ class NodeMaterial extends ShaderMaterial {
 
 		builder.addStack();
 
-		let outputNode;
+		let resultNode;
 
-		if ( this.unlit === false ) {
+		if ( this.fragmentNode === null ) {
 
 			if ( this.normals === true ) this.setupNormal( builder );
 
@@ -94,23 +94,23 @@ class NodeMaterial extends ShaderMaterial {
 
 			const outgoingLightNode = this.setupLighting( builder );
 
-			outputNode = this.setupOutput( builder, vec4( outgoingLightNode, diffuseColor.a ) );
+			resultNode = this.setupOutput( builder, vec4( outgoingLightNode, diffuseColor.a ) );
 
 			// OUTPUT NODE
 
-			output.assign( outputNode );
+			output.assign( resultNode );
 
 			//
 
-			if ( this.outputNode !== null ) outputNode = this.outputNode;
+			if ( this.outputNode !== null ) resultNode = this.outputNode;
 
 		} else {
 
-			outputNode = this.setupOutput( builder, this.outputNode || vec4( 0, 0, 0, 1 ) );
+			resultNode = this.setupOutput( builder, this.fragmentNode );
 
 		}
 
-		builder.stack.outputNode = outputNode;
+		builder.stack.outputNode = resultNode;
 
 		builder.addFlow( 'fragment', builder.removeStack() );
 
@@ -481,6 +481,8 @@ class NodeMaterial extends ShaderMaterial {
 		this.positionNode = source.positionNode;
 
 		this.outputNode = source.outputNode;
+
+		this.fragmentNode = source.fragmentNode;
 		this.vertexNode = source.vertexNode;
 
 		return super.copy( source );

examples/jsm/nodes/materials/PointsNodeMaterial.js

@@ -14,20 +14,10 @@ class PointsNodeMaterial extends NodeMaterial {
 
 		this.lights = false;
 		this.normals = false;
-
 		this.transparent = true;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
-		this.alphaTestNode = null;
-
-		this.lightNode = null;
-
 		this.sizeNode = null;
 
-		this.positionNode = null;
-
 		this.setDefaultValues( defaultValues );
 
 		this.setValues( parameters );

examples/jsm/nodes/materials/SpriteNodeMaterial.js

@@ -21,13 +21,6 @@ class SpriteNodeMaterial extends NodeMaterial {
 		this.lights = false;
 		this.normals = false;
 
-		this.colorNode = null;
-		this.opacityNode = null;
-
-		this.alphaTestNode = null;
-
-		this.lightNode = null;
-
 		this.positionNode = null;
 		this.rotationNode = null;
 		this.scaleNode = null;

examples/jsm/renderers/common/Background.js

@@ -63,12 +63,12 @@ class Background extends DataMap {
 				viewProj = viewProj.setZ( viewProj.w );
 
 				const nodeMaterial = new NodeMaterial();
-				nodeMaterial.outputNode = this.backgroundMeshNode;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;
 				nodeMaterial.fog = false;
 				nodeMaterial.vertexNode = viewProj;
+				nodeMaterial.fragmentNode = this.backgroundMeshNode;
 
 				this.backgroundMesh = backgroundMesh = new Mesh( new SphereGeometry( 1, 32, 32 ), nodeMaterial );
 				backgroundMesh.frustumCulled = false;

examples/webgpu_tsl_editor.html

@@ -96,7 +96,7 @@
 				rendererDOM.appendChild( renderer.domElement );
 
 				const material = new Nodes.NodeMaterial();
-				material.outputNode = Nodes.vec4( 0, 0, 0, 1 );
+				material.fragmentNode = Nodes.vec4( 0, 0, 0, 1 );
 
 				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( mesh );
@@ -183,7 +183,7 @@ output = vec4( finalColor, opacity );
 							const tslCode = `let output = null;\n${ editor.getValue() }\nreturn { output };`;
 							const nodes = new Function( 'THREE', 'TSL', tslCode )( THREE, Nodes );
 
-							mesh.material.outputNode = nodes.output;
+							mesh.material.fragmentNode = nodes.output;
 							mesh.material.needsUpdate = true;
 
 							let NodeBuilder;