How to do it right

32  Download (0)

Full text

(1)

How to do it right

Disclaimer

This presentation is for educational purposes only.

Copyrights of used imagery remain with their authors.

Progressive OpenGL

(2)

Intro

(3)

So what’s this about

…since 1992

(4)

Geometry Basics

Quadrilateral

This guy

10.96 ≈ 11

 

Nothing inside!

Our Data =   Many Vertices!

Much more

complicated!

(5)

Framebuffer

Program Code

Staring at the screen

Screen Screen

GPUGPU

Windo w

(6)

OpenGL

Old vs. New

(7)

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!

(8)

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!

(9)

The new OpenGL …since 2008!

(GLSL since 2004)

Programmable Pipeline

http://www.opengl.org/registry/doc/glspec43.core.20120806.pdf

Big Changes !!!

(10)

Old to New

Transition in 2004

http://www.khronos.org/opengles/2_X/

(11)

Google does not help with learning

Not helpful

Bad!

(12)

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!

(13)

Shaders and more

OpenGL

Programmable GPU

(14)

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

!

(15)

The Programmable Pipeline

GPU

Vertex Connectivity

Array Element

Buffer a.k.a.

Index Buffer Object (IBO)

(16)

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

(17)

Shader Data

Uniform

= Shared Constant

Vertex Data

Other

Textures etc…

= ANYTHING YOU WANT!

Example?

Positions…

Normals…

Colors…

Texture Coordinates…

“Per-object constant”

(18)

Shader Data and GLSL

OpenGL 4.2 Reference card: Blue means

deprecated www.khronos.org/files/opengl42-quick- reference-card.pdf

“Per-object constant”

(19)

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

(20)

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!

(21)

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

(22)

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

out

is the color!

You can change that by using

FBO =FBOs Framebuffer

Object

(23)

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/

(24)

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…

(25)

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)

(26)

Code

(27)

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

(28)

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):

(29)

Which libraries again?

SDL + GLEW

and …

vec2, vec3, vec4, …

mat2, mat3, mat4, mat3x4, … +,-,*,/

dot, cross, normalize

translate, rotate, scale

… … …

GLEW

GLM for math!

GLM is as easy as GLSL

• But more powerful:

(30)

Homework?

 Write a Phong Shader!

 As usual, you can use…

 Any device

 Any platform

 Any language

 DirectX, XNA etc. are all very similar to OpenGL!

(31)

More info?

 Take GPGPU Programming by 陳維超

 And you will understand how the GPU works

 Take Rendering by 莊永裕

 And you will understand the physics of renderi

ng

(32)

Questions?

Figure

Updating...

References

Related subjects :