INTRODUCTION TO OPENGL / GLSL - Linköping University

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

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

125 εμφανίσεις

Scientific Visualization Group
Linköping University
I
NTRODUCTION TO
O
PEN
GL

/

GLSL
Alexander Bock
1
Alexander Bock
Introduction to OpenGL/GLSL


PEN
/
NTRODUCTION TO
GLSL
GL
O
I
2
http://webstaff.itn.liu.se/~alebo68/public/introductionToOpenGLSlides.pdf
2
Alexander Bock
Introduction to OpenGL/GLSL
O
VERVIEW

Disclaimer

Pipeline

OpenGL

GLSL
3
3
Alexander Bock
Introduction to OpenGL/GLSL
D
ISCLAIMER
4
4
Alexander Bock
Introduction to OpenGL/GLSL


S
PEN
-
V
IMPLIFIED
ERSIONS
O
GL

OpenGL 2.0 (2004)

Programmable pipeline introduced (vertex + fragment shader)

OpenGL 3.0 (2008)

Radical changes to the API (Core vs. Compatibility mode)

Higher performance, less intuitive to learn

OpenGL 4.4 (2013)

Current version (July)
5
5
Alexander Bock
Introduction to OpenGL/GLSL


S
IMPLIFIED
PEN
-
O
ERSIONS
GL
V

Core Mode

No Pre-3.0 functions are supported

Parts of the fixed pipeline are removed (vertex + fragment shaders
must be used)

Asynchronous rendering (CPU + GPU work in parallel)

Compatibility Mode

Core functionality is available

Pre-3.0 functions are available

Slower than ‘Core’ but easier to learn
6
6
Alexander Bock
Introduction to OpenGL/GLSL


PEN
IMPLIFIED
-
ERSIONS
S
GL
O
V

Recommendation:
Learn OpenGL using the Pre-3.0 syntax and later switch
to the newer versions

Caveat:
Mobile OpenGL version (ES) only supports ‘Core’ profile
7
7
Alexander Bock
Introduction to OpenGL/GLSL
INKS
SEFUL
U
L

OpenGL 4 manual

http://www.opengl.org/sdk/docs/man/

OpenGL 2.1 manual

http://www.opengl.org/sdk/docs/man2/

NeHe tutorials (OpenGL 2-ish)

http://nehe.gamedev.net

OpenGL + GLSL Cheat Sheet

http://www.khronos.org/files/opengl-quick-reference-card.pdf

OpenGL = GLSL Specification

http://www.opengl.org/registry/
8
8
Alexander Bock
Introduction to OpenGL/GLSL
M
I
NFORMATION
ISSING

This is only a very basic introduction! There are a lot of
good tutorials on the Internet

Things that we will
not
cover

3D transformations

Projection methods

Glue code (Window creating, reading shaders/textures from disk,
etc)

Core profile

...
9
9
Alexander Bock
Introduction to OpenGL/GLSL
G
P
RAPHICS
IPELINE
10
10
Alexander Bock
Introduction to OpenGL/GLSL
P
RAPHICS
IPELINE
G
11
11
Alexander Bock
Introduction to OpenGL/GLSL
G
IPELINE
P
RAPHICS
11
11
Alexander Bock
Introduction to OpenGL/GLSL
HADER
S
ERTEX
V

Input: Vertex

Single, individual vertex

Ordering is
not
defined

Output: Vertex

Vertices have attributes (position, color, texture
coordinates + user-defined attributes)

Sample usage: applying 3D transformation matrix
12
#version
430 compatibility
void
main()

{
gl_Position = gl_Vertex;
}
12
Alexander Bock
Introduction to OpenGL/GLSL
R
ASTERIZATION

Input: Primitive

Output: List of fragments

Fragment (simplified): Candidate pixel with depth information. Pixels
in the final image will get their color from any number of fragments.

Performs, among others, interpolation

Fixed function

-> No shader program is available (yet). The only interaction is
possible through state changes (for example: glLineStipple,
glLineWidth, glPointSize)
13
13
Alexander Bock
Introduction to OpenGL/GLSL
RAGMENT
HADER
F
S

Input: 1 Fragment

Output: 0 or 1 Fragment

Fragments have a screen position and depth information
+ predefined attributes + user-defined attributes

Fragments can be
discard
ed

Sample usage: Per-pixel lighting, volume rendering
14
#version
430 compatibility
void
main()

{
gl_FragColor = gl_Color;
}
14
Alexander Bock
Introduction to OpenGL/GLSL
RAGMENT
ER
PERATIONS
P
-F
O

