Advanced Graphics Lecture Eight: Understanding Shaders in Computer Graphics

What is ... the shader?

Local space
World space
Viewing space
Local space
3D screen space
World space
Process vertices
Viewing space
Clipping, projection, backface culling
3D screen space
Process pixels
2D display space
2D display space - plot pixels
Lecture one ...
Closer to the truth (but still a
terrible oversimplification)

Shader Functionality

Local space
World space
Viewing space
Ex: computing diffuse shading
color per vertex; transforming
vertex position; transforming
texture co-ordinates
3D screen space
Process vertices
Viewing space
Clipping, projection, backface culling
"Wouldn't it
be great if
the user
could install
their own
code into the
hardware to
choose these
effects?"
Ex: interpolating texture
coordinates across the polygon;
interpolating the normal for
specular lighting; textured
normal-mapping
Process pixels
2D display space - plot pixels
Closer to the truth (but still a
serious oversimplification)

Shader Introduction

. The next generation:
Introduce shaders, programmable logical units on
the GPU which can replace the "fixed"
functionality of OpenGL with user-generated code.
. By installing custom shaders, the user can
now completely override the existing
implementation of core per-vertex and per-
pixel behavior.

Shader Gallery I

ARaDeonm
Above: Demo of Microsoft's XNA game platform
Right: Product demos by nvidia (top) and Radeon (bottom)

Shader Targeting

. OpenGL shaders give
the user control over
each vertex and each
fragment (each pixel
or partial pixel)
interpolated between
vertices.
· After vertices are processed, polygons are rasterized. During
rasterization, values like position, color, depth, and others are
interpolated across the polygon. The interpolated values are passed
to each pixel fragment.

Overridable Shader Functions

Per-vertex Overrides

• Vertex transformation
• Normal transformation and
  normalization
• Texture coordinate
  generation
• Texture coordinate
  transformation
• Lighting
• Color material application

Per-fragment (pixel) Overrides

• Operations on interpolated
  values
• Texture access
• Texture application
• Fog
• Color summation
• Optionally:
• Pixel zoom
• Scale and bias
• Color table lookup
• Convolution

Parallel Processing with Shaders

. Shaders are compiled from within your code
· They used to be written in assembler
· Today they're written in high-level languages
. They execute on the GPU
· GPUs typically have multiple processing units
. That means that multiple shaders execute in
parallel!
. At last, we're moving away from the purely-linear
flow of early "C" programming models ...

Shader Languages

. There are several popular languages for
describing shaders, such as:

• HLSL, the High Level Shading Language
  · Author: Microsoft
  · DirectX 8+
  Least advanced; most
  portable and supported;
  topic of this lecture.
• Cg
  · Author: nvidia
• GLSL, the OpenGL Shading Language
  · Author: the Khronos Group, a self-sponsored group of
  industry affiliates (ATI, 3DLabs, etc)

OpenGL Programmable Processors

(not to scale)
Texture
Memory
1
1
(Geometry)
Cip
Project
Fragment
Processor
App.
Unpack
(Pixels)
Frame
Buffer
F
Ve
Figure 2.1, p. 39, OpenGL Shading Language, Second Edition, Randi Rost,
Addison Wesley, 2006. Digital image scanned by Google Books.

Vertex Processor: Inputs and Outputs

Color
Normal
Position
Texture coord
etc ...
Color
Position
Texture data
Vertex
Processor
Custom variables
Modelview matrix
Material
Lighting
etc ...
Custom variables
Per-vertex attributes

Fragment Processor: Inputs and Outputs

Color
Texture coords
Fragment coords
Front facing
Fragment
Processor
Fragment color
Fragment depth
Texture data
Modelview matrix
Material
Lighting
etc ...
Custom variables

Shader Communication

There are three types of shader parameter in
GLSL:
· Uniform parameters

• Set throughout execution
  · Ex: surface color
  · Attribute parameters
• Set per vertex
  · Ex: local tangent
  Varying parameters
