mecㆍviewer v1.4 :: lecture8.pdf

T&C LAB-AI

Robotics

Computer Graphics and Programming

Lecture 8

Basics of OpenGL

Jeong-Yean Yang

2020/12/8

T&C LAB-AI

Introduction to OpenGL

T&C LAB-AI

Robotics

Rendering API

• OpenGL

– Open Graphics Library proposed by Silicon Graphics Inc. in

1992

– Silicon Graphics Inc. produces Computer Graphics

Workstation( The father of computer graphics)

– OpenGL is the Strong Standard Platform for NVidia or AMD
– OpenGL works on Windows, Linux, Android, iOS, and even

any kinds of embedded machine.

• DirectX

– Microsoft challenges to OpenGL World.
– It works on Windows compatible devices, such as PC, Xbox,

Sega, and Dreamcast

T&C LAB-AI

Robotics

What is OpenGL’s purpose?

• OpenGL fill polygons with colors by Lights and materials.
• OpenGL uses Hardware acceleration  Fast speed.

Vertex

Polygon

Perspective

Projection

Z-buffering

Polygon

Based

Rendering

Light and

Material

MoveTo

LineTo

Wireframe

OpenGL’s Area

Lecture 1~7

Lecture 8~

T&C LAB-AI

Robotics

History of OpenGL

• 1.0~ 1.5 : glPushMatrix, glPopMatrix

– Push and Pop structures are used
– OpenGL ES ver. 1.x

• 2.1: Vertex Buffer Object (VBO)

– glGenBuffer, glBindBuffer
– OpenGL ES ver. 2.x
– Shading language(GLSL) appears.

• 3.0: Vertex Array Object (VAO)

– glBindVertexArray
– OpenGL ES ver. 2.x

Still VBO is more popular than VAO

T&C LAB-AI

Robotics

OpenGL Architecture in this Class

• GL.h + GLEW for

our example

• GLSL works on

Only GLEW library.

OpenGL.dll

in Windows

System directory

GL.h

OpenGL.lib

(1.5~2.x)

GLEW

OpenGL

Wrapper library

Dll

wrapper

GLSL

VBO

Graphic

Card

T&C LAB-AI

Robotics

Basic Directory for OpenGL usages

• Your App(uGL-01-Basic) uses “lib/glew/include”
• Glew.h and glew32.lib provide interfaces for glew32.dll

uGL-01-Basic
uGL-02-xxx

GL/glew.h

Win32/glew32.lib

Your App

glew32.dll

T&C LAB-AI

OpenGL in Windows Environment

Something Hard

T&C LAB-AI

Robotics

uGL-01-Basic

New class, “uGL” for OpenGL

Your Program uses

1. glew/include

2. Glew/lib



Project settings are changed.

Graphics

routines

T&C LAB-AI

Robotics

Use files under “lib”

Set Include directory

• Additional include directories

– ..\..\lib; ..\..\lib\glew\include

• .\ = “sw\common\uGL-01-Basic”
• ..\ = “sw\common”
• ..\..\lib=“sw\lib”

T&C LAB-AI

Robotics

Use files under “lib/glew/lib”

Set Library Directory

• ..\..\lib\glew\lib\release\win32

Embed glew32.lib

into your program

T&C LAB-AI

Robotics

Link glew32.lib and OpenGL32.lib

into your App

Warning!!

ONLY x86 (32bit)

T&C LAB-AI

Robotics

uGL.h

Header

file

Device

context for

OpenGL

T&C LAB-AI

Robotics

uGL.cpp

T&C LAB-AI

Robotics

T&C LAB-AI

Robotics

uGL structure

uGL

Run() for animation

Draw() for drawing

Loading() for data loading

New feature for OpenGL

programming

Draw object with uObj

and OpenGL fuctions

• glClearColor  fills background color ( Erase all)
• glFinish  Rendering finishes here.

T&C LAB-AI

Robotics

Ex) uGL-01-Basic

SetBK(RGB(0,0,0));


