Just to add, if you want smooth anti-aliased edges without the second super-sampling pass, you can use standard derivatives in your SDFs. Basically, replacing your step functions with 'aastep', e.g.
This is awesome. Shader devs are next level; it’s a type of tight, repetitive iteration which is super different from the webby, protocoly, applicationy development that many of us are used to. There’s something really satisfying about changing a float, pressing shift-enter, and then immediately seeing a result.
> Shader devs are next level; it’s a type of tight, repetitive iteration which is super different from the webby, protocoly, applicationy development that many of us are used to. There’s something really satisfying about changing a float, pressing shift-enter, and then immediately seeing a result.
Is working with the javascript canvas or abstractions on it like p5.js similar to what you're describing? Im not sure if you're talking about graphics programming (some familiarity with) or more specifically working with GPU shaders (no familiarity).
Looping over a canvas's framebuffer is a similar experience, just obviously a lot less performant. You also get easy access to the rest of your code's state/memory compared to a GPU shader, which can't have its own persistent state and needs variables explicitly allocated and passed into it.
>I did find one trick that sped up the trial and error process: I flashed my reference image of Rick on top of the preview so I could compare my drawing to the original while I was changing the code.
That's exactly how hand-drawn animation is done! Shader programming is something else. This is a really cool article.
Pretty much the same. Both Vulkan and WebGL can use GLSL directly (well, GLSL -> SPIR-V for Vulkan). WebGPU technically can't if you run it in a browser, but native WebGPU implementations can take GLSL, you can transpile, and finally you could just write WGSL as it's basically the same as GLSL, just with more Rust-inspired syntax rather than C-inspired.
Technically WebGPU and Metal support GLSL exactly as Vulkan supports it. You transpile. there is no difference except maybe you're used to that step with Vulkan and not with the others
Then the driver takes GLSL/DXIL/Metal IR/SPIR-V/etc and produces it's own bytecode. Different copies of LLVM are involved a few different times in different places. It's a complex and frankly fairly crappy pipeline.
When I have done things like this, I just grab a slider or input and wire it to a uniform. Uniforms are passed into the shader and can be updated without recompiling.
I think the Balatro background is a shader but the technique and effect it gives are different - this one has a static "ring" that shrinks as it moves inward to the horizon, the Balatro one has a fluid motion to it.
The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it
Another application of GLSL/SDL: you can make custom shader materials for yourself in ThreeJS using the ShaderMaterial. You write the GLSL code in a string within the material and it’ll be applied to the mesh the material is attached to
Gives you the ability to make some cool looking effects like fresnel without post-processing filters
Shader programming is next level! It’s incredible how much effort and attention to detail goes into creating these animations. The process is so much more hands on compared to traditional development!
I made the live shader editor myself. It uses CodeMirror to display the code, and a webgl canvas for the preview.
Took some work to support having lots of editors on the page. If you do the naïve thing and create a webgl canvas for every one and instantiate all CodeMirror editors at page load time, the whole page would freeze for several seconds. So I create the editors as they are about to be scrolled into view. I also create only one webgl canvas, and when a preview is paused I cache the preview to an img, and move the canvas to the newly active editor instance.
Just to add, if you want smooth anti-aliased edges without the second super-sampling pass, you can use standard derivatives in your SDFs. Basically, replacing your step functions with 'aastep', e.g.
https://github.com/glslify/glsl-aastep