blog.node5.net
#Instagram4nerds
Shaders
Created: 2025-01-04 | Modified: 2025-01-10
My findings while playing around with fragment shaders
Shader eye candy
if you do not see the image above, check if your browser supports webgl, at: caniuse.com/webgl
I'll link the resources i used as an introduction to the subject, hence this serves as an OK starting point.
How to get started
- Browse shadertoys.com, and be inspired.
- Step 2 realise that it's coded in the forbidden tounge of black magic "enchantment book" moon runes. That some people call... math queue ominous thunder effect
- Watch this video Introduction to shaders: Learn the basics! by Barney Codes - youtube.com (a few times) To learn the basics.
- Realise the ancient magic is is not reserved for only wizards and high elves alike. On the contrary like with most things, you'll find that it's quite surmountable, if you break the subject matter down into bite sized pieces.
- On this note i present to you a cheat sheets that lists the functions available to you: A cheat sheet of which functions can be called - http://learnwebgl.brown37.net (see page 4)
- The grind - Put in the legwork playing around with this newfound knowledge. This part is the hardest, and most frustratin, as you put in a lot of work into making the most basic of things. But if you keep it up, you'll eventually make something that looks halfway decent.
After a few days of playing around using the knowledge gained from the video linked above, i was able to code what you see above. Albeit i have a background as a developer. All this is to say, tamper you expectations before getting into the subject matter, it takes some time before you make something halfway decent, and i still am not able to bring all my ideas to fruition.
You'll often times find that you accidentally create something interesting, just by faffing about with mathematical functions. On that note, you can
--> view my shaders here <--
Embed on page
I use the JS libary shader-web-background by xemantic - github.com to embed shaders on my website as seen above. It's also utilized on my landing page in the background node5.net. So masive shout out to xemantic, go buy them a tea
As xemantic also points out, one of the awesome things about shaders instead of e.g. video is the miniscule file size.
To put it into perspective the gif shown above is 236 kilo bytes
While the HTML, CSS, and JS and shader reuqired to produce said page is a mere 16.08 kilo bytes
That's a 14.67x difference. This arguably just shows how horrible the GIF format is for anything but the simplest
of things, given it's lack of interframe compression. A GIF meerly consists of sequential images, as opposed to video
that uses advanced math to bring down the file size.
Shaders on the otherhand scale to be crisp on any device. Furthermore they can be interactive, morphing with user input.
