CS 354 Introduction

CS 354 Introduction Mark Kilgard University of Texas January 17, 2012

CS 354—Computer Graphics Instructor: Mark Kilgard Principal Software Engineer, NVIDIA Previously at Silicon Graphics Teaching Assistant: Randall Smith Ph.D. student with Dr. Fussell TA’ed the course last semester Burdine Hall (BUR) 116 Tuesday/Thursday, 9:30-11:00 a.m.

Expectations For us Teach practical graphics expertise Well-prepared lectures Grades fairly reflect your participation and performance Available to you Use my office hours Other times, use Randy If not satisfied, contact me [email_address] For you Attendance at every class Expect regular quizzes at the beginning of class Programming assignments You need to know C/C++ Use office hours if you need help No cheating

Grading Testing 60% Daily quizzes 10% 2-3 questions, easy Homework 10% Occasional, mostly math questions Exams 40% Mid-term 15% Final 25% Software projects 40% Simple Rendering Object loader Interaction Shading Performance analysis

Textbook Interactive Computer Graphics: A Top-Down Approach With Shader-Based OpenGL by Edward Angel and Dave Shreiner Addison-Wesley, 6th edition Regular readings assigned Match up with lecture topics

Helpful Resources Learning OpenGL OpenGL-oriented books Supplemental books OpenGL Programming Guide a.k.a. “the red book” OpenGL SuperBible OpenGL A Primer Eric Lengyel’s Mathematics for 3D Game Programming and Computer Graphics Real-Time Rendering by Eric Haines, Tomas Akenine-Moller, Eric Haines, Naty Hoffman

Computer Graphics Nexus of several disciplines Human Perception Artistic Expression Physics of Light Geometry and Mathematics of Surfaces Computer Science VLSI Hardware Design Display & Input Technology Animation & Simulation

Roles for Computer Graphics [Pixar 2010] Story telling Product design [CATIA] Roles for Computer Graphics

Roles for Computer Graphics Training [Commercial simulators] Gaming [Skyrim]

Roles for Computer Graphics User interfaces [Android 4.0] Navigation [Audi]

Roles for Computer Graphics Printing Digital imaging & video [HP Deskjet] [Canon]

What does computer graphics study? Computer-based simulation of Shape Appearance Motion [Litke et.al. 2001] [Chai & Hodgins, 2005] [Sloan et.al. 2005]

Not covered in the class Digital content creation No Photoshop, no Maya or 3D Studio Max Computer Science class, not an art class C/C++ programming I expect you know C or C++ under Linux Not just the language Need to know debugging and software practices Since course’s programming projects assume Linux software development Use the Computer Science labs (ESN or Painter)

Visual Thinking Human visual system = highest bandwidth input to your brain Very natural to want computers “feeding” this input to your brain Because people think visually Innate intuition for 3D imagery in particular Computer graphics Takes an abstract representation of a “scene” within a computer’s memory and converts it to a concrete signal (an image, or animating images) representing a view of that scene Computer graphics practitioners have a good practical and theoretical understanding of how to do this Amazing progress in the last 40 years Your brain Takes concrete signals (images, the visual world) and converts those signals (back!) into an abstract representation of a scene We have only the most rudimentary notions of how this process works Teaching a computer to do this is the field of “computer vision”

Reductionist Approach Can’t simply “take a picture” like a camera Instead images are “synthesized” from an abstract model of a scene and its view Must build graphics out of little bits of work and data Philosophers and scientists break down phenomenon to smallest observable units Examples Philosophical atoms (Leucippus, ancient) Triangles (Plato, ancient) Chemical atoms (Dalton, pre-modern) Physical atoms (Bohr, modern) Sub-atomic quantum particles, waves, strings Reductionism in graphics Pixels, vertexes, and triangles (Plato redux?) Discretization pervades, ideal for digital computers

Your Modern World View: Discrete Information, Particularly Images You believe in digital information Impossible to avoid this belief in a modern, computerized world Text is digital, video is digital, music is digital, communication is digital, even identity is becoming digital You believe exact copies are possible, even common Pervasive new belief that’s incognizant to world just 50 years ago Discrete images implies pixels Descartes’s Cartesian plane computerized Image ≈ grid of discrete color So images are simply numbers So can be processed as numbers!

Shape: Objects to Triangles Digital artists approximate solid object shape with meshes of triangles Was Plato right? More triangles makes the mesh an increasingly accurate approximation of the bunny shape

What will you learn Fundamentals of computer graphics Transformations and viewing Rasterization and ray tracing Lighting and shading Graphics hardware technology Mathematics for computer graphics Practical graphics programming OpenGL programming Shader programming Performance analysis

