rezmason @rezmason@merveilles.town

Aw, SHIT I've been sitting on it! now the front edge is crumpled 😬

*looks around* where'd I leave Verreciel?

There's lots more going on in the matrix demo— MSDFs, a homemade bloom pass, and color dithering— but I've already rambled quite a bit. So if you've got any questions for me about anything, I'd be happy to answer them 😁, but I'll save the other topics for future threads

What REGL lacks in standard features it makes up for in compositional power. It leans heavily on partial application; if you're drawing many things to the same full screen quad (like when performing GPU computation or special effects), you can shape your code like so:

drawMyGiantQuad(() => {
drawMyCompute();
drawBloom();
drawTint();
copyToScreen();
});

This makes the construction of a special effects system pretty trivial. https://github.com/rezmason/matrix has my whole project laid out in full. 🤓

Say hello to #REGL. http://regl.party/

REGL is a WebGL wrapper that takes a functional approach to drawing things. While ThreeJS and A-Frame's strengths lie in getting your 3D scene/cameras up and running, REGL's strength is in its flexible drawing paradigm.

For instance, my Matrix code has no scene or camera; ThreeJS insists I make both. EffectComposer hides one of each inside it! But REGL only insists that I have a vertex shader, a fragment shader, and the data to feed them with.

ThreeJS has implementations of special effects passes (the "EffectComposer" example) and general purpose GPU computation (the "GPUComputationRenderer" example), but as far as I can tell, EffectComposer doesn't enforce floating point precision, and GPUComputationRenderer expects the browser to support SINGLE precision floats, which, as we've discussed, aren't as widely supported as half floats.

We can stick with ThreeJS, or we can try and do better. No offense! But what else can we try?

This feedback loop of textures is a mode of general purpose GPU computation. We can configure WebGL to do plain old math for us!

But why would we do this— send our homework to the video card, just to crunch some numbers and send them back? Well, some math is very GPU friendly. But also, some math is ONLY used to produce graphics. So we might as well get it all done in one place.

Surprise surprise, my Matrix demo computes the entire effect on the GPU. It's just a picture that redraws itself. 🔄

The good news is, we rarely have to upload float textures to the GPU; normally we just draw things to them. It's just, wow, what a mess, right?

Let's get back to the good stuff. With a half float support, we can represent a wide range of data in a texture. To produce special effects, we basically use half float textures to store our in-between steps, and copy the last one to the screen.

But what if we choose to never draw to the screen? What if we draw from A to B, then back to A, and so on?

Wrong. Apple won't enable WebGL 2.0 yet in any form of Safari.

Why? Well maybe they're revolted by what happened with WebGL 1.0. Maybe they'd rather work on the upcoming replacement API, WebGPU, that's a better fit for modern graphics problems. Maybe they may want to limit WebGL's successful use cases, to bolster their native libraries, the jerks!

At least half precision floats are supported on every browser I can find. But they forgot to specify UPLOADING them! So Safari doesn't support THAT!