3D Object Representation
1
A first introduction to
OpenGL Shader : Selection
of advanced topics
Intended Learning Outcomes
Introduce OpenGL 4.3 Shader. Your prior experience
with OpenGL is intended to help a lot in picking up the
shader language
Appreciate OpenGL shader programming (but do not
need to program)
Only pg. 1 – 12 are to be examined. Pg. 13 – end are
not to be examined
2
Why GL shader language (GLSL)
It enables us to realize graphics effect not realizable in
OpenGL (fixed function pipeline). For example, shadow
mapping and toon shading
It takes advantage of Graphics Processing Unit (GPU) to
speed up calculations
OpenGL ES – mobile version of OpenGL, uses GLSL
WebGL – emerging 3D graphics standard on the web, is
written in JavaScript. It is based on OpenGL ES
Shortcoming: programming at a much lower levels
3
Shader in the rendering pipeline
4
Figure in a) OpenGL fixed function pipeline
Figure in b) OpenGL programmable shader
Fixed function pipeline makes it difficult to implement
advanced graphics functions as data structure and
architecture are not assessable and manipulable
It does not allow Graphics Processing Unit (GPU) to
exercise their full power
Programmable pipeline introduces vertex shader,
tessellation shader (further subdivided into tessellation
control shader and tessellation evaluation shader),
geometry shader and fragment shader
Each shader is a programmable unit
Only vertex and fragment shader must be present
5
Vertex shader
mandatory
runs once per input vertex, process data associated with
the vertex (e.g. world coordinates, color values, normal
values, texture coordinates)
Programmer has to write the code
Takes over Modelview transform and Multiplication by
Projection Matrix in the fixed function pipeline. Instead
of OpenGL commands (e.g. glTranslatef,
gluPerspective), programmer has to compute the two
matrices by C++ like programming
At minimum, output 𝑥𝑥,𝑦𝑦, 𝑧𝑧,𝑤𝑤 , converted into canonical
box
6
Canonical viewing box
7
Tessellation shader
optional
For level-of-detail (LOD) management
adaptively refine an object’s mesh, adding more and
smaller triangles as the object coms closer to the eye, or
vice versa
8
Geometry shader
optional
allows the programmer to transform the original
geometry (e.g. replacing triangles with lines, or new
triangles of a different size, or lines with points)
for special effect
9
Fragment shader
mandatory
runs once per output fragment (e.g. a triangle), either
setting its color or discarding it
May be furth changed by per-fragment operations
coming after the shader
Typically, a fragment shader will compute at least the
interpolated color values per fragment from color values
received per vertex from the vertex shader; it may also
take texture into considerations when computing the
color if texture is present
Note that the programmer has to write the code
10
A new OpenGL: OpenGL Shading
Language (GLSL)
GLSL is a C-like language designed to directly support
the development of shader
High level, easy to use programming language that
works well with OpenGL, and as hardware independent
as possible
Only looks like C or C++, but not exactly (differences in
how function parameters are handled, much stricter type
checking, many familiar C and C++ data types and
language constructs intentionally not included)
11
Changes
No immediate mode commands e.g. no glBegin
All data must be stored in buffer objects
VAO vertex array objects – store vertex array
VBO vertex buffer objects – store other attributes
No modelview and projection transformation commands
e.g. no glRotatef, gluLookAt. Both matrices have to be
programmed by hand
No lighting and shading commands e.g. no glLight,
glMaterial, glShadeModel. All lighting and shaing have
to be programmed by hand
Advantage: can program any effect, maximum flexibility
12
Specifying OpenGL version
glutInitContextVersion (4, 3); // Define version to be 4.3
glutInitContextProfile (GLUT_CORE_PROFILE);
// excludes all features discarded from current or earlier
// version.
To re-use old programs (backward compatibaility), use
GLUT_COMPATIBILITY_PROFILE
glutInitContextFlags (GLUT_FORWARD_COMPATIBLE);
// asks for forward compatibility, exclude features marked for
// deprecation in the current version
13
Storage qualifiers – define how
variables are stored
14
shared: not used in our example
Examples
out vec4 colors // output a 4 element vector called colors
in vec4 colors // input a 4 element vector colors from the
// previous shader stage
layout(location=1) in vec4 coordinates
// location 1 supplies the 4 element input vector coordinates
uniform mat4 modelViewMatrix
// specify that the 4 x 4 modelview matrix is a uniform
// variable. This matrix is the same for the entire primitive
15
VAO and VBO
VBO stands for Vertex Buffer Object. It is a buffer to
hold information of about vertices (e.g. position, colour,
depth, texture)
VAO stands for Vertex Array Object. It consists of one or
more VBO
They are present in OpenGL, but seldom used. VAO
and VBO are indispensable in shader
16
Vertex
Color
Normal
Texture
VAO
each is a VBO
Case study
Square.cpp (OpenGL program)
SquareShaderized (OpenGL shader program)
[Note SquareShaderized works with VS 2015 and it also works with the PCs
with VS 2019 in our laboratory]
17
SquareShaderized
18
Screen shot
v0 v1
v2 v3
v0 = (20, 20, 0) Colour (0, 0, 0)
v1 = (80, 20, 0) Colour (0, 0, 0)
v2 = (20, 80, 0) Colour (0, 0, 0)
v3 = (80, 80, 0) Colour (0, 0, 0)
Understanding squareShaderized.cpp
Open squareShaderized.cpp and read it along side the ppt and/or read the
text book description
19
20
equivalent to #define SQUARE 0
equivalent to #define SQUARE_VERTICES 0
21
Compiling and Linking Shaders
22
reads text file vertexShader.glsl
create an empty shader
object and gives it an id
set the source code of the shader object to the value of the
character string
compile
Similar code for the fragment shader
1 null-terminated string
23
Initializing data and communicating
with vertex shader
Creates a VAO with id vao[SQUARE] containing the buffer with id
buffer[SQUARE_VERTICES], and fill it with the square’s vertex data
24
25
no need to normalize
stride
no offset
offset by one vertex
index one data is 4 floating point numbers
enable the array
Setting up ModelView and Projection
Matrices
26
create a uniform variable
called modelViewMat
loads modelViewMat with
1 matrix, transposed, with
data in modelViewMat
This would create a 16 entries
matrix in column major format
Understanding vertexShader.glsl
Open vertexShader.glsl in folder Shader and read it along side the ppt
and/or read the text book description
27
built in variable used to communicate with fixed
function pipeline stages
𝑀𝑀𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑀𝑀𝑀𝑀𝑀𝑀
𝑋𝑋
𝑌𝑌
𝑍𝑍
1
copies
𝑅𝑅
𝐺𝐺
𝐵𝐵
𝐴𝐴
Understanding fragmentShader.glsl
Open fragmentShader.glsl in folder Shader and read it along side the ppt
and/or read the text book description
Fragment shader just copying. This shader is called a pass-through shader
The input of the fragment shader is per vertex, while the output is per
fragment (e.g. a fragment is a triangle)
Colors in the fragment are obtained by interpolation in the fixed function
pipeline stage
28
Interpolation options
Default is “smooth”
29
References
Computer Graphics through OpenGL (3rd Ed.) S. Guha,
Ch. 15 (available online in Course Reserve)
Square.cpp (Program in Ch.2)
SquarreShaderized (Program in Ch. 15)
30
A first introduction to OpenGL Shader : Selection of advanced topics
Intended Learning Outcomes
Why GL shader language (GLSL)
Shader in the rendering pipeline
Slide Number 5
Vertex shader
Canonical viewing box
Tessellation shader
Geometry shader
Fragment shader
A new OpenGL: OpenGL Shading Language (GLSL)
Changes
Specifying OpenGL version
Storage qualifiers – define how variables are stored
Slide Number 15
VAO and VBO
Case study
SquareShaderized
Understanding squareShaderized.cpp
Slide Number 20
Slide Number 21
Compiling and Linking Shaders
Slide Number 23
Initializing data and communicating with vertex shader
Slide Number 25
Setting up ModelView and Projection Matrices
Understanding vertexShader.glsl
Understanding fragmentShader.glsl
Interpolation options
References