5 ms·

Almost like the old days of fixed function pipelines. The example at the top seems a little contrived, I wonder why you would build a shader like that.

bhouston 2y ago
Huh? It allows for programming via JavaScript which is then transpiled for WebGL or WebGPU. It doesn't seem fixed function at all.
- stanleykm 2y ago
  Yeah I get what it is, I was just making an observation of how the api appears.
  - esperent 2y ago
    By this logic we could call any API "fixed function" though.
- flohofwoe 2y ago
  It does look quite similar to how pixel rendering was configured in OpenGL 1.x or Direct3D up to D3D7 (you basically had a set of hardwired pixel operations which you could stack and combine via API calls). Funny enough, the new work graph stuff in D3D12 is also configured in a similar way (by essentially building an AST-like tree of operations via API calls). We really came around full circle ;)
dahart 2y ago
It’s common in lots of modern tools to build shader trees using UI, this is analogous to that. It’s not really fixed function because you can make your tree/shader as big as you want and it has all of the math functions that GLSL has. Fixed function usually means something like a limited fixed set of nodes and you can turn the constant knobs. Unless I missed it somewhere, the two nodes that seem to be missing here are an if() node and a loop() node. I’m guessing a loop() node can be done on the JavaScript side for small loops - it’d be the same as loop unrolling. For big loops or loops with unknown bounds at compile time, it’s not clear if there’s a way with TSL. You can simulate if() behavior using the nodes provided, but you can’t avoid executing both sides of the if(). It’s been a long time since I wrote a three.js shader, so I’m not sure what the “old” example is doing. It looks like it might be a little dynamic code injection to convert from a typical GLSL shader to something three.js needs.
- hansworst 2y ago
  > big loops or loops with unknown bounds at compile time That’s not allowed in webgl, so I doubt TSL can make it work somehow.
  - dahart 2y ago
    What do you mean, and are you sure? It works in ShaderToy. Big loops will happily unroll until the compiler crashes. There’s a standard trick for doing variable length loops (and preventing unrolling): https://shadertoyunofficial.wordpress.com/2017/11/19/avoiding-compiler-crash-or-endless-compilation/ https://shadertoyunofficial.wordpress.com/2017/11/19/avoidin...
araes 2y ago
Some of the other examples in Three.js are quite a bit more complex. https://threejs.org/examples/#webgl_lights_physical https://threejs.org/examples/#webgl_lights_physical Probably just for introductory ease. Although, admittedly, appears to give the impression of nerfed features, rather than easy.

bhouston 2y ago

Huh? It allows for programming via JavaScript which is then transpiled for WebGL or WebGPU. It doesn't seem fixed function at all.

stanleykm 2y ago
Yeah I get what it is, I was just making an observation of how the api appears.
- esperent 2y ago
  By this logic we could call any API "fixed function" though.
flohofwoe 2y ago
It does look quite similar to how pixel rendering was configured in OpenGL 1.x or Direct3D up to D3D7 (you basically had a set of hardwired pixel operations which you could stack and combine via API calls). Funny enough, the new work graph stuff in D3D12 is also configured in a similar way (by essentially building an AST-like tree of operations via API calls). We really came around full circle ;)

dahart 2y ago

It’s common in lots of modern tools to build shader trees using UI, this is analogous to that. It’s not really fixed function because you can make your tree/shader as big as you want and it has all of the math functions that GLSL has. Fixed function usually means something like a limited fixed set of nodes and you can turn the constant knobs. Unless I missed it somewhere, the two nodes that seem to be missing here are an if() node and a loop() node. I’m guessing a loop() node can be done on the JavaScript side for small loops - it’d be the same as loop unrolling. For big loops or loops with unknown bounds at compile time, it’s not clear if there’s a way with TSL. You can simulate if() behavior using the nodes provided, but you can’t avoid executing both sides of the if(). It’s been a long time since I wrote a three.js shader, so I’m not sure what the “old” example is doing. It looks like it might be a little dynamic code injection to convert from a typical GLSL shader to something three.js needs.

hansworst 2y ago
> big loops or loops with unknown bounds at compile time That’s not allowed in webgl, so I doubt TSL can make it work somehow.
- dahart 2y ago
  What do you mean, and are you sure? It works in ShaderToy. Big loops will happily unroll until the compiler crashes. There’s a standard trick for doing variable length loops (and preventing unrolling): https://shadertoyunofficial.wordpress.com/2017/11/19/avoiding-compiler-crash-or-endless-compilation/ https://shadertoyunofficial.wordpress.com/2017/11/19/avoidin...

araes 2y ago

Some of the other examples in Three.js are quite a bit more complex. https://threejs.org/examples/#webgl_lights_physical https://threejs.org/examples/#webgl_lights_physical Probably just for introductory ease. Although, admittedly, appears to give the impression of nerfed features, rather than easy.