net

(Brent) #1

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)
Free download pdf