CSE 472
OpenGL and GUI Basics
CSE 472 1
What Is OpenGL?
OpenGL is a CG rendering API
Turning geometric and texture primitives to images
Basis of many 3D interactive applications
Cross-platform compatibility
operating system independent
window system independent
[imgur.com]
CSE 472 6
(Not) About OpenGL
Do not:
Think you don’t need to know underlying fundamentals
Think we will only do OpenGL (it’s already very old)
Vulkan (Linux/Windows) also by Khronos Group
OpenGL on Vulkan (Zink)
Metal by Apple
Vulkan on Apple
MoltenVK
DirectX (DXR)
CSE 472 [CryEngine] 7
Rendering
Turning everything into pictures
3D Geometric
Models
Rendering
Image
Transformation,
Storage &
Image Display
Clipping, Generation
Perspective
3D Animation
Definition
Texture
Information
CSE 472 8
Basic Rendering Models
[Slusallek’05]
Rasterization: Ray Tracing:
Project geometry forward Project image samples backwards
(object space order) (screen space order)
[RTX’19]
CSE 472 9
Background
Rendering pipeline
Vertex Primitive Fragment Pixel
Generation Generation Generation Operation
Vertex Primitive Fragment
Processing Processing Processing
CSE 472 10
Rendering
Conversion of 3D model to 2D image
project
determine pixel
determine color
CSE 472 11
Rendering Parameters (Next Lecture)
Camera parameters
Location
Orientation
Focal length
12
CSE 472
3D coordinate systems
Y Y
Z
X X
Z
Right-Hand Left-Hand
Coordinate System Coordinate System
CSE 472 13
Visualizing in 3D
Y
H y=1.0 G
Counter- D C
clockwise
E F
X
x=1.0
1.0
A B
z=1.0
Z CSE 472 14
Rendering a Box in OpenGL
We render the 6 faces as polygons
Polygon specified as a list of vertices
CCW order looking at the surface
H G
C
D
E F
A B
CSE 472 15
OpenGL Polygon Rendering
GLdouble size = 1.0;
glBegin(GL_POLYGON); // front face
glVertex3d(0.0, 0.0, size);
glVertex3d(size, 0.0, size);
glVertex3d(size, size, size);
glVertex3d(0.0, size, size);
glEnd();
CSE 472 16
OpenGL Conventions
C library
All function names start with gl
OpenGL is a retained mode graphics
system
“Finite State Machine”
glBegin(GL_POLYGON) puts us into a
polygon rendering state.
CSE 472 17
OpenGL Types
Basic numeric types
GLdouble = double
GLfloat = float
GLint = int
GLshort = short
Mostly you’ll use GLdouble and GLfloat
CSE 472 18
Function suffixes
Many functions have alternatives
Alternatives are specified by the suffix
glVertex2d
• 2 double parameters
• void glVertex2d(GLdouble x, GLdouble y);
glVertex3f
• 3 float parameters
• void glVertex3f(GLfloat x, GLfloat y, GLfloat z);
glVertex3fv
• void glVertex3fv(const GLfloat *v);
CSE 472 19
Defined
glVertex3fv
Prefix Function # Parms Type Suffix
gl Vertex 1 f (float) v (vector)
glu Begin 2 d (double)
wgl End 3 i (integer)
agl Lighting 4 b (byte)
… … s (short)
Only if varying arguments
CSE 472 20
All of dem…
glVertex2d, glVertex2f, glVertex2i, glVertex2s,
glVertex3d, glVertex3f, glVertex3i, glVertex3s,
glVertex4d, glVertex4f, glVertex4i, glVertex4s,
glVertex2dv, glVertex2fv, glVertex2iv,
glVertex2sv, glVertex3dv, glVertex3fv,
glVertex3iv, glVertex3sv, glVertex4dv,
glVertex4fv, glVertex4iv, glVertex4sv
CSE 472 21
Vector parameters
GLdouble a[ ] = {0, 0, 1};
GLdouble b[ ] = {1, 0, 1};
GLdouble c[ ] = {1, 1, 1};
GLdouble d[ ] = {0, 1, 1};
glBegin(GL_POLYGON); // front face
glVertex3dv(a); H G
glVertex3dv(b);
glVertex3dv(c); C
D
glVertex3dv(d);
glEnd(); E F
CSE 472 A B 22
Specifying a color (no lighting)
glColor3f(red, green, blue);
Most of the same suffixes apply…
GLdouble size = 1.0;
glColor3d(1.0, 0.0, 0.0); // red
glBegin(GL_POLYGON); // front face
glVertex3d(0.0, 0.0, size);
glVertex3d(size, 0.0, size);
glVertex3d(size, size, size);
glVertex3d(size, 0.0, size);
glEnd(); Colors range
from 0 to 1
CSE 472 23
CLI vs GUI
CLI: legacy of teletype interface
Command line interface [PBS]
Graphical User Interface
“Window, Icons, Menus, Pointer”
Post-WIMP
• Multi-touch
• Computer vision
– e.g., hand gesture, eye tracking, …
Development
Xerox PARC
Macintosh
Win3,…
https://youtu.be/XIGSJshYb90 [FRL]
24
Trending at CES ’24 (biased for CG)
CSE 472 25
GUI Crash Course by Carrie Anne Philbin
CSE 472 26
Window (in a Windowing System)
CSE 472 27
Linux GUI
[Wikipedia]
CSE 472 28
Windows Message Handling
[Sneha Latha]
[Huihoo.com] CSE 472 [tenouk.com] 29
PyQt [ https://realpython.com/python-menus-toolbars/ ]
CSE 472 30
Homework
Step 1
Introduction to Visual Studio/OpenGL
Using OpenGLWnd superclass
Basic immediate-mode OpenGL
CSE 472 31
The Basic Idea
Describe an object using surfaces
Surfaces are polygons
Triangles, quadrilaterals, whatever
Important thing is that they are flat
They must also be convex
Provide points in counterclockwise order
From the visible side
CSE 472 32
Convex
A polygon is convex if…
A line segment connecting any two points
on the polygon is contained in the polygon.
If you can wrap a rubber band around the
polygon and touch all of the sides, the
polygon is convex
CSE 472 33
Convex
Not Convex
CSE 472 34
3.00
Top View
d c
X
1.00
h g
1.00 1.00 1.00
3.00
1.00
e f
1.00
a
b
Z
Y Y
e f b f g
a
1.00
X Z o
i m n CSE
j 472 n 35
Front View Side View
How to model this?
CSE 472 36
3.00
Top View
d c
X
1.00
h g
1.00 1.00 1.00
3.00
1.00
e f
1.00
a
b
Z
Y Y
e f b f g
a
1.00
X Z o
i m n j n
Front View Side View
CSE 472 37
Labels
Top View Bottom labels
d c l k
h g p o
e f m n
a b i j
a e f b f g
i m n j n o
Front View Side View
CSE 472 38