glClearColor(info.r,info.g,info.b,info.a);

SetBK(RGB(255,0,0));


glClearColor(info.r,info.g,info.b,info.a);

T&C LAB-AI

Draw Polygon by
Vertex Buffer Object (VBO)

T&C LAB-AI

Robotics

Basic Structure in this Class

• uGL : OpenGL environment
• uObj: VBO-based Object Modeling
• uShader: Shader(GLSL)-based rendering
• uCam: perspective mapping(screen) and viewpoint

transform (model)

GLSL

(uShader)

Vertex

buffer

(uObj)

Screen

Model

Color

Camera

(uCam)

uGL

Rendering

T&C LAB-AI

Robotics

Data Loading Must be in OpenGL Thread

• OpenGL has its own Thread.
• uGL::Draw() and uGL::Loading() work in OpenGL

thread

• Keep it in your mind:
• Loading out of OpenGL thread is NOT applied

• Any glxxxxx function, Shader, and VBO must be used

in Loading() and Draw() functions( exactly in OpenGL
thread)

T&C LAB-AI

Robotics

Draw Polygon in OpenGL

Vertex has Position and Normal Vector

• A vertex

– has the position, x, y, and z
– Has the normal vector, nx, ny, nz

• vs is the handle for vertex buffer
• fs is the handle for polygon(face or element) buffer. 21

Polygon

uVector pVer[3]

uPolygon poly.set(0,1,2)

Case 1) MFC part

Case 2) VBO part

T&C LAB-AI

Robotics

Copy Vertex Memory in CPU

into Vertex Buffer (VBO) in GPU

• Float = 4byte, unsigned short = 2byte
• Each point in the polygon has 24 bytes

– 3 float position variables, x, y, and z (12 bytes)
– 3 float normal vector variables, nx, ny, and nz (12bytes)

• Polygon has 3 Points ( 24x3 =72bytes)
• Polygon Index has 3 indices (0,1,2) = ( 2x3 = 6bytes

VBO

Vertex buffer

Memory in CPU

Memory in GPU

72 bytes

6 bytes

T&C LAB-AI

Robotics

1. Generate Vertex Buffer

in “Loading” function

• glGenBuffers creates storage(or array) in the GPU.

• 72 bytes for vertices and 6 bytes for index are not

allocated yet.

glGenBuffers(1,&vs);

72 bytes

6 bytes

glGenBuffers(1,&fs);

T&C LAB-AI

Robotics

2. Copy Vertex into GPU

VBO

72 bytes

glBindBuffer(GL_ARRAY_BUFFER, vs);

glBindBuffer(GL_ARRAY_BUFFER, 0);

Open VBO

Close VBO

VBO

1) Allocate 72 bytes

2) Copy pVer into GPU

72 bytes

glBindBuffer(GL_ARRAY_BUFFER, vs);

glBindBuffer(GL_ARRAY_BUFFER, 0);

Open VBO

Close VBO

glBufferData(GL_ARRAY_BUFFER, 72, pVer, GL_STATIC_DRAW);

2.1 Open VBO memory in GPU

2.2 Allocate and Copy 72bytes

T&C LAB-AI

Robotics

2. Copy Vertex into GPU

2.3 VBO has two fields (position and normal)

12 bytes position

12 bytes normal

glEnableVertexAttribArray(0); 0
glEnableVertexAttribArray(1); 1

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 12,
(void*)0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 12,
(void*)12);

glDisableVertexAttribArray(0);
glDisableVertexAttribArray(1);

0: glVertexAttribPointer(0, 3, GL_FLOAT,

GL_FALSE, 12, (void*)0);

Float x,y,z = 3 EA

Float x,y,z = 12bytes

1: glVertexAttribPointer(1, 3, GL_FLOAT,

GL_FALSE, 12, (void*)12);

Position has 12 bytes

Float nx,ny,nz

T&C LAB-AI

Robotics

3. Copy Face Index into GPU

• glBufferData has two types

