COMP 371/4 Computer Graphics Week 1

COMP 371/4 Computer Graphics Week 1 Course Overview Introduction to Computer Graphics: Definition, History, Graphics Pipeline, and Starting Your First OpenGL Program Ack: Slides from Prof. Fevens, Concordia Prof. Gross, ETH

Instructor : Tiberiu Popa Office: EV 3.127 Lectures: Thu 17:45 20:15 Office Hours: Fri 15:30-16:30 E-Mail: tiberiu.popa@concordia.ca Phone: (514)848-2424 ext. 4057 COMP 371 Week 1 2

Textbook Computer Graphics with OpenGL Donald Hearn and M. Pauline Baker Publisher: Prentice Hall Third Edition ISBN: 0130153907 Student Source Code http://esminfo.prenhall.com/computing/hearnbaker/code.zip 3 COMP 371 Week 1

Administration Course web page: moodle Course Mark Break-down: Assignments (3) 30% Midterm 20% Discussions 10% Final project 40% COMP 371 Week 1 4

Important Dates Homework (3, 10% each): HWK 1: Jan 23, 2014 HWK 2: Feb 13, 2014 HWK 3: March 19, 2014 Preliminary midterm date (20%): Feb 27, 2014 (in class) Project: To be discussed later COMP 371 Week 1 5

What is COMP371? COMP371 is a Computer Graphics course What is Computer Graphics? Everything on computer that is not text or sound 6 COMP 371 Week 1

What is COMP371? 7 COMP 371 Week 1

What is COMP371? 8 COMP 371 Week 1

What is COMP371? 9 COMP 371 Week 1

What is COMP371? 10 COMP 371 Week 1

What is COMP371? 11 COMP 371 Week 1

What is COMP371? 12 COMP 371 Week 1

What is COMP371? 13 COMP 371 Week 1

What is COMP371? 14 COMP 371 Week 1

What is COMP371? 15 COMP 371 Week 1

What is COMP371? 16 COMP 371 Week 1

What is COMP371? 17 COMP 371 Week 1

Impressive? Welcome to the fascinating world of computer graphics This course: first few steps Many courses to follow: COMP 376 Game design 1 COMP 476 Game design 2 COMP 477 - Animation COMP 691F - Geometry COMP 371 Week 1 18

What is 3D Graphics? Ingredients: Geometry (==Math) Shading (==light transport == physics) Recipes: Real-time: Heavily parallel graphics pipeline OpenGL Off-line: Ray-tracing, Path-tracing Radiosity COMP 371 Week 1 19

What is COMP371? You will learn The fundamental concepts of 3D Computer Graphics The basic algorithms used in Graphics The mechanics of writing programs in OpenGL How to solve complex problems using OpenGL You do need previous programming, in particular C/C++, to take this course VERY HIGH LOAD 20 COMP 371 Week 1

What Can We Do by the End of the Course? Write C/C++ and OpenGL applications such as: Program computer games and graphical applications You will be ready to take on part-time or full-time programming jobs COMP 371 Week 1 21

What you wil have to do Work VERY, VERY, VERY, VERY,, VERY hard This is one of the most difficult courses!!!!! Why? This is the foundation for those of you who want to specialize in graphics!!! Computer Graphics is beautiful (literally) but hard Start every assignment early Don t fall behind Ask if you don t know (in class; in the labs) Do your own work WATCH YOUR COURSE LOAD!!! Do not take other hard courses in parallel!!!! COMP 371 Week 1 22

Let s work backwards Example How was this image generated? 1. First is geometry 1. Representation 2. Modeling or acquisition 2. Place a virtual camera into the scene? 1. Transformations 3. Compute colors 1. Light-transport 2. Light equation 4. Convert it into pixels 1. COMP Scan 371 Week 1 conversion 23

Graphics Pipeline SGI (Silicon Graphics) improved the graphics workstation by implementing the pipeline in hardware (1982) Programmers used a library called GL. With GL, it was relatively simple to program three dimensional interactive applications COMP 371 Week 1 24