• Passed from vertex processor to
  fragment processor
  · Ex: transformed normal
  Attributes
  Vertex
  Processor
  Uniform
  params
  Varying
  params
  7
  Fragment
  Processor

Shader Installation Impact

. All the fixed functionality (see slide six) is
overridden.
. It's up to you to replace it!
. You'll have to transform each vertex into viewing
coordinates manually.
. You'll have to light each vertex manually.
. You'll have to apply the current interpolated color to each
fragment manually.
. The installed shader replaces all OpenGL fixed
functionality for all renders until you remove it.

Shader Gallery II

Above: Kevin Boulanger (PhD thesis,
"Real-Time Realistic Rendering of Nature
Scenes with Dynamic Lighting", 2005)
Above: Ben Cloward ("Car paint shader")

Shader Sample One - Ambient Lighting

/ / Vertex Shader
void main () {
gl Position =
gl ModelViewProjectionMatrix *
gl Vertex;
}
/ / Fragment Shader
void main () {
gl_FragColor = vec4(0.2, 0.6, 0.8, 1);
}

Ambient Lighting Demo

Shader Demo
x
Shader Demo
BOX

Ambient Lighting Explanation

. Notice the C-style syntax
void main () { ... }
. The vertex shader uses two standard inputs, gl Vertex
and the model-view-projection matrix; and one standard
output, gl Position.
•
The line
gl_Position = gl_ModelViewProjectionMatrix * gl Vertex;
applies the model-view-projection matrix to calculate the
correct vertex position in perspective coordinates.
· The fragment shader applies basic ambient lighting, setting
its one standard output, gl_FragColor, to a fixed value.

Shader Sample Two - Diffuse Lighting

/ / Vertex Shader
varying vec3 Norm;
varying vec3 ToLight;
void main ()
{
gl_Position =
gl ModelViewProjectionMatrix
*
gl Vertex;
Norm =
gl NormalMatrix * gl Normal;
ToLight = vec3 (
gl_LightSource [0] . position -
(gl ModelViewMatrix
*
gl Vertex) ) ;
}
/ / Fragment Shader
varying vec3 Norm;
varying vec3 ToLight;
void main ()
{
const vec3 DiffuseColor =
vec3(0.2, 0.6, 0.8);
float diff =
clamp (dot (normalize (Norm) ,
normalize (ToLight) ), 0.0,
1.0);
gl FragColor =
vec4 (DiffuseColor * diff,
1.0);
}

Diffuse Lighting Demo

Shader Demo
Shader Demo

Diffuse Lighting Explanation

· This examples uses varying parameters to pass info
from the vertex shader to the fragment shader.
. The varying parameters Norm and ToLight are
automatically linearly interpolated between vertices across
every polygon.
. This represents the normal at that exact point on the surface.
· The exact diffuse illumination is calculated from the local
normal.
· This is the Phong shading technique (usually seen for specular
highlights) applied to diffuse lighting.

Diffuse Lighting Matrix Transforms

. Notice the different matrix transforms used in this example:
gl Position =
gl ModelViewProjectionMatrix
*
gl Vertex;
Norm =
gl NormalMatrix
*
gl Normal;
ToLight = vec3 (gl LightSource [0] . position -
gl ModelViewMatrix
*
gl Vertex) ) ;
. The gl ModelViewProjectionMatrix transforms a vertex from
local coordinates to perspective coordinates for display, whereas the
gl ModelViewMatrix transforms a point from local coordinates to
eye coordinates. We use eye coordinates because lights are (usually)
defined in eye coordinates.
. The gl NormalMatrix transforms a normal from local coordinates
to eye coordinates; it holds the inverse of the transpose of the upper
3x3 submatrix of the model-view transform.

GLSL - Design Goals

· GLSL was designed with the following in mind:

• Work well with OpenGL
  · Shaders should be optional extras, not required.
  · Fit into the design model of "set the state first, then render the data in
  the context of the state"
