Shader

Outline Overview Set up a Project for Shader GLSL Syntax GLSL Communication GLSL Built-in Variables GLSL Program Example

Overview – (1 / 9) What is shader? Why use shader? User-defined programs that run on GPU Why use shader? Functionality of rendering pipeline is fixed Can’t achieve new effects (e.g., phong shading, displacement mapping)

Viewport culling & clipping Overview – (2 / 9) Fixed pipeline Per-Vertex operations Primitive assembly Viewport culling & clipping Rasterize Fragment processing Per fragment operations Frame buffer operations Frame buffer

Overview – (3 / 9) Programmable pipeline Vertex shader Primitive assembly Viewport culling & clipping Rasterize Geometry shader Fragment (Pixel) shader Per fragment operations Frame buffer operations Frame buffer

Overview – (4 / 9) Programmable pipeline Vertex shader Primitive assembly Viewport culling & clipping Rasterize Geometry shader Fragment (Pixel) shader Per fragment operations Frame buffer operations Frame buffer

Overview – (5 / 9) Vertex shader Can modify vertex’s attributes Position, normal, color, texture coordinate, etc. Can do transformation at will Can’t add or delete vertex Can’t use another vertex’s data Parallel computing

Overview – (6 / 9) Programmable pipeline Vertex shader Primitive assembly Viewport culling & clipping Rasterize Geometry shader Fragment (Pixel) shader Per fragment operations Frame buffer operations Frame buffer

Overview – (7 / 9) Geometry shader (after GLSL 1.5) Input is primitive (vertices of primitive) Can use adjacent vertex’s data Can modify part of primitive’s attribute (e.g., each vertex’s position) Can add or delete primitive Output can be zero or more primitives

Overview – (8 / 9) Programmable pipeline Vertex shader Primitive assembly Viewport culling & clipping Rasterize Geometry shader Fragment (Pixel) shader Per fragment operations Frame buffer operations Frame buffer

Overview – (9 / 9) Fragment (Pixel) shader Input is fragment that it’s attribute is interpolated Can decide final pixel’s color and depth value (e.g., texture application, fog) Can’t use another fragment’s data Parallel computing

Set up a Project for Shader – (1 / 6) include lib dll glut.h glew.h glut32.lib glew32.lib glut32.dll glew32.dll

Set up a Project for Shader – (2 / 6) Programs and shaders Vertices Program (after using) Vertex shader Geometry shader Fragment shader Must have Frame buffer

Set up a Project for Shader – (3 / 6) Create a shader Flow Shader code glCreateShader glShaderSource Shader glCompileShader

Set up a Project for Shader – (4 / 6) Create a program Flow Shader glCreateProgram Shader glAttachShader glUseProgram glLinkProgram

Set up a Project for Shader – (5 / 6)

Set up a Project for Shader – (6 / 6)

GLSL Syntax – (1 / 8) We use C-like shading languages to write shaders Common shading languages GLSL (OpenGL Shading Language) Apparently for OpenGL use HLSL (High Level Shader Language) For DirectX use Cg (C for graphics) Syntax similar to HLSL Can translate to DirectX or OpenGL shader

GLSL Syntax – (2 / 8) Data types – C-like int uint float double bool (true or false) struct

GLSL Syntax – (3 / 8) Data types – vector vec{2, 3, 4} : a vector of 2, 3, or 4 floats dvec{2, 3, 4} : for doubles bvec{2, 3, 4} : for bools ivec{2, 3, 4} : for integers uvec{2, 3, 4} : for unsigned integers.

GLSL Syntax – (4 / 8) Data types – vector Vector is like a class You can access a vector by [0] [1] [2] [3] .r .g .b .a (.x .y .z .w) Example: vec4 color; color.rgb = vec3(1.0, 1.0, 1.0); color.a = 0.5; color.rgba = vec4(1.0, 1.0, 1.0, 1.0); color.xy = vec2(1.0, 1.0);

GLSL Syntax – (5 / 8) Data types – matrix OpenGL uses column-major matrices All matrix types are floating-point, where n = m = {2, 3, 4} matn : a matrix with n columns and n rows matnxm : a matrix with n columns and m rows Example: mat2 m = mat2(1.0, 2.0, 3.0, 4.0); float m10 = m[1(column)][0(row)]; // m10 = 3.0 vec2 col2 = m[1]; // col2 = vec2(3.0, 4.0) m = 1.0 3.0 2.0 4.0

GLSL Syntax – (6 / 8) Data types – sampler (texture) sampler{1, 2, 3}D : for {1, 2, 3}D texture sampler{1, 2}D Shadow : for {1, 2}D depth texture samplerCube : for the cube map texture Example: uniform sampler2D colorTexture; vec4 texelColor = texture(colorTexture, textureCoord);

