Demystifying Shaders

Bruno Opsenica @BruOps

- WebGL Shaders are written in GLSL-ES- High level shading language- C like syntax- Strongly typed!

- We pass them in as strings to our application

Open GL Shading Language (GLSL)

Basics - Vertices

The simplest quadThese coordinates are in

Model SpaceThey are defined to the

model’s own origin

system

Our vertex shader must

transform these

coordinates to clip space

Our Goal:

Projection Transform

Fragment / Pixel Shader

- Vertex Shader acts on each vertex to transform our

points into clip space:- model space -> view space -> clip space- must set vec4 gl_Position;

- Fragment Shader sets the color of each pixel/fragment- must set vec4 gl_FragColor;

- We use uniforms, attributes and varyings to calculate

these values

Summary

- Shader School -

https://github.com/stackgl/shader-school- www.thebookofshaders.com by Patricio Gonzalez Vivo- www.clicktorelease.com/blog/ by Jaume Sanchez- www.shadertoy.com

- Figures taken from:- Real Time Rendering by Adenine-Moller et al- Wikipedia- http://www.codinglabs.net/- OpenGL Documentation

Resources and Further Reading

Functional Imperative

functionalimperative.com(647) 405-8994@func_i