– Vertex buffer (72 bytes)

– Polygon index buffer ( 6 bytes)

• Now, loading is finished.

6 bytes

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, fs);

glBufferData(GL_ELEMENT_ARRAY_BUFFER, 6, face,
GL_STATIC_DRAW);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);

Open VBO

Close VBO

glBufferData(GL_ARRAY_BUFFER, 72, pVer, GL_STATIC_DRAW);

glBufferData(GL_ELEMENT_ARRAY_BUFFER, 6, face, GL_STATIC_DRAW);

T&C LAB-AI

Robotics

4. Draw Polygon

Remind: All data are uploaded into GPU

Open Vertex buffer

Close vertex buffer

Close index buffer

Open index buffer

Draw Polygon 3 points by referring index buffer

glUnivorm4f( ooo, r, g, b, a)

T&C LAB-AI

Robotics

Ex) uGL-02-Polygon-Color

Draw a Triangle Polygon

(0,0,0)

(1,0,0)

(0,1,0)

• Why Width is NOT same with Height?

– It is NOT in space, [-320,320], but in space, [-1 1]

T&C LAB-AI

Robotics

ex) uGL-03-Object-Camera

• The Unit Space, [-1, 1] is scaled by Projection.

What is it?

T&C LAB-AI

Robotics

Ex) uGL-03-Object-Camera

Result

• What is model and screen from pCurrentShader(uShader)?

– We will learn GLSL in later parts

Camera

Works!!

Load shader

Screen

(perpective

Mapping)

Model

(Camera

Transform)

glUniformMatrix4fv(pCurrentShader->screen,

1, 0, cam.P.v);

hMat h

= cam.T*cam.R;

glUniformMatrix4fv(pCurrentShader->model,

1, 0, h.v);

T&C LAB-AI

Objects in OpenGL

T&C LAB-AI

Robotics

Build Objects in Class, uObj

• 1. MakeBox, MakeCyl as in the previous examples
• 2. Update() is modified for copying data into GPU

T&C LAB-AI

Robotics

Drawing in uGL

Set camera variable on shader

Draw object

T&C LAB-AI

Robotics

Drawing in uObj

(Set object’s color)

Set three colors on shader

T&C LAB-AI

Robotics

Drawing in uObj

(call vertex VBO)

Open Vertex (Position and Norma) VBO

T&C LAB-AI

Robotics

Drawing in uObj

(call Polygon VBO)

Call Face(polygon) index VBO

T&C LAB-AI

Robotics

Drawing in uObj

Draw Polygons with indexed vertices

Draw Polygons

T&C LAB-AI

Robotics

Drawing in uObj

(close VBO handle)

Close VBO handles

T&C LAB-AI

Robotics

uVector is Replaced by uVertex

(uVertex is defined in uVector.h)

• uVertex has

– uVector position
– uVector normal

• uObj has uVertex ( instead of uVector)

– pVer[0].v  Position
– pVer[0].n  Normal

T&C LAB-AI

Robotics

Ex) uGL-04-uGL-box

(normal vectors are (0,0,1)

T&C LAB-AI

Robotics

Ex) uGL-04-uGL-box

Result

• Set Read at Normal

vector direction

• Set White at Negative

Normal vector direction

• NORMAL Vector is

very important for color
display

Viewpoint

Normal

vector

T&C LAB-AI

Robotics

Ex) uGL-05-uGL-box-normal

(Red and White)

• At the Top, normal vector

are (0,0,1)

• At the bottom, normal

vectors are (0,0,-1)

Viewpoint

n(0,0,1)

Red

n(0,0,-1)

White

T&C LAB-AI

Robotics

Ex) uGL-05-uGL-box-normal2

• Shader color is Red and Black

• Normal Vector is crucial point for Color Expression
• You also think that

– GLSL based Shader can control light and color

T&C LAB-AI

Robotics

Complete Example in OpenGL

ex) uGL-06-uGL-uWnd

• Every Examples and

Assignments are based on
uGL-06-uGL-uWnd example