Computer Graphics: 1990-2000 OpenGL API (1992) Completely computer-generated feature-length movies (Toy Story) are successful New hardware capabilities Texture mapping Blending Accumulation, stencil buffer Computer Graphics: 2000- Photorealism Graphics cards for PCs dominate market Nvidia, ATI, 3DLabs Game boxes and game players determine direction of market Computer graphics routine in movie industry: Maya, Lightwave COMP 371 Week 1 25

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination COMP 371 Week 1 26

Geometry Shading Texture mapping Modeling Animation Global illumination Outline of course How to specify the 3-D positions of the camera and the scene objects and their various parts, how to project these to 2-D image locations, and how to represent transformations of these positions COMP 371 Week 1 27

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination How to model light interaction with 3-D surfaces with varying material properties in order to calculate the proper colors perceived by the eye at different image locations COMP 371 Week 1 28

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination How to apply layers of detail to scene objects to show features, simulate bumps and reflections, or other precomputed shading effects. Procedural texturing is concerned with how some kinds of textures are generated algorithmically COMP 371 Week 1 29

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination How to efficiently represent the geometry of scene objects, which may be complex, curved, etc. COMP 371 Week 1 30

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination How to render dynamic scenes COMP 371 Week 1 31

Outline of course Geometry Shading Texture mapping Modeling Animation Global illumination How to realistically simulate inter-reflections of light between multiple sources and object surfaces COMP 371 Week 1 32

What is Computer Graphics? Computer Graphics has following components: Modeling: Create and represent the geometry of objects in the 3D world Rendering: Generate 2D images of the objects Animation: Describe how objects move Models come from a diverse and expanding sets of fields, and include physical, mathematical, engineering, architectural, and even conceptual structures, natural phenomena, and so on. COMP 371 Week 1 33

Take the real and turn it into a virtual representation Explain the real world or fantastic objects using mathematics If the image does not exist in real life, a blueprint is drawn by an artist Modeling A wire frame is the simplest form of model 34 COMP 371 Week 1 Wireframe Model

Rendering Wireframe Model Draw the image on 2D screen Color Lighting Shading Surface texture Shadows Reflection and transparency Final Render

The Programmer s Interface Programmer sees the graphics system through the Application Programmer Interface (API) API contents: Functions that specify what we need to form an image Objects Viewer Light Source(s) Materials Other information Input from devices such as mouse and COMP 371 Week 1 36 keyboard

Computer Graphics: representing the world as pixels Scenes Are Made of Objects: 1. Thousands of objects per scene 2. Millions of primitives make up a scene 3. Speed is key Objects Are Made of Primitives: 1. More primitives mean a more realistic object 2. Thousands of primitives can make up each object: Primitives Are Made of Pixels: 1. Primitives are 2-D shapes (lines, triangles, 37 circles, etc.) COMP 371 Week 1

What is OpenGL? OpenGL is a programming interface mainly for 3D applications invented by Silicon Graphics. It renders 3D objects to the screen, providing the same set of instructions on different computers and graphics adapters. The OpenGL API was designed for use with the C and C++ programming languages, and allows developers in diverse markets such as broadcasting, CAD/CAM/CAE, entertainment, medical imaging, and virtual reality to produce and display incredibly compelling 2D and 3D graphics. Why using OpenGL: Industry standard Stable Reliable and portable Easy to use Well-documented COMP 371 Week 1 38

What OpenGL Does Allows definition of object shapes, material properties and lighting Arranges objects and interprets synthetic camera in 3D space Converts mathematical representations of objects into pixels (rasterisation) Calculates the colour of every object Provides no high-level rendering functions for complex objects; you must build your shapes from primitives (points, lines, polygons, etc.). The utility library GLU provides some support. COMP 371 Week 1 39

3 Stages in OpenGL Define Objects in World Scene Set Modeling and Viewing Transformations Render the Scene

How OpenGL Works OpenGL is a state machine You give it orders to set the current state of any one of its internal variables, or to query for its current status The current state won t change until you specify otherwise Ex.: if you set the current color to Red, everything you draw will be painted Red until you change the color explicitly Each of the system s state variables has a default value COMP 371 Week 1 41

