Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nodes: Add TransitionNode. #28847

Merged
merged 10 commits into from
Jul 18, 2024
Merged

Nodes: Add TransitionNode. #28847

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
afeb015
TransitionNode sketch
cmhhelgeson Jul 11, 2024
841d0dd
cleanup
cmhhelgeson Jul 11, 2024
b291f0c
fix non-functional controller
cmhhelgeson Jul 16, 2024
9bd2f99
texture loading fixed
cmhhelgeson Jul 16, 2024
ceb4b09
lint fix
cmhhelgeson Jul 16, 2024
f4f06f5
fix screenshot
cmhhelgeson Jul 16, 2024
cf7114f
remove texture import
cmhhelgeson Jul 16, 2024
42b3583
Update TransitionNode.js
Mugen87 Jul 18, 2024
afe5421
Update webgpu_postprocessing_transition.html
Mugen87 Jul 18, 2024
ed6fa44
Merge branch 'dev' into webgpu_transition_pass
Mugen87 Jul 18, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update TransitionNode.js
  • Loading branch information
@Mugen87
Mugen87 committed Jul 18, 2024
commit 42b358396d6bb693e6fae9c211c005ded666e123
25 changes: 19 additions & 6 deletions src/nodes/display/TransitionNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import TempNode from '../core/TempNode.js';
import { uv } from '../accessors/UVNode.js';
import { addNodeElement, tslFn, nodeObject, float } from '../shadernode/ShaderNode.js';
import { addNodeElement, tslFn, nodeObject, float, int, vec4, If } from '../shadernode/ShaderNode.js';
import { clamp, mix } from '../math/MathNode.js';
import { sub } from '../math/OperatorNode.js';

class TransitionNode extends TempNode {

Expand Down Expand Up @@ -39,11 +40,23 @@ class TransitionNode extends TempNode {
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 );
const color = vec4().toVar();

return mix( texelOne, texelTwo, useTextureNode.equal( 1 ).cond( mixf, mixRatioNode ) );
If( useTextureNode.equal( int( 1 ) ), () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have refactored this bit since I think the if clause makes the code more readable.

const transitionTexel = sampleTexture( mixTextureNode );
const r = mixRatioNode.mul( thresholdNode.mul( 2.0 ).add( 1.0 ) ).sub( thresholdNode );
const mixf = clamp( sub( transitionTexel.r, r ).mul( float( 1.0 ).div( thresholdNode ) ), 0.0, 1.0 );

color.assign( mix( texelOne, texelTwo, mixf ) );

} ).else( () => {

color.assign( mix( texelTwo, texelOne, mixRatioNode ) );
Copy link
Collaborator

@Mugen87 Mugen87 Jul 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The transition was broken when useTextureNode is set to 0 since texelTwo and texelOne should be switched in this mix statement.

} );

return color;

} );

Expand All @@ -55,7 +68,7 @@ class TransitionNode extends TempNode {

}

export const transition = ( nodeA, nodeB, mixTexture, mixRatio, threshold, useTexture ) => nodeObject( new TransitionNode( nodeObject( nodeA ).toTexture(), nodeObject( nodeB ).toTexture(), nodeObject( mixTexture ).toTexture(), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );
export const transition = ( nodeA, nodeB, mixTexture, mixRatio = 0.0, threshold = 0.1, useTexture = 0 ) => nodeObject( new TransitionNode( nodeObject( nodeA ).toTexture(), nodeObject( nodeB ).toTexture(), nodeObject( mixTexture ).toTexture(), nodeObject( mixRatio ), nodeObject( threshold ), nodeObject( useTexture ) ) );

addNodeElement( 'transition', transition );

Expand Down