1. Carl Johan Gribel, PhD student (cjgribel@cs.lth.se)
EDA221 Introduction to Computer Graphics
Seminar Shaders I
Carl Johan Gribel, PhD student

2. Today OpenGL Shader Language (GLSL) Shading theory
Assignment 3: (you guessed it) writing shaders!
assg2
some had problems
it can be a bit frustrating wating for your triangles to appear, or for normals to point in the right direction and so on
but I think it’s a really useful exercise
this lab: shaders
so far you have created objects from parametric equations, arranged them into scene graphs, and animated them using splines -- now it’s time to work on their appearance.
and we do that using separate programs called shaders.

3. OpenGL Shading Language (GLSL)
C like language for programming GPUs
Basically the same language for vertex and fragment shaders/programs
We’re going to use GLSL, a C-like language which is one of the major shader languages, the other one being HLSL, which is part of DirectX.

4. Rendering pipeline Vertices Vertex Shader Rasterizer Fragment Shader
There are two main types of shades.
vertex shaders are used to position the vertices of each triangle
and fragment shaders are used to shade each pixel of the triangle
Framebuffer

5. Simple Vertex Shader
uniform mat4 WorldViewProjection; attribute vec3 Vertex, Color; varying vec4 varying_color; void main() { gl_Position = WorldViewProjection *
vec4(Vertex.xyz, 1.0);
varying_color = Color; }
gl_Position
This is a simple vertex shader.
We’re going to break it down, piece by piece, but the ultimate goal is to put the vertex somewhere using the gl_Position call.
varying
In this shader ther’e a variable for color that will vary over the interior of the triangle,

6. Simple Fragment Shader
varying vec4 varying_color; void main() { gl_FragColor = varying_color; }
The ultimate goal of a fragment shader is to set the color of a fragment or pixel, and this is done by setting gl_FragColor like this

7. GLSL Types
Types float, int, bool, vec2, vec3, vec4, mat3 … sampler2D, samplerCube …
Type qualifiers const compile-time constant uniform constant across primitive attribute vertex shader per vertex input varying interpolated data from vertex to pixel
most common types, including vectors and matrices.
sampler-types are used to sample different kinds if textures
an important addition though is type qualifiers
they declare the scope of each variable.
uniforms are constant for the entire ptimitive, this can be transformatin matrices for instance
attributes are per-vertex information, such as the untransfomred position itself, normals, color etc
varying are variables that are set in the vertex shader, so per vertex, and then they will vary over triangle, and be avaiable in the fragment shader

8. GLSL Built-In Types Vertex shader outputs gl_Position
Fragment shader outputs gl_FragColor, gl_FragDepth
As could be seen in the sample shaders, the output from the vertex shader is a position,
and the output from the fragment shader is typically a color,
but it can also be a depth value, which is used when creating shadaow maps.

9. OpenGL Shading Language
Structures and arrays with built in operators
vec2, vec3, vec4
vec3 = vec4.xyz … (swizzle)
vec4 = mat4 * vec4 …
User defined functions
Built-in functions sin, cos, pow, normalize, min, max, clamp, reflect, refract, sqrt, noise, ...

10. OpenGL Shading Language
Flow control if, if-else, for, while, do-while discard (fragment only)
Preprocessor directives #define, #undef, #if, #else, #endif … comments: //, /* */
program flow control, preprocessor commands, pretty familiar

11. Shader development tools
ATI RenderMonkey
nVidia FX Composer
Mac OpenGL Shader Builder
GLSL Devil (shader debugger)
This course: by hand Text-editor in VS Error messages written to console (toggle with F1)
there’s a whole range of different tools for shader development
we won’t use any of them because one tends to spend more time learning the envrionment than actually learning about shaders.
but’s it’s good to know if you end up writing shaders in the future
error messages to console

12. Simple Vertex Shader
uniform mat4 WorldViewProjection; attribute vec3 Vertex, Color; varying vec4 varying_color; void main() { gl_Position = WorldViewProjection *
vec4(Vertex.xyz, 1.0);
varying_color = Color; }
we’re back at the simple vertex shader.
this one simply sets the vertex position by transforming it to world space
and it sets a color to vary over the triangle

13. Simple Fragment Shader
varying vec4 varying_color; void main() { gl_FragColor = varying_color; }
this varying color is then set per fragment int the fragment shader.

14. Shaders in RenderChimp
Vertex attributes
in vertex shader
attribute vec3 Vertex, Normal … uniform vec3 LightColor … uniform mat4 WorldViewProjection ...
varying vec4 varying_color … …
in fragment shader
varying vec4 varying_color;
...
When using obj-files: automatically set by RC
When using VertexArray: set manually;
vertex_array->setAttribute(”Vertex”, ...);
Uniforms
Set manually on ShaderProgram or Geometry:
shader->setVector(”LightColor”, ...);
node->setVector(”LightColor”, ...);
Common uniforms, such as transformation matrices, are set automatically by RC: World, WorldViewProjection, WorldInverseTranspose ...
Varying
Will be interpolated over triangle
ok, so where do all those variables come from.
well, they’re set by the caller, that is, by us.
some automatically by the framwork, such as transformation matrices, and some manually.
Vertex position, normal and such, you set while tessellating in the last assignment.
setAttribute, is used to forward the variable and make it available in the shader.
These are per-vertex entities.
uniforms, that are constant for each object, can be set on either the objects nodes itself or the shaders
this is done exactly like this in the code you’ve already used, to set light color, for instance
Transformation-matrices on the other hand are set by the framework itself while rendering
finally, varying

