Skip to content

Commit d7ba035

Browse files
sunagsunag
authored
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
1 parent cd8f55c commit d7ba035

File tree

5 files changed

+23
-162
lines changed

5 files changed

+23
-162
lines changed

‎src/nodes/Nodes.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,9 @@ export { default as UserDataNode, userData } from './accessors/UserDataNode.js';
115115
export * from './accessors/VelocityNode.js';
116116

117117
// display
118-
export { default as BlendModeNode, burn, dodge, overlay, screen } from './display/BlendModeNode.js';
118+
export * from './display/BlendModeNode.js';
119119
export { default as BumpMapNode, bumpMap } from './display/BumpMapNode.js';
120-
export { default as ColorAdjustmentNode, saturation, vibrance, hue, luminance, threshold } from './display/ColorAdjustmentNode.js';
120+
export * from './display/ColorAdjustmentNode.js';
121121
export { default as ColorSpaceNode, linearToColorSpace, colorSpaceToLinear, linearTosRGB, sRGBToLinear } from './display/ColorSpaceNode.js';
122122
export { default as FrontFacingNode, frontFacing, faceDirection } from './display/FrontFacingNode.js';
123123
export { default as NormalMapNode, normalMap } from './display/NormalMapNode.js';

‎src/nodes/display/BlendModeNode.js

Lines changed: 14 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,60 @@
1-
import TempNode from '../core/TempNode.js';
2-
import { /*mix, step,*/ EPSILON } from '../math/MathNode.js';
3-
import { addNodeClass } from '../core/Node.js';
4-
import { addNodeElement, Fn, nodeProxy, vec3 } from '../shadernode/ShaderNode.js';
1+
import { addNodeElement, Fn } from '../shadernode/ShaderNode.js';
2+
import { mix, min, step } from '../math/MathNode.js';
53

6-
export const BurnNode = Fn( ( { base, blend } ) => {
4+
export const burn = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
75

8-
const fn = ( c ) => blend[ c ].lessThan( EPSILON ).select( blend[ c ], base[ c ].oneMinus().div( blend[ c ] ).oneMinus().max( 0 ) );
9-
10-
return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
6+
return min( 1.0, base.oneMinus().div( blend ) ).oneMinus();
117

128
} ).setLayout( {
13-
name: 'burnColor',
9+
name: 'burnBlend',
1410
type: 'vec3',
1511
inputs: [
1612
{ name: 'base', type: 'vec3' },
1713
{ name: 'blend', type: 'vec3' }
1814
]
1915
} );
2016

21-
export const DodgeNode = Fn( ( { base, blend } ) => {
22-
23-
const fn = ( c ) => blend[ c ].equal( 1.0 ).select( blend[ c ], base[ c ].div( blend[ c ].oneMinus() ).max( 0 ) );
17+
export const dodge = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
2418

25-
return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
19+
return min( base.div( blend.oneMinus() ), 1.0 );
2620

2721
} ).setLayout( {
28-
name: 'dodgeColor',
22+
name: 'dodgeBlend',
2923
type: 'vec3',
3024
inputs: [
3125
{ name: 'base', type: 'vec3' },
3226
{ name: 'blend', type: 'vec3' }
3327
]
3428
} );
3529

36-
export const ScreenNode = Fn( ( { base, blend } ) => {
30+
export const screen = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
3731

38-
const fn = ( c ) => base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus();
39-
40-
return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
32+
return base.oneMinus().mul( blend.oneMinus() ).oneMinus();
4133

4234
} ).setLayout( {
43-
name: 'screenColor',
35+
name: 'screenBlend',
4436
type: 'vec3',
4537
inputs: [
4638
{ name: 'base', type: 'vec3' },
4739
{ name: 'blend', type: 'vec3' }
4840
]
4941
} );
5042