GLUT (OpenGL Utility Toolkit) GLUT is a window-system-independent toolkit; it provides tools to assist with event and windows management. GLUT supports Multiple windows for OpenGL rendering. Callback driven event processing. Sophisticated input devices. An idle routine and timers. A simple, cascading pop-up menu facility. Utility routines to generate various solid and wire frame objects. Support for bitmap and stroke fonts. Miscellaneous window management functions, including managing overlays. COMP 371 Week 1 42

Structure of GLUT-Assisted Programs GLUT relies on user-defined callback functions, which it calls whenever some event occurs Function to display the screen Function to resize the viewport Functions to handle keyboard and mouse events COMP 371 Week 1 43

The 3D Graphics Pipeline Modelling Transformation Trivial Rejections Illumination Viewing Transformation Clipping Projection Rasterisation Display Almost every course on 3D graphics begins like this one. Primitives are processed in a series of steps. Each step forwards its result onto the next step. It is a useful abstraction of projective rendering, as well as a block diagram for dedicated graphics hardware. COMP 371 Week 1 44

The OpenGL Rendering Pipeline First step: Modelling transformations We start with 3D objects defined in their own coordinate system called model space We apply transformations to move and orient the objects according to a common coordinate system called world space All objects, light sources and cameras live in world space COMP 371 Week 1 45

Transformations Transformations are functions that map points from one place to another: COMP 371 Week 1 46

Transformations Almost every step in the rendering pipeline involves a change of coordinate systems. Transformations are central to understanding 3D computer graphics. The best way to implement transformations is with matrix operations. In the later classes we will discuss 2D matrices and transformations and then generalize to 3D matrices and transformations. Projections can also be expressed using matrices. COMP 371 Week 1 48

The OpenGL Rendering Pipeline Second Step: Trivial Rejections OpenGL attempts to remove all objects that can t possibly be seen from the list of items to process. This is an optimization, and not all implementations do it the same way COMP 371 Week 1 49

The OpenGL Rendering Pipeline Third Step: Illumination Light sources influence the way objects are drawn The lighting model (Phong illumination in OpenGL) influences the colors of all vertices The shading model (Gouraud shading in OpenGL) influences how colors are interpolated across faces Illumination also determines shadows COMP 371 Week 1 50

The OpenGL Rendering Pipeline Fourth Step: Viewing Transformation We transform again, from world space to eye space (or view) coordinates The camera is now located at the origin, and the viewing direction is aligned with some axis COMP 371 Week 1 51

The OpenGL Rendering Pipeline Fifth Step: Clipping and Projection A viewing volume is defined: objects located outside of this field of view are culled from the rendering. Next, the remaining objects are projected into two dimensions, which transforms their coordinates into screen space COMP 371 Week 1 53

The OpenGL Rendering Pipeline Final Step: Rasterization and Display Convert objects into pixels and display only those that are in front of any other objects Place pixels in the appropriate locations in the application window COMP 371 Week 1 55

Scan Conversion From this P = P0 + D.t an ideal geometric primitive A bag of pixels of different colours COMP 371 Week 1 56

Projective Rendering (OpenGL) Start with objects defined using polygons / primitives. Frame Buffer World objects In 2-D, map objects onto the screen In 3-D, project them onto the screen. This is called forward mapping. COMP 371 Week 1 57

Viewport Transformation Maps the 2D world in screen units into pixels in the display window. Y Viewport Transformation Viewport Units x COMP 371 Week 1 58

OpenGL Evolution Controlled by an Architectural Review Board (ARB) Members include SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,. Relatively stable (present version 2.0; 3.2 recently released) Evolution reflects new hardware capabilities 3D texture mapping and texture objects Vertex programs Allows for platform specific features through extensions OpenGL Libraries GL (Graphics Library): Library of 2-D, 3-D drawing primitives and operations API for 3-D hardware acceleration GLU (GL Utilities): Miscellaneous functions dealing with camera setup and higher-level shape descriptions GLUT (GL Utility Toolkit): Window-system independent toolkit with numerous utility functions, mostly dealing with user interface COMP 371 Week 2 59

