Programming SDF animations of Rick and Morty
41 comments
·February 6, 2025joenot443
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.
Well done!
nonethewiser
> 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).
vekatimest
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.
djmips
Very nice post!
For a playlist on topicon YouTube from Inigo Quilez https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs...
vallode
Both the work done here and the quality of explanation, as well as the thoughtful challenges to the reader, are top notch. Thank you for sharing.
bobsmooth
>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.
anotherhue
This was a very well structured into to GLSL.
Can anyone comment on what it would be like in Vulkan or WebGPU/WebGL?
jms55
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.
gamedever
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
jms55
Ehh from the user's perspective sure, but under the hood it's different.
Vulkan you're doing GLSL -> SPIR-V
WebGPU you're doing GLSL -> WGSL -> (HLSL->DXIL) / (MSL->IR) / SPIR-V / GLSL (for the compact backend)
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.
unfixed
Wow, 8 months to achieve this animation reflects a sheer amount of perseverance.
fatih-erikli-cg
[dead]
metadat
Did the author's development process involve a loop of tweaking fractional values or was some kind of editor used?
It seems like the trial-and-error approach to coming up with the 240 lines with appropriate decimal values may be just a tad time intensive.
dhooper
I just used the code editor built into that page. Binary search is fast, even by hand.
hwillis
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.
worthless-trash
He's shader riiiiiick!
ilumanty
Pixel Riiick! Turned myself into a pixel Morty!
dhooper
"Pixel Rick" is too good to not include in the article. Added. Thank you.
matt3210
How did you include the real voice in a plans text message!?!?
robertlagrant
Good news everyone!
kubb
WOW. It's hard to express just how impressive this is.
slig
Does anyone know if the portal animation from Balatro is done in the same way?
jasongill
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
slig
>The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it
Oh, yes, I love it too!
hiccuphippo
If you have the game, you can unzip it and look at the code.
slig
Thanks, did not know that. I only got the mobile version recently.
Townley
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
Really nice work and great post.
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