Introduction to Computer Graphics COMPSCI 464

Image credits: Pixar, Dreamworks, Ravi Ramamoorthi, This class

• This class is not about • It is about – Using multiple graphics – Learning the API’s fundamentals of – Using modeling computer graphics software such as Maya – Implementing etc algorithms that are at – Animation and creating the core of computer movies graphics – Game design and – Familiarizing yourself development with OpenGL and shaders What is Computer Graphics?

• Making pictures with computers? • Making pictures with math? • Making pictures with physics? Where did this image come from?

• What hardware/software did we need to produce it?

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Preliminary Answer • Application: The object is an artist’s rendition of the sun for an animation to be shown in a domed environment (planetarium)

• Software: Maya for modeling and rendering but Maya is built on top of OpenGL

• Hardware: PC with graphics card for modeling and rendering

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1950-1960

• Computer graphics goes back to the earliest days of computing – Strip charts – Pen plotters – Simple displays using A/D converters to go from computer to calligraphic CRT • Cost of refresh for CRT too high – Computers slow, expensive, unreliable

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1960-1970

• Wireframe graphics – Draw only lines • Sketchpad • Display Processors • Storage tube wireframe representation of sun object

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1970-1980

• Raster Graphics • Beginning of graphics standards • Workstations and PCs

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Raster Graphics

• Image produced as an array (the raster) of picture elements (pixels) in the frame buffer

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Raster Graphics

• Allows us to go from lines and wire frame images to filled polygons

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1980-1990

Realism comes to computer graphics

smooth shading environment bump mapping mapping

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1980-1990

• Special purpose hardware – Silicon Graphics geometry engine • VLSI implementation of graphics pipeline • Industry-based standards – PHIGS – RenderMan • Networked graphics: X Window System • Human-Computer Interface (HCI)

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 1990-2000

• OpenGL API • Completely computer-generated feature-length movies (Toy Story) are successful • New hardware capabilities – Texture mapping – Blending – Accumulation, stencil buffers

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Computer Graphics: 2000-

• Photorealism • Graphics cards for PCs dominate market – Nvidia, ATI/AMD, Intel • Game boxes and game players determine direction of market • Computer graphics routine in movie industry: Maya, Lightwave, etc • Programmable pipelines

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Real-time vs. Offline

• Real-time/interactive – 10–60 frames per second – Games, interfaces, visual simulation... • Offline/production – Seconds to hours per frame – Movies, architectural lighting simulation, ... Realistic Rendering • Realistic/Photorealistic – Look like real life – Simulate physics – Reasonable appearing approximation

Norbert Kern – POV-Ray Hall of Fame Gallery Artistic/Non-PhotoRealistic • Look like what an artist might produce • Model artist’s process, physics • Do what looks right (an art in itself) Artistic SIGGRAPH 2011

• Technical Papers: http://www.youtube.com/watch?v=JK9EEE3RsKM Course Information • Course Webpage:

http://cs.boisestate.edu/~alark/cs464/

• Place: MEC 309

• Time: Mon Wed 6:00-7:15pm

• Prerequisites – COMPSCI 342 (Data Structures) People

• Instructor: Alark Joshi Email: [email protected] Office hours: Tu, Th 3-5pm or by appointment • Office: MEC 302A

• Piazza instead of a mailing list – http://www.piazza.com/boisestate/compsci464 Textbooks • Fundamentals of Computer Graphics. Peter Shirley and others Third Edition, AK Peters, 2009. Required.

• OpenGL Programming Guide Mason Woo and others Addison Wesley, 2009. Required. – Older versions online Course Objectives

• Understand the foundations of computer graphics: hardware systems, math basis, light and color. Course Objectives

• Implement key components of the rendering pipeline, especially visibility, rasterization, viewing, and shading. Course Objectives

• Become acquainted with topics in computer graphics such as: – Texturing – Animation – Physically-based modeling – Procedural modeling – Curves and surfaces – Game development issues – Visualization – Virtual reality

Image credits: Kitware, Ravi Ramamoorthi et al. Grading Policy and Assignments

Programming Assignments 50% Midterm Exam 15% Quizzes 10% Final Project 25%

Assignment Weight Description Due Date Assn 1 10% Introduction to OpenGL Aug 31 Assn 2 10% Modeling Sep 12 Assn 3 10% Transformations & Viewing Sep 26 Assn 4 10% Shaders Oct 17 Lighting, Shading and Texture Assn 5 10% Nov 7 Mapping Grading Policy

• One free late of three days – Request at least 24 hours before deadline Final Project (25%)

• Ray Tracing • Processing • WebGL / OpenGL on Android / OpenGL ES • openFrameworks • Cloth simulation / Deformation • Volume rendering Final Project (25%)

• Non-photorealistic rendering (painterly, artistic styles, etc.) • Graphical application using CUDA (cloth simulation, mass spring model, etc) • Advanced shader projects (smoke, water, etc) • Something exciting that you can convince me about (look at SIGGRAPH papers) or come talk to me Final Projects

• 2 Person project • Requires – Project proposal (1 – page) – Project status (1 – page) – Project Report ( 8 – pages ) – User manual ( 1-2 pages) – Source code – In-class presentation Questions? Concerns? Introducing OpenGL