Fixed pipeline

Can discard or merge fragments

Assembling multiple fragments (MSAA)

Depth Buffer Test

Result depending on GL_DEPTH_TEST and glDepthFunc

Blending

Result depending on GL_BLEND and glBlendFunc

...
15
15
Alexander Bock
Introduction to OpenGL/GLSL
F
RAMEBUFFER

Buffer that can be rendered into

One
default framebuffer
is created by the windowing system
with the size of the rendering window

Each pixel has a bit depth that is shared between logical
buffers

Front Color, Back Color, Depth, Stencil, Auxiliary Buffers

Stereoscopic monitors: Front Left, Front Right, Back Left, Back Right, ...

Offscreen rendering
16
16
Alexander Bock
Introduction to OpenGL/GLSL
PEN
O
GL
17
17
Alexander Bock
Introduction to OpenGL/GLSL
O
PEN
GL

OpenGL is a state machine

Settings are stored internally by the OpenGL

Current state is used when vertices are pushed through the pipeline

Almost
everything
is a state (
glClearColor
,
glPointSize
,
glLineWidth
,
glBlendFunc
, active shaders, antialiasing,
viewport, ...)
18
18
Alexander Bock
Introduction to OpenGL/GLSL
ENDERING A
R
RIANGLE
T
1.
Set the color that will be used to clear the canvas
2.
Clear the canvas with the color stored in the state machine. This call
will clear both the color buffer and the depth buffer
3.
Set the color that will be used for all following vertices
4.
Begin a vertex declaration. All following vertices will be interpreted as
corners of triangles.
5.
Specify the top corner
6.
Specify the lower left corner
7.
Specify the lower right corner
8.
Finish declaring triangles
9.
Force the OpenGL to complete all rendering before the
main program can continue
19
/* 1 */
glClearColor
(0.f, 0.f, 0.f);
/* 2 */
glClear
(
GL_COLOR_BUFFER_BIT
|

GL_DEPTH_BUFFER_BIT
);
/* 3 */
glColor3f
(1.f, 1.f, 1.f);
/* 4 */
glBegin
(
GL_TRIANGLES
);
/* 5 */
glVertex2f
(0.f, 0.5f);
/* 6 */
glVertex2f
(-0.5f, -0.5f);
/* 7 */
glVertex2f
(0.5f, -0.5f);
/* 8 */
glEnd
();
/* 9 */
glFinish
();
19
Alexander Bock
Introduction to OpenGL/GLSL
BSERVATIONS
O

All OpenGL methods are prefixed by
gl

Most methods have a suffix that declares the type of
arguments

Methods are of type
gl*{ε1234}{ε b s i i64 f d ub us ui ui64}{ε v}

1234: Number of arguments


b
yte’ ‘
s
hort’ ‘
i
nt’ ‘
i
nt
64
bit


f
loat’ ‘
d
ouble’

u
nsigned
b
yte’ ‘
u
nsigned
s
hort’ ‘
u
nsigned
i
nt’

u
nsigned
i
nt
64
bit’

v = vector
20
glColor3f
20
Alexander Bock
Introduction to OpenGL/GLSL
T
R
ENDERING A
RIANGLE

glBegin

accepts many primitive types

GL_POINTS

GL_LINES

GL_LINE_STRIP

GL_LINE_LOOP

GL_TRIANGLES

GL_QUADS

GL_POLYGON

...
21
/* 1 */
glClearColor
(0.f, 0.f, 0.f);
/* 2 */
glClear
(
GL_COLOR_BUFFER_BIT
|

GL_DEPTH_BUFFER_BIT
);
/* 3 */
glColor3f
(1.f, 1.f, 1.f);
/* 4 */
glBegin
(
GL_TRIANGLES
);
/* 5 */
glVertex2f
(0.f, 0.5f);
/* 6 */
glVertex2f
(-0.5f, -0.5f);
/* 7 */
glVertex2f
(0.5f, -0.5f);
/* 8 */
glEnd
();
/* 9 */
glFinish
();
21
Alexander Bock
Introduction to OpenGL/GLSL
ENDERING A
T
R
RIANGLE

Rendering an outline around the triangle

GL_LINES
vs
GL_LINE_STRIP
vs
GL_LINE_LOOP

