net

PROJECTS
Graphic shaders

GRAPHIC SHADERS

The most basic shader could simply pass through

the current colour values of an image and do no

manipulation to the pixels. How we manipulate the

pixel value from there is the effect.

285),567%/856+$'(5Ɯ$6,03/(

BOX BLUR

In the previous article we did some nice effects with

images and colour. Another great effect to add to our

toolbox is image blur. Blurring images can be used

for anything from emulating camera focus to depth

of field effects. Let’s jump in and make a blur effect.

In order to see our shader, we need to render it.

As in previous articles, we’ll make use of a WebGL

rendering tool, such as Shadertoy. It gives us a nice

code window to practise in and a render window to

see our work.

1. To get sta r ted, go to https://www.shadertoy.com/
   new in a browser that supports WebGL.


2. Just below the code window, you will see four
   boxes. Click on the first one labelled Channel0.

AGE FX WITH

GRAPHIC SHADERS

Richard Mattkacontinues to explore graphic shaders, focusing on blurs,

vignettes and visual FX in this third tutorial of an ongoing series

Graphic shaders enable a wide range of effects

by working directly with the graphics hardware

of devices. In the previous articles, we learned what

shaders are and created our first ones. We also

learned about post-processing, making greyscale and

using sepia tones.

This tutorial is going to continue delving into

processing images. It’s still just scratching the

surface of what can be done but will give you

something practical you can use. As always, my

primary goal is to get you inspired so you can start

creating your own effects as soon as possible.

,0$*(3267352&(66,1*

Image processing is everywhere. Instagram filters,

blur effects, transformations and colour-grading for

film are just a few examples. These effects can also

work with video, since it’s simply a stream of images.

We are working with fragment shaders, the last

shader in the graphics pipeline. The function of this

shader is to take in the position of the fragment

(pixel) and return the colour it should be.

ABOUT THE AUTHOR

RICHARD MATTKA

w: http://richardmattka.com

t: @synergyseeker

job: Interactive director,

designer, developer

areas of expertise:

Shaders, VFX, WebGL