o m

Programming using OpenGL r . c

l u r
3.1: A First Introduction n b
r tu
a
Sm
v i a
e d
Richardar (Hao) Zhang
S h
(first 60 slides adopted from Torsten Möller)
is
if le
i s Introduction to Computer Graphics
Th CMPT 361 – Lecture 3

May 17, 2012 1

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Today m
.c o
r r
„
l u
OpenGL API overview and modern architecture
b
n
„ OpenGL libraries: GL, GLUT, GLEW, r tu and GLUI
a
„ OpenGL functions and shaders Sm (GLSL)
„ Program structure through i a
v a simple program
e d
ar
„ Basic program structures: main, init, callbacks, etc.
S h
is
„ Specifics on vertex and fragment shaders

if le(polygons), colors, and attributes

„ Primitives
i s
„
Thand interactions
Input
Readings: Chapter 2.0
May 17, 2012 2

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL m
.c o
r r
„ GL = Graphics Library
b lu
n
„ The success of SGI’s GL lead to r tuOpenGL
a
(1992), a platform-independent
S m API that was
„ Easy to use
v i a
e d
„ Close enough to the hardware to get excellent
performance ha
r
S
is
„ Focus on rendering

„ Omitted
e
if lwindowing and input interactions to avoid
h i s
dependency on window systems dependencies
T
May 17, 2012 3

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL is an API … m
o . c
Application programmers’ interface: link betweenl u rr
n b
„ low-level: graphics hardware
r t u
a write
„ high-level: application program you

Sm
v i a
e d
ar
S h
is
if le
h i s
T
OpenGL ES (for embedded systems): a subset of desktop OpenGL, providing
lightweight interface for 2D/3D graphics on mobile and hand-held devices, etc.

May 17, 2012 4

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL libraries m
.c o
r r
„ OpenGL core library (GL)
b lu
u n
„ OpenGL32 on Windows
r t
„ a
GL on most unix/linux systems (libGL.a)
S m
„ OpenGL Utility Library (GLU)
i a
„ Provides functionality tovavoid rewriting code
e d
„ Will now only work arwith legacy code
S h
„ Links with different
s window systems
i
if ewindow systems
„ GLX for lX

„ WGLisfor Windows
T h
„ AGL for Macintosh

May 17, 2012 5

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLUT m
.c o
r r
„ OpenGL Utility Toolkit (GLUT): provides l u
bsystems
n
functionality common to all window
r tu
„ Opening a window a
S m
„ Get input from mouse and keyboard; menus

„ Implements event-driven
i a
v paradigm and callbacks
e d
„ Other nice utilities, re.g., glutSolidTeapot, etc.
h a
S#include <GL/glut.h>
is but lacks the functionality of a
„ Code is portable
f i l e
i s
good toolkit for a specific platform
Thslide bars
„ No