GLSL Syntax – (7 / 8) Functions No recursion in GLSL Parameters Just like C but with some qualifiers void function(in int p1, out int p2, inout int p3, int p4) in : make parameters like call by value, this is default. out : make parameters like call by reference, but the value is not initialized by the caller inout : combination of in and out

GLSL Syntax – (8 / 8) Built-in functions (more in GLSL 1.5 spec)

GLSL Communication – (1 / 7) Qualifiers for communication (before GLSL 1.3) uniform : global variable that can be used in every shader attribute : user-defined input variables for vertex shaders varying : input and output variables between shaders

GLSL Communication – (2 / 7) uniform attribute Before GLSL 1.3 Vertex shader varying Fragment shader

GLSL Communication – (3 / 7) uniform attribute Before GLSL 1.3 Vertex shader varying varying in Geometry shader varying out Fragment shader varying

GLSL Communication – (4 / 7) Qualifiers for communication (after GLSL 1.3) uniform : global variable that can be used in every shader in : input variables for a shader out : output variables for a shader

GLSL Communication – (5 / 7) uniform in After GLSL 1.3 Vertex shader out in Fragment shader

GLSL Communication – (6 / 7) uniform in After GLSL 1.3 Vertex shader out in Geometry shader out Fragment shader in

GLSL Communication – (7 / 7) Vertex shader Fragment shader uniform mat4 m; out vec3 color; void main(){ … } uniform mat4 m; in vec3 color; void main(){ … } match

GLSL Built-in Variables – (1 / 8) Built-in variables (more in GLSL 1.5 spec) Uniforms Input and output variables Some handy variables can be used only in compatibility profile (are deprecated after GLSL 1.3) Only list some variables in the following pages

GLSL Built-in Variables – (2 / 8) Built-in uniforms (transformation matrix) These variables are set according to your OpenGL function call (e.g., glTranslate, gluLookAt, gluPerspective.) mat4 gl_ModelViewMatrix : current modelview matrix mat4 gl_ProjectionMartix : current projection matrix mat4 gl_ModelViewProjectionMatrix : product of modelview and projection matrices mat3 gl_NormalMatrix : to correct normal direction

