Nodes: Update `DotScreenNode`, `ColorAdjustmentNode`, `BlendModeNode` (#29178)

* DotScreenNode: Use `viewportResolution`

* ColorAdjustmentNode: Use TSL approach

* MathNode: Fix `step(a,b)`  first parameter as float, second as vec

* BlendModeNode: Move to TSL approach

* cleanup

src/nodes/Nodes.js

@@ -115,9 +115,9 @@ export { default as UserDataNode, userData } from './accessors/UserDataNode.js';
 export * from './accessors/VelocityNode.js';
 
 // display
-export { default as BlendModeNode, burn, dodge, overlay, screen } from './display/BlendModeNode.js';
+export * from './display/BlendModeNode.js';
 export { default as BumpMapNode, bumpMap } from './display/BumpMapNode.js';
-export { default as ColorAdjustmentNode, saturation, vibrance, hue, luminance, threshold } from './display/ColorAdjustmentNode.js';
+export * from './display/ColorAdjustmentNode.js';
 export { default as ColorSpaceNode, linearToColorSpace, colorSpaceToLinear, linearTosRGB, sRGBToLinear } from './display/ColorSpaceNode.js';
 export { default as FrontFacingNode, frontFacing, faceDirection } from './display/FrontFacingNode.js';
 export { default as NormalMapNode, normalMap } from './display/NormalMapNode.js';

src/nodes/display/BlendModeNode.js

@@ -1,16 +1,12 @@
-import TempNode from '../core/TempNode.js';
-import { /*mix, step,*/ EPSILON } from '../math/MathNode.js';
-import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, Fn, nodeProxy, vec3 } from '../shadernode/ShaderNode.js';
+import { addNodeElement, Fn } from '../shadernode/ShaderNode.js';
+import { mix, min, step } from '../math/MathNode.js';
 
