Nodes: Add TransitionNode.
#28847
Nodes: Add TransitionNode.
#28847
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
|
||
| window.addEventListener( 'resize', onWindowResize ); | ||
|
|
||
| function onWindowResize() {3 |
Check warning
Code scanning / CodeQL
Expression has no effect Warning
src/nodes/display/TransitionNode.js
Outdated
| @@ -0,0 +1,64 @@ | |||
| import TempNode from '../core/TempNode.js'; | |||
| import { uv } from '../accessors/UVNode.js'; | |||
| import { addNodeElement, tslFn, nodeObject, float, If } from '../shadernode/ShaderNode.js'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
cmhhelgeson
force-pushed
the
webgpu_transition_pass
branch
from
fe4a105
to
841d0dd
Compare
|
Is this PR ready to review? |
Unfortunately no, I'm trying to investigate the proper way to dynamically change the value of the mixTextureNode, using the 3DLut example as a reference (i.e the value of the mixTexture used by the pass is directly updated in the animate loop). However, for whatever reason, I haven't been successful in replicating the approach. |
src/nodes/display/TransitionNode.js
Outdated
| 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'; |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
|
|
||
| import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; | ||
| import TWEEN from 'three/addons/libs/tween.module.js'; | ||
| import { uniform, transition, pass, texture } from 'three/tsl' |
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note
|
|
||
| const color = vec4().toVar(); | ||
|
|
||
| If( useTextureNode.equal( int( 1 ) ), () => { |
There was a problem hiding this comment.
I have refactored this bit since I think the if clause makes the code more readable.
|
|
||
| } ).else( () => { | ||
|
|
||
| color.assign( mix( texelTwo, texelOne, mixRatioNode ) ); |
There was a problem hiding this comment.
The transition was broken when useTextureNode is set to 0 since texelTwo and texelOne should be switched in this mix statement.
|
BTW: You should be able to avoid any code formatting issues by integrating ESLint in your editor. VSCode for example can automatically detect the ESLint configuration of the project and auto-format files to avoid linter issues. |
|
The code for these new nodes is beautiful ~ |
Related issue -
Port of existing transition post processing feature of RenderTransitionPass to node post processing system.