#HowToThing#026 — Shader meta-programming techniques (functional composition, higher-order functions, compile-time evaluation, dynamic code generation etc.) to generate animated plots/graphs of 16 functions (incl. dynamic grid layout generation) within a single WebGL fragment shader.
Today's key packages:
https://thi.ng/shader-ast: DSL to write (fully type-checked) shaders directly in TypeScript and later compile them to GLSL, JS (and other target languages, i.e. there's partial support for Houdini VEX and [very] early stage WGSL...)
https://thi.ng/shader-ast-stdlib: Collection of ~220 re-usable shader functions & configurable building blocks (incl. SDFs primitives/ops, raymarching, lighting, matrix ops, etc.)
https://thi.ng/webgl-shadertoy: Minimal scaffolding for experimenting with fragment shaders (supports both normal GLSL or shader-ast flavors/compilation)
If you're new to the Shader-AST approach (highly likely!), this example will again introduce a lot of new concepts, hopefully in digestible manner! Please also always consult the package readmes (and other linked examples) for more background info... There're numerous benefits to this approach (incl. targetting different target langs and compositional & optimization aspects which are impossible to achieve (at least not elegantly) via just string concatenation/interpolation of shader code, as is much more commonplace...)
This example comes fresh off the back of yesterday's new easing function additions (by @Yura), though we're only showing a subset here...
