CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Introduction to 2D Graphics
Using OpenGL

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 1/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Why Learn About OpenGL?

 A well-known industry standard for real-time 2D and 3D computer
graphics

 Available on most platforms

 Desktop operating systems, mobile devices (OpenGL ES* , e.g., Android), browsers
(WebGL)
* ES is for “Embedded Systems”

 Older (OpenGL 1.0) API provided features for rapid prototyping; newer API
(OpenGL 2.0 and newer) provides more flexibility and control
 Many old features exist in new API as “deprecated” functionality, supported only
for backwards-compatibility with legacy apps
 We will use the new API exclusively

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 2/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Why Learn 2D first?

 A good stepping stone towards 3D – many issues much easier to
understand in 2D
 no need to simulate lights, cameras, the physics of light interacting with
objects, etc.
 intro to modeling vs. rendering and other notions
 get used to rapid prototyping in OpenGL, both of designs and concepts

 2D is still really important and the most common use of computer

graphics, e.g. in UI/UX, documents, browsers

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 3/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Graphics Platforms (1/4)

 We’re writing an interior-design app

 Application Model (AM) is the data being represented by a rendered image
 manipulated by user interaction with the application
 typically a hierarchical model, with components built from lower-level
components
 In our application, AM contains positions & size of each bed, dresser, and
table
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 4/34
CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Graphics Platforms (2/4)

 Graphics Platform runs in conjunction with window manager

 Determines what section of the screen is allocated to the application
 Handles “chrome” (title bar, resize handles); client area is controlled by
application
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 5/34
 CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Graphics Platforms (3/4)

 Typically, AM uses client area for:

 user interface to collect input to the AM
 display some representation of AM in the viewport
 This is usually called the scene, in the context of both 2D and 3D applications
 Scene is rendered by the scene generator, which is typically separate from the
UI generator, which renders rest of UI
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 6/34
CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Graphics Platforms (4/4)

 Early raster graphics packages/libraries/platforms
 RamTek library 1981, Apple QuickDraw 1984
 Microsoft's Graphics Display Interface (GDI 1990, now GDI+), Java.awt.Graphics2D
 Earliest packages were low-level, closely bound to the h/w, and usually had:
 geometric primitives/shapes, appearance attributes specified in attribute bundles
 Such attributes might include primitive interior color, stroke width, or line pattern
 Attributes applied modally rather than in a parameter list for each primitive (too many
parameters for that)
 integer coordinates map directly to screen pixels on output device
 immediate mode (no record kept of display commands)
 no built-in functions for applying transforms to primitives
 no built-in support for component hierarchy (no composite shapes)
 Little more than assembly languages for display device

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 7/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Problems with Early Graphics Platforms (1/3)

Geometric Scalability
 Integer coordinates mapped to display pixels affects apparent size of
image: large on low-res display & small on high-res display
 need to get away from thinking about pixels at all and instead think about
samples which can then be rendered on arbitrary-resolution displays
 Application needs flexible internal coordinate representation to match
the natural coordinate system of the application domain, e.g., angstrom,
lightyears,…
 floating point is essential for precision
 float to fixed conversion required; actually a general mapping

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 8/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Problems with Early Graphics Platforms (2/3)

Display updates
 To perform operations on objects in scene, application must keep list of all
primitives and their attributes (along with application-specific data)
 Some updates are transitory “feedback animations,” only a display change
 Consider our interior-design application: drag-and-drop to move an object
 when user selects an object and drags to new location, object is highlighted and
then follows cursor movement
 interim movements do not relate to data changes in application model, purely
visual changes to provide feedback in the “interaction loop”
 application model only updated when user drops object (releases mouse button)
 in immediate mode, application must re-specify entire scene each time cursor
moves

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 9/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Problems with Early Graphics Platforms (3/3)

Interaction
 Consider a simple clock example for an immediate mode graphics library:
 User clicks minute hand, location must be mapped to relevant application
