Introduction to Computer Graphics and GPU Programming

skillfulwolverineΛογισμικό & κατασκευή λογ/κού

2 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

72 εμφανίσεις

I
n
t
r
o
d
u
c
t
i
o
n

t
o
C
o
m
p
u
t
e
r

G
r
a
p
h
i
c
s
a
n
d

G
P
U
P
r
o
g
r
a
m
m
i
n
g
Hanspeter Pfister
pfister@merl.com
Eric Chan
chan@merl.com
Lecture 1
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
1
O
f
f
l
i
n
e

R
e
n
d
e
r
i
n
g

5

Y
e
a
r
s

A
g
o
S
h
r
e
k
,

P
D
I

D
r
e
a
m
w
o
r
k
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
2
I
n
t
e
r
a
c
t
i
v
e

5

Y
e
a
r
s

A
g
o
Q
u
a
k
e

3
,

i
d

s
o
f
t
w
a
r
e
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
3
M
o
d
e
r
n

O
f
f
l
i
n
e

R
e
n
d
e
r
i
n
g
C
a
r
s
,

P
i
x
a
r
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
4
M
o
d
e
r
n

I
n
t
e
r
a
c
t
i
v
e

R
e
n
d
e
r
i
n
g
P
r
o
j
e
c
t

G
o
t
h
a
m

R
a
c
i
n
g
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
5
M
o
d
e
r
n

O
f
f
l
i
n
e

R
e
n
d
e
r
i
n
g
S
t
a
r
s
h
i
p

T
r
o
o
p
e
r
s

2
,

T
i
p
p
e
t
t

S
t
u
d
i
o
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
6
M
o
d
e
r
n

In
t
e
r
a
c
t
i
v
e

R
e
n
d
e
r
i
n
g
I
-
8
,

I
n
s
o
m
n
i
a
c

G
a
m
e
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
7
W
h
a
t

h
a
p
p
e
n
e
d

i
n

t
h
e

p
a
s
t

5
y
e
a
r
s
?
!
I
n
t
e
r
a
c
t
i
v
e

i
s

d
e
l
i
v
e
r
i
n
g

n
e
a
r
-
o
f

i
n
e

q
u
a
l
i
t
y
1
,
0
0
0
,
0
0
0
x

f
a
s
t
e
r
!
G
P
U
s

h
a
v
e

t
a
k
e
n

a
d
v
a
n
t
a
g
e

o
f
s
e
m
i
c
o
n
d
u
c
t
o
r

t
r
e
n
d
s

t
o

d
e
l
i
v
e
r

p
e
r
f
o
r
m
a
n
c
e
!
G
P
U

s
t
r
e
n
g
t
h
s
/
w
e
a
k
n
e
s
s
e
s

h
a
v
e

s
p
a
r
k
e
d
i
n
n
o
v
a
t
i
o
n

i
n

a
l
g
o
r
i
t
h
m
s

a
n
d

s
o
f
t
w
a
r
e
M
a
t
t

P
h
a
r
r
,

N
e
o
p
t
i
c
a
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
8
R
e
c
e
n
t

T
r
e
n
d
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

1
9
P
C

A
r
c
h
i
t
e
c
t
u
r
e
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
0
G
P
U

P
r
o
g
r
a
m
m
i
n
g
N
v
i
d
i
a
,

E
G

2
0
0
4
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
1
H
o
w

t
o

g
e
t

f
r
o
m

h
e
r
e

t
o

h
e
r
e
?
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
2
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
3
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
Application
Command
Geometry
Rasterization
Fragment
Display
CPU
GPU
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
4
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
!
Q
u
a
k
e

3
:
!
d
e
f
i
n
e

g
a
m
e

b
e
h
a
v
i
o
r
!
n
e
t
w
o
r
k
i
n
g
!
u
s
e
r

i
n
p
u
t

e
v
e
n
t
s
!
s
o
u
n
d

p
r
o
c
e
s
s
i
n
g
!
g
a
m
e

A
I
!
g
a
m
e

p
h
y
s
i
c
s
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
5
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
!
Q
u
a
k
e

3
:
!
s
e
n
d

O
p
e
n
G
L
c
o
m
m
a
n
d
s
!
O
p
e
n
G
L

d
r
i
v
e
r
:
!
p
r
o
c
e
s
s

G
L

c
o
m
m
a
n
d
s
t
r
e
a
m
!
t
a
l
k

t
o

G
P
U
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
6
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
!
G
P
U
:
!
v
e
r
t
e
x

