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