NodeMaterial - r8

[sunag]

New features

• GLSLParser
• Simplified Syntax NodeMaterial Simplified Syntax #17105
• All nodes converted to class
• New flow context

Auto resolve Three.JS and JavaScript primitives

Use string, number or three.js primitives directly in nodes arguments

// simple threejs uv rescale ( uv * 2.0 )
var textureNode = new TextureNode( texture, new Nodes.MulNode( 'uv', 2 ) );

// color from string
material.color = '#FFEE11'; // automatic conversion to ColorNode( 0xFFEE11 )
material.emissive = .1; // automatic conversion to ColorNode( .1, .1, .1 )
material.reflectivity = .5; // automatic conversion to FloatNode( .5 )
material.sheen = new MulNode( '0xFFFFFF', .5 );

GLSLParser

1. Parse complex shader code in nodes:

var voronoiLayers = new Nodes.FunctionNode( `

	vec2 hash2(vec2 p) {
		return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))*5232.85324);
	}

	// Based off of iq's described here: http://www.iquilezles.org/www/articles/voronoili
	float voronoi(vec2 p, in float time) {
		vec2 n = floor(p);
		vec2 f = fract(p);
		float md = 5.0;
		vec2 m = vec2(0.0);
		for (int i = -1; i <= 1; i++) {
			for (int j = -1; j <= 1; j++) {
				vec2 g = vec2(i, j);
				vec2 o = hash2(n + g);
				o = 0.5 + 0.5 * sin(time + 5.038 * o);
				vec2 r = g + o - f;
				float d = dot(r, r);
				if (d < md) {
					md = d;
					m = n+g+o;
				}
			}
		}
		return md;
	}

	// based on https://www.shadertoy.com/view/4tXSDf
	float voronoiLayers(vec2 p, in float time) {
		float v = 0.0;
		float a = 0.4;
		for (int i = 0; i < 3; i++) {
			v += voronoi(p, time) * a;
			p *= 2.0;
			a *= 0.5;
		}
		return v;
	}
	
` );

var voronoi = new Nodes.FunctionCallNode( voronoiLayers );
voronoi.inputs.p = new Nodes.UVNode();
voronoi.inputs.time = new Nodes.TimerNode();

2. Parse single native shader function with depedencies:

var LogLuvToLinearNode = new GLSLParser( ShaderChunk['encodings_pars_fragment'] ).getNodeByName( 'LogLuvToLinear' );

3. Automatic convertion of GLSL to nodes:

var constNode = new GLSLParser( `#define SOME_VALUE 8.0` ).getMainNode();

4. More precision in keywords analysis follows the correct hierarchy.

Auto grouping OperatorNode

Use AddNode, SubNode, MulNode and DivNode with more of two arguments.

var sumAll = new AddNode( node1, node2, node3, node4, node5 );

New approach for SwitchNode

var node = new TextureNode( texture );

var nodeXY = node.getPropertyNode( 'xy' );

New NodeMaterial Flow Context

With the new NodeContext in NodeMaterial could get in your flow of Textures using custom samplers in tree of nodes with caching of textures. For example, previously BumpMapNode just work from of a TextureNode input, now it is possible use tree inflow of texture making the system more flexible if used with texture uv interaction, like blur and bump map nodes for example:

Issue - #17230

Code example

// now things like this will be possible
var textureBlueChannel = new SwitchNode( texture, 'b' );
material.normal = new BumpMapNode( textureBlueChannel, scale );

// previously just it worked with texture input, forcing use only red channel, for example
material.normal = new BumpMapNode( texture, scale );

Other features

• Bunny model in nodes example
• Auto detect extensions in NodeFunction

Examples

Car-paint
https://raw.githack.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=car-paint

Refraction + Reflection
https://raw.githack.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=node-refract

Toon + outline
https://raw.githack.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=toon

Plush using sheen
https://raw.githack.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=plush

BumpMap with desaturate and switch channel
https://raw.githack.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=bump

[sunag]

I add a BlurNode and adjusting the settings the result of SSS seems very better.

https://rawgit.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=sss&m=bunny

https://rawgit.com/sunag/three.js/dev-r8/examples/webgl_materials_nodes.html?e=translucent&m=bunny

[sunag]

@bhouston about subsurface model, this technique did not need a pre-generate map

[bhouston]

@sunag, there is a subsurface model being standardized via the glTF committee.

It is either going to be based on the Enterprise PBR model here:

https://dassaultsystemes-technology.github.io/EnterprisePBRShadingModel/spec.md.html#components/volume

with these parameters:

• attenuationColor (color)
• attenuationDistance (scalar, range 0 to infinity)
• subsurfaceColor (color)

Or the Autodesk Standard Surface model here:

https://autodesk.github.io/standard-surface/#closures/diffusetransmission
https://autodesk.github.io/standard-surface/#closures/subsurfacescattering

There are two types of subsurface transmission, thin_walled and true subsurface scattering. They usually are both supported.

[robertlong]

@sunag I'm interested in helping move this PR forward. Would you like me to fix these merge conflicts? Are there other changes you want to make?

[sunag]

@robertlong thank you in anticipation and I apologize to all for the delay with this PR.

The fact is that I am not a believer in the approach that I used here for adopt or move forward the NodeMaterial for the core.

I create a GLSLParse made NodeMaterial more flexible, in fact is possible to reuse part of the native code only getting the function of ShaderLib as Node, but the concept of create all other material in NodeMaterial is much verbose and hard to maintain. I see today GLSLParse as a utils lib and not in NodeMaterial core how is it here.

Today I am developing a different approach to use in WebGPU ( #20254 (comment) ) that must follow this principle ( #18162 (comment) ) only cleanly without hacks.

For this reason, I think about reusing part of this code in WebGPU version and close this PR for now.

Suggestions?

[Mugen87]

Considering how long it takes to make changes to WebGLRenderer, I've found it unrealistic to integrate NodeMaterial into the core from the very beginning, see #16440 (comment).

My opinion still stands that it is more promising to start with a basic node material system in context of WebGPURenderer and make it more complex over time. And leave the existing materials systems for WebGLRenderer as they are.

@sunag Since you are deep into node based materials I have an important request at you 😇 . I would be great if you start with small PRs instead of providing a single big PR that introduces NodeMaterial into WebGPURenderer. It's important that all core maintainers have the chance to understand the new material system. Big and complex PRs likes this one are hard to review and comprehend. Hence, I suggest to go step by step. AFAIK, this is also the preference of @mrdoob , see #20219 (comment).

As suggested here (#20254 (comment)) I would start with a simplified version of MeshBasicMaterial.

[robertlong]

I guess that's fine. I was hoping to see node based materials land in core for WebGL/WebGL2 seeing as support for those are widespread already and will be for the foreseeable future. I get that it would be easier to integrate into a new renderer though.

[sunag]

I am starting a new version of NodeMaterial agnostic system and'NodeBuilder for WebGPU and WebGL versions... Part of this code is being used in this new project... You can find the first PR here: #20421

For this reason I am closing this PR.