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.
Well done!
nonethewiser 26 days 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 26 days ago [-]
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.
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 26 days 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.
anotherhue 26 days ago [-]
This was a very well structured into to GLSL.
Can anyone comment on what it would be like in Vulkan or WebGPU/WebGL?
jms55 26 days ago [-]
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 26 days ago [-]
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 26 days ago [-]
Ehh from the user's perspective sure, but under the hood it's different.
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 26 days ago [-]
Wow, 8 months to achieve this animation reflects a sheer amount of perseverance.
fatih-erikli-cg 26 days ago [-]
[dead]
metadat 26 days ago [-]
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 26 days ago [-]
I just used the code editor built into that page. Binary search is fast, even by hand.
hwillis 26 days ago [-]
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 26 days ago [-]
He's shader riiiiiick!
ilumanty 26 days ago [-]
Pixel Riiick! Turned myself into a pixel Morty!
dhooper 26 days ago [-]
"Pixel Rick" is too good to not include in the article. Added. Thank you.
matt3210 26 days ago [-]
How did you include the real voice in a plans text message!?!?
robertlagrant 26 days ago [-]
Good news everyone!
kubb 26 days ago [-]
WOW. It's hard to express just how impressive this is.
slig 26 days ago [-]
Does anyone know if the portal animation from Balatro is done in the same way?
jasongill 26 days ago [-]
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 26 days ago [-]
>The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it
Oh, yes, I love it too!
hiccuphippo 26 days ago [-]
If you have the game, you can unzip it and look at the code.
slig 26 days ago [-]
Thanks, did not know that. I only got the mobile version recently.
Townley 26 days ago [-]
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
riddley 26 days ago [-]
Super serious question: When will this be a ghostty shader that flashes Rick's face every time I hit return?
hombre_fatal 25 days ago [-]
The polish on this page is insane.
BoujidStack 25 days ago [-]
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!
matt3210 26 days ago [-]
What tool is used for embedded code? It’s really nice! I like the folding of non focused snippets
dhooper 26 days ago [-]
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.
q2dg 26 days ago [-]
Maybe with Processing would be a bit easier...
Archit3ch 26 days ago [-]
Animations don't render in Edge, but Chrome (and surprisingly Safari!) work.
dhooper 26 days ago [-]
Works on Edge for me. Both macOS and windows.
p0w3n3d 26 days ago [-]
Too happy for me, more like Rick from Dimension J19 Zeta 7...
axismundi 25 days ago [-]
math rick, the arch enemy of pickle rick
zombiwoof 26 days ago [-]
I bow down to you sir , amazing
Uptrenda 26 days ago [-]
im pickle REEE
Rendered at 13:49:07 GMT+0000 (Coordinated Universal Time) with Vercel.
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
Well done!
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).
For a playlist on topicon YouTube from Inigo Quilez https://www.youtube.com/watch?v=0ifChJ0nJfM&list=PL0EpikNmjs...
That's exactly how hand-drawn animation is done! Shader programming is something else. This is a really cool article.
Can anyone comment on what it would be like in Vulkan or WebGPU/WebGL?
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.
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.
The Balatro background reminds me (intentionally, I suspect) of demoscene effects, I love it
Oh, yes, I love it too!
Gives you the ability to make some cool looking effects like fresnel without post-processing filters
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.