Programming SDF animations of Rick and Morty | Hacker News Reader

Programming SDF animations of Rick and Morty

danielchasehooper.com

505 pointsLordNibbler39 comments

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

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!

> 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.

Very nice post!

For a playlist on topicon YouTube from Inigo Quilez https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs...

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.

>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.

This was a very well structured into to GLSL.

Can anyone comment on what it would be like in Vulkan or WebGPU/WebGL?

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

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.

Wow, 8 months to achieve this animation reflects a sheer amount of perseverance.

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.

I just used the code editor built into that page. Binary search is fast, even by hand.

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.

He's shader riiiiiick!

Pixel Riiick! Turned myself into a pixel Morty!

How did you include the real voice in a plans text message!?!?

Good news everyone!

"Pixel Rick" is too good to not include in the article. Added. Thank you.

WOW. It's hard to express just how impressive this is.

Does anyone know if the portal animation from Balatro is done in the same way?

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

>The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it

Oh, yes, I love it too!

If you have the game, you can unzip it and look at the code.

Thanks, did not know that. I only got the mobile version recently.

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

Super serious question: When will this be a ghostty shader that flashes Rick's face every time I hit return?

The polish on this page is insane.

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!

What tool is used for embedded code? It’s really nice! I like the folding of non focused snippets

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.

Maybe with Processing would be a bit easier...

Animations don't render in Edge, but Chrome (and surprisingly Safari!) work.

Works on Edge for me. Both macOS and windows.

Too happy for me, more like Rick from Dimension J19 Zeta 7...

math rick, the arch enemy of pickle rick

I bow down to you sir , amazing

im pickle REEE

Reply on news.ycombinator.com