glColor3f
only affects the next vertex and can be changed
in an glBegin/glEnd block
22
glClearColor
(0.f, 0.f, 0.f);
glLineWidth
(10.f);
glClear
(
GL_COLOR_BUFFER_BIT
|
GL_DEPTH_BUFFER_BIT
);
glColor3f
(1.f, 1.f, 1.f);
glBegin
(
GL_TRIANGLES
);
glVertex2f
(0.f, 0.5f);
glVertex2f
(-0.5f, -0.5f);
glVertex2f
(0.5f, -0.5f);
glEnd
();
glBegin
(
GL_LINE_LOOP
);
glColor3f
(1.f, 0.f, 0.f);
glVertex2f
(0.f, 0.5f);
glColor3f
(0.f, 1.f, 0.f);
glVertex2f
(-0.5f, -0.5f);
glColor3f
(0.f, 0.f, 1.f);
glVertex2f
(0.5f, -0.5f);
glEnd
();
glFinish
();
22
Alexander Bock
Introduction to OpenGL/GLSL
R
RIANGLE
T
ENDERING A

glVertex2f
(x,y)
specified a vertex at position (x,y) with x,y

[-1,1]

glVertex2f
(x,y) =
glVertex3f
(x,y,0.f) =
glVertex4f
(x,y,0.f,1.f)

23
x
y
0
23
Alexander Bock
Introduction to OpenGL/GLSL
ESTING
T
EPTH
D

glEnable
(
GL_DEPTH_TEST
)
/
glDisable
(
GL_DEPTH_TEST
)

glDepthFunc
(...)

Default:
glDisable
(
GL_DEPTH_TEST
)
,
glDepthFunc
(
GL_ALWAYS
)

If depth testing is disabled, later fragments will overwrite the values in the
frame buffer (Painter’s Algorithm)

glDepthFunc
specifies when fragments pass the per-fragment test of the
pipeline

Possible values:

GL_NEVER
,
GL_LESS
,
GL_LEQUAL
,
GL_GREATER
,
GL_NOTEQUAL
,
GL_GEQUAL
,
GL_ALWAYS

See:
http://www.opengl.org/sdk/docs/man/xhtml/glDepthFunc.xml
24
24
Alexander Bock
Introduction to OpenGL/GLSL
B
LENDING

glEnable
(
GL_BLEND
)
/
glDisable
(
GL_BLEND
)

glBlendFunc
(source, destination)

Default:
glDisable
(
GL_BLEND
),
glBlendFunc
(
GL_ONE
,
GL_ZERO
)

Determines how the incoming fragment (source) is blended with the value
already written in the frame buffer (destination)

Possible values (among others):

GL_ZERO
,
GL_ONE
,
GL_SRC_COLOR
,
GL_ONE_MINUS_SRC_COLOR
,
GL_DST_COLOR
,
GL_ONE_MINUS_DST_COLOR
,
GL_SRC_ALPHA
,
GL_ONE_MINUS_SRC_ALPHA
,
GL_DST_ALPHA
,
GL_ONE_MINUS_DST_ALPHA

See:
http://www.opengl.org/sdk/docs/man/xhtml/glBlendFunc.xml
25
25
Alexander Bock
Introduction to OpenGL/GLSL
B
LENDING
26
glClearColor
(0.f, 0.f, 0.f);
glPointSize
(64.f);
glEnable
(
GL_BLEND
);
glBlendFunc
(
GL_ONE
,
GL_ONE
);
glClear
(
GL_COLOR_BUFFER_BIT
|
GL_DEPTH_BUFFER_BIT
);
glColor3f
(1.f, 1.f, 1.f);
glBegin
(
GL_POINTS
);
glVertex2f
(0.f, 0.05f);
glVertex2f
(-0.05f, -0.05f);
glVertex2f
(0.05f, -0.05f);
glEnd
();
glFinish
();
26
Alexander Bock
Introduction to OpenGL/GLSL

ANGUAGE
L
HADING
PEN
O
S
(GLSL)
GL
27
27
Alexander Bock
Introduction to OpenGL/GLSL
GLSL

Shaders are programs that run in parallel on the GPU

GeForce Titan: 2688 cores (2013)

Imperative, “C-like” programming language

We do not have:

No pointer chasing, pointer arithmetic (
*(*p + 2)
) (sort-of)

No dynamic arrays (no memory allocation on a heap) (sort-of)

Automatic type conversion (in general)

We do have:

Additional in-built types for managing vectors, matrices, textures,...
28
28
Alexander Bock
Introduction to OpenGL/GLSL

T
N
YPES
-
ECTORS
ATA
D
EW
V

{ε b d i u}vec{2 3 4}