OpenGL Basics Rendering Converting geometric/mathematical objects descriptions into frame buffer values OpenGL can render: Geometric primitives Bitmaps and Images (Raster primitives) Graphics Pipeline COMP 371 Week 2 60

OpenGL as a Renderer Geometric primitives points, lines and polygons Image Primitives images and bitmaps separate pipeline for images and geometry linked through texture mapping Rendering depends on state colors, materials, light sources, etc. Header Files #include <GL/gl.h> #include <GL/glu.h> #include <GL/glut.h> #include <glui.h> COMP 371 Week 2 61

GLUI GLUI is a GLUT-based C++ user interface library which provides controls such as buttons, checkboxes, radio buttons, spinners, etc. It is window-system independent, relying on GLUT to handle all system-dependent issues, such as window and mouse management. COMP 371 Week 2 62

Sample Program #include <GL/glut.h> #include <GL/gl.h> void main(int argc, char** argv) { } int mode = GLUT_RGB GLUT_DOUBLE; glutinitdisplaymode( mode ); glutinitwindowsize( 500,500 ); glutcreatewindow( Simple ); init(); glutdisplayfunc( display ); glutkeyboardfunc( key ); glutmainloop(); COMP 371 Week 2 63

OpenGL Initialization Set up whatever state you re going to use void init( void ) { glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); glortho(-10, 10, -10, 10, -10, 20); glmatrixmode(gl_modelview); glloadidentity(); // glenable( GL_LIGHT0 ); // glenable( GL_LIGHTING ); } // glenable( GL_DEPTH_TEST ); COMP 371 Week 2 69

GLUT Callback functions Event-driven: Programs that use windows Input/Output Wait until an event happens and then execute some pre-defined functions according to the user s input Events key press, mouse button press and release, window resize, etc. Callback function : Routine to call when an event happens Window resize or redraw User input (mouse, keyboard) Animation (render many frames) Register callbacks with GLUT glutdisplayfunc( my_display ); glutidlefunc( my_idle_func ); glutkeyboardfunc( my_key_events ); glutmousefunc ( my_mouse ); COMP 371 Week 2 70

What to Know to Start We will use C/C++ syntax OpenGL initialization won t be presented platform dependent Everything should be portable Tutorials: http://nehe.gamedev.net Official OpenGL site: http://www.opengl.org OpenGL - Libraries 3 basic libraries: OpenGL: main functions GLU: premade objects, helper functions GLaux: loading textures GLUT and others COMP 371 Week 2 71

Graphics Definitions Point a location in space, 2D or 3D sometimes denotes one pixel Line straight path connecting two points infinitesimal width, consistent density beginning and end on points COMP 371 Week 2 Vertex point in 2D or 3D Edge line in 3D connecting two vertices Polygon/Face/Facet arbitrary shape formed by connected vertices fundamental unit of 3D computer graphics 72

OpenGL Command Syntax All command names begin with gl Ex.: glvertex3f( 0.0, 1.0, 1.0 ); Constant names are in all uppercase Ex.: GL_COLOR_BUFFER_BIT Data types begin with GL Ex.: GLfloat onevertex[ 3 ]; Most commands end in two characters that determine the data type of expected arguments Ex.: glvertex3f( ) => 3 GLfloat arguments COMP 371 Week 2 73

OpenGL Command Formats glvertex3fv( v ) Number of components 2 - (x,y) 3 - (x,y,z), (r,g,b) 4 - (x,y,z,w), (r,g,b,a) Data Type b - byte ub - unsigned byte s - short us - unsigned short i - int ui - unsigned int f - float d - double Vector omit v for scalar form e.g., glvertex2f(x, y) glcolor3f(r, g, b) COMP 371 Week 2 74

