Computer Graphics EECE 478 - University of British...
Transcript of Computer Graphics EECE 478 - University of British...
![Page 2: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/2.jpg)
Computer Graphics
• About this course
• Computer graphics introduction
• Brief code overview for basic renderer
�2
![Page 3: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/3.jpg)
About this course
• Course and Prerequisites
• Lecture Layout
• Office Hours
• Examinations
• Assignments
�3
![Page 4: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/4.jpg)
Course
• Interactive Computer Graphics - A Top-Down Approach Using OpenGL (fifth edition)
• Not available, now it’s the sixth edition; coding will follow both fifth and sixth editions.
• Concepts are the same, so either textbook is fine for course revision (no code in examinations)
• Web also has many resources, so textbook is optional
• If you find a good link to any material let me know and I’ll add it to the course web site
• Course contents
• Maths, graphics theory, practical application (OpenGL)
• Mid-term, individual assignments, final exam
�4
![Page 5: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/5.jpg)
Prerequisites
• Good programming skills (C/C++)
• Abstract data types
• Geometry
• Linear algebra
�5
![Page 6: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/6.jpg)
Lecture Layout
• Recap important principles
• Mathematics (linear algebra, geometry)
• Object oriented programming
• General programming
• Computer graphics pipelines
• Abstract graphics concepts
�6
![Page 7: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/7.jpg)
Lecture Layout
• Graphics theory
• Drawing, viewing, clipping, etc.
• Application
• Principles of graphics programming, using OpenGL as an example
• Develop examples throughout the course
• Theory and application will be presented together
�7
![Page 8: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/8.jpg)
Course Idea
• NOT an OpenGL course (plenty of those on the web)
• NOT a programming course
• Idea is to introduce the theory and practice of computer graphics
• Slides are my notes on what to tell you about, and what’s important
• Don’t rely on them for expansive notes
• The textbook and the web are the resources you should use
• Assignments will help solidify content from lectures
![Page 9: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/9.jpg)
Office Hours
• By appointment
• Don’t ask me what will be in the exam
• Don’t ask me for a solution to the assignment
• Try to answer the question yourself before you ask me
• lmgtfy.com!
�9
![Page 10: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/10.jpg)
Final Grade
• 40% Assignments
• 10% Mid-term
• 50% Final exam
�10
![Page 11: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/11.jpg)
Examinations
• Mid-term - 10% of final grade
• Examines first 5 weeks of material
• End of term final exam - 50% of final grade
• Examines all material
• Supplemental exam - worth 50% of final grade (just a replacement for the exam, not the assignments and mid-term)
�11
![Page 12: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/12.jpg)
Assignments
• Three assignments for the course
• Constitutes 40% of the final grade
• Distinct assessment of each
• All assignments together form a larger project
• A2 uses A1, and A3 builds on A1
• If you are unable to finish A1, a solution will be provided
• 5% A1, 15% A2 and 20% A3
�12
![Page 13: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/13.jpg)
Assignments
• The course assignment project is to build a 3D city using models of buildings/monuments on the UBC campus and downtown Vancouver and direct your own fly-through movie
• Each assignment will be submitted in two parts, with approximately 2 weeks between submissions
• Assignment 1: write a basic graphics program using GLUT which can load and display a building model (with rotate, translate and zoom)
• Assignment 2: design your own model of a building or vehicle from anywhere in Vancouver, based on photographs
• Assignment 3: direct your own fly-through movie of a city you have designed using the class’s models
![Page 14: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/14.jpg)
Assignments
• Have some good models from previous classes
• These will be released for you to test assignment 1
• You cannot do one of these buildings for assignment 2 (unless you want to make a better version)
• To avoid duplicates, the TA will arrange a sign up system for buildings
• Programming
• Be aware that if you can’t already code comfortably in C/C++, you should learn fast
![Page 15: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/15.jpg)
Examples from previous years
![Page 16: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/16.jpg)
Examples from previous years
![Page 17: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/17.jpg)
Examples from previous years
![Page 18: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/18.jpg)
Examples from previous years
![Page 19: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/19.jpg)
Examples from previous years
![Page 20: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/20.jpg)
Examples from previous years
![Page 21: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/21.jpg)
Examples from previous years
![Page 22: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/22.jpg)
Examples from previous years
![Page 23: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/23.jpg)
Examples from previous years
![Page 24: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/24.jpg)
Examples from previous years
![Page 25: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/25.jpg)
Examples from previous years
![Page 26: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/26.jpg)
Computer Graphics
Introduction
�26
![Page 27: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/27.jpg)
Computer Graphics
• Deals with all aspects of creating images with a computer
• Hardware
• Software
• Applications
![Page 28: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/28.jpg)
Computer Graphics
• Games
• Movies
• TV
• Operating Systems
�28
![Page 29: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/29.jpg)
How was this created? What hardware/software was needed to produce this image?
![Page 30: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/30.jpg)
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 modelling and rendering (but Maya is built on top of OpenGL)
• Hardware: PC with graphics card for modelling and rendering
![Page 31: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/31.jpg)
Basic graphics system Input - Image Formation - Output
![Page 32: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/32.jpg)
Raster graphicsImage produced as an array (the raster) of picture elements (pixels) in the frame buffer
![Page 33: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/33.jpg)
Raster graphics Allows us to go from lines and wireframe models to filled polygons
![Page 34: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/34.jpg)
Enhancing realism
Smooth Shading
Environment Mapping
Bump Mapping
![Page 35: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/35.jpg)
Research into VFX Bullet-time
15
![Page 36: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/36.jpg)
Research into VFX Bullet-time
�36
![Page 37: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/37.jpg)
Research into games Customisable characters
�37
![Page 38: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/38.jpg)
OpenGL
• Graphics concepts
• E.g. rendering a triangle
• Implementation using C++ and OpenGL
�38
![Page 39: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/39.jpg)
Why OpenGL?
• Supported on most systems
• Provides abstraction over complicated operations
• GLUT allows simple development of OpenGL programs
�39
![Page 40: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/40.jpg)
OpenGL Resources
• The OpenGL Programming Guide (The Red Book)
• The OpenGL Reference Manual (The Blue Book)
• Both freely available on the web (early editions)
�40
![Page 41: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/41.jpg)
OpenGL Resources
• http://www.opengl.org
• Many tutorials, links, etc.
• http://nehe.gamedev.net/
• Excellent tutorials at all levels
�41
![Page 42: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/42.jpg)
Outline
• Images
• Models
• Architectures
�42
![Page 43: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/43.jpg)
Outline
• OpenGL
• GLUT
• 2D
• 3D
• Interaction
�43
![Page 44: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/44.jpg)
Outline
• Geometry
• Transformations
• Homogeneous Coordinates
• Viewing
• Shading
�44
![Page 45: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/45.jpg)
Outline
• Object space and image space
• Pipeline
• Clipping
• Line Drawing
• Polygon Fill
�45
![Page 46: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/46.jpg)
Outline
• Buffers
• Textures and texture mapping
• Compositing and transparency
�46
![Page 47: Computer Graphics EECE 478 - University of British Columbiacourses.ece.ubc.ca/478/Lectures/2014_PDF/ECE478_01_Introduction.pdf• Interactive Computer Graphics - A Top-Down Approach](https://reader033.fdocuments.net/reader033/viewer/2022053005/5f08e18c7e708231d4242ca1/html5/thumbnails/47.jpg)
Outline
• Programmable Pipelines
• Shading Languages
• Vertex Shaders
• Fragment Shaders
• Scene Graphs
�47