Karsten Schmidt<p><a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HowToThing</span></a> #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.</p><p>Today's key packages:</p><p>- <a href="https://thi.ng/shader-ast" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/shader-ast</span><span class="invisible"></span></a>: 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...)<br>- <a href="https://thi.ng/shader-ast-stdlib" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/shader-ast-stdlib</span><span class="invisible"></span></a>: Collection of ~220 re-usable shader functions & configurable building blocks (incl. SDFs primitives/ops, raymarching, lighting, matrix ops, etc.)<br>- <a href="https://thi.ng/webgl-shadertoy" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/webgl-shadertoy</span><span class="invisible"></span></a>: Minimal scaffolding for experimenting with fragment shaders (supports both normal GLSL or shader-ast flavors/compilation)</p><p>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...)</p><p>This example comes fresh off the back of yesterday's new easing function additions (by <span class="h-card" translate="no"><a href="https://mastodon.world/@Yura" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>Yura</span></a></span>), though we're only showing a subset here...</p><p>Demo:<br><a href="https://demo.thi.ng/umbrella/shader-ast-easings/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">demo.thi.ng/umbrella/shader-as</span><span class="invisible">t-easings/</span></a><br>(Check the console to view the generated GLSL shader)</p><p>Source code:<br><a href="https://github.com/thi-ng/umbrella/tree/develop/examples/shader-ast-easings/src/index.ts" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/thi-ng/umbrella/tre</span><span class="invisible">e/develop/examples/shader-ast-easings/src/index.ts</span></a></p><p>If you have any questions about this topic or the packages used here, please reply in thread or use the discussion forum (or issue tracker):</p><p>github.com/thi-ng/umbrella/discussions</p><p><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThingUmbrella</span></a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebGL</span></a> <a href="https://mastodon.thi.ng/tags/Shader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Shader</span></a> <a href="https://mastodon.thi.ng/tags/GLSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GLSL</span></a> <a href="https://mastodon.thi.ng/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FunctionalProgramming</span></a> <a href="https://mastodon.thi.ng/tags/GraphicsProgramming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GraphicsProgramming</span></a> <a href="https://mastodon.thi.ng/tags/Plot" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Plot</span></a> <a href="https://mastodon.thi.ng/tags/CodeGeneration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodeGeneration</span></a> <a href="https://mastodon.thi.ng/tags/DSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DSL</span></a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.thi.ng/tags/Tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tutorial</span></a></p>