How to do it right
Disclaimer
This presentation is for educational purposes only.
Copyrights of used imagery remain with their authors.
Progressive OpenGL
Intro
So what’s this about
…since 1992
Geometry Basics
Quadrilateral
This guy
10.96 ≈ 11
Nothing inside!
≈
Our Data = Many Vertices!
Much more
complicated!
Framebuffer
Program Code
Staring at the screen
Screen Screen
GPUGPU
Windo w
OpenGL
Old vs. New
Deprecated
聲明不贊成 & evil OpenGL
OpenGL 4.2 Reference card: Blue means
deprecated www.khronos.org/files/opengl42-quick- reference-card.pdf
Current version: OpenGL & GLSL 4.3
What’s the big deal?!
OpenGL 4.3 Reference card: Deprecated functions are
gone!
http://www.khronos.org/files/opengl43-quick-reference-card.pdf
and many many many more…
…since 2008!
(GLSL since 2004)
GPUs have changed!
The old OpenGL
Fixed Function Pipeline (FFP)
GPU
…since 1992!
http://www.graphics.stanford.edu/courses/cs448a-01-fall/design_op engl.pdf
Transform Vertex data Rasterizatio
n Lightin
g Fragment data
Framebuffer ScreenScreen
Windo w
Too easy?
1994
Magic Box!
The new OpenGL …since 2008!
(GLSL since 2004)
Programmable Pipeline
http://www.opengl.org/registry/doc/glspec43.core.20120806.pdf
Big Changes !!!
Old to New
Transition in 2004
http://www.khronos.org/opengles/2_X/
Google does not help with learning
Not helpful
Bad!
So who can help?
www.arcsynthesis.org/gltut/
This Guy!
Official Specs &
Documentation!
www.opengl.org/registry/doc/glspec43.core.201208 06.pdf
and …
http://www.opengl.org/sdk/docs/man3/xhtm l/
http://www.opengl-tutorial.org
This Guy!
Shaders and more
OpenGL
Programmable GPU
Host
Host vs. Device
CPUCPU Memory
(RAM) Memory
(RAM)
GPU (Chip
) GPU (Chip GPU )
Memory GPU Memory
Device Screen
Screen
Program
= Game
Program
= Shader
C, C++, Java, C#, Python, Javascript, …
Language
?
Language GLSL, HLSL, ? CL, CUDA, GLSL
!
The Programmable Pipeline
GPU
Vertex Connectivity
Array Element
Buffer a.k.a.
Index Buffer Object (IBO)
Vertex Shader vs. Fragment Shader
Vertex Shader 12 #12
13
20
Every vertex has an ID!
Vertex Shader
#13
Vertex Shader
#20
Rasterizatio n
Fragment
#1
Fragment
#11
Fragment
#21 Fragment
#10
Every fragment has an ID!
Fragment Pixel
Fragmen t Shader
#1
Fragmen t Shader
#10
Fragmen t Shader
#11
Fragmen t Shader
#21
Shader Data
Uniform
= Shared Constant
Vertex Data
Other
Textures etc…
= ANYTHING YOU WANT!
Example?
Positions…
Normals…
Colors…
Texture Coordinates…
“Per-object constant”
Shader Data and GLSL
OpenGL 4.2 Reference card: Blue means
deprecated www.khronos.org/files/opengl42-quick- reference-card.pdf
“Per-object constant”
in vs. out
Vertex Shader in = Data from Vertex Buffer
out = Rasterizer in
Fragment Shader in = Rasterizer out
out = ANYTHING YOU WANT!
http://en.wikibooks.org/wiki/GLSL_Programming/Rast erization
http://en.wikibooks.org/wiki/GLSL_Programming/Rast erization
Rasterizatio n
GPU Memory GPU Memory
Fragment Pixel
… but usually pixel color and depth
GLSL – Vertex Shader
#version 330
uniform mat4 WorldTransform;
uniform mat4 WorldProjectionTransform;
in vec4 vPos;
in vec4 vNormal;
in vec4 vColor;
out vec4 pos;
out vec4 normal;
out vec4 materialColor;
void main(void) {
normal = normalize(WorldTransform * vNormal);
materialColor = vColor;
gl_Position = WorldProjectionTransform * vPos;
}
Constants Vertex Data Rasterization
Data
gl_Position is also vertex shader output!
Built-In vertex variables
gl_Position is a built-In variable!
Any others?
OpenGL 4.2 Reference card: Blue means
deprecated!!! www.khronos.org/files/opengl42-quick- reference-card.pdf
http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter0 3.html
GLSL – Fragment Shader
Compute final color of pixel
#version 330
const vec4 SunDir = vec4(1, -1, 1, 1);
in vec4 pos;
in vec4 normal;
in vec4 materialColor;
out vec4 colorOut;
void main (void) {
vec4 finalColor = vec4(.2, .2, .2, 1);
vec4 N = normalize(normal);
vec4 L = normalize(SunDir);
float lambertTerm = dot(N, L);
if(lambertTerm > 0.0) {
finalColor += vec4(.4, .4, .4, 1) * lambertTerm;
}
colorOut = finalColor * materialColor;
}
Rasterization Data
The first
outis the color!
You can change that by using
FBO =FBOs Framebuffer
Object
So how to learn GLSL?
www.arcsynthesis.org/gltut/
This Guy!
Official Documentation!
www.opengl.org/registry/doc/glspec43.core.201208 06.pdf
and …
http://www.opengl.org/sdk/docs/man3/xhtm
l/
Vertices & Indices
Program Code
Vertices Indices 0 1 2
Memory
Triangle = 3 x index + 3 x vertex
Position Normal Color Position Normal Color Position Normal Color
struct Vertex {
vec4 Position;
vec4 Normal;
vec4 Color;
};
vec4 (x,y,z,w) is faster than
vec3 (x,y,z)
!!!
7
Example: TRIANGLE_STRIP
Triangle 1 Triangle 2 2 Triangles with only 4 vertices!
Why do we need indices!?
Because it is faster!
Objects can share vertices
Triangle Strip = N x Triangle = (N+2) x index + (N+2) x vertex At most!
Only in size!
Many more advantages…
Buffer Objects
Device Memory
Vertex Buffer Object (VBO)
Array Element Buffer
(IBO) #version 330
uniform mat4 WorldTransform;
uniform mat4 WorldProjectionTransform;
in vec4 Position;
in vec4 Normal;
in vec4 Color;
out vec4 PosOut;
out vec4 NormalOut;
out vec4 ColorOut;
void main(void) {
}
Vertex Shader
0 1 2 7
Vertex Array Object (VAO)
Code
Initialization
Let’s use SDL, GLEW and GLM!
• SDL_Init
• SDL_SetVideoMode
• glewInit
• glViewport
• glClearColor
• Load & compile Shaders
• Link Program
glGetUniformLocation, glGetAttribLocatio n
• foreach object:
• Create IBO
• Create VBOs
• Create VAO
• Bind VBOs to VAO
• Copy uniforms and geometry to device
• glShaderSource
• glCompileShader
• glGetShaderiv(GL_COMPILE_STATUS )
• glGetShaderInfoLog
• glAttachShader
• glLinkProgram
• glGetProgramiv(GL_LINK_STATUS) glGetProgramInfoLog
• glGenBuffers
• glGenVertexArrays
• foreach vbo:
• glBindBuffer
• glEnableVertexAttribArray
• glVertexAttribPointer
• glUniform
• glBufferData
• for buffer objects
Render Loop
Handle User Input events
glClear
Update Camera
Update Objects
Draw Object
glUseProgram
glBindVertexArray
glDrawElements(IBO)
glBindVertexArray(0)
SDL_GL_SwapBuffers
Let’s use SDL, GLEW and GLM!
while (running):
Which libraries again?
SDL + GLEW
and …
vec2, vec3, vec4, …
mat2, mat3, mat4, mat3x4, … +,-,*,/
dot, cross, normalize
translate, rotate, scale
… … …
GLEW
