So much to do, but can't stop watching & hacking on this pseudo fluid sim every now & then... 🤩 Probably will develop this further into a tutorial for https://thi.ng/shader-ast
#ReleaseFriday 🚀 - This week's #ThingUmbrella releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...
https://thi.ng/shader-ast — Added polymorphic syntax sugar versions of various math ops to simplify "self-assignments" aka ops in the form of x = x+ 2, which would in shader AST syntax looked like assign(x, add(x, 2)), now addSelf(x, 2)... See changelog & docs for details of supported ops.
https://thi.ng/shader-ast-stdlib — The "standard library" for https://thi.ng/shader-ast has had several new additions of useful helpers & metaprogramming tools, e.g. a new branches() function (see screenshot) to simplify n-ary A/B testing of params (or debugging of shader outputs) as is commonly done by e.g. visualizing different versions as columns based on fragment position. Other additions include surface normal calculation from a 2D terrain/grayscale texture (e.g. for GIS or fluid sims), float packing/unpacking (to/from 8bit/channel RGBA textures as a lot of mobile devices still don't support float render textures in WebGL)...
https://thi.ng/shader-ast-optimize — This package is used to apply various optimizations on a given shader AST program (or expression). Recursive constant folding has been extended to more ops & built-in functions. There's also a new wrapper function defOptimized() which can be used in place of defMain() to create auto-optimized shader main functions. The new version also has several bug fixes and more tests... See updated readme for examples.
As mentioned in earlier toots, I've also been doing several large rounds/commits of general documentation related updates/revamps, incl. updating all code examples in readmes & API docs to provide all required import statements, writing a new tooling (see below) to extract said code blocks from their original files and export them to their own source files for easier testing/trying them out from the command line. That work is only partially completed (with still hundreds of files to edit/update), but if you've got a clone of the https://thi.ng/umbrella repo, you can already try it out by running yarn tool:tangle (to extract examples from API docs in source files) or yarn doc:readme (to extract from readmes). In both cases, make sure your first build everything via yarn build. The tools will log where each of the examples is written to. Once I'm done, there will be ~800 example files extracted via this process... 💪
I ❤️ where this is going (incl. quite a few incoming additions to https://thi.ng/shader-ast-stdlib) - but still lacking the language to describe what's going on here...
Really getting into reusable #WebComponents lately, incl. this one I worked over the last week for the new thi.ng website: a WebGL based image transition (via displacement mapping), primarily using https://thi.ng/shader-ast & http://thi.ng/webgl...
Always be dogfooding (your tech): Updated my WebGL image transition web component to display blurhash previews before & during image preloading. The hashes are provided as text attribute (~30 characters) and decoded to preview images via https://thi.ng/blurhash...
Always trying to be aware of bandwidth & energy implications (also UX related), this component is 100% lazy and only performs any work when absolutely needed (i.e. during transitions), otherwise is completely idle (not even using a dummy requestAnimationFrame() loop). Images are only starting to be preloaded when the component comes into view (using the IntersectionObserver API)
Other features added:
slideshow mode w/ arbitrary number of images (at least not limited by VRAM), adjustable delay time
choice of easing options/functions for transitions
dynamic loading/replacing of images & updating underlying WebGL textures
Warm fuzzy monday morning feeling after someone sent you a link to a blog post describing your project (https://thi.ng/umbrella) as "the most beautiful open source project I've ever seen" and "it's bloody fantastic"... 🤩🥹
Btw. Related to https://alma.sh (the main topic of the above blog post), here's my own older (less flashy) interactive shader playground here (the basics of which were developed in a YT live stream):