draft of WebGLNodeBuilder

Author: sunag

examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js

@@ -0,0 +1,90 @@
+import NodeBuilder from '../../nodes/core/NodeBuilder.js';
+
+import NodeSlot from '../../nodes/core/NodeSlot.js';
+
+class WebGLNodeBuilder extends NodeBuilder {
+
+	constructor( material, renderer, properties ) {
+
+		super( material, renderer );
+
+		this.properties = properties;
+
+		this._parseMaterial();
+
+	}
+
+	_parseMaterial() {
+
+		const material = this.material;
+
+		// parse inputs
+
+		if ( material.colorNode !== undefined ) {
+
+			this.addSlot( 'fragment', new NodeSlot( material.colorNode, 'COLOR', 'vec4' ) );
+
+		}
+
+	}
+
+	getTexture( textureProperty, uvSnippet ) {
+
+		return `sRGBToLinear( texture2D( ${textureProperty}, ${uvSnippet} ) )`;
+
+	}
+
+	getUniformsHeaderSnippet( shaderStage ) {
+
+		const uniforms = this.uniforms[ shaderStage ];
+
+		let snippet = '';
+
+		for ( let uniform of uniforms ) {
+
+			if ( uniform.type === 'texture' ) {
+
+				snippet += `uniform sampler2D ${uniform.name};`;
+
+			} else {
+
+				let vectorType = this.getVectorType( uniform.type );
+
+				snippet += `uniform ${vectorType} ${uniform.name};`;
+
+			}
+
+		}
+
+		return snippet;
+
+	}
+
+	composeUniforms() {
+		
+		const uniforms = this.uniforms[ 'fragment' ];
+		
+		for ( let uniform of uniforms ) {
+			
+			this.properties.uniforms[ uniform.name ] = uniform;
+			
+		}
+		
+	}
+
+	build() {
+
+		super.build();
+		
+		this.properties.defines['NODE_HEADER_UNIFORMS'] = this.defines['fragment']['NODE_HEADER_UNIFORMS'];
+		this.properties.defines['NODE_COLOR'] = this.defines['fragment']['NODE_COLOR'];
+
+		this.composeUniforms();
+		
+		return this;
+
+	}
+
+}
+
+export { WebGLNodeBuilder };

examples/webgl_materials_standard.html

@@ -24,6 +24,10 @@
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
+			import TextureNode from './jsm/renderers/nodes/inputs/TextureNode.js';
+			import Vector3Node from './jsm/renderers/nodes/inputs/Vector3Node.js';
+			import OperatorNode from './jsm/renderers/nodes/math/OperatorNode.js';
+
 			const statsEnabled = true;
 
 			let container, stats;
@@ -75,13 +79,15 @@
 						material.metalness = 1; // attenuates metalnessMap
 
 						const diffuseMap = loader.load( 'Cerberus_A.jpg' );
+						diffuseMap.wrapS = THREE.RepeatWrapping;
 						diffuseMap.encoding = THREE.sRGBEncoding;
-						material.map = diffuseMap;
+						//material.map = diffuseMap;
+
+						material.colorNode = new OperatorNode( '*', new TextureNode( diffuseMap ), new Vector3Node( new THREE.Vector3( 1, 1, 1 ) ) );
 						// roughness is in G channel, metalness is in B channel
 						material.metalnessMap = material.roughnessMap = loader.load( 'Cerberus_RM.jpg' );
 						material.normalMap = loader.load( 'Cerberus_N.jpg' );
 
-						material.map.wrapS = THREE.RepeatWrapping;
 						material.roughnessMap.wrapS = THREE.RepeatWrapping;
 						material.metalnessMap.wrapS = THREE.RepeatWrapping;
 						material.normalMap.wrapS = THREE.RepeatWrapping;

src/renderers/WebGLRenderer.js

@@ -40,6 +40,8 @@ import { WebGLUtils } from './webgl/WebGLUtils.js';
 import { WebXRManager } from './webxr/WebXRManager.js';
 import { WebGLMaterials } from './webgl/WebGLMaterials.js';
 
+import { WebGLNodeBuilder } from '../../examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js';
+
 function createCanvasElement() {
 
 	const canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
@@ -1364,6 +1366,8 @@ function WebGLRenderer( parameters ) {
 
 			material.onBeforeCompile( parameters, _this );
 
+			new WebGLNodeBuilder( material, this, parameters ).build();
+
 			program = programCache.acquireProgram( parameters, programCacheKey );
 
 			materialProperties.program = program;

src/renderers/shaders/ShaderChunk/color_fragment.glsl.js

@@ -3,5 +3,11 @@ export default /* glsl */`
 
 	diffuseColor.rgb *= vColor;
 
+#endif
+
+#ifdef NODE_COLOR
+
+	diffuseColor *= NODE_COLOR;
+
 #endif
 `;

src/renderers/webgl/WebGLProgram.js

@@ -650,6 +650,12 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 
 			parameters.depthPacking ? '#define DEPTH_PACKING ' + parameters.depthPacking : '',
 
+			`#ifdef NODE_HEADER_UNIFORMS
+				
+				NODE_HEADER_UNIFORMS 
+				
+			#endif`,
+
 			'\n'
 
 		].filter( filterEmptyLine ).join( '\n' );