Fall 2016, CS-116A Lecture: GLSL: OpenGL Shading Language (part 1 of 2)

GLSL: OpenGL Shading Language (part 1 of 2)
CS-116A: Introduction to Computer Graphics
Instructor: Rob Bruce
Fall 2016

SLIDE 1: Shade Trees

Proposed by Rob Cook in 1984
Tree structure used to represent:
Surface normals
Material properties
Texture maps
Light properties

SLIDE 2: Pixel Stream Editor (PSE)

Proposed by Ken Perlin 1985
Procedural programming language
More sophisticated than Shade Trees
Language supported flow of control functionality (selection and iteration constructs)
Provided stochastic noise functions for surface appearance

SLIDE 3: Renderman Interface Specification

Proposed by Pixar in 1988
Industry standard in visual effects industry
Based on Shade Trees

SLIDE 4: OpenGL Shading Language (GLSL)

C like syntax and control functionality such as:
Looping constructs (for, while, do-while)
Conditionals (if-then, if-then-else)
Variables
GLSL is an interpreted language

SLIDE 5: GLSL data types

scalers
vectors
matrices
samplers

SLIDE 6: GLSL: Scaler data types

int (integer)
uint (unsigned integer)
bool (boolean)
float (floating point)

SLIDE 7: GLSL: Vector data types

vec2 (two-dimensional vector)
vec3 (three-dimensional vector)
vec4 (four-dimensional vector)

SLIDE 8: GLSL: Matrice data types

mat2 (2 by 2 matrix)
mat3 (3 by 3 matrix)
mat4 (4 by 4 matrix)
matMxN (user-defined matrix with M columns by N rows)

SLIDE 9: GLSL: Sampler data types

Samplers: a special GLSL data type bound to texture data.

SLIDE 10: GLSL arrays and user-defined structures

Note: User-defined structures and arrays of the GLSL data types can also be created.
Example:
struct lightsource { vec3 color; vec3 position; }

SLIDE 11: GLSL example: toon shader teapot

Define the GLSL shader files:
Fragment shader
Vertex shader
Create a generic loader to:
1. Creates an OpenGL canvas
2. Load then interpret shader files (above)
3. Apply shader files to a teapot model (a standard model in OpenGL library).

SLIDE 12: GLSL rendering pipeline

Flowchart of the OpenGL shading language pipeline. Step 1: Vertex Specification. Step 2: Vertex Shader. Step 3: Tessellation. Step 4: Geometry Shader. Step 5: Vertex Post-Processing. Step 6: Primitive Assembly. Step 7: Rasterization. Step 8: Fragment Shader. Step 9: Per-Sample Operations.

Source: https://www.opengl.org/wiki/Rendering_Pipeline_Overview

SLIDE 13: GLSL example: toon shader teapot

Fragment shader (toon.frag):

void main() { gl_FragColor = gl_Color; }

Source: http://www.lighthouse3d.com/tutorials/glsl-12-tutorial/directional-lights-i/

SLIDE 14: Vertex shader (toon.vert)

void main() { vec3 normal, lightDir; vec4 diffuse; float NdotL; normal = normalize(gl_NormalMatrix * gl_Normal); lightDir = normalize(vec3(gl_LightSource[0].position)); NdotL = max(dot(normal, lightDir), 0.0); diffuse = gl_FrontMaterial.diffuse * gl_LightSource[0].diffuse; gl_FrontColor = NdotL * diffuse; gl_Position = ftransform(); }

Source: http://www.lighthouse3d.com/tutorials/glsl-12-tutorial/directional-lights-i/