CS 123 INTRODUCTION TO COMPUTER GRAPHICS Introduction to

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Introduction to 2 D Graphics Using Open. GL Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 1/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Why Learn About Open. GL? � A well-known industry standard for real-time 2 D and 3 D computer graphics � Available on most platforms � Desktop operating systems, mobile devices (Open. GL ES* , e. g. , Android), browsers (Web. GL) * ES is for “Embedded Systems” � Older (Open. GL 1. 0) API provided features for rapid prototyping; newer API (Open. GL 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© 2 D Graphics using Open. GL – 9/10/2019 2/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Why Learn 2 D first? � A good stepping stone towards 3 D – many issues much easier to understand in 2 D � � 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 Open. GL, both of designs and concepts 2 D is still really important and the most common use of computer graphics, e. g. in UI/UX, documents, browsers Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 3/34

CS 123 | 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© 2 D Graphics using Open. GL – 9/10/2019 4/34

CS 123 | 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© 2 D Graphics using Open. GL – 9/10/2019 5/34

CS 123 | 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 2 D and 3 D applications � Scene is rendered by the scene generator, which is typically separate from the UI generator, which renders rest of UI Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 6/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Graphics Platforms (4/4) � Early raster graphics packages/libraries/platforms � � � Ram. Tek library 1981, Apple Quick. Draw 1984 Microsoft's Graphics Display Interface (GDI 1990, now GDI+), Java. awt. Graphics 2 D 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© 2 D Graphics using Open. GL – 9/10/2019 7/34

CS 123 | 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© 2 D Graphics using Open. GL – 9/10/2019 8/34

CS 123 | 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© 2 D Graphics using Open. GL – 9/10/2019 9/34

CS 123 | 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-inbounding 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© 2 D Graphics using Open. GL – 9/10/2019 10/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Modern Graphics Platforms (1/2) � Device-independent floating point coordinate system � � Specification of hierarchy � � � packages convert “application-space" to "device-space" coordinates 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© 2 D Graphics using Open. GL – 9/10/2019 11/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Immediate Retained Modern Graphics Platforms (2/2) Andries van Dam© GUI Platforms: Layout Managers and Smart Controls • • WPF (Microsoft) Cocoa (Apple) Java. FX (Oracle) Qt (Qt Group) Templates and Reusability • SVG (Adobe) Floating-point Coordinates • GDI+ (Microsoft) • Quartz (Apple) • HTML 5 canvas (W 3 C) Integer Pixel Coordinates • Quick. Draw (Apple) • Orig. GDI (Microsoft) 2 D Graphics using Open. GL – 9/10/2019 12/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Immediate Mode Vs Retained Mode Immediate Mode (Open. GL, Vulkan, Microsoft’s Direct. X, 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 Open. GL (code name Open. GL Next) but was eventually released as its own API. Both are maintained by the Khronos Group Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 13/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Immediate Mode Vs 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© 2 D Graphics using Open. GL – 9/10/2019 14/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS In class Question 1 Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 15/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Open. GL (1/3) � Immediate-mode graphics API � � Implemented in C, also works in C++ � � No display model, application must direct Open. GL to draw primitives Bindings available for many other programming languages Cross-platform � � Also available on mobile (Open. GL ES) and in the browser (Web. GL) Different platforms provide ‘glue’ code for initializing Open. GL within the desktop manager (e. g. GLX, WGL) � Labs and projects for CS 123 use Qt library to abstract this glue code away Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 16/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Open. GL (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 Open. GL program to run on a variety of graphics hardware devices � Invented when “fixed-function” hardware was the norm � � Techniques were implemented in the hardware; Open. GL 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© 2 D Graphics using Open. GL – 9/10/2019 17/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Open. GL (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: (Direct. X) High-Level Shader Language, Render. Man 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 Open. GL ES 2. 0+ or Web. GL We will use GLM (Open. GL Mathematics) to do our linear algebra instead of using the old Fixed-function API Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 18/34

CS 123 | 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 � � Uniforms are properties with a single value for multiple vertices (or an entire object) � � � Position, normal vector are examples of these Scale factor, rotation are examples of these Open. GL 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 gl. Get. Attrib. Location returns location of particular attribute gl. Get. Uniform. Location returns location of particular uniform Labs will cover details on how to use these functions Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 19/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Representing Shapes � 3 D shapes are usually represented as a collection of vertices that make up triangles or quads � � � Open. GL uses triangles Other methods include 3 D voxels, polynomial spline curves and surfaces, etc. We can use triangles to build arbitrary polygons, and approximate smooth shapes. A complex polygon made of triangle primitives Andries van Dam© An approximate circle made of triangle primitives 2 D Graphics using Open. GL – 9/10/2019 20/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Coordinate Systems (1/3) � Cartesian coordinates in math, engineering � � � Display (physical) coordinates � � typically modeled as floating point typically X increasing right, Y increasing up integer only typically X increasing right, Y increasing down 1 unit = 1 pixel But we want to be insulated from physical display (pixel) coordinates � Open. GL is the intermediary Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 21/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Coordinate Systems (2/3) � Open. GL 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 2 D glm: : mat 4 projection. Mat; // Our projection matrix is a 4 x 4 matrix projection. Mat = 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© 2 D Graphics using Open. GL – 9/10/2019 22/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Coordinate Systems (3/3) � Two choices on how to think 1. Draw everything in Open. GL coordinate system � 2. Choose your own abstract coordinate system natural for your app (in nanometers, lightyears, …), then specify all app’s primitives to Open. GL using your coordinates. � � This can get very inconvenient! Must also specify a transformation to map the application coordinates to Open. GL coordinates “Transformation” usually means a change - scale, rotate, and/or translate – or a combination of changes Application Coordinates Display OGL Coordinates Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 23/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS In class Question 2 Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 24/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Winding Order (a little intrusion of 3 D into our 2 D 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 vertex. Data[] = -. 7, }; N✓ Andries van Dam© { GLfloat vertex. Data[] = -. 7, -. 7, }; { NX 2 D Graphics using Open. GL – 9/10/2019 25/34

CS 123 | 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 Open. GL 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: : mat 4 model = glm: : mat 4(1. 0); Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 26/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Transformations (2/3) � Geometric Transformations in 2 D (note the z-coordinate is 0) Original Translat e model = glm: : translate(. 1, 0) * model; Original Rotate model = glm: : rotate(-45, glm: : vec 3(0, 0, 1)) * model; Original Scale model = glm: : scale(2, 2, 1) * model; Andries van Dam© � Positive angles rotate counterclockwise, here about the origin (i. e. , Z -axis as vector) 2 D Graphics using Open. GL – 9/10/2019 27/34

CS 123 | 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 model *= glm: : rotate(-90, glm: : vec 3(0, 0, 1)); model *= glm: : scale(2, 1, 1); Andries van Dam© model *= glm: : rotate(-90, glm: : vec 3(0, 0, 1)); 2 D Graphics using Open. GL – 9/10/2019 28/34

CS 123 | 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=8 k 2 h 4 c 7 u. HWs) Keyframe animation: specify keyframes, computer interpolates (e. g. , ball bouncing) Flipbook Andries van Dam© Keyframe Animation 2 D Graphics using Open. GL – 9/10/2019 Image Credit: https: //alexshawanimation. wordpress. com/2014/09/24 /the-bouncing-ball/ 29/34