b
ool’ ‘
d
ouble’ ‘
i
nteger’ ‘
u
nsigned
integer’

{2 3 4}: number of components

Examples

vec2: two float components

dvec4: four double components

...
29
29
Alexander Bock
Introduction to OpenGL/GLSL

ATA
N
-
T
EW
YPES
ECTORS
V
D

Swizzling

Implemented in hardware -> almost free

Three identical variants of accessing components as long
as sets are not mixed

xyzw

rgba

stpq
30
vec4
pos
;
float
c1
=
pos
.x;
float
c2
=
pos
.w;
vec2
c3
=
pos
.xy;
vec2
c4
=
pos
.xz;
vec4
c5
=
pos
.wyzx;
vec4
c6
=
pos
.zzxx;
30
Alexander Bock
Introduction to OpenGL/GLSL

ECTORS
-
YPES
EW
T
V
D
ATA
N

Arithmetic operations work component-wise
vec2
a;
vec2
b;
a * b ==
vec2
(a.x * b.x, a.y * b.y);

Built-in functions operate on vectors component-wise

For example: cos, sin, abs, sqrt, ...

Also available normalize, dot, cross, ...

See
http://www.opengl.org/registry/doc/GLSLangSpec.
4.40.pdf
(page 132 following)
31
31
Alexander Bock
Introduction to OpenGL/GLSL

EW
ATRICES
ATA
N
M
T
D
YPES
-

{ε d}mat{2 3 4}{ε {x2 x3 x4}}

Examples
:

mat2 (= mat2x2): float, 2 columns, 2 rows

dmat3 (= dmat3x3): double, 3 columns, 3 rows

mat3x4: float, 3 columns, 4 rows

Matrices (on default) are
column-major
32
32
Alexander Bock
Introduction to OpenGL/GLSL

-
ATA
M
EW
N
YPES
D
T
ATRICES

Accessors:
mat3x4
matrix;
vec3
col1 = matrix[0];
// First column
float
val1 = matrix[2][1];
// Third column, second row

Arithmetic operations involving matrices behave as
mathematically expected

Matrix * Vector

Matrix * Matrix

Vector * Matrix
33
33
Alexander Bock
Introduction to OpenGL/GLSL

EW
EXTURES
N
YPES
T
D
T
-
ATA

Opaque type
sampler1D
,
sampler2D
,
sampler3D

(among others)

Access using built-in functions:

See
http://www.opengl.org/registry/doc/GLSLangSpec.4.40.pdf
(page 132 following)

vec4
texture(
sampler1D
texture,
float
pos);

vec4
texture(
sampler2D
texture,
vec2
pos);

vec4
texture(
sampler3D
texture,
vec3
pos);
34
34
Alexander Bock
Introduction to OpenGL/GLSL
Q
UALIFIERS
EW
N

uniform

A qualifier for a global variable, which can be set from the host
program using OpenGL functions (
glUniformX
)

Example:
uniform

float
_
blendFactor;

in/out

Denote values that are passed from one shader stage to the next.
Have to be (in general) named the same in both shader stages.

Example:

Vertex Shader:
out vec3

originalPosition;

Fragment Shader:
in vec3

originalPosition;
35
35
Alexander Bock
Introduction to OpenGL/GLSL
V
EFINED
P
-D
ARIABLES
RE

Vertex shader (In)
gl_Vertex
(vertex position [
glVertex
*])
gl_Color
(primary color [
glColor
*])
gl_Normal
(normal directory
[
glNormal
*])
...

Vertex shader (Out)
gl_Position
(vertex position)
...
36

Fragment shader (In)
gl_FragCoord
(fragment position)
...

Fragment shader (Out)
gl_FragData
(fragment color)
gl_FragDepth
(fragment depth)
36
Alexander Bock
Introduction to OpenGL/GLSL
E
XAMPLE
37
37
Alexander Bock
Introduction to OpenGL/GLSL
XAMPLE
E
38
Vertex Shader
#version
430 compatibility
out vec3
position;
uniform mat4
_viewProjectionMatrix;
void
main()

{
gl_Position = _viewProjectionMatrix *
vec4
(gl_Vertex, 1.0);
position = gl_Vertex;
}
#version
430 compatibility
in vec3
position;
uniform sampler2D
_texture;
void
main() {

vec3
color =
texture
(_texture, position.st).rgb;
gl_FragData =
vec4
(color, 1.0);
}
Fragment Shader
38
Alexander Bock
Introduction to OpenGL/GLSL
UESTIONS
Q
39
39