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.

Ver­tex shaders

Ver­tex shaders han­dle the pro­cess­ing of in­di­vid­ual ver­tices, which can be thought 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.

Frag­ment shaders

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

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.