15. Shading theory
on to the actual shader techniques

16. Phong shading
Phong shading at pixel: (assuming normalized vectors) color = AmbientColor + DiffuseColor * N ∙ L + SpecularColor * (reflect(-L,N) ∙ V)Shininess
Phong shading has three components.
An ambient, typically dark, background color, that will dominate when unlit areas
the diffuse component is added incementalyl as the surface faces the lightsource.
the specular components adds gloss and depends on facing with respect to the light source AND the camera.
\mathrm{color} = &\mathrm{AmbientColor} + \\
&\mathrm{DiffuseColor} \cdot ( \mathrm{N} \cdot \mathrm{L}) \\
&\mathrm{SpecularColor} \cdot ( \mathrm{reflect(-\mathrm{L},\mathrm{N}) \cdot \mathrm{V}} )^\mathrm{Shinyness}
R-L N L V

17. Phong shading
Phong shading at pixel: (assuming normalized vectors) color = AmbientColor + DiffuseColor * N ∙ L + SpecularColor * (reflect(-L,N) ∙ V)Shininess
from material, texture ...
from material, texture,
cube map...
from material, cube map ...
the colors can originate from different places,
they can be set manually, or they can come from a material definition, a texture etc
R-L N L V

18. Cube mapping N
R-V V
Cube mapping or environment mapping is a technique that imitates ray-tracing to create reflective effects.
the view vector is reflected on the surface of the objects and then used to look up a color in a surrounding cube, made up out of six images.

19. Bump mapping Obtain normal from bump-map instead of interpolation
Requires a defined tangent space
one problem with many 3d objects is that they look way too smooth
oen way to add an illlusion of unevenness is to perturb the normals, so that the shading varies slightly over the surface
this is called bump mapping, because the new normal is looked up from a special texture called baump map.
this texture contains normals encoded as colors.
Interpolated
normal
Normal from bump-map
Bump + texture

20. Tangent space Tangent (T), Binormal (B), Normal (N)
Derived from the surface equation
Used tangent space while tessellating in assignment 2!
this new normal is defined in what is called tangent space, which is a local space for the surface of the object surface
in order to use the normal in lighting computations, it must be transfomed to world space, and a first step, to model space
and this is done by a tangent space matrix called TBN
it is defined by setting the basis vectors, tangent, binornal and normal, as columns.
\mathbf{TBN} = \begin{pmatrix}
t_x & b_x & n_x\\
t_y & b_y & n_y\\
t_z & b_z & n_z
\end{pmatrix}
Tangent -> Model space

21. Spaces Screen space Camera space World space Model space Tangent space
Projection matrix
Camera space
View matrix
World space
World matrix
lot of spaces around, this is a map of most of them
Model space
TBN matrix
Tangent space

22. Bump map look-up
Normals stored as (r, g, b) where each component range [0,1] Map to [-1, 1]: N = (r, g, b)*2–1
Blue-ish color since N = (0, 0, 1) maps to RGB = (0.5, 0.5, 1)

23. Bump map normal
Normal not ready to use yet; light vector is in world space, so normal must be as well
Transform normal from tangent to world space: World * TBN * N
Now we can proceed with light calculations

24. Bump map: summary Look up (r, g, b) from texture
Map from [0, 1] to [-1, 1]: N
Transform to world space: World * TBN * N
Use this normal when performing light calculations

25. Assignment 3
Implement the following shader techniques: Texture mapping Phong shading Cube mapping Bump mapping
Either one ShaderProgram (vs + fs) per technique – or one ”über-shader” with all of them simultaneously

26. Bump mapping shader
All tangent space basis vectors are needed (normal, tangent, binormal)
Extended vertex definiton:
struct Vertex { f32 x, y, z, /* vertex position */ texx, texy, texz, /* texture coord’s */ nx, ny, nz /* normal */ tx, ty, tz /* tangent */ bx, by, bz; /* binormal */ };

27. Bump mapping shader Hint
Set T, B, N as attributes to the vertex shader and make them vary per fragment
Construct TBN-matrix in fragment shader using mat3
Extra texture-package available on web page

28. Cube mapping shader In RenderChimp: In fragment-shader:
SceneGraph::createCubeMap(...);
node->setCubeMap("CubeTex”, ...);
In fragment-shader:
uniform samplerCube CubeTex;
...
vec3 color = textureCube(CubeTex, ...);
unique identifier