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

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.

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.

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

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,

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

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

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.

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

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

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

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

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.

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

Shading theory on to the actual shader techniques

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

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

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.

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

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

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

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)

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

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

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

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 */ };

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

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