Expect programming projects using OpenGL Explicitly not just an “OpenGL” class But you will learn and use OpenGL When relevant Direct3D is discussed too You’ll use GLUT so programs can work on Windows, Mac, and Linux Plenty of resources to learn OpenGL www.opengl.org

What is OpenGL? Its specification is titled “The OpenGL Graphics System ” Not just for 3D graphics; imaging too “ GL” standard for “Graphics Library” “ Open” means industry standard meant for broad adoption with liberal licensing Standardized in 1992 By Silicon Graphics And others: Compaq, DEC, Intel, IBM, Microsoft Originally meant for Unix and Windows workstations Now de facto graphics acceleration standard Now managed by the Khronos industry consortium Available everywhere, from supercomputers to cell phones Alternative: Direct3D provides similar functionality with a very different API for Microsoft Windows platforms [Marathon Oil visionarium] [ES2 tablet] [MacBook]

OpenGL as an Evolving Standard EXT SGI SGIS SGIX ARB NV Others Others 44% of extensions are “core” or multi-vendor Lots of vendors have initiated extensions Extending OpenGL is industry-wide collaboration ATI APPLE MESA Source: http://www.opengl.org/registry (Dec 2008)

Forces Driving Improvements in Computer Graphics Human desire for Visual Intuition and Entertainment Embarrassing Parallelism of Graphics Increasing Semiconductor Density Particularly the hardware-amenable, latency tolerant nature of rasterization Particularly interactive video games Computer Graphics Moore’s Law

Key Trend in OpenGL Evolution Fixed-function Programmable Simple Configurability Complex Configurability Shaders! High-level languages

Many Perspectives on OpenGL Programmer’s view: Application Programming Interface (API) Accelerated access to 3D graphics hardware Performance and functionality improves with time Graphics Architect’s view: Detailed functional graphics pipeline Well suited to VLSI hardware design Software or Hardware System Designer’s view: Stable standard component for building larger system Platform neutral so fits into other systems well Examples: WebGL, Apple’s compositing desktop Student’s view: Real-world implementation of graphics concepts Good pedantic structure for learning graphics Practical skill you can really use

Programmer’s View: OpenGL API Example Let’s draw a triangle glShadeModel ( GL_SMOOTH ); // smooth color interpolation glEnable ( GL_DEPTH_TEST ); // enable hidden surface removal glClear (GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); glBegin (GL_TRIANGLES); { // every 3 vertexes makes a triangle glColor4ub (255, 0, 0, 255); // RGBA=(1,0,0,100%) glVertex3f (-0.8, 0.8, 0.3); // XYZ=(-8/10,8/10,3/10) glColor4ub (0, 255, 0, 255); // RGBA=(0,1,0,100%) glVertex3f ( 0.8, 0.8, -0.2); // XYZ=(8/10,8/10,-2/10) glColor4ub (0, 0, 255, 255); // RGBA=(0,0,1,100%) glVertex3f ( 0.0, -0.8, -0.2); // XYZ=(0,-8/10,-2/10) } glEnd (); Pro Tip: use curly braces to “bracket” nested OpenGL usage; no semantic meaning, just highlights grouping

Initial Logical Coordinate System Think of drawing into a [-1,+1] 3 cube (-0.8, 0.8) (-0.8, 0.8) (0, -0.8) origin at (0,0)

Visualizing Normalized Device Coordinates What does this simple triangle look like with the [-1,+1] 3 cube’s coordinate system? We call this coordinate system “Normalize Device Coordinate” or NDC space Wire frame cube shows boundaries of NDC space From NDC views, you can see triangle isn’t “ flat” in the Z direction Two vertices have Z of -0.2—third has Z of 0.3

Programmer’s View: GLUT API Example Windowing code #include <GL/glut.h> // includes necessary OpenGL headers void display() { // << insert code on prior slide here >> glutSwapBuffers (); } void main(int argc, char **argv) { // request double-buffered color window with depth buffer glutInitDisplayMode ( GLUT_RGBA | GLUT_DOUBLE | GLUT_DEPTH ); glutInit (&argc, argv); glutCreateWindow (“simple triangle”); glutDisplayFunc (display); // function to render window glutMainLoop (); } FYI: GLUT = OpenGL Utility Toolkit

Reductionism for Rendering Objects and Scenes Programmers want to render “objects” Say a fire truck or molecule Arranged relative to other objects (a scene) & then viewed Graphics pipeline approach—used by OpenGL and GPUs Break objects into geometry batches Batches may be meshes or “patches” Batches reduce to polygonal primitives Typically triangles But also lines, points, bitmaps, or images Geometric primitives are specified by vertices So vertices are assembled into primitives Primitives are rasterized into fragments Fragments are shaded Raster operations take shaded fragments and update the framebuffer