May 17, 2012 6

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 freeglut m
.c o
r r
„ GLUT was created long time ago b (version lu
u n
r
3.7 from 1998?) and has been t unchanged
a
S m
„ Amazing that it works mostly with OpenGL 3.1
v i a
„ Some functionalitydare out-dated since it
r e
requires deprecated h a OpenGL functions
S
„ freeglut updates is GLUT
f il e
h
„ Addedi s capabilities
T
May 17, 2012 7

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLEW m
.c o
„ OpenGL Extension Wrangler Librarylu r r
n b
„ Makes it easy to access OpenGL tr u extensions
available on a particular system a
S m
„ Application needs only to
v i a include glew.h and run
a glewInit()
e d
ar
S h
is
if le
i s
Th
May 17, 2012 8

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Graphics libraries m
. c o
r r
„ u
l )
GLUI: GLUT-based user interface library (libglui
b
u n
r t
„ Offer controls, e.g., a
„ buttons,
Sm
„ checkboxes,
v i a
e d
„ radio buttons,
ar
„ etc.
S h
i s
e
to OpenGL applications
f il
„ But alsoisold; now better
T h
choices include Qt & Tk
May 17, 2012 9

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL evolution m
o . c
„ Controlled by an Architectural ReviewluBoard (ARB) rr
n b
„ Members included SGI, Microsoft, Nvidia,
tr u HP, 3DLabs …
a
Sm
„ Now Khronos Group

„ Was relatively stable (through

v i a version 2.5)
„ Backward compatibleed
ar
„ Evolution reflected
S h new hardware capabilities
„ is
3D texture mapping and texture objects
if le fragment programs
Vertex and
„

h
„ Allows i s
platform specific features through extensions
T
May 17, 2012 10

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Pipeline architecture m
o . c
„ Operations lined up in a pipeline l uto allow rr
n b
parallelization rtu a
Sm
v i a
e d
ar
S h
is An arithmetic pipeline
i l e
„ Imaginef many arithmetic operations
i s
Th through the pipeline
flowing
May 17, 2012 11

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Modern OpenGL m
.c o
r r
„ Graphics performance is now achieved
b l u by using
n
GPU rather than CPU r tu
a
„ Control GPU via programsScalled m shaders
i a
v data to GPU
„ Application’s job is to send
e d
ar
„
S h
GPU does all rendering
is
if le
i s
Th Geometric pipeline

May 17, 2012 12

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GPU vs. CPU m
.c o
r r
b lu
u n
r t
a
Sm
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 13

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL 3.1 m
.c o
r r
„ Totally shader-based
b lu
u n
„ No default shaders
r t
„ Each application must providemboth a vertex shader a
and a fragment shader a S
„ No immediate moded
vi
r e
„ Few state variables h a (contrast to older OpenGL)
S
Most OpenGL is 2.5 functions deprecated
if le
„

„ i
Backwards compatibility not required
Th
May 17, 2012 14

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
Immediate vs. retained modes
m
c o
r r.
„ Immediate: display a primitive as soon
b l u as it is
n
created at the CPU side r tu
a
„ No memory (to store data)
Sm
v i a
„ But lots of overhead for sending data for display
„ e d
Retained: store allarprimitive data in an array
h
before sendingSdata for display
is
„ Modern GPU if le system: retained but send data to
GPU handis do processing/display there
T
May 17, 2012 15

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Other versions m
.c o
r r
„ OpenGL ES
b lu
u n
„ Embedded systems
r t
„ Version 1.0 simplified OpenGL 2.1 a
S m
Version 2.0 simplified OpenGL 3.1
„

Shader based v i a
„
e d
„ WebGL ar
„ S
Javascript implementation of ES 2.0
h
i s
„
f ile on newer browsers
Supported
„ OpenGL
h i s 4.1 and 4.2
T
„ Add geometry shaders and tessellator

May 17, 2012 16

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL functions m
o . c
„ Primitive functions
l u rr
„ n
Low-level: points, line segments, triangles (polygons), b
text (stroke or raster) rtu a
„ Attribute functions Sm
„ v
Color, line thickness, etc.i a
e d
„ Transformations
ar
S h
„ Viewing (e.g., projection), modeling (e.g., rotation)
isof windows, ⎯ GLUT
if le
„ Control, e.g.,
„ i
Input ands interaction ⎯ GLUT
„ Th
Query functions, e.g., of certain OpenGL states
May 17, 2012 17

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL as a state machine
m
c o
r r.
„ OpenGL is a state machine (more so
b l u pre-3.1)
„
u n
OpenGL functions are of two types
r t
„ Primitive generating a
„ Can cause output if primitive is visible Sm
„
v i a
How vertices are processed and appearance of primitive are

„ State changing r e d
controlled by the state

h afunctions
„
Attribute s
S
Transformation
„
i functions
„ if le most state variables are defined by
Under 3.1:
is
the happlication and sent to the shaders
T
May 17, 2012 18

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL function formatm
c o
r r.
function name dimensions b u
l 3, 4, or matrix)
(2,
u n
r t
a
Sm
glUniform3f(x,y,z)

v i a
belongs to GL library re
d x, y, z are floats
h a
S
is
if le
glUniform3fv(p)

h i s p is a pointer to an array
T
May 17, 2012 19

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL #defines m
.c o
r r
„ Most constants are defined in the include
b l u files
n
gl.h, glu.h and glut.h
r tu
„ Note #include <GL/glut.h>m a
should automatically
S
include the others
v i a
„ Examples
e d
ar
„
S h
glEnable(GL_DEPTH_TEST)

is
glClear(GL_COLOR_BUFFER_BIT)
„

„ if le also define OpenGL data types:

Include files
h
GLfloat,i s GLdouble, ...
T
May 17, 2012 20

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL and GLSL m
o . c
Shader-based OpenGL is based lessluon a state
rr
„
n b
rtumodel
machine model than a data flow
a
„ Data flow from CPU (application)
Sm to GPU
„ Most state variables, attributes v i a and related pre-
e d
3.1 functions havearbeen deprecated
S h
„ Actions happen
i s in shaders!
„ f i l e
Job of application program is to get data to GPU
i s
Th
May 17, 2012 21

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLSL m
.c o
r r
„ OpenGL Shading Language: C-like with
b l u
n
tu
„ Matrix and vector types (2, 3, 4 dimensional)
r
a
„ Overloaded operators
S m
„ C++ like constructors
v i a
„ Similar to Nvidia’s Cg e d and Microsoft HLSL
ar
„ Code sent to shaders S h as source code
is functions to compile, link and get
if le
„ New OpenGL
i s
information to shaders
Th
May 17, 2012 22

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Program structure m
o . c
rr
„ Build a complete first program blu
u n
„ Introduce shaders a rt
S m
„ Introduce a standard program structure
v i a
„ Simple viewing ed
ar
„ Two-dimensional S h viewing as a special case of
is
f il e
three-dimensional viewing

h i s
„ Initialization steps and program structure
T
May 17, 2012 23

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Basic program structurem
c o
r r.
„ Most OpenGL programs have a similar
b l u structure
u n
that consists of the following functions
r t
„ main(): a
„ The driver program Sm
„ Enters event loop (last executable statement) v i a
e d
„ init():
ar
„
S h
Sets the state variables
„
i s
Specifies the callback functions (could also be in main())
Opens e
„
f l
i parameters set up
one or more windows with the required properties
„
i s
Viewing

ThAttribute specificcations
„

May 17, 2012 24

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Basic program structurem
c o
r r.
„ Most OpenGL programs have a similar
b l u structure
n
tu
that consists of the following functions
ar
„ InitShader():
S m
Read shader source from files
„
v i a
Create geometry
„
e d
Read, compile andrlink shaders
„
h a
S
See text Section 2.8.5 and Appendix A.1
„

isof callbacks
„ Registration
f i l e
i
„
s
Display function

ThInput, interaction, and window functions

„

May 17, 2012 25

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 main() m
.c o
r r
b lu
u n
r t
a
Sm
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 26

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLUT functions m
.c o
„ glutInit allows application to get commandluline r r
arguments and initializes system n b
r t u
„
a
gluInitDisplayMode requests properties for the window
(the rendering context) m S
„
v i a
RGB color, single buffering: properties logically ORed together
„ glutInitWindowSize in pixels
e d
ar from top-left corner of display
„ glutInitWindowPosition
S h
„ glutCreateWindow
i s create window with title “simple”
„
if le display callback
glutDisplayFunc
i s
glutMainLoop enter infinite event loop
Th
„

May 17, 2012 27

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Display callback m
.c o
„ Display callback invoked when the windowluisr redrawn,
r
e.g., first opening, resized, etc. nb u
r t
„ Once we get data onto the GPU, we a can initiate the
rendering with a simple callback Sm
v i a
e d
ar
S h
is
if le Draw immediately …
„
h i
Arrays are s buffer objects that contain per-vertex info,
e.g.,Tpoint positions in geometry primitive

May 17, 2012 28

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Vertex arrays m
.c o
r r
„ b
Vertices can have many attributes lu
u n
„ Position a rt
Sm
„ Color
v i a
e d
„ r
Texture Coordinates
a
„ Application data S h
is
i l e
„ A vertexf array holds these data
i s
Th
May 17, 2012 29

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Vertex array objects (VBOs
m
)
c o
r r.
„
b l u
Bundles all vertex data (positions, colors, ..,)
n
„
tu
Get name for vertex array then bind
ar
Sm
v i a
e d
ar
„ h a current vertex array but
At this point weShave
no contents is
f i l e
„ Use of sglBindVertexArray lets us switch
h i
T VBOs --- activate a VBO
between

May 17, 2012 30

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Buffer objects m
.c o
r r
„ Buffer objects (on the GPU) allow us to transfer
b l u large
u n
amounts of data from the app program r t to the GPU
a
„ Need to create, bind, and identify Smdata
v i a
e d Array from app
ar
S h
is
if le
„
h
Data in i s
current vertex array is sent to GPU
T
May 17, 2012 31

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Initilization m
.c o
r r
„ Vertex array objects and buffer objects
b l u can be
n
set up in init() r tu
a
„ Set clear color and other OpenGL Sm parameters
i a
„ Set up shaders also asvpart of initialization
e d
„ Read ar
S h
„ Compile
is
„ Link if le
i s
„ FirstTh
let us consider a few other issues

May 17, 2012 32

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Coordinate system m
o . c
r r
„ The units in points are determined by the application
b l u
and are called
n
„ object (or model) coordinates
r tu
a
„
„ world coordinates
S m
Viewing specifications usually are also in object
coordinates transformed through v i a
e d
r
„ eye (or camera) coordinates
„ clip coordinates a
hcoordinates
„ normalized device S
is coordinates
window (or screen)
if le uses some internal reps that usually are
„

„ OpenGL also
h i
not visibles to the app but are important in the shaders
T
May 17, 2012 33

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL camera m
.c o
r r
„ b in object
OpenGL places a camera at the origin lu
u n
space pointing in the negativeaz direction rt
Sm
„ ia
The default viewing volume
v
e d
„ a box centered at the
ar
S h
is
„ origin with sides of

„ length 2 f i l e
i s
Th
May 17, 2012 34

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Orthographic viewing m
c o
r r.
„ Default orthographic view: points are l u projected
along the z axis onto the plane zu=nb0
r t
a
Sm
v i a z=0
e d
ar
S h
is
if le
h i s
T
May 17, 2012 35

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Viewports m
.c o
r r
„ Do not have to use the entire window b l u for the
u n
image: glViewport(x,y,w,h) rt
a
„ Sm
Values in pixels (window coordinates)
v i a
e d
ar
S h
is
if le
i s
Th
May 17, 2012 36

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Transformation and viewing
m
c o
r r.
„ l u
In OpenGL, projection is carried out by a projection
b
matrix (transformation) un r t
a for changes in
„ Transformation functions are also used
S m
coordinate systems
i a
vof transformation functions
„ Pre-3.0 OpenGL had a set
e d
a r
h
which have been deprecated
S
„ Some choicesis now:
Perform inile
„
f application code
GLSLis
„
T h functions in vertex shader

May 17, 2012 37

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL shaders m
.c o
r r
„ Simple Shaders b lu
u n
r t
„ Vertex shader a
Sm
„ Fragment shaders v i a
e d
„ Vertex and fragment ar shaders in separate
S h
files and emust is be included
f il
„ Linkedh i s to app program after compilation
T
May 17, 2012 38

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Execution model m
.c o
r r
b lu
u n
r t
a
Sm
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 39

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Use of vertex shaders m
c o
r r.
„ When executing glDrawArray(), each b u
l of the N
u n
vertices invokes execution of the r t vertex shader
a
glDrawArray(GL_POINTS, Sm 0, N)
v i a
„ Moving vertices: morphing,
e d wave motion,
ar
S h
general mesh deformation, etc.
is realistic models, advanced
„
if le
Lighting: more
shadingi s operations, e.g., carton shader, etc.
Th
May 17, 2012 40

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Use of fragment shaderm
c o
„ Vertex shader causes vertices to be lu r
generated
r.
n bassembly
and passed to clipper and primitive
r tu
Primitive assembly generatesafragments
„
S m
„ Each fragment generation
v i a invokes a call to
fragment shader: perd-fragment (pixel) operation
r e
S ha
is
if le
h i s
T
May 17, 2012 41

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Fragment shade applications
m
c o
r r.
„ Image-space techniques, e.g., texture
b l u
u n
mapping and variations r t
a
Sm
v i a
e d
ar
S h
is
if le
i s
Th
May 17, 2012 42

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Simplest vertex shaderm
c o
r r.
„
b l
Placed in a vShader file, “vsource.glsl u”
„ Include into program by creatingtuan “program
a
object” (see initShader() in text)
r
m S
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 43

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 A “pass-through” vertex shader
o m
r r .c
„ Input vertex positions are in vPosition
b l u
n
u shader when
„ “in” signifies its values are inputrtto
a
the shader is initiated Sm
i a
v variable
„ glPosition: special state
e d
„ gives positions toabe r passed to the rasterizer
S h
is
„ Must be specified by every vertex shader

„ i l e
Typically,f vertex shader applies transformations
i s
Th
to vertices: coordinate system transforms

May 17, 2012 44

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Simplest fragment shader
m
c o
„ Placed in a fShader file, “fsource.glsllu” r
r.
n b
„ Include into program by creatingtua “program
a
object” (see initShader() in text)
r
m S
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 45

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Setting color m
.c o
r r
„ At the minimum, fragment shader outputs b l u a color
u n
for each fragment r t
a
„
m
“out” says it is out from theSshader
v i a
„ gl_FragColor: a built-din variation
r e
„ Specifies color ofh afragment
S
is RGBA color specificitaion (later)
if le
„ 4D vector gives

i s
„ R = 1.0 means red, A = 1.0 means opaque
Th
May 17, 2012 46

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
Link shader with app program
m
c o
r r.
„ Read shaders (from shader source files)
bl u
un
Compile shaders (see InitShader() intappendix)
ar
„

Sm
„ Create a program object
„ iaappendix)
Link everything together (see
v
e d with variables in shaders
„
a r
Link variables in application
h
(see text Section 2.8.5)
S
„ is
Vertex attributes
„ ile (pass info from app to shader)
Uniform fvariables
i s
Therehare other variables pass info between shaders
„
T
May 17, 2012 47

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Summary m
.c o
r r
„ Three components
b lu
n
u files
„ Application program: main() + anytother
a r
„ Vertex shader: own file, must m
be provided
S
a
„ Framgment shader: own ifile,
v must provide
e d
„ Shaders initiated aandr linked: InitShader(), from
within the main() S hprogram
is
„ e
Variablesfillinked among three components
i s
„
Th and then main event loop
Callbacks

May 17, 2012 48

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL geometric primitives
m
c o
r r.
bl u
u n
a rt
GL_POINTS
GL_LINES S m
i a
GL_LINE_STRIP
v
GL_LINE_LOOP

r ed
h a
s S
i
if le
GL_TRIANGLES

h
GL_TRIANGLE_STRIPi s GL_TRIANGLE_FAN

T
May 17, 2012 49

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Polygon issues m
.c o
r r
„ OpenGL will only display triangles!
b lu
u n
„ simple: edges cannot cross
a rt
Sm
„ convex
v i a
d the same plane
Flat: all vertices areein
„
ar
„ S
Application program
h
must tessellate a polygon into
is
ile
trianglesf(triangulation)
h i s
„ T 4.1 contains a tessellator
OpenGL
May 17, 2012 50

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Polygon testing m
.c o
r r
„ Conceptually simple to test for simplicity b l u and
u n
convexity, but time consuming rt
a
„ Earlier OpenGL versions have Sm GL_POLYGON,
i a
vtesting to the application
assumed both and left
e d
ar
„ Present version honly renders triangles
S
is to triangulate an arbitrary
„
if le
Need algorithm
polygoni s (or surface)
Th
May 17, 2012 51

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Good and bad trianglesm
c o
r r.
„ Long thin triangles rendered badly bl u
u n
r t
a
Sm
v i a
e d
ar
„ S h render well
Equilateral triangles
is
„ e
Maximizefilminimum angle
i s
„ Th triangulation for unstructured points
Delaunay
May 17, 2012 52

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Attributes m
.c o
„ rr objects
Attributes determine the appearance of
l u
„ – Color (points, lines, polygons) n b
rt u
„ – Size and width (points, lines) a
„ S
– Stipple pattern (lines, polygons)
m
– Polygon mode v i a
„
e d
a r
•Display as filled: solid
„ color or stipple pattern
Display edges h
„
S
is
Display vertices
„

i l e
f (glPointSize) as built-in OpenGL,
„ Only a sfew
h i
restTby app programs and passed to shaders
May 17, 2012 53

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 RGB color and indexed color
m
c o
„ r buffer
Each color component stored separately inluframe
r.
n b
Usually 8 bits per component in buffertu(bit-planes)
„
a r
„ Color values range from 0.0 (none)
S m to 1.0 (all) as float or
from 0 to 255 as unsigned bytes
v i a
Indexed colors: Colors e dare indices into tables of RGBs
„
ar
„ Requires less memory S h but not as important now —
memory is cheap is
if le
i s
Th
May 17, 2012 54

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Smooth color m
.c o
r r
„ Default is smooth shading
b lu
„ OpenGL interpolates vertex colorstu
n
a r across visible

Sm
polygons

„ Alternative is flat shading v i a

e d
„ Color of first vertexrdetermines
h a
fill color
s S
„ Handled e
i
f i l in shader
i s
Th
May 17, 2012 55

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Setting colors m
.c o
r r
„ Colors are ultimately set in fragment b l u
shader but
u n
can be determined in either shader r t or app
a
„ Application colour: pass toSvertex m shader as a
i a
vattribute
variable or as a vertex
e d
ar
„ Vertex shader color:
S h pass to fragment shader as
a variable is
if le
i
Fragment s color: can alter via shader code
Th
„

May 17, 2012 56

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Input and interactions m
c o
r r.
„ l
Basic paradigm for interactive computer
b u
graphics un r t
a
„ m devices
Physical vs. logical view of input
S
i a
Event-driven input andvcallbacks
„
e d
ar
„ Double bufferinghfor smooth animation
s S
i
„ Programming
f i l e interactions with GLUT
i s
Th Readings: Sections 1.2.5 – 1.2.7, 2.11, 2.12
May 17, 2012 57

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Paradigm for interactive CG
m
c o
„ “Sketchpad project” by Ivan Sutherland 43lu r ago
years
r.
n b
„ r t
Basic interactive paradigm that characterizes interactive u
a Sketchpad):
computer graphics (used for CAD min
S
„ User sees an image on the display
v i a
e d
„
ar
User interacts with the image through an input device

S h
Image changes (object moves, rotates, morphs, etc.)
s
„
i
„ Then repeat if le
i s
This ishstill the basic paradigm we follow today
„
T
May 17, 2012 Who is the “Father of computer graphics” 58

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Sketchpad m
.c o
r r
b lu
u n
r t
a
Sm
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 59

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Physical input devicesm
c o
r r.
bl u
u n
a rt
Sm
v i a data tablet
mouse trackball
e d
h ar
s S
i
if le
h i s
T space ball
joy stick
May 17, 2012 60

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Logical input devices m
c o
r r.
l
Older APIs (GKS, PHIGS, not OpenGL) defined
b u six specific
types of logical input
n
r tu
„ Locator: returns a position, e.g., clicked at by a mouse pointer
a
„ Choice: returns one of n discrete items, e.g., a menu item
Sm
„
v i a
String: returns strings of characters, e.g., via key presses
e d
a r
„ Stroke: returns array
S h of positions
Valuator: as ais
e
„ means to provide analog input, e.g., a slider
f i l
„

h i s
Pick: returns ID of an object
OpenGL and GLUT provide
T functions to handle all these

May 17, 2012 61

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 OpenGL: event-driven m
c o
r r.
„ u
l approach
OpenGL handles interactions via event-driven
b
n
„ Each input device can be triggered at r tuany time by user
a
„ Each trigger generates an event Sm
i a
Event input to the applicationvprogram is put in an event queue
„
e d
ar by application program repeatedly
„
S h
Even queue is examined

Examples of eventis triggers: mouse click, release, key

stroke, ….file
„

i s
Th
May 17, 2012 62

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Some event types m
.c o
r r
„ Window: resize, expose, iconify
b lu
u n
„ Mouse: click one or more buttons
r t
a
„ Motion: mouse movement
Sm
„ Keyboard: press or releaseviof a key
a
e d
„ Timer: triggered when a rthe timer has counted down
S h
„ Idle: noneventis
„ if leshould be done if no other event is in the even
Define what
i s
Th
queue, e.g., useful for generating animation

May 17, 2012 63

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Callbacks m
.c o
r r
„
l
Event-driven paradigm is implemented usingu callback
functions nb
r tu
a
„
graphics system recognizes S
m
Define a callback function for each type of event the

v i a
„
e d is executed when the event
This user-supplied function
occurs ar h
s S
Event ignored iif no callback defined
if le
„

is
GLUT example:
Th
„ glutMouseFunc(mymouse)

mouse callback function

May 17, 2012 64

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLUT callbacks m
.c o
r r by any
l u
GLUT recognizes a subset of the events recognized
nb
particular window system (Windows, X, Macintosh)
r tu
„ glutDisplayFunc a
„ glutIdleFunc Sm
„ glutMouseFunc v i a
e d
„ glutReshapeFunc
ar
„ glutKeyboardFunc S h
is
„ glutMotionFunc
f i l e
„
i s
glutTimerFunc
„ Th
etc.

May 17, 2012 65

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLUT event loop m
.c o
r r
„ Last line in main.c is typically
b lu
u n
glutMainLoop(); r t
a
S m
which puts the program in an infinite event loop
v i a
„ In each pass through rthe edevent loop, GLUT
h a
„
s S
Looks at the events in the event queue
i
„
if le in the queue, GLUT executes the appropriate
For each event
i s
callback function if one is defined
Th
May 17, 2012 66

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Display callback m
.c o
„ r window
Executed whenever GLUT determines thatluthe
r
should be refreshed, e.g., nb
r tu
„ When the window is first opened
a
„ When the window is reshaped Sm
„ When a window is exposed
v i a
e d
„
ar
When the user program decides it wants to change the display
„ In main.c
S h
„ is
glutDisplayFunc(mydisplay) identifies the function to be
executed if le
„
h i s
Every GLUT program must have a display callback
T
May 17, 2012 67

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Posting redisplays m
o . c
„
l u
Many events may change the image and thus invoke the rr
display callback function nb u
r t
„
single pass through the event loop m
a
Can lead to multiple executions of the display callback on a

S
„ We can avoid this problem by
v i a calling
e d
r
glutPostRedisplay();
a
from within each such
S h event callback, which sets a flag
GLUT checks ithe s flag at the end of the event loop
„
f i l e
„
h i
If flag set, s then the display callback function is executed;
T
this ensures that display is redrawn once through a loop

May 17, 2012 68

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Using the idle callback
m o
r. c
„
l u
The idle callback is executed whenever there r are no
events in the event queue nb
r tu
glutIdleFunc(myidle)
a
„ Useful for animations, e.g., Sm
void myidle() { v i a
e d
r
t += dt; /* e.g., a rotation angle */
glutPostRedisplay();
h a
}
s S
i
if le
void mydisplay() {
glClear(…);

h i s /* draw something that depends on t */

T }
glutSwapBuffers();

May 17, 2012 69

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Animation in a display m
c o
r r.
„
b l
In single-buffer mode, the buffer being drawn u to is the
u n
buffer being displayed
r t
a
„ Timing for screen refresh does not
S m synchronize with
ia
drawing of display in the buffer
v
d than one refresh cycle to
Complex displays takeelonger
„
ar
draw: h S
is
Partially drawn screen may be cleared by refresh
e
„

f i l
„
i s
Partial displays may be seen, generating artifacts (demo:

Th
single_double.c)

May 17, 2012 70

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Double buffering
o m
r r .c
lu
„ Instead of one color buffer, we use two
„ Front Buffer: one that is displayed but not written to n b
r t u
„ Back Buffer: one that is written to but not displayed
a
„ Smbuffer in main.c
Program then requests a double
„ glutInitDisplayMode(GL_RGB | GL_DOUBLE) v i a
e d
„
ar
At the end of the display callback buffers are swapped

S h
s
void mydisplay()
i
if le
{
glClear(GL_COLOR_BUFFER_BIT|….)

h i s /* draw graphics here */

T }
glutSwapBuffers()

May 17, 2012 cmpt361\angel\src\single_double 71

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Using global variables
o m
„ The form of all GLUT callbacks is fixed, e.g., rr .c
b l u
„ void mydisplay()
u n
a rt
Sm
„ void mymouse(GLint button, GLint state, GLint x, GLint y)

„
v a
Must use global variables to ipass other necessary
information to callbacks d
r e
h
float t; /*globala*/
S
is
e
void mydisplay()
{ fil
h i s /* draw something that depends on t */
T }

May 17, 2012 72

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 The mouse callback m
o . c
glutMouseFunc(mymouse) l u rr
n b
void mymouse(GLint button, GLint state, r u
t GLint x, GLint y)
a
„ Returns Sm
v i a
„
d
which button (GLUT_LEFT_BUTTON
GLUT_RIGHT_BUTTONr)ecaused event
, GLUT_MIDDLE_BUTTON,

h a
„
s S
state of that button (GLUT_UP, GLUT_DOWN)

position ofle
i
„
if mouse pointer in window
i s
Th
May 17, 2012 73

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Positioning m
.c o
r r
„ The position in the screen window is usually l u measured in
nb
pixels with the origin at the top-left corner
u
„ r t
Consequence of refresh done from topato bottom

„ S m
OpenGL uses a world coordinate system with origin at
the bottom left v i a
e d
r
window: y = h – y ha
„ Must invert y coordinate returned by callback by height of

S
is
if le
i s h

Th
(0,0)

May 17, 2012

w 74

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Obtaining the window size
m o
r. c
„ u r
l height
To invert the y position we need the window
n b
„ Height can change during program execution
r tu
a
Sm
„ Track with a global variable

„ New height returned to reshape i a

v callback
e d
„
ar
Can also use query functions
„ S h
glGetIntegerv(state_name, variable)
i s
„
i l e
glGetFloatv(state_name,
f
variable)

i s
Th
to obtain any value that is part of the OpenGL state

May 17, 2012 75

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Using the mouse position
m
c o
Example, draw a small square at the locationrof the r.
„
l u
mouse each time the left mouse button isbclicked
u n
„ a callback but one
This example does not use the display
rt
is required by GLUT; We can useSmthe empty display
callback function v i a
e d
mydisplay() {}
ar
S h
is
if le
h i s
T
May 17, 2012 76

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Example: drawing square
m
c o
void mymouse(int btn, int state, int x, int y)
r r.
{
if (btn == GLUT_RIGHT_BUTTON && state==GLUT_DOWN) bl u
exit(0);
u n
if (btn == GLUT_LEFT_BUTTON && state==GLUT_DOWN)
a rt
Sm
drawSquare(x, y);
}
void drawSquare(int x, int y)
{ v i a
y = h – y; /* invert y position */
e d
points[0] = points2(x+size, y+size);
ar
points[1] = points2(x-size, y+size);
S h
is
points[2] = points2(x+size, y-size);

if le
points[3] = points2(x-size, y-size);
glBufferSubData( GL_ARRAY_BUFFER, 0, sizeof(quad), quad );
h i s
glutPostRedisplay();
} T
May 17, 2012 77

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Keyboard events m
.c o
r r
„
l
When mouse pointer is in the window, keyu press and
release generate events nb
r tu
glutKeyboardFunc(mykey);
a
glutKeyboardUpFunc(mykeyup);
Sm
void mykey(unsigned char key, int x, int y) {
v i a
d
if (key == ‘Q’ | key == ‘q’) exit(0);
e
}
a r
„ Returns ASCII code
S h of key pressed and location of
mouse pointeris
„ if le keys (F1, arrow) and modifiers (shift)
Note that special
can alsoisbe handled
Th
May 17, 2012 78

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Reshaping the windowm
c o
r r.
„
l u
We can reshape and resize the OpenGL display window
by pulling the corner of the window nb
r tu
a
Sm
„ What happens to the display?
„ Must redraw from application
v i a
e d
„ Two possibilities
a r
„
S h
Display part of world
is world but force to fit in new window,
„
aspectf e
ilratio
Display whole window e.g., may alter

i s
Th
May 17, 2012 79

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Reshape possibilities m
o . c
l u rr
n b
rt u
a
Sm
v i a
e d
ar
S h
is
if le
original
h i s reshaped
T
May 17, 2012 80

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 The reshape callback m
c o
r r.
glutReshapeFunc(myreshape)
bl u
u n
rt
void myreshape(int w, int h)
a
„
S m
Returns width and height of new window (in pixels)
„
the callback v i a
A redisplay is posted automatically at end of execution of

e d
r
define your own ha
„GLUT has a default reshape callback but you probably want to

S
Reshape callback is is good place to put viewing functions
„
e
because fitil is invoked when the window is first opened
i s
Th
May 17, 2012 81

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Reshape example m
.c o
r r
„
l
This callback preserves shapes by makingu the
nb aspect ratio
viewport and world window have the same
r tu
void myReshape(int w, int h) a
{
Sm
mat4 p;
glViewport(0, 0, w, h); v i a
if (w <= h)
e d
ar
p = Ortho2D(-1.0, 1.0, -1.0 * (GLfloat) h / (GLfloat) w,

S h
1.0 * (GLfloat) h / (GLfloat) w);
else
is
if le
p = Ortho2D(-1.0 * (GLfloat) w / (GLfloat) h,
1.0 * (GLfloat) w / (GLfloat) h, -1.0, 1.0);

h i s
glUniformMatrix4fv( projection, 1, GL_TRUE, p );
T }
glutPostRedisplay();

May 17, 2012 82

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 GLUT menus m
.c o
r r
„ GLUT supports pop-up menus
b lu
u n
„ A menu can have submenus
r t
a
„ Three steps
Sm
„ Define entries for the menu v i a
e d
„ Define action for each a rmenu item
S h
is
„Action carried out if entry selected

„ if le to a mouse button
Attach menu
i s
Th
May 17, 2012 83

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Defining a simple menum
c o
r r.
Menu identifier; can be used
bl u
to set current menu
u n
a rt clear screen

Sm
menu_id = glutCreateMenu(mymenu); exit
glutAddmenuEntry(“clear Screen”, 1);
v i a
gluAddMenuEntry(“exit”, 2);
e d
ar
S h
glutAttachMenu(GLUT_RIGHT_BUTTON);
Menu item
identifiers
is
if le
i s
Th
May 17, 2012 84

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Menu actions m
.c o
r r
lu
„ Menu callback
n b
void mymenu(int id)
r t u
{
a
Sm
if (id == 1) glClear();

}
if (id == 2) exit(0);
v i a
e d
ar
„ Submenus can alsohbe created: glutAddSubMenu(…)
S
is
if le
i s
Th
May 17, 2012 85

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Other functions in GLUTm
c o
r r.
„ Dynamic Windows: glutDestroyWindow()
bl u
u n
rt
„ Create and destroy during execution
a ()
Sm
„ Sub-windows: glutCreateSubWindow
„ Multiple Windows
v i a
„ ed execution, e.g., set to NULL
Changing callbacks during
r
a
h ()
„ Timers: glutTimerFunc
s S
i
„ OpenGL texts
f i l e and portable fonts
„
i s
glRasterPos*() for positioning and glutBitmapCharacter() for writing
„ Th
glutStrokeCharacter()

May 17, 2012 86

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 Test example (see Appendix A)
o m
r r .c
„ Display 2D points drawing the Sierpinski
b l u gasket
n
r tu
1. aChoose p randomly
Sm inside the triangle
0

i a
v 2. Choose a triangle vertex
e d
ar randomly

S h 3. p is the midpoint
is
1

f i l e 4. Repeat from step 2,

i s replacing p by p 0 1

Th
An example of a fractal: self-similar geometric structure
May 17, 2012 87

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]
 The Sierpinski gasket m
c o
r r.
bl u
u n
a rt
Sm
v i a
e d
ar
S h
is
if le
h i s
T
May 17, 2012 88

We provide unlocked studymaterials from popular websites at affordable price, email enquiries to [email protected]