TechHub

Karsten SchmidtAccidental atmospheric Rayleigh scattering (<a href="https://en.wikipedia.org/wiki/Rayleigh_scattering" rel="nofollow noopener" translate="no" target="_blank">https://en.wikipedia.org/wiki/Rayleigh_scattering</a>) — feels like sunrise from ~50secs...<a href="https://mastodon.thi.ng/tags/Umbra" class="mention hashtag" rel="nofollow noopener" target="_blank">#Umbra</a> <a href="https://mastodon.thi.ng/tags/Art" class="mention hashtag" rel="nofollow noopener" target="_blank">#Art</a> <a href="https://mastodon.thi.ng/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#GenerativeArt</a> <a href="https://mastodon.thi.ng/tags/Gradients" class="mention hashtag" rel="nofollow noopener" target="_blank">#Gradients</a> <a href="https://mastodon.thi.ng/tags/Color" class="mention hashtag" rel="nofollow noopener" target="_blank">#Color</a> <a href="https://mastodon.thi.ng/tags/Rec2020" class="mention hashtag" rel="nofollow noopener" target="_blank">#Rec2020</a> <a href="https://mastodon.thi.ng/tags/Video" class="mention hashtag" rel="nofollow noopener" target="_blank">#Video</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/Umbra" class="mention hashtag" rel="nofollow noopener" target="_blank">#Umbra</a>(Revisiting an unoptimized old code sketch, semi-fluid screen recording only... Love the contrast between soft gradients and hard edges and the unexpected emergence of shapes [and their disappearance]...)(Made with <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a>)<a href="https://mastodon.thi.ng/tags/Art" class="mention hashtag" rel="nofollow noopener" target="_blank">#Art</a> <a href="https://mastodon.thi.ng/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#GenerativeArt</a> <a href="https://mastodon.thi.ng/tags/Gradients" class="mention hashtag" rel="nofollow noopener" target="_blank">#Gradients</a> <a href="https://mastodon.thi.ng/tags/Color" class="mention hashtag" rel="nofollow noopener" target="_blank">#Color</a> <a href="https://mastodon.thi.ng/tags/Rec2020" class="mention hashtag" rel="nofollow noopener" target="_blank">#Rec2020</a> <a href="https://mastodon.thi.ng/tags/Video" class="mention hashtag" rel="nofollow noopener" target="_blank">#Video</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a>

Karsten SchmidtNew work: <a href="https://mastodon.thi.ng/tags/ALLUVION" class="mention hashtag" rel="nofollow noopener" target="_blank">#ALLUVION</a>Over the past two months I've been actively revisiting, updating/extending and now close to finishing this 1.5 year long journey... The actual journey has been much longer, been toying with (faux) fluid sims since ~2007...A 50 second preview of one of my fave variations, best enjoyed fullscreen... Tried to achieve some molten, dichroic/irridescent glass & oilfilm aesthetics here, but there're over a dozen of other very different routes/styles possible too, with 25+ parameters to tweak the simulation and look & feel...Made with <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> & <a href="https://thi.ng/shader-ast-stdlib" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast-stdlib</a><a href="https://mastodon.thi.ng/tags/Art" class="mention hashtag" rel="nofollow noopener" target="_blank">#Art</a> <a href="https://mastodon.thi.ng/tags/FluidSim" class="mention hashtag" rel="nofollow noopener" target="_blank">#FluidSim</a> <a href="https://mastodon.thi.ng/tags/FlowField" class="mention hashtag" rel="nofollow noopener" target="_blank">#FlowField</a> <a href="https://mastodon.thi.ng/tags/Noise" class="mention hashtag" rel="nofollow noopener" target="_blank">#Noise</a> <a href="https://mastodon.thi.ng/tags/Turbulence" class="mention hashtag" rel="nofollow noopener" target="_blank">#Turbulence</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/GLSL" class="mention hashtag" rel="nofollow noopener" target="_blank">#GLSL</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#GenerativeArt</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a>

Karsten SchmidtUploaded a new demo/example showing how to perform GPU-side data reductions using <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> & <a href="https://thi.ng/webgl" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/webgl</a> multi-pass pipeline. Arbitrary reduction functions supported. If there's interest, this could be expanded & packaged up as library... 90% of this example is boiler plate, 9.9% benchmarking & debug outputs...Demo: <a href="https://demo.thi.ng/umbrella/gpgpu-reduce/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/gpgpu-reduce/</a>Source code: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/gpgpu-reduce/src/index.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/gpgpu-reduce/src/index.ts</a>Readme w/ benchmark results: <a href="https://github.com/thi-ng/umbrella/tree/develop/examples/gpgpu-reduce" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/tree/develop/examples/gpgpu-reduce</a>Related discussion: <a href="https://github.com/thi-ng/umbrella/issues/478" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/issues/478</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/GPGPU" class="mention hashtag" rel="nofollow noopener" target="_blank">#GPGPU</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Karsten SchmidtSo 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 <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a><a href="https://mastodon.thi.ng/tags/ALLUVION" class="mention hashtag" rel="nofollow noopener" target="_blank">#ALLUVION</a> <a href="https://mastodon.thi.ng/tags/Animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Animation</a> <a href="https://mastodon.thi.ng/tags/FlowField" class="mention hashtag" rel="nofollow noopener" target="_blank">#FlowField</a> <a href="https://mastodon.thi.ng/tags/FluidSim" class="mention hashtag" rel="nofollow noopener" target="_blank">#FluidSim</a> <a href="https://mastodon.thi.ng/tags/Noise" class="mention hashtag" rel="nofollow noopener" target="_blank">#Noise</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/GLSL" class="mention hashtag" rel="nofollow noopener" target="_blank">#GLSL</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#GenerativeArt</a>

Karsten SchmidtDirect outcome from a recent GitHub discussion with <a href="https://mastodon.gamedev.place/@made" class="u-url mention" rel="nofollow noopener" target="_blank">@made</a>, a new <a href="https://thi.ng/webgl" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/webgl</a> multi-pass example to interactively draw to & read from an offscreen render texture using shaders directly written in <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> via <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> and using high-level operators (gaussian blur & Porter-Duff alpha compositing) from <a href="https://thi.ng/shader-ast-stdlib" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast-stdlib</a>...Demo (draw in the left/first square): <a href="https://demo.thi.ng/umbrella/webgl-texture-paint/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/webgl-texture-paint/</a>Source: <a href="https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts" rel="nofollow noopener" translate="no" target="_blank">https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-texture-paint/src/index.ts</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/Colors" class="mention hashtag" rel="nofollow noopener" target="_blank">#Colors</a>

Karsten Schmidt<a href="https://mastodon.thi.ng/tags/ReleaseFriday" class="mention hashtag" rel="nofollow noopener" target="_blank">#ReleaseFriday</a> 🚀 - This week's <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> releases are mainly related to ShaderAST & ongoing repo-wide documentation updates of all 190 packages...<a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> — 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.<a href="https://thi.ng/shader-ast-stdlib" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast-stdlib</a> — The "standard library" for <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> 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)...<a href="https://thi.ng/shader-ast-optimize" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast-optimize</a> — 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 <a href="https://thi.ng/umbrella" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/umbrella</a> 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... 💪<a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/Documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#Documentation</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a>

Karsten SchmidtRevisiting an old unfinished project with new eyes & new colors... <a href="https://mastodon.thi.ng/tags/ALLUVION" class="mention hashtag" rel="nofollow noopener" target="_blank">#ALLUVION</a> <a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/Generative" class="mention hashtag" rel="nofollow noopener" target="_blank">#Generative</a> <a href="https://mastodon.thi.ng/tags/Art" class="mention hashtag" rel="nofollow noopener" target="_blank">#Art</a> <a href="https://mastodon.thi.ng/tags/FluidSim" class="mention hashtag" rel="nofollow noopener" target="_blank">#FluidSim</a> <a href="https://mastodon.thi.ng/tags/Colors" class="mention hashtag" rel="nofollow noopener" target="_blank">#Colors</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a>

Karsten SchmidtAlways 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 <a href="https://thi.ng/blurhash" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/blurhash</a>...<a href="https://demo.thi.ng/umbrella/webgl-transition/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/webgl-transition/</a>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<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.thi.ng/tags/LazyLoading" class="mention hashtag" rel="nofollow noopener" target="_blank">#LazyLoading</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Transition" class="mention hashtag" rel="nofollow noopener" target="_blank">#Transition</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Karsten SchmidtReally getting into reusable <a href="https://mastodon.thi.ng/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> 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 <a href="https://thi.ng/shader-ast" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/shader-ast</a> & <a href="http://thi.ng/webgl" rel="nofollow noopener" translate="no" target="_blank">http://thi.ng/webgl</a>...<a href="https://demo.thi.ng/umbrella/webgl-transition/" rel="nofollow noopener" translate="no" target="_blank">https://demo.thi.ng/umbrella/webgl-transition/</a>- the transition is currently linked to mouse over or touch events, but will be more flexible - the layout is responsive (single column on mobile, two columns on larger screens) - some of the displacement map images were created with <a href="https://shadergraph.thi.ng" rel="nofollow noopener" translate="no" target="_blank">https://shadergraph.thi.ng</a>(cc <a href="https://mastodon.world/@Yura" class="u-url mention" rel="nofollow noopener" target="_blank">@Yura</a>)<a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.thi.ng/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mastodon.thi.ng/tags/Transition" class="mention hashtag" rel="nofollow noopener" target="_blank">#Transition</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#TypeScript</a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Karsten SchmidtWarm fuzzy monday morning feeling after someone sent you a link to a blog post describing your project (<a href="https://thi.ng/umbrella" rel="nofollow noopener" translate="no" target="_blank">https://thi.ng/umbrella</a>) as "the most beautiful open source project I've ever seen" and "it's bloody fantastic"... 🤩🥹<a href="https://polar.sh/emilwidlund/posts/alma-an-experimental-playground-for-generative-graphics" rel="nofollow noopener" translate="no" target="_blank">https://polar.sh/emilwidlund/posts/alma-an-experimental-playground-for-generative-graphics</a>Btw. Related to <a href="https://alma.sh" rel="nofollow noopener" translate="no" target="_blank">https://alma.sh</a> (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):<a href="https://shadergraph.thi.ng/" rel="nofollow noopener" translate="no" target="_blank">https://shadergraph.thi.ng/</a><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener" target="_blank">#ThingUmbrella</a> <a href="https://mastodon.thi.ng/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://mastodon.thi.ng/tags/ShaderAST" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderAST</a> <a href="https://mastodon.thi.ng/tags/ShaderGraph" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShaderGraph</a> <a href="https://mastodon.thi.ng/tags/WebGL" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebGL</a> <a href="https://mastodon.thi.ng/tags/ScreenRecording" class="mention hashtag" rel="nofollow noopener" target="_blank">#ScreenRecording</a>

Recent searches

Search options

Administered by:

Server stats:

#shaderast