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 Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 OpenGL – Hello World /* * hello.c * This is a simple, introductory OpenGL program. */ #include <GL/glut.h> 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