• Support upcoming flexibility
• Be hardware-independent
  · The GLSL folks, as a broad consortium, are far more invested in
  hardware-independence than, say, nvidia.
  · That said, they've only kinda nailed it: I get different compiler
  behavior and different crash-handling between my high-end home
  n Vidia chip and my laptop Intel x3100.
• Support inherent parallelization
• Keep it streamlined, small and simple

GLSL Language Features

. The language design in GLSL is strongly based
on ANSI C, with some C++ added.
· There is a preprocessor -- #define, etc!
· Basic types: int, float, bool
· No double-precision float
. Vectors and matrices are standard: vec2, mat2 = 2x2; vec3,
mat3 = 3x3; vec4, mat4 = 4x4
· Texture samplers: sampler1D, sampler2D, etc are used to
sample multidemensional textures
. New instances are built with constructors, a la C++
. Functions can be declared before they are defined, and
operator overloading is supported.

GLSL Differences from C/C++

. Some differences from C/C++:
· No pointers, strings, chars; no unions, enums; no bytes, shorts,
longs; no unsigned. No switch() statements.
. There is no implicit casting (type promotion):
float foo = 1;
fails because you can't implicitly cast int to float.
· Explicit type casts are done by constructor:
vec3 foo = vec3(1.0, 2.0, 3.0) ;
vec2 bar = vec2 (foo) ;
// Drops foo.z
· Function parameters are labeled as in (default), out, or inout.
. Functions are called by value-return, meaning that values are
copied into and out of parameters at the start and end of calls.

The GLSL API

To install and use a shader in OpenGL:

1. Create one or more empty shader objects with
   glCreateShader.
2. Load source code, in text, into the shader with
   glShaderSource.
3. Compile the shader with glCompileShader.
   
   1. The compiler cannot detect every program that would
      cause a crash. (And if you can prove otherwise, see me
      after class.)
4. Create an empty program object with
   glCreateProgram.
5. Bind your shaders to the program with
   glAttachShader.
6. Link the program (ahh, the ghost of C!) with
   glLinkProgram.
7. Register your program for use with glUseProgram.
   Vertex
   shader
   Fragment
   shader
   Compiler
   Program
   Linker
   OpenGL

Shader Sample Three - Gooch Shading

/ / From the Orange Book
varying float NdotL;
varying vec3 ReflectVec;
varying vec3 ViewVec;
void main () {
vec3 ecPos
=
vec3 (gl_ModelViewMatrix
*
gl_Vertex) ;
vec3 tnorm
= normalize (gl_NormalMatrix
*
gl_Normal) ;
vec3 lightVec =
normalize (gl_LightSource [0] . position. xyz -
ecPos) ;
ReflectVec
= normalize (reflect (-lightVec,
tnorm) ) ;
ViewVec
= normalize (-ecPos) ;
NdotL
= (dot (lightVec, tnorm) + 1.0) *
0.5;
gl_Position
= ftransform () ;
gl_FrontColor = vec4 (vec3(0.75), 1.0) ;
gl_BackColor = vec4(0.0) ;
}
vec3 SurfaceColor = vec3 (0.75, 0.75, 0.75) ;
vec3 WarmColor
= vec3(0.1, 0.4, 0.8) ;
vec3 CoolColor
= vec3(0.6, 0.0, 0.0);
float DiffuseWarm = 0.45;
float DiffuseCool = 0.045;
varying float NdotL;
varying vec3 ReflectVec;
varying vec3 ViewVec;
void main () {
vec3 kcool
= min (CoolColor + DiffuseCool
*
vec3 (gl_Color), 1.0) ;
vec3 kwarm
= min (WarmColor + DiffuseWarm
*
vec3 (gl_Color), 1.0) ;
vec3 kfinal
= mix (kcool, kwarm, NdotL)
*
gl_Color.a;
vec3 nreflect = normalize (ReflectVec) ;
vec3 nview
= normalize (ViewVec) ;
float spec
= max (dot (nreflect, nview) , 0.0) ;
spec
= pow (spec, 32.0) ;
gl_FragColor = vec4(min(kfinal + spec, 1.0), 1.0) ;
}