Frickin' shaders with frickin' laser beams
acko.net
acko.net
- It looks awesome
- It doesn't hijack scrolling, it reacts to it, but scrolling down scrolls down, without pausing or going left and right or any kind of weirdness
- It is a large page, but not that large. In fact the two screenshots are the biggest thing on the page, the entire animation (more like a demo) on top is only 168 kB (+ the streaming music if you press play).
- If you don't care about all the fluff, you just have a blog post, you actually need to do something (scroll up) of you want to see it.
- The page is usable with and without an ad blocker. No annoyances like popups.
I used to spend an inordinate amount of time watching the 3D Pipes screensaver, wishing there was a mode that would travel along the pipes after they are drawn. This is like that but mostly its own cool thing.
Very cool tune too!
Not much surprise then that they were made by the same person [2]
1. https://www.youtube.com/watch?v=Bhm7uFv4ZOQ 2. https://acko.net/blog/avs
I'm trying to avoid spoilers, so I'm obfuscating more specific hints:
# A good first step (very mild spoiler)
echo Q2hlY2sgdGhlIGNvbnNvbGUhCg== | base64 -d
# A direct hint about where to look
echo RmluZCB0aGUgaGlkZGVuIGFjaGlldmVtZW50cygpCg== | base64 -d
# A very spoilery JS statement that has side effects
echo YWNoaWV2ZW1lbnQoJ2NodHInKQo= | base64 -dShaders are one of those topics that you can easily get lost in. It was one of my more recent "you don't know what you don't know" topics. The idea that your code will run one time for each pixel on your screen, 60-144x a second (!), is mind-boggling. It's still hard for me to wrap my head around it sometimes and when I finally write something that compiles it feels like magic every time.
That means if you had a shader like:
if (pixelIndex % 2) {
longFunctionA();
} else {
longFunctionB();
}
* Core might not be the exact right term, Nvidia calls them SMs and other GPU vendors have different names.
Whenever I try to learn WebGL (or similar technology) I give up after a while. In my head I imagine it as if the entire automotive industry was only aimed at F1 race cars, and people who want to do practical day-to-day things with cars only had F1 tech to work with, including the cost and complexity.
If you prefer to do it more "from scratch", it's not terribly difficult to get some textured triangles on the screen using WebGL. There are an incredible amount of resources on OpenGL and WebGL out there. Many focus on getting started by drawing a single, flat-shaded triangle. From there, you can add on more code as needed to get different results - a moving camera, some basic lighting, texturing, etc.
Having done a decent amount of games development, and a little bit of shader coding, the pain points fixed by the approach in the article are significant. Really impressive stuff.
I didn't even realize it was going to be TypeScript until much later in the article too, that was the cherry on top :)
Many times it would be better to have a simple way to express ideas, not having to deal with the most performant systems, which might take a lot more figuring out or issues with debugging your shaders.
For toy apps, sure. For professional apps or games, abso-frickin-lutely not. Shader compilation jank is still an annoying issue in even recent games, and even having the ability_ to define arbitrary shaders at any point is such a huge footgun that I'd never let it past code review.