object; called pick correlation
 Developer responsible for pick correlation (usually some kind of "point-in-
bounding box rectangle" test based on pick coordinates)
 find top-most object at clicked location
 may need to find entire composite object hierarchy from lowest-level primitive to
highest level composite
 e.g., triangle -> hand -> clock
 Solution: retained mode can do pick correlation, as it has a representation
of scene

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 10/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Modern Graphics Platforms (1/2)

 Device-independent floating point coordinate system
 packages convert “application-space" to "device-space" coordinates

 Specification of hierarchy
 support building scenes as hierarchy of objects, using transforms (scale,
rotate, translate) to place children into parents' coordinate systems
 support manipulating composites as coherent objects

 Smart Objects (Widgets, etc.)

 graphic objects have innate behaviors and interaction responses
 e.g., button that automatically highlights itself when cursor is over it

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 11/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Modern Graphics Platforms (2/2)

GUI Platforms: • WPF (Microsoft)
Layout Managers and • Cocoa (Apple)

Retained
• JavaFX (Oracle)
Smart Controls
• Qt (Qt Group)

Templates and • SVG (Adobe)

Reusability

Floating-point • GDI+ (Microsoft)

Coordinates • Quartz (Apple)
Immediate

• HTML5 canvas (W3C)

Integer Pixel • QuickDraw (Apple)

Coordinates • Orig. GDI (Microsoft)

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 12/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Immediate Mode Vs Retained Mode

Immediate Mode (OpenGL, Vulkan, Microsoft’s DirectX, Apple’s Metal)
 Driven from Application model: as always stores both geometric information
and non-geometric information in Application Database
 Graphics platform keeps no record of primitives that compose scene
 Vulkan was originally the next version of OpenGL (code name OpenGL Next) but
was eventually released as its own API. Both are maintained by the Khronos
Group

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 13/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS
Immediate Mode Vs Retained Mode
Retained Mode (WPF, SVG, most game engines)

 Application model in app and Display model in graphics platform

 Display model contains information that defines geometry to be viewed
 is a geometric subset of Application model (typically a scene graph)
 Graphics platform keeps record of primitives that compose scene
 Simple drawing application does not need Application model (e.g., clock example)
 No right answer on which to use – context-dependent tradeoffs (see Chapter 16)
 convenience vs. overhead of the library having to maintain and synch this data structure

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 14/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

In class Question 1

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 15/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

OpenGL (1/3)
 Immediate-mode graphics API
 No display model, application must direct
OpenGL to draw primitives

 Implemented in C, also works in C++

 Bindings available for many other programming languages

 Cross-platform
 Also available on mobile (OpenGL ES) and in the browser (WebGL)
 Different platforms provide ‘glue’ code for initializing OpenGL within the desktop
manager (e.g. GLX, WGL)
 Labs and projects for CS123 use Qt library to abstract this glue code away

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 16/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS
OpenGL (2/3)
 Created by Silicon Graphics Inc. (SGI, http://sgi.com) in 1992, now
managed by the non-profit Khronos Group (http://khronos.org)
 Originally aimed to allow any OpenGL program to run on a variety of
graphics hardware devices
 Invented when “fixed-function” hardware was the norm
 Techniques were implemented in the hardware; OpenGL calls sent commands to
the hardware to activate / configure different features
 e.g., fixed-function API implemented linear algebra needed to move objects on screen

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 17/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

OpenGL (3/3)
 Now supports programmable hardware – the common industry practice today
 Modern graphics cards are miniature, highly parallel computers with many-core GPUs, on-board
RAM, etc.
 GPUs are a large collection of highly parallel high speed arithmetic units; several thousand cores!
 GPUs run simple programs called “shaders”: take in vertices and other data and output a color
value for an individual pixel.
 GLSL, (O)GL Shader Language, is C-like language, controls arithmetic pipelines
 Other shader languages: (DirectX) High-Level Shader Language, RenderMan Shading Language for offline
rendering
 Your final project (typically a team project) will involve writing your choice of shaders (learned in
labs)
 Only true for desktop; must use shaders exclusively to program with OpenGL ES 2.0+ or WebGL
 We will use GLM (OpenGL Mathematics) to do our linear algebra instead of using the old
Fixed-function API

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 18/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Shaders
 In future labs and your final project you will write your own shaders, but for now we
will provide shaders for you
 Various types of input to shaders
 Attributes are the properties of a single vertex
 Position, normal vector are examples of these
 Uniforms are properties with a single value for multiple vertices (or an entire object)
 Scale factor, rotation are examples of these
 OpenGL has many built in types including vectors and matrices
 Inputs are provided to a particular “location” within the shader
 “Location” just an identifier used by shader to determine where value is stored
 glGetAttribLocation returns location of particular attribute
 glGetUniformLocation returns location of particular uniform
 Labs will cover details on how to use these functions

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 19/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Representing Shapes
 3D shapes are usually represented as a collection of vertices that make
up triangles or quads
 OpenGL uses triangles
 Other methods include 3D voxels, polynomial spline curves and surfaces, etc.
 We can use triangles to build arbitrary polygons, and approximate
smooth shapes.

A complex polygon made of An approximate circle made of

triangle primitives triangle primitives

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 20/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Coordinate Systems (1/3)

 Cartesian coordinates in math, engineering
 typically modeled as floating point
 typically X increasing right, Y increasing up

 Display (physical) coordinates

 integer only
 typically X increasing right, Y increasing down
 1 unit = 1 pixel

 But we want to be insulated from physical display (pixel) coordinates

 OpenGL is the intermediary

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 21/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Coordinate Systems (2/3)

 OpenGL Coordinates map from app to pixels in the window
 Choose a convention
 We will use a traditional Cartesian system
 Units are based on the size of the window or screen
 Visible area stretches to fill canvas – our OGL glue code provides a fixed-size square canvas
 Stretches all content inside, so a square will stretch to a rectangle as window is expanded
 Units correlate to percentage of window size, don’t correspond to physical units or pixels
 Define coordinate system using the projection matrix. Supply it to shader as a uniform
variable (the term projection matrix will become clear)
 We use standard [-1, 1] coordinate system for 2D
glm::mat4 projectionMat; // Our projection matrix is a 4x4 matrix
projectionMat = glm::ortho(-1, // X coordinate of left edge
1, // X coordinate of right edge
-1, // Y coordinate of bottom edge
1, // Y coordinate of top edge
1, // Z coordinate of the “near” plane
-1); // Z coordinate of the “far” plane

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 22/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Coordinate Systems (3/3)

 Two choices on how to think
1. Draw everything in OpenGL coordinate system
 This can get very inconvenient!
2. Choose your own abstract coordinate system natural for your app (in
nanometers, lightyears,…), then specify all app’s primitives to OpenGL using your
coordinates.
 Must also specify a transformation to map the application coordinates to OpenGL
coordinates
 “Transformation” usually means a change - scale, rotate, and/or translate – or a
combination of changes

Application
Display
Coordinates

OGL Coordinates
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 23/34
CS123 | INTRODUCTION TO COMPUTER GRAPHICS

In class Question 2

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 24/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Winding Order (a little intrusion of 3D into our 2D world)

 Order is important: vertices must be specified in counter-clockwise order
relative to the viewer. Otherwise nothing shows up!
 Winding order determines whether a triangle’s normal vector is facing in front
or behind it. Triangles facing the wrong way will be invisible!
 Counter-clockwise winding consistent with the “right-hand rule”
GLfloat vertexData[] = { GLfloat vertexData[] = {
-.7, -.7, -.7, -.7,
.7, -.7, -.7, .7,
.7, .7, .7, .7,
-.7, .7, }; .7, -.7, };

N✓ NX
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 25/34
CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Transformations (1/3)
 Standard object transformations are scaling, rotation, and translation
 These transformations can be represented by multiplying matrices
 Don’t worry about specifics for now – the math is explained in viewing lectures
 Use GLM to do linear algebra necessary for these transformations
 Builds (hierarchical) models that constitute “the scene” (aka “the world”)
 For now, we will only use the model matrix which is used to position objects in
terms of the OpenGL coordinate system
 For examples below assume our model matrix starts as an identity matrix
 This means each object’s position will only be changed by the transformations we apply to
it; our coordinate system is the OGL coordinate system
 To create this identity matrix in code, initialize as:
glm::mat4 model = glm::mat4(1.0);

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 26/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Transformations (2/3)
 Geometric Transformations in 2D (note the z-coordinate is 0)

Original Translate
model = glm::translate(.1, .1, 0) * model;
Original Rotate
model = glm::rotate(-45, glm::vec3(0, 0, 1)) * model;

Original Scale
 Positive angles rotate counter-
clockwise, here about the origin (i.e.,
model = glm::scale(2, 2, 1) * model;
Z-axis as vector)
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 27/34
 CS123 | INTRODUCTION TO COMPUTER GRAPHICS
Transformations (3/3)
 Transformations can be composed (combined by multiplying
matrices) but are NOT commutative, so proper order is vital
Original Original

model *= glm::rotate(-90, glm::vec3(0, 0, 1)); model *= glm::scale(2, 1, 1);

model *= glm::scale(2, 1, 1); model *= glm::rotate(-90, glm::vec3(0, 0, 1));

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 28/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Animation (1/3)
 Rapidly displaying sequence of images to create an illusion of
movement
 Flipbook (https://www.youtube.com/watch?v=8k2h4c7uHWs)
 Keyframe animation: specify keyframes, computer interpolates (e.g., ball
bouncing)

Image Credit:
https://alexshawanimation.
Flipbook Keyframe Animation wordpress.com/2014/09/2
4/the-bouncing-ball/

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 29/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Animation (2/3)
 Idea: Move objects incrementally every time we render
 Example: Animating the hands of a clock
 Given the number of seconds elapsed, how many degrees should we
rotate the seconds hand?
 need to convert from seconds to degrees
 Idea: Use rotations around the clock as a common conversion factor
 Seconds per revolution: 60
 Degrees per revolution: 360
 Every time we render, we need to recalculate the position of the hands

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 30/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Animation (3/3)
//Example in code
float secondsElapsed = ...; // Time since last render
float secondHandAngle = 0;

Point pSecondHand;
pSecondHand.y = center.y + (radius * sin(secondHandAngle));
pSecondHand.x = center.x + (radius * cos(secondHandAngle));

drawLine(center, pSecondHand);
secondHandAngle += -1 // Turn clockwise
* secondsElapsed // Δt
* DEGREES_PER_REVOLUTION // Turn 360 degrees ...
/ SECONDS_PER_REVOLUTION; // ... every 60 seconds

github.com/sprintr/opengl-examples/blob/master/OpenGL-Clock-Animated.cpp
Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 31/34
CS123 | INTRODUCTION TO COMPUTER GRAPHICS

Book Sections
 Preface, Intro as useful background
 Chapter 2 – while written in terms of Microsoft’s WPF, a retained-mode
library, the concepts carry over to OGL. Useful to know about
HTML/XML style syntax, given its prominence, but don’t worry about
the syntactic details

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 32/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS
OpenGL Basics Lab (1/2)
 An intro to OpenGL data structures to represent vertex geometry held this week
 Generate 2D graphics and learn the modern OpenGL pipeline

 Fragment: a pixel-independent sample within a triangle with all its associated attributes,
e.g., color, depth, texture coordinates, … the fragment shader provides a many-to-one mapping
between fragments and pixels (e.g. for supersampling, see Image Processing 2)

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 33/34

CS123 | INTRODUCTION TO COMPUTER GRAPHICS

OpenGL Basics Lab (2/2)

 First lab available
 It’s an important foundation
 So start on Lab 1 if you haven't already (it pairs
nicely with the OpenGL lectures)!
 Reminder: you can get your labs checked off by a TA at hours as well,
but please come to lab sections if possible!

Andries van Dam© 2D Graphics using OpenGL – 9/10/2019 34/34