These are the slides that accompanied my talk on the basics of shaders and GLSL given at Devhub on 2016-05-26

1. Demystifying Shaders
Bruno Opsenica
@BruOps

2. - 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)

3. Basics - Vertices

4. The simplest quad
These coordinates are in
Model Space
They are defined to the
model’s own origin
system
Our vertex shader must
transform these
coordinates to clip space

5. Our Goal:

6. Projection Transform

7. Fragment / Pixel
Shader

8. - 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

9. - 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

10. Functional Imperative
functionalimperative.com
(647) 405-8994
@func_i