t
r
a
n
s
f
o
r
m
a
t
i
o
n
s
!
v
e
r
t
e
x

l
i
g
h
t
i
n
g
!
c
l
i
p
p
i
n
g
!
p
r
i
m
i
t
i
v
e

a
s
s
e
m
b
l
y
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
7
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
!
G
P
U
:
!
c
o
n
v
e
r
t

t
r
i
a
n
g
l
e
s

t
o
f
r
a
g
m
e
n
t
s
!
t
e
x

c
o
o
r
d
i
n
a
t
e
i
n
t
e
r
p
o
l
a
t
i
o
n
!
c
o
l
o
r

i
n
t
e
r
p
o
l
a
t
i
o
n
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
8
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
!
G
P
U
:
!
t
e
x
t
u
r
i
n
g
!
d
e
p
t
h

t
e
s
t
!
c
o
l
o
r

b
l
e
n
d
i
n
g
Application
Command
Geometry
Rasterization
Fragment
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

2
9
T
h
e

G
r
a
p
h
i
c
s

P
i
p
e
l
i
n
e
Application
Command
Geometry
Rasterization
Fragment
Display
id software
L
e
c
t
u
r
e

1
:

S
l
i
d
e

3
0
U
p
g
r
a
d
i
n
g

t
h
e

p
i
p
e
l
i
n
e
Application
Vertex
Rasterization
Fragment
Display
!
T
r
a
d
i
t
i
o
n
a
l

p
i
p
e
l
i
n
e
:
!
f
i
x
e
d
-
f
u
n
c
t
i
o
n
!
c
o
n
f
i
g
u
r
a
b
l
e

u
s
i
n
g

G
L
s
t
a
t
e
s
!
l
i
m
i
t
e
d

f
e
a
t
u
r
e
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

3
1
P
r
o
g
r
a
m
m
a
b
l
e

P
i
p
e
l
i
n
e
Application
Vertex
Rasterization
Fragment
Display
Application
Programmable
Vertex Unit
Rasterization
Programmable
Fragment Unit
Display
L
e
c
t
u
r
e

1
:

S
l
i
d
e

3
2
V
e
r
t
e
x

S
h
a
d
e
r
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

3
3
P
i
x
e
l

S
h
a
d
e
r
s
L
e
c
t
u
r
e

1
:

S
l
i
d
e

3
4
R
e
s
u
l
t
s
IMGD 4000 (D 08)
1
Professor Charles Rich
Computer Science Department
rich@wpi
.
edu
GLSL Programming
Technical Game Development II
Reference:

Rost
, OpenGL Shading Language, 2nd Ed., AW, 2006


The Orange Book

IMGD 4000 (D 08)
2
The OpenGL Pipeline
IMGD 4000 (D 08)
3
OpenGL Programmable Processors
IMGD 4000 (D 08)
4
Vertex Processor
IMGD 4000 (D 08)
5
Fragment (Pixel) Processor
IMGD 4000 (D 08)
6
GLSL Language
!
Similar to C, C++
!
Builtin
vector and matrix operations:

vec2, vec3, vec4

mat2, mat3, mat4
!
Texture lookup

sampler1D, sampler2D, sampler3D
IMGD 4000 (D 08)
7
Simple

Shader
Program Example
!
Surface temperature coloring

Assume temperature is known at each
vertex
in
model

