From 68ceb0e7bd3cb858b35580f158670b890144aebd Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Tue, 23 Jul 2024 11:26:05 -0700 Subject: [PATCH 1/6] add SepiaNode --- src/nodes/display/SepiaNode.js | 54 ++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 src/nodes/display/SepiaNode.js diff --git a/src/nodes/display/SepiaNode.js b/src/nodes/display/SepiaNode.js new file mode 100644 index 00000000000000..b01aefc55f064e --- /dev/null +++ b/src/nodes/display/SepiaNode.js @@ -0,0 +1,54 @@ +import TempNode from '../core/TempNode.js'; +import { nodeObject, addNodeElement, tslFn, vec3, vec4, float } from '../shadernode/ShaderNode.js'; +import { NodeUpdateType } from '../core/constants.js'; +import { uv } from '../accessors/UVNode.js'; +import { min } from '../math/MathNode.js'; +import { dot } from '../math/MathNode.js'; + +import { property } from '../core/PropertyNode.js'; + +class SepiaNode extends TempNode { + + constructor( textureNode, amount ) { + + super( 'vec4' ); + + this.textureNode = textureNode; + this.amount = amount; + + this.updateBeforeType = NodeUpdateType.RENDER; + + } + + setup() { + + const { textureNode, amount } = this.textureNode; + + const uvNode = this.textureNode.uvNode || uv(); + + const sepia = tslFn( () => { + + const color = textureNode.uv( uvNode ); + const c = property( 'vec3', 'c' ).assign( color.rgb ); + + color.r = dot( c, vec3( float( 1.0 ).sub( amount.mul( 0.607 ) ), amount.mul( 0.769 ), amount.mul( 0.189 ) ) ); + color.g = dot( c, vec3( amount.mul( 0.349 ), float( 1.0 ).sub( amount.mul( 0.314 ) ), amount.mul( 0.168 ) ) ); + color.b = dot( c, vec3( amount.mul( 0.272 ), amount.mul( 0.534 ), float( 1.0 ).sub( amount.mul( 0.869 ) ) ) ); + + return vec4( min( vec3( 1.0 ), color.rgb ), color.a ); + + } ); + + const outputNode = sepia(); + + return outputNode; + + } + +} + +export const sepia = ( node, amount ) => nodeObject( new SepiaNode( nodeObject( node ).toTexture(), nodeObject( amount ) ) ); + +addNodeElement( 'sepia', sepia ); + +export default SepiaNode; From 3c5f67facb632d1658860dcfe6581af893cfef8d Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Tue, 23 Jul 2024 11:27:09 -0700 Subject: [PATCH 2/6] add node to export --- src/nodes/Nodes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js index b7439ab67a7bce..62c7febe4090d6 100644 --- a/src/nodes/Nodes.js +++ b/src/nodes/Nodes.js @@ -141,6 +141,7 @@ export { default as BloomNode, bloom } from './display/BloomNode.js'; export { default as TransitionNode, transition } from './display/TransitionNode.js'; export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js'; export { default as PixelationPassNode, pixelationPass } from './display/PixelationPassNode.js'; +export { default as SepiaNode, sepia } from './display/SepiaNode.js'; export { default as PassNode, pass, passTexture, depthPass } from './display/PassNode.js'; From 694a681da635e227661d0fdc7976ee1eedb74ec6 Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Tue, 23 Jul 2024 11:33:12 -0700 Subject: [PATCH 3/6] fix --- src/nodes/display/SepiaNode.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/nodes/display/SepiaNode.js b/src/nodes/display/SepiaNode.js index b01aefc55f064e..810045f6316a68 100644 --- a/src/nodes/display/SepiaNode.js +++ b/src/nodes/display/SepiaNode.js @@ -22,13 +22,15 @@ class SepiaNode extends TempNode { setup() { - const { textureNode, amount } = this.textureNode; + const textureNode = this.textureNode; + const amount = this.amount; + const uvNode = textureNode.uvNode || uv(); - const uvNode = this.textureNode.uvNode || uv(); + const sampleTexture = ( uv ) => textureNode.uv( uv ); const sepia = tslFn( () => { - const color = textureNode.uv( uvNode ); + const color = sampleTexture( uvNode ); const c = property( 'vec3', 'c' ).assign( color.rgb ); color.r = dot( c, vec3( float( 1.0 ).sub( amount.mul( 0.607 ) ), amount.mul( 0.769 ), amount.mul( 0.189 ) ) ); From 7925f009a726ace6608bf373cff90bb7c4f8425a Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Thu, 25 Jul 2024 12:05:56 -0700 Subject: [PATCH 4/6] condense sepia into tslFn --- src/nodes/display/SepiaNode.js | 53 +++++----------------------------- 1 file changed, 8 insertions(+), 45 deletions(-) diff --git a/src/nodes/display/SepiaNode.js b/src/nodes/display/SepiaNode.js index 810045f6316a68..cb83323bb833e5 100644 --- a/src/nodes/display/SepiaNode.js +++ b/src/nodes/display/SepiaNode.js @@ -1,56 +1,19 @@ -import TempNode from '../core/TempNode.js'; -import { nodeObject, addNodeElement, tslFn, vec3, vec4, float } from '../shadernode/ShaderNode.js'; -import { NodeUpdateType } from '../core/constants.js'; -import { uv } from '../accessors/UVNode.js'; +import { addNodeElement, tslFn, vec3, vec4 } from '../shadernode/ShaderNode.js'; import { min } from '../math/MathNode.js'; import { dot } from '../math/MathNode.js'; import { property } from '../core/PropertyNode.js'; -class SepiaNode extends TempNode { +export const sepia = /*@__PURE__*/ tslFn( ( { color } ) => { - constructor( textureNode, amount ) { + const c = property( 'vec3', 'c' ).assign( color.rgb ); - super( 'vec4' ); + color.r = dot( c, vec3( 0.393, 0.769, 0.189 ) ); + color.g = dot( c, vec3( 0.349, 0.686, 0.168 ) ); + color.b = dot( c, vec3( 0.272, 0.534, 0.131 ) ); - this.textureNode = textureNode; - this.amount = amount; + return vec4( min( vec3( 1.0 ), color.rgb ), 1.0 ); - this.updateBeforeType = NodeUpdateType.RENDER; - - } - - setup() { - - const textureNode = this.textureNode; - const amount = this.amount; - const uvNode = textureNode.uvNode || uv(); - - const sampleTexture = ( uv ) => textureNode.uv( uv ); - - const sepia = tslFn( () => { - - const color = sampleTexture( uvNode ); - const c = property( 'vec3', 'c' ).assign( color.rgb ); - - color.r = dot( c, vec3( float( 1.0 ).sub( amount.mul( 0.607 ) ), amount.mul( 0.769 ), amount.mul( 0.189 ) ) ); - color.g = dot( c, vec3( amount.mul( 0.349 ), float( 1.0 ).sub( amount.mul( 0.314 ) ), amount.mul( 0.168 ) ) ); - color.b = dot( c, vec3( amount.mul( 0.272 ), amount.mul( 0.534 ), float( 1.0 ).sub( amount.mul( 0.869 ) ) ) ); - - return vec4( min( vec3( 1.0 ), color.rgb ), color.a ); - - } ); - - const outputNode = sepia(); - - return outputNode; - - } - -} - -export const sepia = ( node, amount ) => nodeObject( new SepiaNode( nodeObject( node ).toTexture(), nodeObject( amount ) ) ); +} ); addNodeElement( 'sepia', sepia ); - -export default SepiaNode; From c9d6857b5721df9e8710fd18a039df7bdafc0280 Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Thu, 25 Jul 2024 12:09:54 -0700 Subject: [PATCH 5/6] remove SepiaNode from Node.js --- src/nodes/Nodes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js index 62c7febe4090d6..4e3da7aaa49611 100644 --- a/src/nodes/Nodes.js +++ b/src/nodes/Nodes.js @@ -141,7 +141,7 @@ export { default as BloomNode, bloom } from './display/BloomNode.js'; export { default as TransitionNode, transition } from './display/TransitionNode.js'; export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js'; export { default as PixelationPassNode, pixelationPass } from './display/PixelationPassNode.js'; -export { default as SepiaNode, sepia } from './display/SepiaNode.js'; +export { sepia } from './display/SepiaNode.js'; export { default as PassNode, pass, passTexture, depthPass } from './display/PassNode.js'; From 8b99c9bf3b512facc433c08d487cbc0940f76dc8 Mon Sep 17 00:00:00 2001 From: Michael Herzog Date: Fri, 26 Jul 2024 10:51:44 +0200 Subject: [PATCH 6/6] Update SepiaNode.js --- src/nodes/display/SepiaNode.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/nodes/display/SepiaNode.js b/src/nodes/display/SepiaNode.js index cb83323bb833e5..f4716ce4bd2ddd 100644 --- a/src/nodes/display/SepiaNode.js +++ b/src/nodes/display/SepiaNode.js @@ -8,6 +8,8 @@ export const sepia = /*@__PURE__*/ tslFn( ( { color } ) => { const c = property( 'vec3', 'c' ).assign( color.rgb ); + // https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/sepia.js + color.r = dot( c, vec3( 0.393, 0.769, 0.189 ) ); color.g = dot( c, vec3( 0.349, 0.686, 0.168 ) ); color.b = dot( c, vec3( 0.272, 0.534, 0.131 ) );