• OpenGL – Open Graphics Library • The rendering pipeline: – Transform geometry (object world eye) – Calculate surface lighting – Apply perspective projection (eye screen) – Clip to the view frustum – Perform visible-surface processing • Implementing all this is a lot of work • OpenGL provides a standard implementation OpenGL Design Goals

• SGI’s design goals for OpenGL – High-performance (hardware-accelerated) graphics API – Some hardware independence – Natural, terse API with some built-in extensibility OpenGL Design Goals

• OpenGL has become a standard because – It doesn’t try to do too much • Only renders the image, doesn’t manage windows, etc. • No high-level animation, modeling, sound (!), etc. – It does enough • Useful rendering effects + high performance – It was promoted by SGI (& Microsoft, half-heartedly), is now promoted/supported by NVIDIA, ATI/AMD, Apple etc. • It doesn’t change every year (like DirectX/Direct3D, it’s main competitor) OpenGL: Conventions • Functions in OpenGL start with gl – Most functions just gl (e.g., glColor()) – Functions starting with glu are utility functions (e.g., gluLookAt()) • Note that GLU functions can always be composed entirely from core GL functions – Functions starting with glut are from the GLUT (OpenGL Utility Toolkit) library, built on top of OpenGL and WGL (Windows) or X (Linux) for window management, mouse and keyboard events, etc. • Created and distributed as an entirely different library OpenGL: Conventions

Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 OpenGL: Conventions

• Function names indicate argument type and number – Functions ending with f take floats – Functions ending with i take ints – Functions ending with b take bytes – Functions ending with ub take unsigned bytes – Functions that end with v take an array. • Examples – glColor3f() takes 3 floats – glColor4fv() takes an array of 4 floats Program Structure

• Most OpenGL programs have a similar structure that consists of the following functions – main(): • defines the callback functions • opens one or more windows with the required properties • enters event loop (last executable statement) – init(): sets the state variables • Viewing • Attributes – callbacks • Display function (called display() in many example programs) • Input and window functions

/* * hello.c * This is a simple, introductory OpenGL program. */ #include

void display(void) { /* clear all pixels */ glClear (GL_COLOR_BUFFER_BIT);

/* draw white polygon (rectangle) with corners at * (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0) */ glColor3f (1.0, 1.0, 1.0); glBegin(GL_POLYGON); glVertex3f (0.25, 0.25, 0.0); glVertex3f (0.75, 0.25, 0.0); glVertex3f (0.75, 0.75, 0.0); glVertex3f (0.25, 0.75, 0.0); glEnd(); OpenGL – Hello World

/* * start processing buffered OpenGL routines */ glFlush (); }

void init (void) { /* select clearing color */ glClearColor (0.0, 0.0, 0.0, 0.0);

/* initialize viewing values */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0); } OpenGL – Hello World

/* * Declare initial window size, position, and display mode

* (single buffer and RGBA). Open window with "hello" * in its title bar. Call initialization routines. * Register callback function to display graphics. * Enter main loop and process events. */ int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow ("hello"); init (); glutDisplayFunc(display); glutMainLoop(); return 0; /* ANSI C requires main to return int. */ } OpenGL Hello World GLUT functions

• glutInit allows application to get command line arguments and initializes system • gluInitDisplayMode requests properties for the window (the rendering context) – RGB color – Single buffering – Properties logically ORed together • glutWindowSize in pixels • glutWindowPosition from top-left corner of display • glutCreateWindow create window with title “simple” • glutDisplayFunc display callback • glutMainLoop enter infinite event loop

/* * double.c * This is a simple double buffered program. * Pressing the left mouse button rotates the rectangle. * Pressing the middle mouse button stops the rotation. */ #include #include

static GLfloat spin = 0.0;

void display(void) { glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glRotatef(spin, 0.0, 0.0, 1.0); glColor3f(1.0, 1.0, 1.0); glRectf(-25.0, -25.0, 25.0, 25.0); glPopMatrix();

glutSwapBuffers(); } OpenGL Rotating Square

void spinDisplay(void) { spin = spin + 2.0; if (spin > 360.0) spin = spin - 360.0; glutPostRedisplay(); }

void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel (GL_FLAT); }

void reshape(int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } OpenGL Rotating Square

void mouse(int button, int state, int x, int y) { switch (button) { case GLUT_LEFT_BUTTON: if (state == GLUT_DOWN) glutIdleFunc(spinDisplay); break; case GLUT_MIDDLE_BUTTON: case GLUT_RIGHT_BUTTON: if (state == GLUT_DOWN) glutIdleFunc(NULL); break; default: break; } } OpenGL Rotating Square

/* * Request double buffer display mode. * Register mouse input callback functions */ int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (250, 250); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutMouseFunc(mouse); glutMainLoop(); return 0; /* ANSI C requires main to return int. */ } OpenGL Rotating Square Demo Reading

• Reading assignments on class webpage – Reading must be done before class – Excellent supplement to in-class material • Assignment 1: Introduction to OpenGL is due on August 31st at 11:59pm Trivia

• Which was the first ever computer graphics video game?