CSC 8470 Computer Graphics. What is Computer Graphics?

Transcription

1 CSC 8470 Computer Graphics What is Computer Graphics? For us, it is primarily the study of how pictures can be generated using a computer. But it also includes: software tools used to make pictures hardware for efficient graphics processing input devices for interacting with these pictures output devices for displaying the pictures

2 Graphics Application: Information Visualization GOAL: Visualization of complex multidimensional data for analysis and presentation. Examples: Clinical trial data Business consultancy data Graphics application: Direct Volume Rendering GOAL: Visualization of highly complex data Texture adds a high visual dimension

3 Graphics Application: Biomedical Visualization GOAL: Improve the perception, analysis, understanding of interactions between complex data Graphics Application:Virtual Reality GOAL: Design effective simulation and education applications by combining real and virtual elements Reduce cost & improve safety of applications

4 Graphics Application: Computer Aided Design GOAL: Develop novel interfaces for the efficient design of products, scenes and characters. In general focus is on real-time performance and rapid prototyping, and/or visual realism. Graphics Application: Advertisements

5 Graphics Application: Arts and Publishing Graphics Application: Everyday Use

6 Course Goals Learn the Process of Creating an Image

7 Learn Animation Basics Animation Example

8 Data Crunching behind Avatar Tools we Will Use

9 Main Topics Basic Graphics Concepts Graphics System and Architecture Algorithms for simple graphics Geometric Objects and Transformations Viewing and Projection Shading and Rendering Texture Mapping Lighting and Ray Tracing Recommended: Resources Online material References on the class website

10 Grading Assignments (60%) Pencil and paper Clean, readable, working code On time (no late submission) First assignment is available now Exam (30%) Class Participation (10%) No makeup assignments or exams Lecture attendance is mandatory Any questions before we start?

11 Graphics Systems Basics What is a digital image? Pixel: Raster image:

12 Pixel Depth Pixel depth: Effect of Pixel Depth bits bits bits Banding:

13 Effect of Pixel Depth 2 bits (4 colors) 4 bits (16 colors) Source: Wikipedia, Raster Displays Path of electron beam Display surface: Dotted with material that emits light when stimulated by electron beam. Beam must repeatedly stimulate dots row by row, b/c intensity fades when not stimulated. Refresh rate: Resolution:

14 Light White light: Raster Displays Revisited

15 LCD: LCD displays Additive Color Model: Color Models Subtractive Color Model:

16 Color Raster Images Pixel color is encoded as ordered triple. Color value (R,G,B) Displayed (0, 0, 0) Black (0, 0, 1) Blue (0, 1, 0) Green (1, 0, 0) Red (1, 0, 1) Magenta (1, 1, 0) Yellow (0, 1, 1) Cyan (1, 1, 1) White Frame Buffer Special memory where pixel colors are stored. System Bus CPU Main Memory Graphics Card -- Graphics Processing Unit (GPU) -- Frame Buffer

17 Modeling-Rendering Paradigm Modeling Rendering The Concept of Pipeline b c a * +

18 Graphics Pipeline 3D Vertices Raster Image Vertex Processor Clipper Rasterizer Fragment Processor ALL done by the GPU on the graphics card! Hands-On Session

19 A cross-platform Application Programming Interface (API) for producing 2D and 3D computer graphics Developed by Silicon Graphics Inc. (1992) See: OpenGL Graphics Programming OpenGL Industry standard API for 3D graphics Cross-platform Windows, MAC, Unix Supported on all hardware platforms OpenGL API (gl) core of OpenGL API OpenGL Utility API (glu) additional functionality built on top of GL OpenGL Utility Toolkit (glut) Handles the windowing system, menus, events, etc.

20 Hands-on Activities In the future you will write your own OpenGL program, but this time you ll copy an existing program (squares.cpp) from the course website. Get the activities handout from your instructor. OpenGL Introduction OpenGL Geometric Primitives OpenGL Attributes Sierpinski s Triangle

21 Points, Lines, Polygons Vertices A vertex is a location in the plane Specified by its x and y coordinates Used to define geometric primitives The simplest geometric primitive is a point General form: glvertex* Examples: glvertex2i(int x, int y); glvertex3f(float x, float y, float z); glvertex3fv(float vcoord);

22 glvertex* glbegin( GL_POINTS ); glvertex2i(100, 100); glvertex2i(400, 100); glvertex2i(250, 400); glend(); OpenGL Primitives 500 y x 500 glbegin( GL_LINE_LOOP ); glvertex2i(100, 100); glvertex2i(400, 100); glvertex2i(250, 400); glend(); 500 y x 500

23 Many Questions How to interpret the values of x, y? In what units are they? Feet, meters or pixels? Where is the origin? Where on the screen does our image appear? How large will the image be? In what color are we drawing? Screen (Graphics) vs. Viewing (Clipping) Window glutinitwindowsize(600, 500); glutinitposition(200, 150); x screen win glortho2d(0, 600, 0, 500); y y viewing window x

24 OpenGL Attributes Examples: glcolor3f( 1.0, 0.0, 0.0 ); glclearcolor( 1.0, 1.0, 1.0, 1.0 ); glpointsize( 4.0 ); gllinewidth( 2.0 ); Once an attribute is set, it stays that value until you later change it. Hands-On Session The primitives.cpp Program Compile, Run & Play, eg: Change point size to 8 Change `GL_POINTS to: GL_LINES GL_LINE_STRIP GL_LINE_LOOP GL_POLYGON GL_QUADS GL_TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN

25 The Sierpinski Gasket Algorithm: Start with 3 corner vertices v1, v2, v3 and one interior point p Repeat the following Hands-on Session The gasket.cpp Program Compile, Run & Play Change GL_POINTS to GL_LINES Comment out certain lines, e.g. glclear(gl_color_buffer_bit); (and resize your window) What happens when you resize your window?

26 Sierpinski Gasket -- Triangle Bisection Algorithm: Start with 3 corner vertices v1, v2, v3 Repeat the following Hands-on Session Save a copy of your gasket.cpp code Alter the code for the gasket to generate the Sierpinski gasket using triangle bisection