Specifying Object Vertices Every object is specified by vertices: glvertex3f(2.0,4.1,6.0); // specifies a vertex at the // x, y, z coordinate (2.0, 4.1, 6.0). // The 3f means 3 floating point coordinates. Other examples: glvertex2i(4, 5); // 2 integers for x and y. z = 0. float vector[3] = {5.0, 3.2, 5.0}; glvertex3fv(vector); // using vector positions COMP 371 Week 2 75

Object Specification Most APIs support a limited set of primitives including Points (1D object) Line segments (2D objects) Polygons (3D objects) Some curves and surfaces Quadrics Parametric polynomial All are defined through locations in space or vertices type of object location of vertex glbegin(gl_polygon) glvertex3f(0.0, 0.0, 0.0); glvertex3f(0.0, 1.0, 0.0); glvertex3f(0.0, 0.0, 1.0); glend( ); 76 end of object definition COMP 371 Week 2

Polygon Types Polygons (GL_POLYGON) successive vertices define line segments, last vertex connects to first Triangles and Quadrilaterals (GL_TRIANGLES, GL_QUADS) successive groups of 3 or 4 interpreted as triangles or quads Strips and Fans (GL_TRIANGLE_STRIP, GL_QUAD_STRIP, GL_TRIANGLE_FAN) joined triangles or quads that share vertices COMP 371 Week 2 77

Primitives: OpenGL Primitives (including some line primitives) GL_POINTS GL_LINES GL_LINE_STRIP GL_POLYGON GL_LINE_LOOP GL_TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN COMP 371 Week 2 78

simple.cpp #include <GL/glut.h> void mydisplay(){ glclear(gl_color_buffer_bit); glbegin(gl_polygon); glvertex2f(-0.5, -0.5); glvertex2f(-0.5, 0.5); glvertex2f(0.5, 0.5); glvertex2f(0.5, -0.5); glend(); glflush(); } int main(int argc, char** argv){ glutcreatewindow("simple"); glutdisplayfunc(mydisplay); glutmainloop(); } Event Loop Note that the program defines a display callback function named mydisplay Every GLUT program must have a display callback The display callback is executed whenever OpenGL decides the display must be refreshed, for example when the window is opened The main function ends with the program entering an event loop COMP 371 Week 2 79

Drawing Vertices glbegin(gl_points); glvertex2s(2,3); // point (2, 3, 0) glvertex3d(0.0,0.0,3.1415926535898); glvertex4f(2.3,1.0,-2.2,2.0); // point (1.15, 0.5, -1.1) GLdouble dvect[3] = {5.0,9.0,1992.0}; glvertex3dv(dvect); glend(); glpointsize(glint s) changes the size of the vertex to s pixels. Default is one pixel. 80 COMP 371 Week 2

Other Commands in glbegin / glend blocks Not every OpenGL command can be located in such a block. Those that can be included, among others are: glcolor glnormal (to define a normal vector) gltexcoord (to define texture coordinates) glmaterial (to set material properties) COMP 371 Week 2 81

Color in OpenGL void glcolor3{b s i f d ub us ui} (TYPE r, TYPE g, TYPE b); Specify a color for drawing the object glcolor3f(1.0,0.0,0.0) this present a red color 3f = use a RGB model, and the value of the component is float in C. Current color affects any vertices created subsequently glcolor3f (0.0, 0.5, 1.0); // no Red, half-intensity Green, full-intensity Blue COMP6761 Week 8 82

Using RGB Color with OpenGL void glclearcolor(glclampf red, GLclampf green, GLclampf blue, GLclampf alpha); Specify a color for clearing the screen glclearcolor(0, 0, 0, 0); // black color glclear(gl_color_buffer_bit); // clear screen glcolor3f(1.0, 0.0, 0.0); // red color glbegin(gl_triangle); // drawing a triangle red color glvertex2f (5.0, 5.0); glvertex2f (25.0, 5.0); glvertex2f (5.0, 25.0); glend(); COMP6761 Week 8 83

