UN­DER­STAND­ING GRAPHIC SHADERS

net magazine - - PROJECTS -

GLSL (OpenGL Shad­ing Lan­guage) shaders com­pile and run on a wide range of plat­forms. You can ap­ply what you learn to any en­vi­ron­ment that uses OpenGL, OpenGL ES or We­bGL. This means you can use this knowl­edge for web­sites, Three.js, iOS games, in­ter­ac­tive in­stal­la­tions, Unity, openFrame­works, Pro­cess­ing and many oth­ers.

The graph­ics pipe­line

Mul­ti­ple shaders work to­gether in the graph­ics pipe­line. Some are pro­gram­mable, some are locked to the hard­ware. We’re most in­ter­ested in two shaders in the pipe­line: ver­tex shaders and frag­ment shaders. These are the core of the OpenGL Shad­ing Lan­guage and the We­bGL graph­ics pipe­line.

Frag­ment Shaders

This shader, which is typ­i­cally the last in the pipe­line, in­structs each frag­ment or pixel which colour it should be. It does this by set­ting a value for fragColor in the code’s main func­tion. It’s where we’ll cre­ate our photo fil­ters, an­i­ma­tions, ef­fects and so much more, by ma­nip­u­lat­ing the colours of the pixels.

Ver­tex Shaders

Ver­tex shaders han­dle the pro­cess­ing of in­di­vid­ual ver­tices, which can be though of as points on the tri­an­gles that form a mesh. Ver­tex shaders are used to trans­form the at­tributes of ver­tices from their orig­i­nal space to the dis­play space. This in­cludes at­tributes such as colour, tex­ture, po­si­tion and di­rec­tion. These are the fo­cus of this tu­to­rial.

Shaders can be used to cre­ate in­cred­i­ble ef­fects in real time.

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.