• Library has uGL, uShader, etc.

• uObj and uWnd will be

modified for a variety of demo.

Library

directory

T&C LAB-AI

Robotics

Basic Structure in Examples

• OpenGL interfaces are defined in uGL
• uWnd is inherited by uGL

– uWnd is for your own purposes

• uObj is for your own object building

Library

uVector

uVertex

uShader

uCam

uGL

uWnd

Inherited by

uGL

uObj

All

Examples

And

Homeworks

T&C LAB-AI

Color in OpenGL

Normal Vector and
Three Colors
( Diffuse, Ambient, Specular, …)

T&C LAB-AI

Robotics

Illumination:

Energy of Physics

• Illumination in Physical world

– Radiance: the flux of light energy in a given direction
– Visibility: Light energy falls upon a surface

• (Remind theHidden surface removal )

– Energy balance: local balance of energy in a scene

• The sum of light energy is equal to energy sources.

• Approximation of Colors and Light in graphics

– Ambient: approximation of the global energy
– Lambertian: approximation of diffuse interaction between

materials and lights

– Phong: approximation of specular effects.

T&C LAB-AI

Robotics

Computer Graphics has Three Color Types

• Ambient : the color of an object in shadow

– Without no additional Light source

• Diffuse: the color of an object surface

– Apple is Red. ( Diffuse color is red)

• Specular: shiny color on the surface by

light source.

T&C LAB-AI

Robotics

All Normal Vectors are Same

ex) normal vectors are (0,0,1) against viewpoint direction

• testZ.exe

T&C LAB-AI

Robotics

All Normal Vectors are Calculated for

Each Polygon

T&C LAB-AI

Robotics

Ambient, Diffuse, and Specular

T&C LAB-AI

Robotics

OpenGL Vs. Ray Tracing

Calculation of Light Energy in a Scene

• OpenGL

– Uses diffuse, ambient, and specular  Approximation
– Reflection is NOT real..
– Light sources are limited

• Ray tracing

– Calculating colors by following a ray.
– The colors of each pixel is determined by calculating

geometries and light sources  Higher computation

– You will do it at the latter part of the semester.

T&C LAB-AI

Robotics

Lambertian Reflection Model

• Lambertian model defines Diffuse color

– by Only Normal vector

• OpenGL rendering calculates cosine for diffuse color53

ˆn

surface

ˆi



ˆr

camera

ˆ : Illumination(light source)

ˆ : Reflection

ˆ :

n normal

ˆ ˆ

cos

i n

 

ˆv

T&C LAB-AI

Robotics

Phong’s Reflection Model

(Phong Shading for Specular color)

• Phong model determines colors:

ˆn

surface

ˆi



 ˆr

camera

ˆ : Illumination(light source)

ˆ : Reflection

ˆ :

n normal



 
 

ˆ ˆ

ˆ ˆ ˆ

ˆ ˆ

i n n

i n n i

 

 



ˆ ˆ

cos

r v







ˆv

Reflection vector

Cosine for specular

color

( )



Specular parameter of surface

(Glass: high, wood: low)

S( )

cos





T&C LAB-AI

Robotics

Phong’s Specular in Your Example

• Open solid.fsh ( GLSL fragment shader)

• GLSL programming uses

– the basic concept of Ray Tracing Method.

 
 

ˆ ˆ

ˆ ˆ ˆ

ˆ ˆ

i n n

i n n i

 

 



ˆ ˆ

cos

r v







S( )

cos





T&C LAB-AI

Robotics

History behind OpenGL

• 1st period(~2003) : Color by texture mapping. No light.
• 2nd period(~2010): Ambient, Diffuse, and Specular
• 3rd period(~2018): GLSL based Phong Shading

• GLSL is a simple tool for mimicking Ray Tracing

– Such as Phong shading, Shadow, Cartoon Rendering

No light effect

Specular

Phong shading

T&C LAB-AI

Robotics

Shading with Normal Vector