Example glcolor3f( 0.0, 1.0, 0.0); glpointsize( 5.0 ); //5 pixels wide glbegin( GL_POINTS ); glvertex2f( 3, 3 ); glvertex2f( 4, 4 ); glvertex2f( 5, 5 ); glend(); glbegin( GL_POLYGON ); glcolor3f( 1.0, 1.0, 0.0 ); glvertex3f( 0.0, 0.0, 0.0 ); glcolor3f( 0.0, 1.0, 1.0 ); glvertex3f( 5.0, 0.0, 0.0 ); glcolor3f( 1.0, 0.0, 1.0 ); glvertex3f( 0.0, 5.0, 0.0 ); glend(); COMP 371 Week 2 84

Winding Order Polygons in OpenGL are usually one-sided, meaning they can only be viewed from their front side If you try to draw a polygon with its back side facing the viewer, the result is nothing! In order to draw the front side of a polygon, the vertices must be specified in counter-clockwise order glbegin(gl_polygon); glvertex2f(0.0, 0.0); glvertex2f(1.0, 0.0); glvertex2f(0.0, 1.0); glend(); (3) (1) (2) glbegin(gl_polygon); glvertex2f(0.0, 0.0); glvertex2f(0.0, 1.0); glvertex2f(1.0, 0.0); COMP 371 Week 2 glend(); (2) (1) (3) 85 nothing!

OpenGL 3D Shapes Complex objects made of triangles or other polygons Can be time consuming More than 1 polygon between glbegin() and glend(), glrotatef(-15.0f, 1.0f, 0.0f, 0.0f);// rotate -15 around y axis glrotatef(-35.0f, 0.0f, 1.0f, 0.0f);// rotate -35 around y axis glbegin(gl_triangles); glvertex3f( 0.0f, 1.0f, 0.0f); // Top Of Triangle (Front) glvertex3f(-1.0f,-1.0f, 1.0f); // Left Of Triangle (Front) glvertex3f( 1.0f,-1.0f, 1.0f); // Right Of Triangle (Front) glvertex3f( 0.0f, 1.0f, 0.0f); // Top Of Triangle (Right) glvertex3f( 1.0f,-1.0f, 1.0f); // Left Of Triangle (Right) glvertex3f( 1.0f,-1.0f,-1.0f); // Right Of Triangle (Right) glvertex3f( 0.0f, 1.0f, 0.0f); // Top Of Triangle (Back) glvertex3f( 1.0f,-1.0f,-1.0f); // Left Of Triangle (Back) glvertex3f(-1.0f,-1.0f,-1.0f); // Right Of Triangle (Back) glvertex3f( 0.0f, 1.0f, 0.0f); // Top Of Triangle (Left) glvertex3f(-1.0f,-1.0f,-1.0f); // Left Of Triangle (Left) glvertex3f(-1.0f,-1.0f, 1.0f); // Right Of Triangle (Left) glend(); COMP 371 // Week Done 2 Drawing The Pyramid 86

OpenGL 3D Shape Example void drawcube(glint size, GLfloat color[]) { static GLfloat v[8][3]; v[0][0] = v[3][0] = v[4][0] = v[7][0] = -size/2.0; v[1][0] = v[2][0] = v[5][0] = v[6][0] = size/2.0; v[0][1] = v[1][1] = v[4][1] = v[5][1] = -size/2.0; v[2][1] = v[3][1] = v[6][1] = v[7][1] = size/2.0; v[0][2] = v[1][2] = v[2][2] = v[3][2] = -size/2.0; v[4][2] = v[5][2] = v[6][2] = v[7][2] = size/2.0; glbegin(gl_polygon); glcolor3fv( color ); glvertex3fv( v[0] ); glvertex3fv( v[1] ); glvertex3fv( v[2] ); glvertex3fv( v[3] ); glend(); // etc for other faces V7 V4 V6 V5 } COMP 371 Week 2 87

GLUT/GLU 3D Object Functions GLUT provides functions to draw: Regular polyhedra: glutwirecube, glutsolidcube, and similar for Tetrahedron, Octahedron, Dodecahedron, and Icosahedron. Quadric surfaces: similar for Sphere, Cone, and Torus (e.g., glutsolidcone) Teapot GLU provides additional Quadric surface functions (see Section 8-6 of H&B for details). COMP 371 Week 2 88