Examples: WebGPU WGSL/TSL Node Interoperability #28379
Conversation
…strates how to use the same node variables across both wgsl and tsl version of the same shader, as well as demonstrating how to use varying attributes in both wgsl and tsl shaders
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
Thanks for first contributor. Do you can follow mrdoob code style? |
Yes, I will run the linter again. |
Please, don't rely just on running the linter. Check this link to see the code indentations that need clean up: |
| var coord = pixel / cellSize; | ||
| // Three color values for each cell (r, g, b) | ||
| var subcoord = coord * vec2f(3.0, 1.0); | ||
| var offset = vec2<f32>(0, fract(floor(coord.x) * offset)); |
There was a problem hiding this comment.
Seems that your example broken here after your last revision.
There was a problem hiding this comment.
I added cellOffset but it looks like a black horizontal line in the center of the screen.
There was a problem hiding this comment.
The black horizontal line is the intended behavior. There are two shaders in this pull request, a wgsl Shader on top, and a tsl shader on the bottom. However, they each use the same nodes as their inputs and execute the same operations (thus the title, WGSL TSL Node Interoperability). I can adjust the size of the quads so that their unified, but I think that might obscure the purpose of the example, so maybe more explicit labels are needed...
Using a CRT shader adapted from a linked source, I added an example demonstrating how nodes can be interchangeably used as arguments in WGSL functions and manipulated within TSL functions, ultimately producing the same visual output in each.
https://raw.githack.com/cmhhelgeson/three.js/webgpu_wgsl_shader/examples/webgpu_tsl_interoperability.html