net

PROJECTS
Graphic shaders

DIFFERENT SHADES

OPTIONS

Tex ture dat a

To grab specific pixel data for a loaded texture we use the

following:

vec4 col = texture(iChannel0,uv);

iChannel is the variable holding the texture data, uv is a two

dimensional variable specifying the fragment or pixel to obtain

data for. You could grab data for the current pixel, or other pixels,

like we would in a blur effect. The flexibility of this enables us to

use textures in combination or as non-visual data. For example,

you could load a texture loaded with audio data into the pixels and

use that as source for an effect. The possibilities are endless.

Uniforms

Each render tool will have its own little nuances, such as built-in

uniforms (variables) passed to the fragment shader, for things

like Time or Resolution. Shadertoy uses iTime, iResolution and

iMouse, for example. These are super easy to port across other

implementations such as three.js or Unity or your own custom

WebGL because most are standard and have only slight variations

in name.

1RUPDOLVHGYDOXHV

Often in shaders we work with normalised values. This means

they range from 0.0 to 1.0. They can be more precise (more digits

past the decimal), but they have this range. RGBA values are

normalised. We also typically use screen resolution and fragment

position to create normalised uv or position values. For example:

vec2 uv = fragCoord.xy / iResolution.xy;

Loading textures into shaders can open a world of possibilities

keeping them separated into their rgb components

using a vec3.

Using two for loops, we are simply adding our xy

fragment as usual with the slight variation of adding

i and j inside the loop (as offsets to the position),

and getting the corresponding texture value. We

normalise this value and add it to the total, so we

end up with a total of all rgb values inside the ‘Box’.

Using length times width in the form of (2*blur+1)

* (2*blur+1) we get the area of the box. I used the pow

function to show you how it works, in the form of

pow(value, exponent). Then we calculate the average

by dividing the total variable by the area.

Challenge: Try targeting specific channels of the

rgb to blur. Can you blur out the blue channel only?

Try combining some of the previous colour effects

with this one.

2856(&21',0$*(())(&7Ɯ9,*1(77(

Another invaluable post-processing effect is a simple

vignette. This can be great when applied subtly in

photos or film to create a more polished look and

draw focus to your subject. Give the code below a try:

float falloff = 0.5;

float strength = 0.5;

void mainImage( out vec4 fragColor, in vec2 fragCoord ){

vec2 uv = fragCoord.xy/iResolution.xy;

vec4 col = texture(iChannel0, uv);

float d = distance(uv, vec2(0.5));

col *=smoothstep(0.8, falloff * 0.8, d * (strength +

falloff));

fragColor = col;

}

You should now see a lovely vignette effect applied

on your image.

We added new falloff and strength variables to the

top of the code; you can season these to taste. We

also used a new function called distance, which

simply returns the distance between two points. In

this case, we wanted to know the distance from the

current pixel uv (normalised between 0.0 and 1.0)