[HN Gopher] Programming SDF animations of Rick and Morty
___________________________________________________________________
Programming SDF animations of Rick and Morty
Author : LordNibbler
Score : 405 points
Date : 2025-02-06 03:30 UTC (19 hours ago)
(HTM) web link (danielchasehooper.com)
(TXT) w3m dump (danielchasehooper.com)
| anotherhue wrote:
| This was a very well structured into to GLSL.
|
| Can anyone comment on what it would be like in Vulkan or
| WebGPU/WebGL?
| jms55 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Wow, 8 months to achieve this animation reflects a sheer amount
| of perseverance.
| joenot443 wrote:
| 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 wrote:
| > 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).
| djmips wrote:
| Very nice post!
|
| For a playlist on topicon YouTube from Inigo Quilez
| https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs...
| Uptrenda wrote:
| im pickle REEE
| mattdesl wrote:
| 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
| kubb wrote:
| WOW. It's hard to express just how impressive this is.
| bobsmooth wrote:
| >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.
| vallode wrote:
| 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.
| p0w3n3d wrote:
| Too happy for me, more like Rick from Dimension J19 Zeta 7...
| worthless-trash wrote:
| He's shader riiiiiick!
| ilumanty wrote:
| Pixel Riiick! Turned myself into a pixel Morty!
| matt3210 wrote:
| How did you include the real voice in a plans text
| message!?!?
| robertlagrant wrote:
| Good news everyone!
| dhooper wrote:
| "Pixel Rick" is too good to not include in the article.
| Added. Thank you.
| slig wrote:
| Does anyone know if the portal animation from Balatro is done in
| the same way?
| jasongill wrote:
| 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 wrote:
| >The Balatro background reminds me (intentionally, I suspect)
| of demoscene effects, I love it
|
| Oh, yes, I love it too!
| hiccuphippo wrote:
| If you have the game, you can unzip it and look at the code.
| slig wrote:
| Thanks, did not know that. I only got the mobile version
| recently.
| q2dg wrote:
| Maybe with Processing would be a bit easier...
| matt3210 wrote:
| What tool is used for embedded code? It's really nice! I like the
| folding of non focused snippets
| dhooper wrote:
| 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 naive 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.
| riddley wrote:
| Super serious question: When will this be a ghostty shader that
| flashes Rick's face every time I hit return?
| metadat wrote:
| 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 wrote:
| I just used the code editor built into that page. Binary search
| is fast, even by hand.
| hwillis wrote:
| 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.
| zombiwoof wrote:
| I bow down to you sir , amazing
| Archit3ch wrote:
| Animations don't render in Edge, but Chrome (and surprisingly
| Safari!) work.
| dhooper wrote:
| Works on Edge for me. Both macOS and windows.
| Townley wrote:
| 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
___________________________________________________________________
(page generated 2025-02-06 23:00 UTC)