• Lambertian model (diffuse color)

– Uses cosine function between surface normal and light.

• Shading approximates colors between vertices.

ˆ ˆ

cos

i n

 

Fill Polygon

ˆf

ˆs

)





 

Interpolation

among vertices

)



 



Interpolation of

normal vector

T&C LAB-AI

Robotics

Why Shading uses

Interpolation of Vertex Normal Vectors

• GPU memory has been limited

– 1. Only vertex has graphical information
– 2. If vertex has normal vector,
– 3. Then, interpolation of normal vectors varies smooth color transition

– (4. But today we have GLSL for Pixel-based color management)

)

cos

i n





 







T&C LAB-AI

Robotics

Shading with Normal

• Definition of Vertex Normal

– Each vertex has its own normal
– Any Normal will be good( Thus, it is NOT a surface normal)

• Normal vector in shading means the color variance

ˆf

ˆs

ˆt

T&C LAB-AI

Robotics

Famous Three Shading

• 1. Flat shading
• 2. Gouraud shading
• 3. Phong shading (Phong Reflection Model)

Flat Shading

Gouraud Shading

Phong Shading

T&C LAB-AI

Robotics

Flat Shading:

How to express surfaces with Flatness

• All vertex normal in a polygon are same

ˆn

) (

)

  





 

ˆ ˆ

cos

i n

 

All pixel colors

in the polygons

are same!

ˆ ˆ

cos

Same

i n

for all pixels

 

T&C LAB-AI

Robotics

Gouraud Shading

How to express surfaces with Smoothness

Gouraud shading averages
all neighboring polygons’ normal vectors
 Normal vectors are smooth

ˆn

i Neighbor

N 

 





T&C LAB-AI

Robotics

Concept of

Flat Vs. Gouraud Shading

Flat

Shading

Object

Normal

Gouraud

Shading

T&C LAB-AI

Robotics

Flat Shading:

Pseudo code

•

Average of vertex’s Normal

1. Create new vertex with nPoly * 3

uVertex *pNew = new uVertex[nPoly*3]

2. k = 0

For i = 0 to nPoly

uPolygon p = pPoly[i]

n = GetNormal(p)

pNew[k].v = pVer[p.f];

pNew[k].n = n;

k++;

pNew[k].v = pVer[p.s];

pNew[k].n = n;

k++;

pNew[k].v = pVer[p.t];

pNew[k].n = n;

k++;

3. delete pVer

nVer = nPoly*3

pVer = pNew;

Example

1. pNew=new uVertex[36]

2. For i = 0 to nPoly

3. ex)

polygon 0 has { 3, 2, 6}

n = GerNormal(Polygon 0)

pNew[0].v = pVer[3]

pNew[0].n = n

pNew[1].v = pVer[2]

pNew[1].n = n

pNew[2].v = pVer[6]

pNew[2].n = n

polygon 1 has { 3, 6, 7}

n = GerNormal(Polygon 0)

pNew[i].v = pVer[3];

pNew[i].n = n

….

T&C LAB-AI

Robotics

Gouraud Shading:

Pseudo code

•

Average of vertex’s Normal

1. Create new vertex buffer with vertex number

uVector *psum = new uVector[nVer]

2. Create new int buffer for counting overlapped vertex.

int *nsum = new int [nVer]

3. For i = 0 to nPoly

uPolygon p = pPoly[i]

n = GetNormal(p)

psum[p.f] = psum[p.f] + n; nsum[p.f]++;

psum[p.s] = psum[p.s] + n; nsum[p.s]++;

psum[p.t] = psum[p.t] + n; nsum[p.t]++;

4. For i= to nVer

psum[i] = psum[i]/nsum[i]

pVer[i].n = psum[i].Unit()

Example

1. pSum=new uVector[8]

2. nPoly = 2*8

polygon 0 = { 3,2,6}

polygon 1= { 3,6,7}

….

pSum[3] += polygon 0’s normal

…

pSum[3]+= polygon 1’s normal

…