WebGL: NodeMaterial

Author: sunag

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

@@ -0,0 +1,116 @@
+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' ) );
+
+		}
+
+	}
+
+	getVaryFromNode( node, type ) {
+		
+		const vary = super.getVaryFromNode( node, type );
+		
+		if ( node.isUVNode ) {
+			
+			vary.name = 'vUv';
+			
+		}
+		
+		return vary;
+		
+	}
+
+	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;
+
+	}
+
+	getAttributesHeaderSnippet( /*shaderStage*/ ) {
+
+	}
+
+	getVarysHeaderSnippet( /*shaderStage*/ ) {
+
+	}
+
+	getVarysBodySnippet( /*shaderStage*/ ) {
+
+	}
+
+	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/jsm/renderers/webgl/nodes/WebGLNodes.js

@@ -0,0 +1,45 @@
+import { WebGLNodeBuilder } from './WebGLNodeBuilder.js';
+
+import { Material } from '../../../../../build/three.module.js';
+
+function addCodeAfterSnippet( source, snippet, code ) {
+	
+	const index = source.indexOf( snippet );
+	
+	if ( index !== -1 ) {
+		
+		const start = source.substring( 0, index + snippet.length );
+		const end = source.substring( index + snippet.length );
+		
+		return `${start}\n${code}\n${end}`;
+		
+	}
+	
+	return source;
+	
+}
+
+Material.prototype.onBeforeCompile = function( parameters, renderer ) {
+	
+	const nodeBuilder = new WebGLNodeBuilder( this, renderer, parameters ).build();
+	
+	let fragmentShader = parameters.fragmentShader;
+
+	fragmentShader = addCodeAfterSnippet( fragmentShader, '#include <color_pars_fragment>', 
+`#ifdef NODE_HEADER_UNIFORMS
+
+	NODE_HEADER_UNIFORMS
+
+#endif`);
+
+	fragmentShader = addCodeAfterSnippet( fragmentShader, '#include <color_fragment>', 
+`#ifdef NODE_COLOR
+
+	diffuseColor *= NODE_COLOR;
+
+#endif`);
+
+	parameters.fragmentShader = fragmentShader;
+
+};
+