NodeMaterial: Fixes (WebGL) (#23064)

* fix keyword example

* fix NodeMaterial ColorSpace: https://github.com/mrdoob/three.js/pull/22998

* variable params.length to ARCTAN: https://github.com/mrdoob/three.js/issues/22930

* NodeMaterial: fix CLEARCOAT

* possible fix to: https://github.com/mrdoob/three.js/issues/23054

* fix NodeMaterial: toon example: https://github.com/mrdoob/three.js/issues/22989

examples/jsm/nodes/materials/nodes/StandardNode.js

@@ -32,6 +32,7 @@ class StandardNode extends Node {
 		if ( useClearcoat ) {
 
 			builder.define( 'CLEARCOAT' );
+			builder.define( 'USE_CLEARCOAT' );
 
 		}
 

examples/jsm/nodes/math/MathNode.js

@@ -18,6 +18,14 @@ class MathNode extends TempNode {
 
 		switch ( this.method ) {
 
+			// variable
+
+			case MathNode.ARCTAN:
+
+				return this.b ? 2 : 1;
+
+			// 3
+
 			case MathNode.MIX:
 			case MathNode.CLAMP:
 			case MathNode.REFRACT:
@@ -26,6 +34,8 @@ class MathNode extends TempNode {
 
 				return 3;
 
+			// 2
+
 			case MathNode.MIN:
 			case MathNode.MAX:
 			case MathNode.MOD:
@@ -38,6 +48,8 @@ class MathNode extends TempNode {
 
 				return 2;
 
+			// 1
+
 			default:
 
 				return 1;

examples/jsm/nodes/misc/TextureCubeUVNode.js

@@ -26,19 +26,15 @@ class TextureCubeUVNode extends TempNode {
 		const bilinearCubeUV = new FunctionCallNode( TextureCubeUVNode.Nodes.bilinearCubeUV, [ texture, uv, mipInt ] );
 
 		this.colorSpaceTL = this.colorSpaceTL || new ColorSpaceNode( new ExpressionNode( '', 'v4' ) );
-		this.colorSpaceTL.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 		this.colorSpaceTL.input.parse( bilinearCubeUV.build( builder ) + '.tl' );
 
 		this.colorSpaceTR = this.colorSpaceTR || new ColorSpaceNode( new ExpressionNode( '', 'v4' ) );
-		this.colorSpaceTR.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 		this.colorSpaceTR.input.parse( bilinearCubeUV.build( builder ) + '.tr' );
 
 		this.colorSpaceBL = this.colorSpaceBL || new ColorSpaceNode( new ExpressionNode( '', 'v4' ) );
-		this.colorSpaceBL.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 		this.colorSpaceBL.input.parse( bilinearCubeUV.build( builder ) + '.bl' );
 
 		this.colorSpaceBR = this.colorSpaceBR || new ColorSpaceNode( new ExpressionNode( '', 'v4' ) );
-		this.colorSpaceBR.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 		this.colorSpaceBR.input.parse( bilinearCubeUV.build( builder ) + '.br' );
 
 		// add a custom context for fix incompatibility with the core
@@ -230,6 +226,7 @@ TextureCubeUVNode.Nodes = ( function () {
 
 			return TextureCubeUVData( tl, tr, br, bl, f );
 		}`, [ TextureCubeUVData, getFace, getUV, cubeUV_maxMipLevel, cubeUV_minMipLevel, cubeUV_maxTileSize, cubeUV_minTileSize ] );
+
 	bilinearCubeUV.useKeywords = false;
 
 	// These defines must match with PMREMGenerator

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

@@ -376,8 +376,8 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 		this.parseInclude( 'fragment', 'lights_physical_fragment' );
 
 		const colorSlot = this.getSlot( 'fragment', 'COLOR' );
-		const normalSlot = this.getSlot( 'fragment', 'NORMAL' );
 		const opacityNode = this.getSlot( 'fragment', 'OPACITY' );
+		const normalSlot = this.getSlot( 'fragment', 'NORMAL' );
 		const emissiveNode = this.getSlot( 'fragment', 'EMISSIVE' );
 		const roughnessNode = this.getSlot( 'fragment', 'ROUGHNESS' );
 		const metalnessNode = this.getSlot( 'fragment', 'METALNESS' );
@@ -397,22 +397,22 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 		}
 
-		if ( normalSlot !== undefined ) {
+		if ( opacityNode !== undefined ) {
 
 			this.addCodeAfterInclude(
 				'fragment',
-				'normal_fragment_begin',
-				`${normalSlot.code}\n\tnormal = ${normalSlot.result};`
+				'alphatest_fragment',
+				`${opacityNode.code}\n\tdiffuseColor.a = ${opacityNode.result};`
 			);
 
 		}
 
-		if ( opacityNode !== undefined ) {
+		if ( normalSlot !== undefined ) {
 
 			this.addCodeAfterInclude(
 				'fragment',
-				'alphamap_fragment',
-				`${opacityNode.code}\n\tdiffuseColor.a = ${opacityNode.result};`
+				'normal_fragment_begin',
+				`${normalSlot.code}\n\tnormal = ${normalSlot.result};`
 			);
 
 		}

examples/webgl_materials_nodes.html

@@ -2391,7 +2391,7 @@
 
 							mtl.ao = val ? new Nodes.FloatNode() : undefined;
 
-							mtl.needsUpdate = true;
+							mtl.dispose();
 
 						} );
 
@@ -2458,8 +2458,8 @@
 
 						var keywordsexample = new Nodes.FunctionNode( [
 							// use "uv" reserved keyword
-							'vec4 keywordsexample( sampler2D texture ) {',
-							'	return texture2D( texture, myUV ) + vec4( position * myAlpha, 0.0 );',
+							'vec4 keywordsexample( sampler2D tex ) {',
+							'	return texture2D( tex, myUV ) + vec4( position * myAlpha, 0.0 );',
 							'}'
 						].join( '\n' ) );