GLSL Built-in Variables – (3 / 8) Built-in uniforms (material) These variables are set according to glMaterial(). struct gl_MaterialParameters{ vec4 emission; vec4 ambient; // Ka vec4 diffuse; // Kd vec4 specular; // Ks float shininess; // ns } gl_MaterialParameters gl_FrontMaterial, gl_BackMaterial;

GLSL Built-in Variables – (4 / 8) Built-in uniforms (light) These variables are set according to glLight(). struct gl_LightSourceParameters{ vec4 ambient; // Ia vec4 diffuse; // Id vec4 specular; // Is vec4 position; // eye space vec4 halfVector; vec3 spotDireciotn …

GLSL Built-in Variables – (5 / 8) Built-in uniforms (light) struct gl_LightSourceParameters{ … float spotExponent; float spotCutoff; float spotCosCutoff; float constantAttenuation; float linearAttenuation; float quadraticAttenuation; } gl_LightSourceParameters gl_LightSource[gl_MaxLights];

GLSL Built-in Variables – (6 / 8) Built-in input and output variables (vertex shader) Vertex shader in vec4 gl_Vertex; // is set by glVertex() in vec4 gl_Color; // is set by glColor() in vec3 gl_Normal; // is set by glNormal() in vec4 MultiTexCoord{0~7} // is set by glMultiTexCoord() … out gl_PerVertex { vec4 gl_Position; vec4 gl_TexCoord[0~7]; … }; Interface block

GLSL Built-in Variables – (7 / 8) Built-in input and output variables (geometry shader) Geometry shader in gl_PerVertex { vec4 gl_Position; vec4 gl_TexCoord[0~7]; … } gl_in[]; out gl_PerVertex { vec4 gl_Position; vec4 gl_TexCoord[0~7]; … }; Ex: gl_in[n].gl_Position // use n according to primitive Ex: gl_Position = xxx; EmitVertex();

GLSL Built-in Variables – (8 / 8) Built-in input and output variables (fragment shader) Fragment shader in vec4 gl_FragCoord; // window coordinate (x, y), z is depth in vec4 gl_Color in vec4 gl_TexCoord[0~7]; … out vec4 gl_FragColor // final fragment color out float gl_FragDepth /* final fragment depth. It will be gl_FragCoord.z if it’s not assigned */ … Interpolated input variables (after rasterization)

GLSL Program Example The following examples including Hello world (basic GLSL shader) Phong shading Vertex normal visualizer (geometry shader) Texture mapping Use #version150 compatibility in every shader Geometry shader is included after GLSL 1.5

GLSL Program Example Hello World – (1 / 5) V F Vertex shader Fragment shader

GLSL Program Example Hello World – (2 / 5)

GLSL Program Example Hello World – (3 / 5) Vertex shader Geometry shader Fragment shader

GLSL Program Example Hello World – (4 / 5) Geometry shader available primitives Input primitives (number of vertices) Points (1) Lines (2), Lines_adjacency (4) Triangles (3), Triangles_adjacency (6) Output primitives Points Line_strip Triangle_strip 1 2 3 4 Lines_adjacency 1 2 3 4 5 6 Triangles_adjacency

GLSL Program Example Hello World – (5 / 5) Same result

GLSL Program Example Phong Shading – (1 / 11) Vertex shader Fragment shader

GLSL Program Example Phong Shading – (2 / 11) Vertex shader Fragment shader

GLSL Program Example Phong Shading – (3 / 11) Vertex shader Fragment shader

GLSL Program Example Phong Shading – (4 / 11) Fixed pipeline Phong shading

GLSL Program Example Phong Shading – (5 / 11) Set uniform variable for phong shading

GLSL Program Example Phong Shading – (6 / 11) Set uniform variable for shaders glGetUniformLocation Uniform name Program Location glUniform Set uniform

GLSL Program Example Phong Shading – (7 / 11) Set uniform variable for shaders GLint glGetUniformLocation(GLuint program, const GLchar *name); Returns the location of a uniform variable program: the program object to be queried name: the name of the uniform variable in shaders The location of a variable is assigned after you link the program, so the function should be used after linking (glLinkProgram) For some drivers, you may need to use the function after using the program (glUseProgram)

GLSL Program Example Phong Shading – (8 / 11) Set uniform variable for shaders void glUniform{1234}{fi}[v](GLint location, TYPE value); Set the value of a uniform variable for the current program object location: the location of the uniform variable to be modified void glUniformMatrix{234}[x{234}]fv(GLint location, GLsizei count, GLboolean transpose, const GLfloat* value); Same purpose as glUniform but for matrix type uniform variables count: the number of matrices that are to be set transpose: whether to transpose the matrix

GLSL Program Example Phong Shading – (9 / 11) Set attribute variable for the vertex shader glGetAttribLocation Attribute name Program Location glVertexAttrib Set attribute Send vertex glVertex

GLSL Program Example Phong Shading – (10 / 11) Set attribute variable for the vertex shader GLint glGetAttribLocation(GLuint program, const GLchar *name); Returns the location of a attribute variable program: the program object to be queried name: the name of the attribute variable in the vertex shader The location of a variable is assigned after you link the program, so the function should be used after linking (glLinkProgram) For some drivers, you may need to use the function after using the program (glUseProgram)

GLSL Program Example Phong Shading – (11 / 11) Set attribute variable for the vertex shader void glVertexAttrib{1234}{fi}[v](GLint location, TYPE value); Set the value of a attribute variable for the next vertex location: the location of the attribute variable to be modified Use it before glVertex to assign the attribute to the vertex

GLSL Program Example Normal Visualizer – (1 / 5) Vertex normal visualizer End point Start point Normal Vertex

GLSL Program Example Normal Visualizer – (2 / 5) Vertex shader Geometry shader Fragment shader

GLSL Program Example Normal Visualizer – (3 / 5) Vertex shader Geometry shader Fragment shader

GLSL Program Example Normal Visualizer – (4 / 5) Vertex shader Geometry shader Fragment shader

GLSL Program Example Normal Visualizer – (5 / 5) Vertex normal visualizer

GLSL Program Example Texture Mapping – (1 / 6) Vertex shader Fragment shader

GLSL Program Example Texture Mapping – (2 / 6) Vertex shader Fragment shader

GLSL Program Example Texture Mapping – (3 / 6)

GLSL Program Example Texture Mapping – (4 / 6) Set uniform variable for texture (sampler)

GLSL Program Example Texture Mapping – (5 / 6) Set uniform variable for texture (sampler) Multi-texturing (layers) Shaders GL_TEXTURE0 Use glUniform1i(loc, layer) to link a sampler to a texture layer GL_TEXTURE1 … GL_TEXTUREn

GLSL Program Example Texture Mapping – (6 / 6) Set uniform variable for texture (sampler) glGetUniformLocation Link to certain texture layer glUniform glActiveTexture Set certain texture layer’s texture glBindTexture Render scene

Thanks for listening! Any questions?