Shaders

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

The code below is what generates the graphic you see.

You can paste it into shadertoy.com to play around with it

float color_scale = 1.;
float color_wave_speed = -.25;
float mouse_effect = 0.00005;
float wave_height = 1.5;


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
uv.x *= iResolution.x/iResolution.y; // Make it scale evenly on all resolutions (makes it work on phones)
uv.y *= 2.2; // Set the width

// Generate color 1
vec3 col1_1 = vec3(0, 0, .2);
vec3 col1_2 = vec3(.2, 0, 0.1);
vec3 col_1 = mix(col1_1, col1_2, sin(sin(uv.x + iTime * color_wave_speed) * color_scale));

// Generate color 2
vec3 col2_1 = vec3(0.,1.,1.);
vec3 col2_2 = vec3(1., 0., 1.);
vec3 col_2 = mix(col2_1, col2_2, sin(uv.y + iTime * color_wave_speed) * color_scale);

// Generate waves
float d = sin(uv.y + uv.x - wave_height);
//d += abs(float(uv.y / uv.x) / sin(iTime / 35.) / 10.);

float c = sin((uv.x + iMouse.x * mouse_effect) * 35.) / (sin(((uv.y + iMouse.y * 2. * mouse_effect) * 20.) - iTime) + 3.);
//c = sin(c * 2.);
//float d = c;
//d = step(.1, d);

// Intersect waves
//d = clamp(iTime - d, 0., .1);
d = step(c, d);

// Use color for mask
vec3 col_3 = mix(col_2, col_1, d);

// Output to screen
fragColor = vec4(col_3,1.);
}

What is it?

TLDR It's a function that is called on the GPU with the input of the pixel coordinates, returning color. It's run on a GPU as it can accelerate parallel computing

How to get started

I'll link the resources i used as an introduction to the subject, hence this serves as an OK starting point.

1. Browse shadertoys.com, and be inspired.
2. 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
3. Watch this video Introduction to shaders: Learn the basics! by Barney Codes - youtube.com (a few times) To learn the basics.
4. 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.
5. 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)
6. 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

Minimal file size

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.

Comments

sqlite> SELECT COUNT(comment) FROM comment WHERE page_url = '/Shaders';
0