CS 123 | 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? � � Idea: Use rotations around the clock as a common conversion factor � � � need to convert from seconds to degrees Seconds per revolution: 60 Degrees per revolution: 360 Every time we render, we need to recalculate the position of the hands Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 30/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Animation (3/3) //Example in code float seconds. Elapsed =. . . ; // Time since last render float second. Hand. Angle = 0; Point p. Second. Hand; p. Second. Hand. y = center. y + (radius * sin(second. Hand. Angle)); p. Second. Hand. x = center. x + (radius * cos(second. Hand. Angle)); draw. Line(center, p. Second. Hand); second. Hand. Angle += -1 * seconds. Elapsed * DEGREES_PER_REVOLUTION / SECONDS_PER_REVOLUTION; // Turn clockwise // Δt // Turn 360 degrees. . . //. . . every 60 seconds github. com/sprintr/opengl-examples/blob/master/Open. GL-Clock-Animated. cpp Andries van Dam© 2 D Graphics using Open. GL – 9/10/2019 31/34

CS 123 | 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© 2 D Graphics using Open. GL – 9/10/2019 32/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Open. GL Basics Lab (1/2) � An intro to Open. GL data structures to represent vertex geometry held this week � � Generate 2 D graphics and learn the modern Open. GL 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© 2 D Graphics using Open. GL – 9/10/2019 33/34

CS 123 | INTRODUCTION TO COMPUTER GRAPHICS Open. GL 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 Open. GL 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© 2 D Graphics using Open. GL – 9/10/2019 34/34