51-
export const OverlayNode = Fn( ( { base, blend } ) => {
52-
53-
const fn = ( c ) => base[ c ].lessThan( 0.5 ).select( base[ c ].mul( blend[ c ], 2.0 ), base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus() );
54-
//const fn = ( c ) => mix( base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus(), base[ c ].mul( blend[ c ], 2.0 ), step( base[ c ], 0.5 ) );
43+
export const overlay = /*#__PURE__*/ Fn( ( [ base, blend ] ) => {
5544

56-
return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
45+
return mix( base.mul( 2.0 ).mul( blend ), base.oneMinus().mul( 2.0 ).mul( blend.oneMinus() ).oneMinus(), step( 0.5, base ) );
5746

5847
} ).setLayout( {
59-
name: 'overlayColor',
48+
name: 'overlayBlend',
6049
type: 'vec3',
6150
inputs: [
6251
{ name: 'base', type: 'vec3' },
6352
{ name: 'blend', type: 'vec3' }
6453
]
6554
} );
6655

67-
class BlendModeNode extends TempNode {
68-
69-
constructor( blendMode, baseNode, blendNode ) {
70-
71-
super();
72-
73-
this.blendMode = blendMode;
74-
75-
this.baseNode = baseNode;
76-
this.blendNode = blendNode;
77-
78-
}
79-
80-
setup() {
81-
82-
const { blendMode, baseNode, blendNode } = this;
83-
const params = { base: baseNode, blend: blendNode };
84-
85-
let outputNode = null;
86-
87-
if ( blendMode === BlendModeNode.BURN ) {
88-
89-
outputNode = BurnNode( params );
90-
91-
} else if ( blendMode === BlendModeNode.DODGE ) {
92-
93-
outputNode = DodgeNode( params );
94-
95-
} else if ( blendMode === BlendModeNode.SCREEN ) {
96-
97-
outputNode = ScreenNode( params );
98-
99-
} else if ( blendMode === BlendModeNode.OVERLAY ) {
100-
101-
outputNode = OverlayNode( params );
102-
103-
}
104-
105-
return outputNode;
106-
107-
}
108-
109-
}
110-
111-
BlendModeNode.BURN = 'burn';
112-
BlendModeNode.DODGE = 'dodge';
113-
BlendModeNode.SCREEN = 'screen';
114-
BlendModeNode.OVERLAY = 'overlay';
115-
116-
export default BlendModeNode;
117-
118-
export const burn = nodeProxy( BlendModeNode, BlendModeNode.BURN );
119-
export const dodge = nodeProxy( BlendModeNode, BlendModeNode.DODGE );
120-
export const overlay = nodeProxy( BlendModeNode, BlendModeNode.OVERLAY );
121-
export const screen = nodeProxy( BlendModeNode, BlendModeNode.SCREEN );
12256

12357
addNodeElement( 'burn', burn );
12458
addNodeElement( 'dodge', dodge );
12559
addNodeElement( 'overlay', overlay );
12660
addNodeElement( 'screen', screen );
127-
128-
addNodeClass( 'BlendModeNode', BlendModeNode );

‎src/nodes/display/ColorAdjustmentNode.js

Lines changed: 4 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
import TempNode from '../core/TempNode.js';
21
import { dot, mix } from '../math/MathNode.js';
32
import { add } from '../math/OperatorNode.js';
4-
import { addNodeClass } from '../core/Node.js';
5-
import { addNodeElement, Fn, nodeProxy, float, vec3 } from '../shadernode/ShaderNode.js';
3+
import { addNodeElement, Fn, float, vec3 } from '../shadernode/ShaderNode.js';
64
import { ColorManagement } from '../../math/ColorManagement.js';
75
import { Vector3 } from '../../math/Vector3.js';
86

9-
const saturationNode = Fn( ( { color, adjustment } ) => {
7+
export const saturation = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
108

119
return adjustment.mix( luminance( color.rgb ), color.rgb );
1210

1311
} );
1412

15-
const vibranceNode = Fn( ( { color, adjustment } ) => {
13+
export const vibrance = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
1614

1715
const average = add( color.r, color.g, color.b ).div( 3.0 );
1816

@@ -23,7 +21,7 @@ const vibranceNode = Fn( ( { color, adjustment } ) => {
2321

2422
} );
2523

26-
const hueNode = Fn( ( { color, adjustment } ) => {
24+
export const hue = /*#__PURE__*/ Fn( ( [ color, adjustment = float( 1 ) ] ) => {
2725

2826
const k = vec3( 0.57735, 0.57735, 0.57735 );
2927

@@ -33,61 +31,6 @@ const hueNode = Fn( ( { color, adjustment } ) => {
3331

3432
} );
3533

36-
class ColorAdjustmentNode extends TempNode {
37-
38-
constructor( method, colorNode, adjustmentNode = float( 1 ) ) {
39-
40-
super( 'vec3' );
41-
42-
this.method = method;
43-
44-
this.colorNode = colorNode;
45-
this.adjustmentNode = adjustmentNode;
46-
47-
}
48-
49-
setup() {
50-
51-
const { method, colorNode, adjustmentNode } = this;
52-
53-
const callParams = { color: colorNode, adjustment: adjustmentNode };
54-
55-
let outputNode = null;
56-
57-
if ( method === ColorAdjustmentNode.SATURATION ) {
58-
59-
outputNode = saturationNode( callParams );
60-
61-
} else if ( method === ColorAdjustmentNode.VIBRANCE ) {
62-
63-
outputNode = vibranceNode( callParams );
64-
65-
} else if ( method === ColorAdjustmentNode.HUE ) {
66-
67-
outputNode = hueNode( callParams );
68-
69-
} else {
70-
71-
console.error( `${ this.type }: Method "${ this.method }" not supported!` );
72-
73-
}
74-
75-
return outputNode;
76-
77-
}
78-
79-
}
80-
81-
ColorAdjustmentNode.SATURATION = 'saturation';
82-
ColorAdjustmentNode.VIBRANCE = 'vibrance';
83-
ColorAdjustmentNode.HUE = 'hue';
84-
85-
export default ColorAdjustmentNode;
86-
87-
export const saturation = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.SATURATION );
88-
export const vibrance = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.VIBRANCE );
89-
export const hue = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.HUE );
90-
9134
const _luminanceCoefficients = /*#__PURE__*/ new Vector3();
9235
export const luminance = (
9336
color,
@@ -100,5 +43,3 @@ addNodeElement( 'saturation', saturation );
10043
addNodeElement( 'vibrance', vibrance );
10144
addNodeElement( 'hue', hue );
10245
addNodeElement( 'threshold', threshold );
103-
104-
addNodeClass( 'ColorAdjustmentNode', ColorAdjustmentNode );

‎src/nodes/display/DotScreenNode.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import TempNode from '../core/TempNode.js';
22
import { nodeObject, addNodeElement, Fn, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
33
import { uniform } from '../core/UniformNode.js';
4-
import { NodeUpdateType } from '../core/constants.js';
54
import { uv } from '../accessors/UVNode.js';
65
import { sin, cos } from '../math/MathNode.js';
76
import { add } from '../math/OperatorNode.js';
7+
import { viewportResolution } from '../display/ViewportNode.js';
88

99
import { Vector2 } from '../../math/Vector2.js';
1010

@@ -19,18 +19,6 @@ class DotScreenNode extends TempNode {
1919
this.angle = uniform( angle );
2020
this.scale = uniform( scale );
2121

22-
this._size = uniform( new Vector2() );
23-
24-
this.updateBeforeType = NodeUpdateType.RENDER;
25-
26-
}
27-
28-
updateBefore( frame ) {
29-
30-
const { renderer } = frame;
31-
32-
renderer.getDrawingBufferSize( this._size.value );
33-
3422
}
3523

3624
setup() {
@@ -42,7 +30,7 @@ class DotScreenNode extends TempNode {
4230
const s = sin( this.angle );
4331
const c = cos( this.angle );
4432

45-
const tex = uv().mul( this._size ).sub( this.center );
33+
const tex = uv().mul( viewportResolution ).sub( this.center );
4634
const point = vec2( c.mul( tex.x ).sub( s.mul( tex.y ) ), s.mul( tex.x ).add( c.mul( tex.y ) ) ).mul( this.scale );
4735

4836
return sin( point.x ).mul( sin( point.y ) ).mul( 4 );

‎src/nodes/math/MathNode.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ class MathNode extends TempNode {
139139
b.build( builder, type )
140140
);
141141

142-
} else if ( method === MathNode.STEP ) {
142+
} else if ( isWebGL && method === MathNode.STEP ) {
143143

144144
params.push(
145145
a.build( builder, builder.getTypeLength( a.getNodeType( builder ) ) === 1 ? 'float' : inputType ),

0 commit comments

Comments
 (0)