• Save
OpenGL Basics
Upcoming SlideShare
Loading in...5
×
 

OpenGL Basics

on

  • 4,618 views

Introduction to Computer Graphics and OpenGL programming.

Introduction to Computer Graphics and OpenGL programming.

Statistics

Views

Total Views
4,618
Views on SlideShare
3,588
Embed Views
1,030

Actions

Likes
9
Downloads
0
Comments
0

5 Embeds 1,030

http://www.learncax.com 656
http://cctech.co.in 367
http://www.linkedin.com 5
https://twitter.com 1
http://cloud.feedly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

OpenGL Basics Presentation Transcript

  • 1. OpenGL & Computer Graphics Basic http://www.learncax.com/ Centre for Computational TechnologiesCCTech Recruitment Brochure Simulation is The Future!
  • 2. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 3. TextbookOpenGL ProgrammingGuide, Fourth Edition: TheOfficial Guide to LearningOpenGL, Version 1.5, by Wooet al., Addison Wesley, ISBN:0201604582. Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 4. Basic goal• Teach you the fundamentals for writing your own graphics applications Centre for Computational Technologies OpenGL Simulation is The Future!
  • 5. Evolution Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 6. PC Architecture Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 7. Programming Graphics Applications• The application is programmed to the 3D graphics API and links with the driver at runtime Centre for Computational Technologies OpenGL Simulation is The Future!
  • 8. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 9. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 10. The Graphics Pipeline  SolidWorks:  define software behavior  user input events  Software logic  CAD operations Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 11. The Graphics Pipeline  SolidWorks:  send OpenGL commands  OpenGL driver:  process GL command stream  talk to GPU Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 12. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 13. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 14. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 15. The Graphics Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 16. Rasterization vs. Ray Tracing Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 17. Rasterization vs. Ray Tracing• Rasterization:• for each object ... – for each pixel ...• Ray tracing:• for each pixel ... – for each object ... Centre for Computational Technologies OpenGL Simulation is The Future!
  • 18. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 19. Computer Graphics Applications• Computer Aided Design• Computer Aided Manufacturing• Architecture• Simulation• Virtual Reality• Visualization• Games• Movies • Medical Imaging Centre for Computational Technologies OpenGL Simulation is The Future!
  • 20. Computer Aided Design (CAD) Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 21. Movies Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 22. Games Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 23. Visualization Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 24. Virtual and Augmented Reality Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 25. Mobile Media Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 26. New Information Spaces Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 27. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 28. Programming a Pipeline• Specify the operation of each box• Replace or accumulate• State and lack of modularity• Immediate mode graphics – On-line (OpenGL)• Modeling-rendering pipeline – Off-line (Pixar’s Renderman) Centre for Computational Technologies OpenGL Simulation is The Future!
  • 29. Vertex• Vertices in world coordinates• void glVertex3f(GLfloat x, GLfloat y, GLfloat z) – Vertex (x, y, z) sent down the pipeline – Function call returns• Use GLtype for portability and consistency – glVertex{234}{sfid}[v](TYPE coords) Centre for Computational Technologies OpenGL Simulation is The Future!
  • 30. Transformer• Transformer in world coordinates• Must be set before object is drawn! – glRotatef(45.0, 0.0, 0.0, -1.0); – glVertex2f(1.0, 0.0); Centre for Computational Technologies OpenGL Simulation is The Future!
  • 31. Clipper• Mostly automatic from viewport Centre for Computational Technologies OpenGL Simulation is The Future!
  • 32. ProjectorOrthographic Perspective Centre for Computational Technologies OpenGL Simulation is The Future!
  • 33. Rasterizer• Interesting algorithms• To window coordinates Centre for Computational Technologies OpenGL Simulation is The Future!
  • 34. The OpenGL Vertex Pipeline Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 35. OpenGL shaded-quad codeglClearColor(1, 1, 1, 1); // whiteglClear(GL_COLOR_BUFFER_BIT);glLoadIdentity();glOrtho(0, 100, 0, 100, -1, 1);glBegin(GL_TRIANGLE_STRIP); glColor3f(0, 0.5, 0); // dark green glVertex2i(11, 31); glVertex2i(37, 71); glColor3f(0.5, 0, 0); // dark red glVertex2i(91, 38); glVertex2i(65, 71);glEnd();glFlush(); Centre for Computational Technologies OpenGL Simulation is The Future!
  • 36. OpenGL vertex pipeline ApplicationEmphasis is on data typesDiagram ignores Vertex assembly – Pixel pipeline – Texture memory Vertex operations – Display lists Primitive assembly – …Display is not part of OpenGL Primitive operations Rasterization Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 37. Vertex assembly (data types) Application struct { Vertex assembly float x,y,z,w; float r,g,b,a; Vertex operations } vertex; Primitive assembly Primitive operations Rasterization Fragment operations Framebuffer Display Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 38. Vertex assembly (OpenGL)Vertex assembly Application – Force input to canonical format • Convert to internal representation Vertex assembly – E.g., x, y to float • Initialize unspecified values Vertex operations – E.g., z = 0, w=1 • Insert current modal state – E.g., color to 0,0.5,0,1 Primitive assembly – Or create using evaluatorsError detection Primitive operations – INVALID_ENUM – INVALID_VALUE Rasterization – INVALID_OPERATION • Especially between Begin and End Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 39. Vertex assembly (in our case)glColor3f(0, 0.5, 0); ApplicationglVertex2i(11, 31);glVertex2i(37, 71); Vertex assemblyglColor3f(0.5, 0, 0); // no effect Vertex operations Primitive assemblystruct { Primitive operations float x,y,z,w; // 11, 31, 0, 1 float r,g,b,a; // 0, 0.5, 0, 1 Rasterization} vertex; Fragment operationsstruct { float x,y,z,w; // 37, 71, 0, 1 Framebuffer float r,g,b,a; // 0, 0.5, 0, 1} vertex; Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 40. Vertex operations ApplicationOpenGL – Transform coordinates Vertex assembly • 4x4 matrix arithmetic – Compute (vertex) lighting Vertex operations – Compute texture coordinates Primitive assembly – …In our case: Primitive operations – Scale (arbitrary 100x100) coordinates to fit window Rasterization – No lighting, no texture coordinates Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 41. Primitive assembly (data types) Application struct { Vertex assembly float x,y,z,w; float r,g,b,a; Vertex operations } vertex; struct { Primitive assembly vertex v0,v1,v2; Primitive operations } triangle; or Rasterization struct { vertex v0,v1; Fragment operations } line; or Framebuffer struct { vertex v0; Display } point; Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 42. Primitive assemblyOpenGL Application – Group vertexes into primitives: • points, Vertex assembly • lines, or • triangles Vertex operations – Decompose polygons to triangles – Duplicate vertexes in strips or fans Primitive assemblyIn our case: – Create two triangles from a strip: Primitive operations Rasterization 1 3 Fragment operationsglBegin(GL_TRIANGLE_STRIP);glColor(green);glVertex2i(…); // 0glVertex2i(…); // 1 FramebufferglColor(red);glVertex2i(…); // 2glVertex2i(…); // 3glEnd(); 2 Display 0 Centre for Computational Technologies OpenGL Simulation is The Future!
  • 43. Primitive operations ApplicationOpenGL – Clip to the window boundaries Vertex assembly • Actually to the frustum surfaces – Perform back-face / front-face ops Vertex operations • Culling • Color assignment for 2-side lighting Primitive assemblyIn our case Primitive operations – Nothing happens Rasterization Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 44. Rasterization (data types) Application struct { Vertex assembly float x,y,z,w; float r,g,b,a; Vertex operations } vertex; struct { Primitive assembly vertex v0,v1,v2 Primitive operations } triangle; struct { Rasterization short int x,y; float depth; Fragment operations float r,g,b,a; } fragment; Framebuffer Display Centre for Computational TechnologiesOpenGL Simulation is The Future!
  • 45. Rasterization ApplicationOpenGL – Determine which pixels are included in the Vertex assembly primitive • Generate a fragment for each such pixel Vertex operations – Assign attributes (e.g., color) to each fragment Primitive assemblyIn our case: Primitive operations Rasterization Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 46. Fragment operations ApplicationOpenGL – Texture mapping Vertex assembly – Fragment lighting (OpenGL 2.0) – Fog Vertex operations – Scissor test Primitive assembly – Alpha testIn our case, nothing happens: Primitive operations Rasterization Fragment operations Framebuffer Display Centre for Computational Technologies OpenGL Simulation is The Future!
  • 47. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 48. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 49. OpenGL Library Organization• GLU (OpenGL Utility Library), modeling• GLUT (GL Utility Toolkit), window system interface Centre for Computational Technologies OpenGL Simulation is The Future!
  • 50. Graphics Functions• Primitive functions• Attribute functions• Transformation functions• Viewing functions• Input functions• Control functions Centre for Computational Technologies OpenGL Simulation is The Future!
  • 51. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 52. Primitives• Specified via vertices• General schema glBegin(type); glVertex*(...); ... glVertex*(...); glEnd();• type determines interpretation of vertices Centre for Computational Technologies OpenGL Simulation is The Future!
  • 53. Example: Square Outline• Type GL_LINE_LOOP glBegin(GL_LINE_LOOP); glVertex2f(0.0, 0.0); glVertex2f(1.0, 0.0); glVertex2f(1.0, 1.0); glVertex2f(0.0, 1.0); glEnd();• z coordinate defaults to 0• Calls to other functions are allowed between glBegin(type) and glEnd(); Centre for Computational Technologies OpenGL Simulation is The Future!
  • 54. Points and Line Segments• Make sense in three dimensions Centre for Computational Technologies OpenGL Simulation is The Future!
  • 55. Polygons• Polygons enclose an area• Rendering of area (fill) depends on attributes• All vertices must be in one plane Centre for Computational Technologies OpenGL Simulation is The Future!
  • 56. Polygon Restrictions• OpenGL Polygons must be simple• OpenGL Polygons must be convex (a) simple, but not convex convex (b) non-simple Centre for Computational Technologies OpenGL Simulation is The Future!
  • 57. Why Polygon Restrictions?• Non-convex and non-simple polygons are expensive to process and render• Convexity and simplicity is expensive to test• Behavior of OpenGL implementation on disallowed polygons is “undefined”• Some tools in GLU for decomposing complex polygons (tessellation)• Triangles are most efficient Centre for Computational Technologies OpenGL Simulation is The Future!
  • 58. Polygon Strips• Efficiency in space and time• Reduces visual artefacts• Polygons have a front and a back, possibly with different attributes! Centre for Computational Technologies OpenGL Simulation is The Future!
  • 59. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 60. Attributes• Part of the state of the graphics pipeline• Set before primitives are drawn• Remain in effect!• Examples: – Color, including transparency – Reflection properties – Shading properties Centre for Computational Technologies OpenGL Simulation is The Future!
  • 61. Color Spaces• RGB (Red, Green, Blue) – Convenient for display – Can be unintuitive (3 floats in OpenGL)• HSV (Hue, Saturation, Value) – Hue: what color – Saturation: how far away from gray – Value: how bright• Others for movies and printing Centre for Computational Technologies OpenGL Simulation is The Future!
  • 62. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 63. Example: Drawing a shaded polygon• Initialization: the “main” function int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc (keyboard); glutMainLoop(); return 0; } Centre for Computational Technologies OpenGL Simulation is The Future!
  • 64. GLUT Callbacks• Window system independent interaction• glutDisplayFunc(display);• glutReshapeFunc(reshape);• glutKeyboardFunc (keyboard);• glutMainLoop processes events Centre for Computational Technologies OpenGL Simulation is The Future!
  • 65. Initializing Attributes• Separate in “init” function void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); /* glShadeModel (GL_FLAT); */ glShadeModel (GL_SMOOTH); } Centre for Computational Technologies OpenGL Simulation is The Future!
  • 66. The Display Callback• Handles exposure events• Install with glutDisplayFunc(display) void display(void) { glClear (GL_COLOR_BUFFER_BIT); /* clear buffer */ triangle (); /* draw triangle */ glFlush (); /* force display */ } Centre for Computational Technologies OpenGL Simulation is The Future!
  • 67. Drawing• In world coordinates; remember state! void triangle(void) { glBegin (GL_TRIANGLES); glColor3f (1.0, 0.0, 0.0); /* red */ glVertex2f (5.0, 5.0); glColor3f (0.0, 1.0, 0.0); /* green */ glVertex2f (25.0, 5.0); glColor3f (0.0, 0.0, 1.0); /* blue */ glVertex2f (5.0, 25.0); glEnd(); } Centre for Computational Technologies OpenGL Simulation is The Future!
  • 68. The Image• Color of last vertex with flat shadingglShadeModel(GL_FLAT) glShadeModel(GL_SMOOTH) Centre for Computational Technologies OpenGL Simulation is The Future!
  • 69. Smooth Shading• Approximating a sphereFlat Shading Smooth Shading Centre for Computational Technologies OpenGL Simulation is The Future!
  • 70. Projection• Mapping world to screen coordinates void reshape(int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode (GL_PROJECTION); glLoadIdentity (); if (w <= h) gluOrtho2D (0.0, 30.0, 0.0, 30.0 * (GLfloat) h/(GLfloat) w); else gluOrtho2D (0.0, 30.0 * (GLfloat) w/(GLfloat) h, 0.0, 30.0); glMatrixMode(GL_MODELVIEW); } Centre for Computational Technologies OpenGL Simulation is The Future!
  • 71. Viewport• Determines clipping in window coordinates• glViewPort(x, y, w, h) Centre for Computational Technologies OpenGL Simulation is The Future!
  • 72. Orthographic Projection• 2D and 3D versions• glOrtho2D(left, right, bottom, top)• In world coordinates! Centre for Computational Technologies OpenGL Simulation is The Future!
  • 73. Outline1. Introduction to Computer Graphics2. Computer Graphics Applications3. A Graphics Pipeline4. The OpenGL API5. Primitives: vertices, lines, polygons6. Attributes: color7. Example: drawing a shaded triangle Centre for Computational Technologies OpenGL Simulation is The Future!
  • 74. Reminder• Programming Assignment 1 out today• Due in two weeks• Compilation instructions on course page together with assignment Centre for Computational Technologies OpenGL Simulation is The Future!
  • 75. Questions? Centre for Computational TechnologiesOpenGL Simulation is The Future!