Programmer’s View: Also Programming Shaders inside GPU Multiple programmable domains within the GPU Can be programmed in high-level language OpenGL Shading Language (GLSL) Geometry Program 3D Application or Game OpenGL API GPU Front End Vertex Assembly Vertex Shader Clipping, Setup, and Rasterization Fragment Shader Texture Fetch Raster Operations Framebuffer Access Memory Interface CPU – GPU Boundary OpenGL 3.3 Attribute Fetch Primitive Assembly Parameter Buffer Read programmable fixed-function Legend

Example Simple GLSL Shaders Vertex Shader Operates on each vertex of geometric primitives Passes through per-vertex color Transforms the vertex to match fixed-function processing Fragment Shader Operates on each fragment (think pixel) Outputs the fragment’s interpolated color to the framebuffer void main(void) { gl_FrontColor = gl_Color ; gl_Position = ftransform (); } void main(void) { gl_FragColor = gl_Color ; } Shaders are way more interesting than these minimal examples

Building Up Shaders   ) + ( ( ) = Diffuse Gloss Specular Decal Result

OpenGL’s Design Philosophy High-performance Assumes hardware acceleration Defined by a specification Rather than a de-facto implementation Rendering state machine Procedural Not a window system, not a scene graph No initial sub-setting Extensible Data type rich Cross-platform Window system-independent core X Window System, Microsoft Windows, OS/2, OS X, etc. Multi-language bindings C, FORTRAN, etc. Not merely an API, rather a system Later had OpenGL ES subset for embedded devices

OpenGL state machine Complicated from inception

Higher-level View of OpenGL From OpenGL 3.0 specification, unchanged since 1.0

Evolved OpenGL Data Flow vertex shading rasterization & fragment shading texture raster operations framebuffer pixel unpack pixel pack vertex puller client memory pixel transfer glReadPixels / glCopyPixels / glCopyTex{Sub}Image glDrawPixels glBitmap glCopyPixels glTex{Sub}Image glCopyTex{Sub}Image glDrawElements glDrawArrays selection / feedback / transform feedback glVertex* glColor* glTexCoord* etc. blending depth testing stencil testing accumulation storage operations

Buffer-centric Evolution Data moves onto GPU, away from CPU Apps on CPUs just too slow at moving data otherwise Vertex Array Buffer Object (VaBO) Transform Feedback Buffer (XBO) Parameter Buffer Object (PaBO) Pixel Unpack Buffer (PuBO) Pixel Pack Buffer (PpBO) Uniform Buffer Object (UBO) Texture Buffer Object (TexBO) Vertex Puller Vertex Shading Geometry Shading Fragment Shading Texturing Array Element Buffer Object (VeBO) Pixel Pipeline vertex data texel data pixel data parameter data glBegin, glDrawElements, etc. glDrawPixels, glTexImage2D, etc. glReadPixels, etc. Framebuffer

Extensibility OpenGL is evolved via extensions Legalistic—expressed as “amending” OpenGL’s detailed specification Coordinated through Khronos But vendors don’t need any blessing or permission to make extensions Allows priorities to be shaped quickly Example : Direct3Dism extensions have greatly reduced functional incompatibilities keeping Direct3D apps migrate to OpenGL All the latest GPU features available in OpenGL Example: Tessellation shaders

Software and Hardware Architectures Incorporating 3D Pipelines X Window System GeForce 6 Architecture framebuffer updates vertex processing rasterization shading X server Graphics Kernel driver GPU Hardware OpenGL driver Application OpenGL library GLUT X client libraries Operating system kernel (Linux)

Hardware Platforms depending on the OpenGL Architecture Workstation PCs Consumer PCs High-end Visual Computing Solution (VCS) Embedded Applications Handheld Devices Game Consoles Conventional PC OpenGL Products Unconventional non-PC OpenGL platforms

Student’s View of OpenGL You can learn OpenGL gradually Lots of its can be ignored for now The “classic” API is particularly nice “Deprecation” has ruined the pedagogical niceness of OpenGL; ignore deprecation Plenty of documentation and sample code Makes concrete the abstract graphics pipeline for rasterization

Next Lecture 3D Viewing How are 3D scenes processed so they can be turned into an image on the screen? Expect a short quiz on today’s lecture Easy questions Assignments Reading Chapter 1, pages 1-38 Makes sure your CS Unix account is active Homework next time will be compiling a simple OpenGL example

CS 354 Introduction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to CS 354 Introduction (20)

More from Mark Kilgard (20)

Recently uploaded (20)

CS 354 Introduction