Is there a #Fediverse software that able to show #3D content? I talking about rendering STLs, with uploading previews together with #STL file. It can be done using raw #WebGL or Three.js as a way to render it.
And the solution was not to try to find intersections between Bézier curves and circles (hard), but instead to make the thickness of the curve vary to shape a decent arrow head (easy).
For anybody thats interested, I've extracted and published my little WebGL CRT-filter renderer. I'm using it on my own personal site for some CGA/EGA visualizations, but I'd be really interested if anybody uses it to do something else cool. 🍻
I know that CRT-like shaders for pixel art are "spicy" for some. But I've been making a more progress on a little simple CRT-lite sandbox for WebGL. I think it looks pretty dope at 1440p (or even 4k). It also fades itself out if the resolution drops below 1080p to avoid moire.
Most of it is configurable—the monitor distortion, scan-lines, vignetting and gpu horizontal blur. After a few more tweaks, I'll be carving it off into its own repo to open source it. #RetroComputing#RetroGaming#WebGL
Someone asked why we don't see any popular video games being made for WebGL, and it got me thinking that I need to make a video game with webGL or webGPU.
It should be something simple so I can get it done before losing interest. It should take advantage of the platform; multiplayer, or fast casual pick up and play for example. Bonus points if it's fun to play.
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...
After a long time without any new fancy stuff, behold: the edgescreenify decorator! Can be applied to any kind of point symbol to make it stick to the sides of the viewport.
I've been meaning to start writing up blog posts based on responses to common questions in three.js Slack/Discord/Forums, so here's a start — an introduction to image formats in used in WebGL and WebGPU applications, including WebP, AVIF, and KTX2.
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