-export const BurnNode = Fn( ( { base, blend } ) => {
+export const burn = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
 
-	const fn = ( c ) => blend[ c ].lessThan( EPSILON ).select( blend[ c ], base[ c ].oneMinus().div( blend[ c ] ).oneMinus().max( 0 ) );
-
-	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
+	return min( 1.0, base.oneMinus().div( blend ) ).oneMinus();
 
 } ).setLayout( {
-	name: 'burnColor',
+	name: 'burnBlend',
 	type: 'vec3',
 	inputs: [
 		{ name: 'base', type: 'vec3' },
@@ -18,14 +14,12 @@ export const BurnNode = Fn( ( { base, blend } ) => {
 	]
 } );
 
-export const DodgeNode = Fn( ( { base, blend } ) => {
-
-	const fn = ( c ) => blend[ c ].equal( 1.0 ).select( blend[ c ], base[ c ].div( blend[ c ].oneMinus() ).max( 0 ) );
+export const dodge = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
 
-	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
+	return min( base.div( blend.oneMinus() ), 1.0 );
 
 } ).setLayout( {
-	name: 'dodgeColor',
+	name: 'dodgeBlend',
 	type: 'vec3',
 	inputs: [
 		{ name: 'base', type: 'vec3' },
@@ -33,14 +27,12 @@ export const DodgeNode = Fn( ( { base, blend } ) => {
 	]
 } );
 
-export const ScreenNode = Fn( ( { base, blend } ) => {
+export const screen = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
 
-	const fn = ( c ) => base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus();
-
-	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
+	return base.oneMinus().mul( blend.oneMinus() ).oneMinus();
 
 } ).setLayout( {
-	name: 'screenColor',
+	name: 'screenBlend',
 	type: 'vec3',
 	inputs: [
 		{ name: 'base', type: 'vec3' },
@@ -48,15 +40,12 @@ export const ScreenNode = Fn( ( { base, blend } ) => {
 	]
 } );
 
-export const OverlayNode = Fn( ( { base, blend } ) => {
-
-	const fn = ( c ) => base[ c ].lessThan( 0.5 ).select( base[ c ].mul( blend[ c ], 2.0 ), base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus() );
-	//const fn = ( c ) => mix( base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus(), base[ c ].mul( blend[ c ], 2.0 ), step( base[ c ], 0.5 ) );
+export const overlay = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
 
-	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
+	return mix( base.mul( 2.0 ).mul( blend ), base.oneMinus().mul( 2.0 ).mul( blend.oneMinus() ).oneMinus(), step( 0.5, base ) );
 
 } ).setLayout( {
-	name: 'overlayColor',
+	name: 'overlayBlend',
 	type: 'vec3',
 	inputs: [
 		{ name: 'base', type: 'vec3' },
@@ -64,65 +53,8 @@ export const OverlayNode = Fn( ( { base, blend } ) => {
 	]
 } );
 
-class BlendModeNode extends TempNode {
-
-	constructor( blendMode, baseNode, blendNode ) {
-
-		super();
-
-		this.blendMode = blendMode;
-
-		this.baseNode = baseNode;
-		this.blendNode = blendNode;
-
-	}
-
-	setup() {
-
-		const { blendMode, baseNode, blendNode } = this;
-		const params = { base: baseNode, blend: blendNode };
-
-		let outputNode = null;
-
-		if ( blendMode === BlendModeNode.BURN ) {
-
-			outputNode = BurnNode( params );
-
-		} else if ( blendMode === BlendModeNode.DODGE ) {
-
-			outputNode = DodgeNode( params );
-
-		} else if ( blendMode === BlendModeNode.SCREEN ) {
-
-			outputNode = ScreenNode( params );
-
-		} else if ( blendMode === BlendModeNode.OVERLAY ) {
-
-			outputNode = OverlayNode( params );
-
-		}
-
-		return outputNode;
-
-	}
-
-}
-
-BlendModeNode.BURN = 'burn';
-BlendModeNode.DODGE = 'dodge';
-BlendModeNode.SCREEN = 'screen';
-BlendModeNode.OVERLAY = 'overlay';
-
-export default BlendModeNode;
-
-export const burn = nodeProxy( BlendModeNode, BlendModeNode.BURN );
-export const dodge = nodeProxy( BlendModeNode, BlendModeNode.DODGE );
-export const overlay = nodeProxy( BlendModeNode, BlendModeNode.OVERLAY );
-export const screen = nodeProxy( BlendModeNode, BlendModeNode.SCREEN );
 
 addNodeElement( 'burn', burn );
 addNodeElement( 'dodge', dodge );
 addNodeElement( 'overlay', overlay );
 addNodeElement( 'screen', screen );
-
-addNodeClass( 'BlendModeNode', BlendModeNode );

src/nodes/display/ColorAdjustmentNode.js

@@ -1,18 +1,16 @@
-import TempNode from '../core/TempNode.js';
 import { dot, mix } from '../math/MathNode.js';
 import { add } from '../math/OperatorNode.js';
-import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, Fn, nodeProxy, float, vec3 } from '../shadernode/ShaderNode.js';
+import { addNodeElement, Fn, float, vec3 } from '../shadernode/ShaderNode.js';
 import { ColorManagement } from '../../math/ColorManagement.js';
 import { Vector3 } from '../../math/Vector3.js';
 
-const saturationNode = Fn( ( { color, adjustment } ) => {
+export const saturation = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 	return adjustment.mix( luminance( color.rgb ), color.rgb );
 
 } );
 
-const vibranceNode = Fn( ( { color, adjustment } ) => {
+export const vibrance = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 	const average = add( color.r, color.g, color.b ).div( 3.0 );
 
@@ -23,7 +21,7 @@ const vibranceNode = Fn( ( { color, adjustment } ) => {
 
 } );
 
-const hueNode = Fn( ( { color, adjustment } ) => {
+export const hue = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
 
 	const k = vec3( 0.57735, 0.57735, 0.57735 );
 
@@ -33,61 +31,6 @@ const hueNode = Fn( ( { color, adjustment } ) => {
 
 } );
 
-class ColorAdjustmentNode extends TempNode {
-
-	constructor( method, colorNode, adjustmentNode = float( 1 ) ) {
-
-		super( 'vec3' );
-
-		this.method = method;
-
-		this.colorNode = colorNode;
-		this.adjustmentNode = adjustmentNode;
-
-	}
-
-	setup() {
-
-		const { method, colorNode, adjustmentNode } = this;
-
-		const callParams = { color: colorNode, adjustment: adjustmentNode };
-
-		let outputNode = null;
-
-		if ( method === ColorAdjustmentNode.SATURATION ) {
-
-			outputNode = saturationNode( callParams );
-
-		} else if ( method === ColorAdjustmentNode.VIBRANCE ) {
-
-			outputNode = vibranceNode( callParams );
-
-		} else if ( method === ColorAdjustmentNode.HUE ) {
-
-			outputNode = hueNode( callParams );
-
-		} else {
-
-			console.error( `${ this.type }: Method "${ this.method }" not supported!` );
-
-		}
-
-		return outputNode;
-
-	}
-
-}
-
-ColorAdjustmentNode.SATURATION = 'saturation';
-ColorAdjustmentNode.VIBRANCE = 'vibrance';
-ColorAdjustmentNode.HUE = 'hue';
-
-export default ColorAdjustmentNode;
-
-export const saturation = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.SATURATION );
-export const vibrance = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.VIBRANCE );
-export const hue = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.HUE );
-
 const _luminanceCoefficients = /*#__PURE__*/ new Vector3();
 export const luminance = (
 	color,
@@ -100,5 +43,3 @@ addNodeElement( 'saturation', saturation );
 addNodeElement( 'vibrance', vibrance );
 addNodeElement( 'hue', hue );
 addNodeElement( 'threshold', threshold );
-
-addNodeClass( 'ColorAdjustmentNode', ColorAdjustmentNode );

src/nodes/display/DotScreenNode.js

@@ -1,10 +1,10 @@
 import TempNode from '../core/TempNode.js';
 import { nodeObject, addNodeElement, Fn, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
 import { uniform } from '../core/UniformNode.js';
-import { NodeUpdateType } from '../core/constants.js';
 import { uv } from '../accessors/UVNode.js';
 import { sin, cos } from '../math/MathNode.js';
 import { add } from '../math/OperatorNode.js';
+import { viewportResolution } from '../display/ViewportNode.js';
 
 import { Vector2 } from '../../math/Vector2.js';
 
@@ -19,18 +19,6 @@ class DotScreenNode extends TempNode {
 		this.angle = uniform( angle );
 		this.scale = uniform( scale );
 
-		this._size = uniform( new Vector2() );
-
-		this.updateBeforeType = NodeUpdateType.RENDER;
-
-	}
-
-	updateBefore( frame ) {
-
-		const { renderer } = frame;
-
-		renderer.getDrawingBufferSize( this._size.value );
-
 	}
 
 	setup() {
@@ -42,7 +30,7 @@ class DotScreenNode extends TempNode {
 			const s = sin( this.angle );
 			const c = cos( this.angle );
 
-			const tex = uv().mul( this._size ).sub( this.center );
+			const tex = uv().mul( viewportResolution ).sub( this.center );
 			const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
 
 			return sin( point.x ).mul( sin( point.y ) ).mul( 4 );

src/nodes/math/MathNode.js

@@ -139,7 +139,7 @@ class MathNode extends TempNode {
 					b.build( builder, type )
 				);
 
-			} else if ( method === MathNode.STEP ) {
+			} else if ( isWebGL && method === MathNode.STEP ) {
 
 				params.push(
 					a.build( builder, builder.getTypeLength( a.getNodeType( builder ) ) === 1 ? 'float' : inputType ),