NodeMaterial: Update materials and examples (#22518)

* add nodeFrame renderer value

* cleanup

* check if is Node

* add NodeMaterials

* WebGPU: Update NodeMaterials examples

* WebGL: Update NodeMaterial example

examples/jsm/renderers/nodes/materials/LineBasicNodeMaterial.js

@@ -0,0 +1,39 @@
+import { LineBasicMaterial } from 'three';
+
+class LineBasicNodeMaterial extends LineBasicMaterial {
+
+	constructor( parameters ) {
+
+		super( parameters );
+
+		this.colorNode = null;
+		this.opacityNode = null;
+
+		this.alphaTestNode = null;
+
+		this.lightNode = null;
+
+		this.positionNode = null;
+
+	}
+
+	copy( source ) {
+
+		this.colorNode = source.colorNode;
+		this.opacityNode = source.opacityNode;
+
+		this.alphaTestNode = source.alphaTestNode;
+
+		this.lightNode = source.lightNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+LineBasicNodeMaterial.prototype.isNodeMaterial = true;
+
+export default LineBasicNodeMaterial;

examples/jsm/renderers/nodes/materials/MeshBasicNodeMaterial.js

@@ -0,0 +1,39 @@
+import { MeshBasicMaterial } from 'three';
+
+class MeshBasicNodeMaterial extends MeshBasicMaterial {
+
+	constructor( parameters ) {
+
+		super( parameters );
+
+		this.colorNode = null;
+		this.opacityNode = null;
+
+		this.alphaTestNode = null;
+
+		this.lightNode = null;
+
+		this.positionNode = null;
+
+	}
+
+	copy( source ) {
+
+		this.colorNode = source.colorNode;
+		this.opacityNode = source.opacityNode;
+
+		this.alphaTestNode = source.alphaTestNode;
+
+		this.lightNode = source.lightNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+MeshBasicNodeMaterial.prototype.isNodeMaterial = true;
+
+export default MeshBasicNodeMaterial;

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

@@ -0,0 +1,63 @@
+import { MeshStandardMaterial } from 'three';
+
+class MeshStandardNodeMaterial extends MeshStandardMaterial {
+
+	constructor( parameters ) {
+
+		super( parameters );
+
+		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.lightNode = null;
+
+		this.positionNode = null;
+
+	}
+
+	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.lightNode = source.lightNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+MeshStandardNodeMaterial.prototype.isNodeMaterial = true;
+
+export default MeshStandardNodeMaterial;

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

@@ -0,0 +1,39 @@
+import { PointsMaterial } from 'three';
+
+class PointsNodeMaterial extends PointsMaterial {
+
+	constructor( parameters ) {
+
+		super( parameters );
+
+		this.colorNode = null;
+		this.opacityNode = null;
+
+		this.alphaTestNode = null;
+
+		this.lightNode = null;
+
+		this.positionNode = null;
+
+	}
+
+	copy( source ) {
+
+		this.colorNode = source.colorNode;
+		this.opacityNode = source.opacityNode;
+
+		this.alphaTestNode = source.alphaTestNode;
+
+		this.lightNode = source.lightNode;
+
+		this.positionNode = source.positionNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+PointsNodeMaterial.prototype.isNodeMaterial = true;
+
+export default PointsNodeMaterial;

examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -58,19 +58,19 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		// parse inputs
 
-		if ( material.isMeshStandardMaterial || material.isMeshPhongMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
+		if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
 
 			const mvpNode = new ModelViewProjectionNode();
 
 			let lightNode = material.lightNode;
 
-			if ( lightNode === undefined && this.lightNode && this.lightNode.hasLights === true ) {
+			if ( lightNode === null && this.lightNode && this.lightNode.hasLights === true ) {
 
 				lightNode = this.lightNode;
 
 			}
 
-			if ( material.positionNode !== undefined ) {
+			if ( material.positionNode && material.positionNode.isNode ) {
 
 				mvpNode.position = material.positionNode;
 
@@ -78,7 +78,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			this.addSlot( 'vertex', new NodeSlot( mvpNode, 'MVP', 'vec4' ) );
 
-			if ( material.alphaTestNode !== undefined ) {
+			if ( material.alphaTestNode && material.alphaTestNode.isNode ) {
 
 				this.addSlot( 'fragment', new NodeSlot( material.alphaTestNode, 'ALPHA_TEST', 'float' ) );
 
@@ -88,7 +88,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			}
 
-			if ( material.colorNode !== undefined ) {
+			if ( material.colorNode && material.colorNode.isNode ) {
 
 				this.addSlot( 'fragment', new NodeSlot( material.colorNode, 'COLOR', 'vec4' ) );
 
@@ -98,7 +98,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			}
 
-			if ( material.opacityNode !== undefined ) {
+			if ( material.opacityNode && material.opacityNode.isNode ) {
 
 				this.addSlot( 'fragment', new NodeSlot( material.opacityNode, 'OPACITY', 'float' ) );
 
@@ -110,7 +110,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			if ( material.isMeshStandardMaterial ) {
 
-				if ( material.metalnessNode !== undefined ) {
+				if ( material.metalnessNode && material.metalnessNode.isNode ) {
 
 					this.addSlot( 'fragment', new NodeSlot( material.metalnessNode, 'METALNESS', 'float' ) );
 
@@ -120,7 +120,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				if ( material.roughnessNode !== undefined ) {
+				if ( material.roughnessNode && material.roughnessNode.isNode ) {
 
 					this.addSlot( 'fragment', new NodeSlot( material.roughnessNode, 'ROUGHNESS', 'float' ) );
 
@@ -132,7 +132,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				let normalNode = null;
 
-				if ( material.normalNode !== undefined ) {
+				if ( material.normalNode && material.normalNode.isNode ) {
 
 					normalNode = material.normalNode;
 
@@ -146,7 +146,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			} else if ( material.isMeshPhongMaterial ) {
 
-				if ( material.specularNode !== undefined ) {
+				if ( material.specularNode && material.specularNode.isNode ) {
 
 					this.addSlot( 'fragment', new NodeSlot( material.specularNode, 'SPECULAR', 'vec3' ) );
 
@@ -156,7 +156,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				if ( material.shininessNode !== undefined ) {
+				if ( material.shininessNode && material.shininessNode.isNode ) {
 
 					this.addSlot( 'fragment', new NodeSlot( material.shininessNode, 'SHININESS', 'float' ) );
 
@@ -267,8 +267,6 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					uniformGPU = [];
 
-					console.log( );
-
 					for ( const inputNode of node.value ) {
 
 						const uniformNodeGPU = this._getNodeUniform( inputNode, type );

examples/jsm/renderers/webgpu/nodes/WebGPUNodes.js

@@ -43,6 +43,7 @@ class WebGPUNodes {
 
 	update( object, camera, lightNode ) {
 
+		const renderer = this.renderer;
 		const material = object.material;
 
 		const nodeBuilder = this.get( object, lightNode );
@@ -51,6 +52,7 @@ class WebGPUNodes {
 		nodeFrame.material = material;
 		nodeFrame.camera = camera;
 		nodeFrame.object = object;
+		nodeFrame.renderer = renderer;
 
 		for ( const node of nodeBuilder.updateNodes ) {
 

examples/webgl_materials_standard_nodes.html

@@ -39,6 +39,8 @@
 			import SplitNode from './jsm/renderers/nodes/utils/SplitNode.js';
 			import NormalMapNode from './jsm/renderers/nodes/display/NormalMapNode.js';
 
+			import MeshStandardNodeMaterial from './jsm/renderers/nodes/materials/MeshStandardNodeMaterial.js';
+
 			let container, stats;
 
 			let camera, scene, renderer, controls;
@@ -75,7 +77,7 @@
 
 				//
 
-				const material = new THREE.MeshStandardMaterial();
+				const material = new MeshStandardNodeMaterial();
 
 				new OBJLoader()
 					.setPath( 'models/obj/cerberus/' )

examples/webgpu_compute.html

@@ -38,6 +38,8 @@
 			import ColorNode from './jsm/renderers/nodes/inputs/ColorNode.js';
 			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
 
+			import PointsNodeMaterial from './jsm/renderers/nodes/materials/PointsNodeMaterial.js';
+
 			let camera, scene, renderer;
 			let pointer;
 			let scaleUniformBuffer;
@@ -183,7 +185,7 @@
 					'position', particleBuffer.attribute
 				);
 
-				const pointsMaterial = new THREE.PointsMaterial();
+				const pointsMaterial = new PointsNodeMaterial();
 				pointsMaterial.colorNode = new OperatorNode( '+', new PositionNode(), new ColorNode( new THREE.Color( 0x0000FF ) ) );
 
 				const mesh = new THREE.Points( pointsGeometry, pointsMaterial );

examples/webgpu_instance_uniform.html

@@ -34,6 +34,8 @@
 			import { NodeUpdateType } from './jsm/renderers/nodes/core/constants.js';
 			import ColorNode from './jsm/renderers/nodes/inputs/ColorNode.js';
 
+			import MeshBasicNodeMaterial from './jsm/renderers/nodes/materials/MeshBasicNodeMaterial.js';
+
 			import Stats from './jsm/libs/stats.module.js';
 
 			class InstanceUniformNode extends Node {
@@ -101,7 +103,7 @@
 
 				const instanceUniform = new InstanceUniformNode();
 
-				const material = new THREE.MeshBasicMaterial();
+				const material = new MeshBasicNodeMaterial();
 				material.colorNode = instanceUniform;
 
 				// Geometry

examples/webgpu_lights_custom.html

@@ -33,6 +33,8 @@
 
 			import LightsNode from './jsm/renderers/nodes/lights/LightsNode.js';
 
+			import PointsNodeMaterial from './jsm/renderers/nodes/materials/PointsNodeMaterial.js';
+
 			let camera, scene, renderer;
 
 			let light1, light2, light3;
@@ -87,7 +89,7 @@
 				}
 
 				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-				const materialPoints = new THREE.PointsMaterial();
+				const materialPoints = new PointsNodeMaterial();
 
 				// custom lighting model
 

examples/webgpu_lights_selective.html

@@ -41,6 +41,8 @@
 			import TextureNode from './jsm/renderers/nodes/inputs/TextureNode.js';
 			import NormalMapNode from './jsm/renderers/nodes/display/NormalMapNode.js';
 
+			import MeshStandardNodeMaterial from './jsm/renderers/nodes/materials/MeshStandardNodeMaterial.js';
+
 			let camera, scene, renderer,
 				light1, light2, light3, light4,
 				stats, controls;
@@ -104,20 +106,20 @@
 
 				const geometryTeapot = new TeapotGeometry( 8, 18 );
 
-				const leftObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardMaterial( { color: 0x555555 } ) );
+				const leftObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				leftObject.material.lightNode = redLightNode;
 				leftObject.material.roughnessNode = new TextureNode( alphaTexture );
 				leftObject.material.metalness = 0;
 				leftObject.position.x = - 30;
 				scene.add( leftObject );
 
-				const centerObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardMaterial( { color: 0x555555 } ) );
+				const centerObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				centerObject.material.lightNode = allLightsNode;
 				centerObject.material.normalNode = new NormalMapNode( new TextureNode( normalMapTexture ) );
 				centerObject.material.roughness = .5;
 				scene.add( centerObject );
 
-				const rightObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardMaterial( { color: 0x555555 } ) );
+				const rightObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				rightObject.material.lightNode = blueLightNode;
 				rightObject.material.metalnessNode = new TextureNode( alphaTexture );
 				rightObject.position.x = 30;

examples/webgpu_materials.html

@@ -35,6 +35,8 @@
 			import FloatNode from './jsm/renderers/nodes/inputs/FloatNode.js';
 			import TextureNode from './jsm/renderers/nodes/inputs/TextureNode.js';
 
+			import MeshBasicNodeMaterial from './jsm/renderers/nodes/materials/MeshBasicNodeMaterial.js';
+
 			import Stats from './jsm/libs/stats.module.js';
 
 			let stats;
@@ -85,38 +87,38 @@
 				let material;
 
 				// PositionNode.LOCAL
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new PositionNode( PositionNode.LOCAL );
 				materials.push( material );
 
 				// NormalNode.LOCAL
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new NormalNode( NormalNode.LOCAL );
 				materials.push( material );
 
 				// NormalNode.WORLD
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new NormalNode( NormalNode.WORLD );
 				materials.push( material );
 
 				// NormalNode.VIEW
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new NormalNode( NormalNode.VIEW );
 				materials.push( material );
 
 				// TextureNode
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new TextureNode( texture );
 				materials.push( material );
 
 				// Opacity
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.opacityNode = new TextureNode( texture );
 				material.transparent = true;
 				materials.push( material );
 
 				// AlphaTest
-				material = new THREE.MeshBasicMaterial();
+				material = new MeshBasicNodeMaterial();
 				material.colorNode = new TextureNode( texture );
 				material.opacityNode = new TextureNode( opacityTexture );
 				material.alphaTestNode = new FloatNode( 0.5 );

examples/webgpu_rtt.html

@@ -31,6 +31,8 @@
 			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
 			import Vector2Node from './jsm/renderers/nodes/inputs/Vector2Node.js';
 
+			import MeshBasicNodeMaterial from './jsm/renderers/nodes/materials/MeshBasicNodeMaterial.js';
+
 			let camera, scene, renderer;
 			const mouse = new THREE.Vector2();
 
@@ -64,7 +66,7 @@
 				const texture = loader.load( './textures/uv_grid_opengl.jpg' );
 
 				const geometryBox = new THREE.BoxGeometry();
-				const materialBox = new THREE.MeshBasicMaterial();
+				const materialBox = new MeshBasicNodeMaterial();
 				materialBox.colorNode = new TextureNode( texture );
 
 				//
@@ -96,7 +98,7 @@
 
 				const screenFXNode = new OperatorNode( '+', new Vector2Node( mouse ), new Vector2Node( new THREE.Vector2( 0.5, 0.5 ) ).setConst( true ) );
 
-				const materialFX = new THREE.MeshBasicMaterial();
+				const materialFX = new MeshBasicNodeMaterial();
 				materialFX.colorNode = new OperatorNode( '*', new TextureNode( textureRenderer.getTexture() ), screenFXNode );
 
 				const quad = new THREE.Mesh( geometryFX, materialFX );

examples/webgpu_sandbox.html

@@ -40,6 +40,10 @@
 			import SplitNode from './jsm/renderers/nodes/utils/SplitNode.js';
 			import TimerNode from './jsm/renderers/nodes/utils/TimerNode.js';
 
+			import MeshBasicNodeMaterial from './jsm/renderers/nodes/materials/MeshBasicNodeMaterial.js';
+			import LineBasicNodeMaterial from './jsm/renderers/nodes/materials/LineBasicNodeMaterial.js';
+			import PointsNodeMaterial from './jsm/renderers/nodes/materials/PointsNodeMaterial.js';
+
 			let camera, scene, renderer;
 
 			let box;
@@ -82,7 +86,7 @@
 				// box mesh
 
 				const geometryBox = new THREE.BoxGeometry();
-				const materialBox = new THREE.MeshBasicMaterial();
+				const materialBox = new MeshBasicNodeMaterial();
 
 				const timerNode = new TimerNode();
 
@@ -103,7 +107,7 @@
 				// displace example
 
 				const geometrySphere = new THREE.SphereGeometry( .5, 64, 64 );
-				const materialSphere = new THREE.MeshBasicMaterial();
+				const materialSphere = new MeshBasicNodeMaterial();
 
 				const displaceAnimated = new SplitNode( new TextureNode( textureDisplace ), 'x' );
 				const displaceY = new OperatorNode( '*', displaceAnimated, new FloatNode( .25 ).setConst( true ) );
@@ -120,7 +124,7 @@
 				// data texture
 
 				const geometryPlane = new THREE.PlaneGeometry();
-				const materialPlane = new THREE.MeshBasicMaterial();
+				const materialPlane = new MeshBasicNodeMaterial();
 				materialPlane.colorNode = new OperatorNode( '+', new TextureNode( createDataTexture() ), new ColorNode( new THREE.Color( 0x0000FF ) ) );
 				materialPlane.opacityNode = new SplitNode( new TextureNode( dxt5Texture ), 'a' );
 				materialPlane.transparent = true;
@@ -131,7 +135,7 @@
 
 				// compressed texture
 
-				const materialCompressed = new THREE.MeshBasicMaterial();
+				const materialCompressed = new MeshBasicNodeMaterial();
 				materialCompressed.colorNode = new TextureNode( dxt5Texture );
 				materialCompressed.transparent = true;
 
@@ -151,7 +155,7 @@
 				}
 
 				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-				const materialPoints = new THREE.PointsMaterial();
+				const materialPoints = new PointsNodeMaterial();
 
 				materialPoints.colorNode = new OperatorNode( '*', new PositionNode(), new FloatNode( 3 ).setConst( true ) );
 
@@ -170,7 +174,7 @@
 
 				geometryLine.setAttribute( 'color', geometryLine.getAttribute( 'position' ) );
 
-				const materialLine = new THREE.LineBasicMaterial();
+				const materialLine = new LineBasicNodeMaterial();
 				materialLine.colorNode = new AttributeNode( 'color', 'vec3' );
 
 				const line = new THREE.Line( geometryLine, materialLine );