introduction to computer graphics compsci 464cs.boisestate.edu/~alark/cs464/lectures/intro.pdf ·...

Introduction to Computer Graphics

COMPSCI 464

Image credits: Pixar, Dreamworks, Ravi Ramamoorthi,

This class

• This class is not about

– Using multiple graphics API’s

– Using modeling software such as Maya etc

– Animation and creating movies

– Game design and development

• It is about

– Learning the fundamentals of computer graphics

– Implementing algorithms that are at the core of computer graphics

– Familiarizing yourself with OpenGL and shaders

What is Computer Graphics?

• Making pictures with computers?

• Making pictures with math?

• Making pictures with physics?

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

Where did this image come from?

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


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


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



• Wireframe graphics

– Draw only lines

• Sketchpad

• Display Processors

• Storage tube

wireframe representation

of sun object



• Raster Graphics

• Beginning of graphics standards

• Workstations and PCs


Raster Graphics

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


Raster Graphics

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



Realism comes to computer graphics

smooth shading environment

mapping

bump mapping



• 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)



• OpenGL API

• Completely computer-generated feature-length movies (Toy Story) are successful

• New hardware capabilities

– Texture mapping

– Blending

– Accumulation, stencil buffers


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

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

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 othersThird 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 AssignmentsProgramming 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

Assn 5 10%Lighting, Shading and Texture

MappingNov 7

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

• 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 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


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


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 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


OpenGL Rotating Square

/*

* 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 <GL/glut.h>

#include <stdlib.h>

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();

}


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();

}


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;

}

}


/*

* 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?

introduction to computer graphics compsci 464cs.boisestate.edu/~alark/cs464/lectures/intro.pdf ·...

Documents