5 ms·
Programming SDF animations of Rick and Morty
- slig 2y agoDoes anyone know if the portal animation from Balatro is done in the same way?
- jasongill 2y agoI 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 2y ago>The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it Oh, yes, I love it too!
- hiccuphippo 2y agoIf you have the game, you can unzip it and look at the code.
- slig 2y agoThanks, did not know that. I only got the mobile version recently.
- anotherhue 2y agoThis was a very well structured into to GLSL. Can anyone comment on what it would be like in Vulkan or WebGPU/WebGL?
- jms55 2y agoPretty 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 2y agoTechnically 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 2y agoEhh 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 2y agoWow, 8 months to achieve this animation reflects a sheer amount of perseverance.
- fatih-erikli-cg 2y ago[dead]
- joenot443 2y agoThis 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 2y ago> 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 2y agoLooping 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 2y agoVery nice post! For a playlist on topicon YouTube from Inigo Quilez https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs2CYUMePMGh3IjjP4tQlYqji&index=5 https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs...
- Uptrenda 2y agoim pickle REEE
- mattdesl 2y agoReally 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 https://github.com/glslify/glsl-aastep
- deleted 2y ago[deleted]
- kubb 2y agoWOW. It's hard to express just how impressive this is.
- bobsmooth 2y ago>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 2y agoBoth 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 2y agoToo happy for me, more like Rick from Dimension J19 Zeta 7...
- worthless-trash 2y agoHe's shader riiiiiick!
- ilumanty 2y agoPixel Riiick! Turned myself into a pixel Morty!
- dhooper 2y ago"Pixel Rick" is too good to not include in the article. Added. Thank you.
- matt3210 2y agoHow did you include the real voice in a plans text message!?!?
- robertlagrant 2y agoGood news everyone!
- q2dg 2y agoMaybe with Processing would be a bit easier...
- matt3210 2y agoWhat tool is used for embedded code? It’s really nice! I like the folding of non focused snippets
- dhooper 2y agoI 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.
- riddley 2y agoSuper serious question: When will this be a ghostty shader that flashes Rick's face every time I hit return?
- metadat 2y agoDid 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.
- zombiwoof 2y agoI bow down to you sir , amazing
- Archit3ch 2y agoAnimations don't render in Edge, but Chrome (and surprisingly Safari!) work.
- dhooper 2y agoWorks on Edge for me. Both macOS and windows.
- Townley 2y agoAnother 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
- axismundi 2y agomath rick, the arch enemy of pickle rick
- BoujidStack 2y agoShader 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!
- hombre_fatal 2y agoThe polish on this page is insane.