smoothly color surface to indicate temperature at
every
point (using interpolation
IMGD 4000 (D 08)
8
// parameters read from application (per primitive)
uniform float
CoolestTemp
;
uniform float
TempRange
;
// incoming property of this vertex
attribute float
VertexTemp
;
// to communicate to the fragment
shader
varying float Temperature;
void main()
{
// communicate this vertex's temperature scaled to [0.0, 1.0]
Temperature = (
VertexTemp
-
CoolestTemp
) /
TempRange
;
// don't move this vertex

gl_Position

=
gl_ModelViewProjectionMatrix
*
gl_Vertex
;
}
Vertex
Shader
IMGD 4000 (D 08)
9
Fragment
Shader
// parameters read from application (per primitive)
uniform vec3
CoolestColor
;
uniform vec3
HottestColor
;
//
interpolated
value from vertex
shader
varying float Temperature;
void main()
{
// compute a color using built-in mix() function
vec3 color = mix(
CoolestColor
,
HottestColor
, Temperature);
// set this pixel's color (with alpha blend of 1.0)

gl_FragColor

= vec4(color, 1.0);
}
IMGD 4000 (D 08)
10
Shader
Execution
!
Vertex
shader
is run once per vertex
!
Fragment
shader
is run once per pixel
!
Many such executions can happen
in parallel
!
No communication or ordering between
executions

no vertex-to-vertex

no pixel-to-pixel
IMGD 4000 (D 08)
11
Moving Vertices in
Shader
uniform vec3
LightPosition
;
uniform vec3
SurfaceColor
;
uniform vec3 Offset;
uniform float
ScaleIn
;
uniform float
ScaleOut
;
varying vec4 Color; // color calculation for pixel
shader
void main()
{
vec3 normal =
gl_Normal
;
vec3 vertex =
gl_Vertex
.xyz +

noise3
(Offset +
gl_Vertex
.xyz *
ScaleIn
) *
ScaleOut
;
normal = normalize(
gl_NormalMatrix
* normal);
vec3 position = vec3(
gl_ModelViewMatrix
* vec4(vertex,1.0));
vec3
lightVec
= normalize(
LightPosition
- position);
float diffuse = max(dot(
lightVec
, normal), 0.0);
if (diffuse < 0.125) diffuse = 0.125;
Color = vec4(
SurfaceColor
* diffuse, 1.0);

gl_Position

=
gl_ModelViewProjectionMatrix
* vec4(vertex,1.0);
}
IMGD 4000 (D 08)
12
Trivial Fragment
Shader
varying vec4 Color;
void main()
{

gl_FragColor

= Color;
}
IMGD 4000 (D 08)
13
Loading
Shaders
in
jME
Node model = (Node) new
BinaryImporter
().load(


getClass
().
getResource
(
"King_Black
.model"));
rootNode
.
attachChild
(model);
GLSLShaderObjectsState
shader

=
display.
getRenderer
().
createGLSLShaderObjectsState
();
shader
.load(
getClass
().
getResource
("noise.
vert"
),


getClass
().
getResource
("noise.
frag"
));
shader
.
setUniform
(
"LightPosition"
, 0.0f, 0.0f, 4.0f);
shader
.
setUniform
(
"SurfaceColor"
, 1.0f, 1.0f, 1.0f);
shader
.
setUniform
("Offset", 0.85f, 0.86f, 0.84f);
shader
.
setUniform
(
"ScaleIn"
, 1.0f);
shader
.
setUniform
(
"ScaleOut"
, 1.0f);
shader
.
setEnabled
(true);
model.
setRenderState
(
shader
);


IMGD 4000 (D 08)
14
Lots

More You

Can

Do

With
Shaders
!
Procedural Textures

patterns (stripes, etc.)

bump mapping
!
Lighting Effects
!
Shadows
!
Surface Effects

refraction, diffraction
!
Animation

morphing

particles
IMGD 4000 (D 08)
15
Lots More ...
!
Anti-aliasing
!
Non-photorealistic effects

hatching, meshes

technical illustration
!
Imaging

sharpen, smooth, etc.
!
Environmental effects (
RealWorldz
)

terrain

sky

ocean
IMGD 4000 (D 08)
16
Shader
Programming
!
Seems to lie on the boundary between art
and tech

programming is hard-core (parallel algorithms)

but intended result is often mostly aesthetic

Screen shot of the
SolidWorks
application, showing a jigsaw rendered with
OpenGL
shaders
to simulate a chrome body, galvanized steel housing, and
cast iron blade. (Courtesy of
SolidWorks
Corporation)
Different glyphs applied to a cube using the glyph bombing
shader
described in Section 10.6. (3Dlabs, Inc.)
The lattice
shader
presented in Section 11.3 is applied to the cow model. (3Dlabs, Inc.)
A simple box and a
torus
that have been bump-mapped using the
procedural method described in Section 11.4. (3Dlabs, Inc.)
A variety of materials rendered with Ward's BRDF model (see
Section 14.3) and his measured/fitted material parameters.
Brick
shader
with and without
antialiasing
. On the left, the results of the brick
shader
presented in Chapter
6. On the right, results of
antialiasing
by analytic integration using the brick
shader
described in Section
17.4.5. (3Dlabs, Inc.)

A variety of screen shots
from the 3Dlabs
RealWorldz
demo.
Everything in this demo is
generated procedurally
using
shaders
written in
the OpenGL Shading
Language. This includes
the planets themselves,
the terrain, atmosphere,
clouds, plants, oceans,
and rock formations.
Planets are modeled as
mathematical spheres, not
height fields. These
scenes are all rendered at
interactive rates on
current generation
graphics hardware