From afeb015364f0b52d688ebdce272c20c4570dbf44 Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Wed, 10 Jul 2024 22:38:58 -0700 Subject: [PATCH 1/9] TransitionNode sketch --- examples/files.json | 1 + .../webgpu_postprocessing_transition.html | 240 ++++++++++++++++++ src/nodes/Nodes.js | 1 + src/nodes/display/TransitionNode.js | 65 +++++ 4 files changed, 307 insertions(+) create mode 100644 examples/webgpu_postprocessing_transition.html create mode 100644 src/nodes/display/TransitionNode.js diff --git a/examples/files.json b/examples/files.json index ac769186754ed8..4e0a68db02a895 100644 --- a/examples/files.json +++ b/examples/files.json @@ -377,6 +377,7 @@ "webgpu_postprocessing_dof", "webgpu_postprocessing_fxaa", "webgpu_postprocessing_sobel", + "webgpu_postprocessing_transition", "webgpu_postprocessing", "webgpu_procedural_texture", "webgpu_reflection", diff --git a/examples/webgpu_postprocessing_transition.html b/examples/webgpu_postprocessing_transition.html new file mode 100644 index 00000000000000..c8dd28f63d598f --- /dev/null +++ b/examples/webgpu_postprocessing_transition.html @@ -0,0 +1,240 @@ + + + + three.js webgpu - scenes transition + + + + + + +
+ three.js webgl scene transitions
+ by fernandojsg - github +
+ + + + + + diff --git a/src/nodes/Nodes.js b/src/nodes/Nodes.js index caec0e8a5bdb31..3836220ad82053 100644 --- a/src/nodes/Nodes.js +++ b/src/nodes/Nodes.js @@ -136,6 +136,7 @@ export { default as FilmNode, film } from './display/FilmNode.js'; export { default as Lut3DNode, lut3D } from './display/Lut3DNode.js'; export { default as GTAONode, ao } from './display/GTAONode.js'; export { default as FXAANode, fxaa } from './display/FXAANode.js'; +export { default as TransitionNode, transition } from './display/TransitionNode.js'; export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js'; export { default as PassNode, pass, passTexture, depthPass } from './display/PassNode.js'; diff --git a/src/nodes/display/TransitionNode.js b/src/nodes/display/TransitionNode.js new file mode 100644 index 00000000000000..41bab8d3e83ed6 --- /dev/null +++ b/src/nodes/display/TransitionNode.js @@ -0,0 +1,65 @@ +import TempNode from '../core/TempNode.js'; +import { uv } from '../accessors/UVNode.js'; +import { addNodeElement, tslFn, nodeObject, float, If } from '../shadernode/ShaderNode.js'; +import { NodeUpdateType } from '../core/constants.js'; +import { clamp, mix } from '../math/MathNode.js'; + +class TransitionNode extends TempNode { + + constructor( textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode ) { + + super(); + + // Input textures + + this.textureNodeA = textureNodeA; + this.textureNodeB = textureNodeB; + this.mixTextureNode = mixTextureNode; + + // Uniforms + + this.mixRatioNode = mixRatioNode; + this.thresholdNode = thresholdNode; + this.useTextureNode = useTextureNode; + + this.updateBeforeType = NodeUpdateType.RENDER; + + } + + setup() { + + const { textureNodeA, textureNodeB, mixTextureNode, mixRatioNode, thresholdNode, useTextureNode } = this; + + const sampleTexture = ( textureNode ) => { + + const uvNodeTexture = textureNode.uvNode || uv(); + return textureNode.uv( uvNodeTexture ); + + }; + + const transition = tslFn( () => { + + const texelOne = sampleTexture( textureNodeA ); + const texelTwo = sampleTexture( textureNodeB ); + + const transitionTexel = sampleTexture( mixTextureNode ); + const r = mixRatioNode.mul( thresholdNode.mul( 2.0 ).add( 1.0 ) ).sub( thresholdNode ); + const mixf = clamp( transitionTexel.r.sub( r ).mul( float( 1.0 ).div( thresholdNode ) ), 0.0, 1.0 ); + + return mix( texelOne, texelTwo, mixf ); + + } ); + + const outputNode = transition(); + + return outputNode; + + } + +} + +export const transition = ( nodeA, nodeB, mixTexture, mixRatio, threshold ) => nodeObject( new TransitionNode( nodeObject( nodeA ).toTexture(), nodeObject( nodeB ).toTexture(), nodeObject( mixTexture ).toTexture(), nodeObject( mixRatio ), nodeObject( threshold ) ) ); + +addNodeElement( 'transition', transition ); + +export default TransitionNode; \ No newline at end of file From 841d0dd9418398f885c30ef20b8b44230dda1b44 Mon Sep 17 00:00:00 2001 From: Christian Helgeson Date: Wed, 10 Jul 2024 22:43:20 -0700 Subject: [PATCH 2/9] cleanup --- examples/webgpu_postprocessing_transition.html | 10 +++------- src/nodes/display/TransitionNode.js | 7 +++---- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/examples/webgpu_postprocessing_transition.html b/examples/webgpu_postprocessing_transition.html index c8dd28f63d598f..d3d7e6e91f9e20 100644 --- a/examples/webgpu_postprocessing_transition.html +++ b/examples/webgpu_postprocessing_transition.html @@ -9,8 +9,8 @@
- three.js webgl scene transitions
- by fernandojsg - github + three.js webgpu scene transitions.
+ Original implementation by fernandojsg - github