lecture3 color representation in computer graphics(Computer graphics tutorials)
COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and...
-
Upload
cynthia-oneal -
Category
Documents
-
view
219 -
download
2
Transcript of COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and...
![Page 1: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/1.jpg)
COMPUTER GRAPHICS
Hochiminh city University of TechnologyFaculty of Computer Science and Engineering
CHAPTER 02:
Graphics Programming
![Page 2: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/2.jpg)
Slide 2Faculty of Computer Science and Engineering - HCMUT
OUTLINE IntroductionOpenGL LibrariesWindows-based programmingA simple programStructure of the programViewingViewportPrimitivesDraw ObjectThe Sierpinski GasketHidden-Surface RemovalMore Examples
![Page 3: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/3.jpg)
Slide 3Faculty of Computer Science and Engineering - HCMUT
IntroductionProgramming Environment
– Hardware: display, graphics card
– Software: OS (Windows), programming language (MS VC++), graphics library (OpenGL, DirectX)
OpenGL
– Platform-independent API
– Easy to use
– Close enough to the hardware to get excellent performance
– Treat 2D and 3D in the same way
![Page 4: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/4.jpg)
Slide 4Faculty of Computer Science and Engineering - HCMUT
OpenGL LibrariesOpenGL core library
– OpenGL32 on Windows
– GL on most unix/linux systems (libGL.a)OpenGL Utility Library (GLU)
– Provides functionality in OpenGL core but avoids having to rewrite code
Links with window system
– GLX for X window systems
– WGL for Windows
– AGL for Macintosh
![Page 5: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/5.jpg)
Slide 5Faculty of Computer Science and Engineering - HCMUT
OpenGL LibrariesOpenGL Utility Toolkit (GLUT)
– Provides functionality common to all window systems
• Open a window
• Get input from mouse and keyboard
• Menus
• Event-driven
– Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform
• No slide bars
![Page 6: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/6.jpg)
Slide 6Faculty of Computer Science and Engineering - HCMUT
OpenGL Libraries
![Page 7: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/7.jpg)
Slide 7Faculty of Computer Science and Engineering - HCMUT
OpenGL Libraries
![Page 8: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/8.jpg)
Slide 8Faculty of Computer Science and Engineering - HCMUT
OpenGL Libraries
![Page 9: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/9.jpg)
Slide 9Faculty of Computer Science and Engineering - HCMUT
OpenGL Libraries
![Page 10: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/10.jpg)
Slide 10Faculty of Computer Science and Engineering - HCMUT
OpenGL Libraries
![Page 11: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/11.jpg)
Slide 11Faculty of Computer Science and Engineering - HCMUT
OpenGL LibrariesOpenGL Functions
– Primitives• Points• Line Segments• Polygons
– Attributes– Transformations
• Modeling• Viewing
– Control (GLUT)– Input (GLUT)– Query
![Page 12: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/12.jpg)
Slide 12Faculty of Computer Science and Engineering - HCMUT
Windows-based programmingEvent-driven programmingEvent queueCallback functionRegister callback function
• glutDisplayFunc(myDisplay)
• glutReshapeFunc(myReshape)
• glutMouseFunc(myMouse)
• glutKeyboardFunc(myKeyboard)
![Page 13: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/13.jpg)
Slide 13Faculty of Computer Science and Engineering - HCMUT
A simple programGenerate a square on a solid background
![Page 14: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/14.jpg)
Slide 14Faculty of Computer Science and Engineering - HCMUT
A simple program#include <GL/glut.h>void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);glBegin(GL_POLYGON);
glVertex2f(-0.5, -0.5);glVertex2f(-0.5, 0.5);glVertex2f(0.5, 0.5);glVertex2f(0.5, -0.5);
glEnd();glFlush();
}int main(int argc, char** argv){
glutCreateWindow("simple");glutDisplayFunc(mydisplay);glutMainLoop();
}
![Page 15: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/15.jpg)
Slide 15Faculty of Computer Science and Engineering - HCMUT
A simple program
– Objects
– Viewer
– Light Source(s)
– Materials
![Page 16: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/16.jpg)
Slide 16Faculty of Computer Science and Engineering - HCMUT
Structure of the program 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
• Input and window functions
![Page 17: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/17.jpg)
Slide 17Faculty of Computer Science and Engineering - HCMUT
Structure of the program
![Page 18: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/18.jpg)
Slide 18Faculty of Computer Science and Engineering - HCMUT
Structure of the programglutInit allows application to get command line
arguments and initializes systemgluInitDisplayMode requests properties for the window
(the rendering context)– RGB color– Single buffering– Properties logically ORed together
glutWindowSize in pixelsglutWindowPosition from top-left corner of displayglutCreateWindow create window with title “simple”glutDisplayFunc display callbackglutMainLoop enter infinite event loop
![Page 19: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/19.jpg)
Slide 19Faculty of Computer Science and Engineering - HCMUT
Structure of the program
![Page 20: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/20.jpg)
Slide 20Faculty of Computer Science and Engineering - HCMUT
Structure of the program
– Objects
– Viewer
– Light Source(s)
– Materials
![Page 21: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/21.jpg)
Slide 21Faculty of Computer Science and Engineering - HCMUT
ViewingOpenGL places a camera at the origin in object space
pointing in the negative z directionThe default viewing volume is a box centered at the
origin with a side of length 2
![Page 22: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/22.jpg)
Slide 22Faculty of Computer Science and Engineering - HCMUT
ViewingPerspective projections:
all projectors meet at the center of projection
Parallel projection: projectors are parallel, center of projection is replaced by a direction of projection
![Page 23: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/23.jpg)
Slide 23Faculty of Computer Science and Engineering - HCMUT
Viewing In the default orthographic view, points are projected
forward along the z axis onto the plane z=0
z=0
z=0
![Page 24: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/24.jpg)
Slide 24Faculty of Computer Science and Engineering - HCMUT
Viewing
glBegin(GL_POLYGON);
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
glVertex2f(0.5, -0.5);
glEnd();
1-1
1
-1
![Page 25: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/25.jpg)
Slide 25Faculty of Computer Science and Engineering - HCMUT
Viewing
glBegin(GL_POLYGON);
glVertex2f(1.0, 1.0);
glVertex2f(1.0, 2.0);
glVertex2f(2.0, 2.0);
glVertex2f(2.0, 1.0);
glEnd();
1-1
1
-1
![Page 26: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/26.jpg)
Slide 26Faculty of Computer Science and Engineering - HCMUT
Viewing
glBegin(GL_POLYGON);
glVertex2f(0.5, 0.5);
glVertex2f(0.5, 1.5);
glVertex2f(1.5, 1.5);
glVertex2f(1.5, 0.5);
glEnd();
1-1
1
-1
![Page 27: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/27.jpg)
Slide 27Faculty of Computer Science and Engineering - HCMUT
ViewingglMatrixMode (GL_PROJECTION)
glLoadIdentity();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);glMatrixMode (GL_PROJECTION)
glLoadIdentity();
glOrtho(-1.0, 1.0, -1.0, 1.0)glOrtho(left, right, bottom, top, near, far)gluOrtho2D(left, right,bottom,top)
![Page 28: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/28.jpg)
Slide 28Faculty of Computer Science and Engineering - HCMUT
Viewing
4-2
2
-4
![Page 29: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/29.jpg)
Slide 29Faculty of Computer Science and Engineering - HCMUT
ViewingglBegin(GL_POLYGON);
glVertex2f(-2.0, 0.0);glVertex2f(-2.0, 2.0);glVertex2f(0.0, 2.0);glVertex2f(0.0, 0.0);
glEnd();
glBegin(GL_POLYGON);glVertex2f( 0.0, -4.0);glVertex2f( 2.0, 0.0);glVertex2f( 4.0, -4.0);
glEnd();
![Page 30: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/30.jpg)
Slide 30Faculty of Computer Science and Engineering - HCMUT
ViewingHow to get the picture of triangle and square?
![Page 31: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/31.jpg)
Slide 31Faculty of Computer Science and Engineering - HCMUT
ViewingHow to get the picture of triangle and square?
– glMatrixMode (GL_PROJECTION);
– glLoadIdentity();
– gluOrtho2D(-2.0, 4.0, -4.0, 2.0);How to get the picture of the square?How to get the picture of the triangle?
![Page 32: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/32.jpg)
Slide 32Faculty of Computer Science and Engineering - HCMUT
ViewportDo not have use the entire window for the image:
glViewport(x,y,w,h)Values in pixels (screen coordinates)
![Page 33: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/33.jpg)
Slide 33Faculty of Computer Science and Engineering - HCMUT
ViewportSize of the graphics window
– glutInitWindowSize(cx, cy);
glutInitWindowSize(640, 480);
![Page 34: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/34.jpg)
Slide 34Faculty of Computer Science and Engineering - HCMUT
ViewportglViewport(320, 240, 320, 240)
![Page 35: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/35.jpg)
Slide 35Faculty of Computer Science and Engineering - HCMUT
ViewportglViewport(320, 240, 240, 240)
![Page 36: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/36.jpg)
Slide 36Faculty of Computer Science and Engineering - HCMUT
ViewportHow to draw picture in the second quadrant?
![Page 37: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/37.jpg)
Slide 37Faculty of Computer Science and Engineering - HCMUT
ViewportHow to draw picture in the second quadrant?
– glViewport(0, 240, 320, 240);How to draw picture in the third quadrant?How to draw picture in the fourth quadrant?How to draw picture in all quadrant?
![Page 38: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/38.jpg)
Slide 38Faculty of Computer Science and Engineering - HCMUT
ViewportHow to draw picture in all quadrant?
![Page 39: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/39.jpg)
Slide 39Faculty of Computer Science and Engineering - HCMUT
Viewport glViewport(320, 240, 320, 240);
glBegin() //draw square
………………
glEnd()
glBegin() //draw triangle
………………
glEnd() glViewport(0, 240, 320, 240);
…………………………………. glViewport(0, 0, 320, 240);
…………………………………. glViewport(320, 0, 320, 240);
………………………………….
![Page 40: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/40.jpg)
Slide 40Faculty of Computer Science and Engineering - HCMUT
Primitives
– Objects
– Viewer
– Light Source(s)
– MaterialsPolylineTextFilled regionRaster image
![Page 41: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/41.jpg)
Slide 41Faculty of Computer Science and Engineering - HCMUT
PrimitivesPolyline
– A polyline is a connected sequence of straight lines
– A polyline can be used to approximated a smooth curve
– Functions:
• Draw Point: drawDot(x1, y1)
• Draw Line: drawLine(x1, y1, x2, y2)
• Draw Polyline: drawPolyline(poly)
![Page 42: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/42.jpg)
Slide 42Faculty of Computer Science and Engineering - HCMUT
PrimitivesPolyline
– Polygon: polyline if the first and the last points are connected by an edge
– Polygon type: simple, convex
![Page 43: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/43.jpg)
Slide 43Faculty of Computer Science and Engineering - HCMUT
PrimitivesPolyline
– Attributes: Color, thickness, type (solid, dash), join points
![Page 44: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/44.jpg)
Slide 44Faculty of Computer Science and Engineering - HCMUT
PrimitivesText:
– Display mode: text mode, graphics mode– Attributes: Font, color, size, orientation, space
![Page 45: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/45.jpg)
Slide 45Faculty of Computer Science and Engineering - HCMUT
PrimitivesFilled region
– Filled region is a shape filled with some color or pattern. The boundary is often a polygon
![Page 46: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/46.jpg)
Slide 46Faculty of Computer Science and Engineering - HCMUT
PrimitivesUse filled region to shade the different faces of a three-
dimensional object
![Page 47: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/47.jpg)
Slide 47Faculty of Computer Science and Engineering - HCMUT
PrimitivesRaster Image
– Raster image is made up of many pixels.
– Stored as an array of numerical values
How are raster images created?
– Hand-designed, Computed Images, Scanned ImagesRaster image can be processed
![Page 48: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/48.jpg)
Slide 48Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(parameter)
glVertex2f(…) //or glVertex3f(…)
glVertex2f(…)
………………
glEnd()Parameter
– GL_POINTS, GL_LINES, GL_TRIANGLES, v.v
![Page 49: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/49.jpg)
Slide 49Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_POINTS);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 50: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/50.jpg)
Slide 50Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_LINES);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 51: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/51.jpg)
Slide 51Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_LINE_STRIP);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 52: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/52.jpg)
Slide 52Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_LINE_LOOP);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 53: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/53.jpg)
Slide 53Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_TRIANGLES);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 54: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/54.jpg)
Slide 54Faculty of Computer Science and Engineering - HCMUT
Draw ObjectglPolygonMode(GL_FRONT_AND_BACK, GL_LINE);glColor3f(1.0, 0.0, 0.0);glLineWidth(3.0);
![Page 55: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/55.jpg)
Slide 55Faculty of Computer Science and Engineering - HCMUT
Draw ObjectglPolygonMode(GL_FRONT_AND_BACK, GL_POINT);glColor3f(1.0, 1.0, 0.0);glPointSize(5);
![Page 56: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/56.jpg)
Slide 56Faculty of Computer Science and Engineering - HCMUT
Draw ObjectglPolygonMode(GL_FRONT_AND_BACK, GL_FILL);glColor3f(0.0, 1.0, 0.0);glClearColor(1.0, 1.0, 1.0, 1.0);
![Page 57: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/57.jpg)
Slide 57Faculty of Computer Science and Engineering - HCMUT
Draw Object
![Page 58: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/58.jpg)
Slide 58Faculty of Computer Science and Engineering - HCMUT
Draw ObjectglPolygonMode(GL_FRONT_AND_BACK, GL_FILL);glColor3f(0.0, 1.0, 0.0);glClearColor(1.0, 1.0, 1.0, 1.0);glBegin(GL_TRIANGLES);
……………………..glEnd();glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);glColor3f(1.0, 0.0, 0.0);glLineWidth(3);glBegin(GL_TRIANGLES);
……………………..glEnd();
![Page 59: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/59.jpg)
Slide 59Faculty of Computer Science and Engineering - HCMUT
Draw ObjectglBegin(GL_TRIANGLES);
glVertex2f(-0.5, 1.0);glVertex2f( 0.5, 1.0);glVertex2f(-0.5, 0.0);glVertex2f(-0.5, 0.0);glVertex2f( 0.5, 1.0);glVertex2f( 0.5, 0.0);glVertex2f(-0.5, -1.0);glVertex2f(-0.5, 0.0);glVertex2f( 0.5, 0.0);glVertex2f( 0.5, 0.0);glVertex2f(-0.5, -1.0);glVertex2f( 0.5, -1.0);
glEnd();
![Page 60: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/60.jpg)
Slide 60Faculty of Computer Science and Engineering - HCMUT
Draw Object
glBegin(GL_TRIANGLE_STRIP);
glVertex2f(-0.5, 1.0);
glVertex2f( 0.5, 1.0);
glVertex2f(-0.5, 0.0);
glVertex2f( 0.5, 0.0);
glVertex2f(-0.5, -1.0);
glVertex2f( 0.5, -1.0);
glEnd();
![Page 61: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/61.jpg)
Slide 61Faculty of Computer Science and Engineering - HCMUT
Draw Object
GL_QUADSGL_QUAD_STRIPGL_TRIANGLE_FAN
![Page 62: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/62.jpg)
Slide 62Faculty of Computer Science and Engineering - HCMUT
Draw Object
void drawPoint(GLint x, GLint y) {
glBegin(GL_POINTS);
glVertex2i(x, y);
glEnd();
}
void drawLine(GLint x1, GLint y1, GLint x2, GLint y2){
glBegin(GL_LINES);
glVertex2i(x1, y1);
glVertex2i(x2, y2);
glEnd();
}
![Page 63: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/63.jpg)
Slide 63Faculty of Computer Science and Engineering - HCMUT
Draw Objectclass GLintPointArray {
const int MAX_NUM = 100;
public:
int num ;
GLintPoint pt[MAX_NUM] ;
};
void drawPolyLine(GLintPointArray poly,int closed) {
glBegin(closed ? GL_LINE_LOOP : GL_LINE_STRIP);
for(int i=0;i<poly.num;i++)
glVertex2i(poly.pt[i].x, poly.pt[i].y);
glEnd();
glFlush();
}
![Page 64: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/64.jpg)
Slide 64Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasket
![Page 65: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/65.jpg)
Slide 65Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasket
1. Pick an initial point (x, y, z) at random inside the triangle
2. Select one of the three vertices at random
3. Find the location halfway between the initial point and the randomly selected vertex
4. Display this new point by putting some sort of marker, such as a small circle at the corresponding location on the display
5. Replace the point at (x, y, z) with this new point
6. Return to step 2
![Page 66: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/66.jpg)
Slide 66Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasket
main()
{
Initialize_the_system();
for(some_number_of_points)
{
pt = generate_a_point();
Display_the_point(pt);
}
}
![Page 67: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/67.jpg)
Slide 67Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasket
void myinit()
{
glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */
glColor3f(1.0, 0.0, 0.0); /* draw in red */
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 50.0, 0.0, 50.0);
glMatrixMode(GL_MODELVIEW);
}
![Page 68: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/68.jpg)
Slide 68Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketvoid display( void ){ GLfloat vertices[3][2]={{0.0,0.0},{25.0,50.0},{50.0,0.0}}; /* A triangle */ int j, k; int rand(); /* standard random number generator */ GLfloat p[2] ={7.5,5.0}; /* An arbitrary initial point inside traingle */
glClear(GL_COLOR_BUFFER_BIT); /*clear the window */ glBegin(GL_POINTS); for( k=0; k<5000; k++) { j = rand()%3; /* pick a vertex at random */
p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0;
glVertex2fv(p); }
glEnd();glFlush(); /* clear buffers */
}
![Page 69: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/69.jpg)
Slide 69Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketStart with a triangle
Connect bisectors of sides and remove central triangle
Repeat
![Page 70: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/70.jpg)
Slide 70Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketFive subdivisions
![Page 71: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/71.jpg)
Slide 71Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketGLfloat v[3][2]={{-1.0, -0.58}, {1.0, -0.58}, {0.0, 1.15}};int n;
void triangle( GLfloat *a, GLfloat *b, GLfloat *c)
/* display one triangle */{ glVertex2fv(a); glVertex2fv(b); glVertex2fv(c);}
![Page 72: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/72.jpg)
Slide 72Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketvoid divide_triangle(GLfloat *a, GLfloat *b,
GLfloat *c, int m){ point2 v0, v1, v2;
int j; if(m>0){ for(j=0; j<2; j++) v0[j]=(a[j]+b[j])/2; for(j=0; j<2; j++) v1[j]=(a[j]+c[j])/2; for(j=0; j<2; j++) v2[j]=(b[j]+c[j])/2; divide_triangle(a, v0, v1, m-1); divide_triangle(c, v1, v2, m-1); divide_triangle(b, v2, v0, m-1); } else(triangle(a,b,c));}
![Page 73: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/73.jpg)
Slide 73Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketvoid display(){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); divide_triangle(v[0], v[1], v[2], n); glEnd(); glFlush();}
void myinit(){ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-2.0, 2.0, -2.0, 2.0); glMatrixMode(GL_MODELVIEW); glClearColor (1.0, 1.0, 1.0,1.0) glColor3f(0.0,0.0,0.0);}
![Page 74: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/74.jpg)
Slide 74Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketint main(int argc, char **argv){ n=4; glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutCreateWindow(“2D Gasket"); glutDisplayFunc(display); myinit();
glutMainLoop();}
![Page 75: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/75.jpg)
Slide 75Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketWe can easily make the program three-dimensional by
using– GLfloat v[4][3]– glVertex3f– glOrtho
But that would not be very interesting Instead, we can start with a tetrahedron
![Page 76: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/76.jpg)
Slide 76Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketWe can subdivide each of the four faces
Appears as if we remove a solid tetrahedron from the center leaving four smaller tetrahedra
![Page 77: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/77.jpg)
Slide 77Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketvoid triangle( GLfloat *a, GLfloat *b, GLfloat *c){ glVertex3fv(a); glVertex3fv(b); glVertex3fv(c);}
void tetra(GLfloat *a, GLfloat *b, GLfloat *c, GLfloat *d){ glColor3fv(colors[0]); triangle(b, d, c); glColor3fv(colors[1]); triangle(a, b, c); glColor3fv(colors[2]); triangle(a, c, d); glColor3fv(colors[3]); triangle(a, d, b);}
![Page 78: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/78.jpg)
Slide 78Faculty of Computer Science and Engineering - HCMUT
The Sierpinski Gasketvoid divide_tetra(GLfloat *a, GLfloat *b, GLfloat *c, GLfloat *d, int m){
GLfloat mid[6][3];
int j;
if(m>0) {
for(j=0; j<3; j++) mid[0][j]=(a[j]+b[j])/2;
…………………………………………….
divide_tetra(a, mid[0], mid[1], mid[2], m-1);
…………………………………………….
}
else(tetra(a,b,c,d)); /* draw tetrahedron at end of recursion */
}
![Page 79: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/79.jpg)
Slide 79Faculty of Computer Science and Engineering - HCMUT
The Sierpinski GasketBecause the triangles are drawn in the order they are
defined in the program, the front triangles are not always rendered in front of triangles behind them
![Page 80: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/80.jpg)
Slide 80Faculty of Computer Science and Engineering - HCMUT
Hidden-Surface RemovalWe want to see only those surfaces in front of other
surfacesOpenGL uses a hidden-surface method called the z-
buffer algorithm that saves depth information as objects are rendered so that only the front objects appear in the image
![Page 81: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/81.jpg)
Slide 81Faculty of Computer Science and Engineering - HCMUT
Hidden-Surface RemovalThe algorithm uses an extra buffer, the z-buffer, to
store depth information as geometry travels down the pipeline
It must be– Requested in main()
•glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH)
– Enabled •glEnable(GL_DEPTH_TEST)
– Cleared in the display callback•glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)
![Page 82: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/82.jpg)
Slide 82Faculty of Computer Science and Engineering - HCMUT
More Examples void hardwirededHouse(){ glBegin(GL_LINE_LOOP);//vẽ khung ngôi nhà glVertex2i(40, 40); glVertex2i(40, 90); glVertex2i(70, 120); glVertex2i(100, 90); glVertex2i(100, 40); glEnd(); glBegin(GL_LINE_STRIP);//vẽ ống khói glVertex2i(50, 100); glVertex2i(50, 120); glVertex2i(60, 120); glVertex2i(60, 110); glEnd(); . . . // vẽ cửa ra vào
. . . // vẽ cửa sổ}
12040
120
40
![Page 83: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/83.jpg)
Slide 83Faculty of Computer Science and Engineering - HCMUT
More Examples void parameterizedHouse(GLintPoint peak,GLint width,GLint
height)// tọa độ của nóc nhà là peak, // chiều cao, chiều rộng của ngôi nhà là height và width{ glBegin(GL_LINE_LOOP); glVertex2i(peak.x, peak.y); glVertex2i(peak.x + width/2,peak.y – 3*height/8); glVertex2i(peak.x + width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – height); glVertex2i(peak.x - width/2,peak.y – 3*height/8); glEnd(); vẽ ống khói vẽ cửa ra vào vẽ cửa sổ}
![Page 84: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/84.jpg)
Slide 84Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 85: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/85.jpg)
Slide 85Faculty of Computer Science and Engineering - HCMUT
More ExamplesSpherical coordinate system
– x = r*sin(theta)*cos(phi);
– z = r*cos(theta)*cos(phi);
– y = r*sin(phi);
![Page 86: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/86.jpg)
Slide 86Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 87: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/87.jpg)
Slide 87Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 88: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/88.jpg)
Slide 88Faculty of Computer Science and Engineering - HCMUT
More Examplesfor(float phi = -80; phi<=80; phi+=20){
phir = c*phi;phir20 = c*(phi+20);glBegin(GL_QUAD_STRIP);for(float theta = -180; theta<=180; theta+=20) {
thetar = c*theta;x = sin(thetar)*cos(phir); z = cos(thetar)*cos(phir);y = sin(phir);glVertex3d(x, y, z);x = sin(thetar)*cos(phir20);z =
cos(thetar)*cos(phir20);y = sin(phir20);glVertex3d(x, y, z);
}glEnd();
}
![Page 89: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/89.jpg)
Slide 89Faculty of Computer Science and Engineering - HCMUT
More ExamplesglBegin(GL_TRIANGLE_FAN);
glVertex3d(0, 1, 0);c80 = c*80;y = sin(c80);for(float theta = 180; theta>=-180; theta-=20){
thetar = c*theta;x = sin(thetar)*cos(c80);z = cos(thetar)*cos(c80);glVertex3d(x, y, z);
}glEnd();
![Page 90: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/90.jpg)
Slide 90Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 91: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/91.jpg)
Slide 91Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 92: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/92.jpg)
Slide 92Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 93: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/93.jpg)
Slide 93Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 94: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/94.jpg)
Slide 94Faculty of Computer Science and Engineering - HCMUT
More Examples
![Page 95: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/95.jpg)
Slide 95Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
Polygonal meshes are simply collections of polygons, or “faces,” that together form the “skin” of an object. They have become a standard way of representing a broad class of solid shapes in graphics.
Easy to represent (by a sequence of vertices) and transform, have simple properties (a single normal vector, sequence of vertices) and transform, have simple properties (a single normal vector, a well-defined inside and outside, etc.), and are easy to draw (using a polygon-fill routine or by mapping texture onto the polygon).
![Page 96: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/96.jpg)
Slide 96Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glBegin(GL_POLYGON);
glVertex3f(-1, 1, 1);
glVertex3f( 1, 1, 1);
glVertex3f( 1, 1, -1);
glVertex3f( -1, 1, -1);
glEnd();
……………………………….
![Page 97: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/97.jpg)
Slide 97Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
glColor3f(0, 0, 1);
glBegin(GL_POLYGON);
glVertex3f(-1, 1, 1);
glVertex3f( 1, 1, 1);
glVertex3f( 1, 1, -1);
glVertex3f( -1, 1, -1);
glEnd();
……………………………….
![Page 98: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/98.jpg)
Slide 98Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
![Page 99: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/99.jpg)
Slide 99Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
Data Structureclass Mesh {
Face faceArr[];
};
class Face {
Point3 vertexArr[];
Vector3 normArr[];
}
![Page 100: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/100.jpg)
Slide 100Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
Defining a Polygonal Mesh
- A more efficient approach uses three separate lists : a vertex list, a normal list, and a face list
- The three lists work together : The vertex list contains locational or geometric information, the normal list contains orientation information, and the face list contains connectivity or topological information.
![Page 101: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/101.jpg)
Slide 101Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
![Page 102: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/102.jpg)
Slide 102Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
class VertexID{
public:
int vertIndex; //index of this vertex in the vertex list
int normIndex; // index of this vertex's normal
};
class Face{
public:
int nVerts; // number of vertice in this face
VertexID* vert; // the list of vertex and normal index
Face() { nVerts = 0; vert = NULL; }
~Face() { delete[] vert; nVerts = 0; }
};
![Page 103: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/103.jpg)
Slide 103Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
class Mesh { private: int numVerts; // number of vertices in the mesh Point3* pt; // array of 3D vertices int numNormals; // number of normal vectors for the mesh Vector3* norm; // array of normals int numFaces; // number of faces in the mesh Face* face; // array of face data // ... others to be added later public: Mesh(); ~Mesh();
// ... others };
![Page 104: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/104.jpg)
Slide 104Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
void Mesh::DrawWireframe(){
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
for (int f = 0; f < numFaces; f++) {
glBegin(GL_POLYGON);
for (int v = 0; v < face[f].nVerts; v++){
int iv = face[f].vert[v].vertIndex;
glVertex3f(pt[iv].x, pt[iv].y, pt[iv].z);
}
glEnd();
}
}
![Page 105: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/105.jpg)
Slide 105Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
![Page 106: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/106.jpg)
Slide 106Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
void Mesh::CreateTetrahedron()
{
numVerts=4;
pt = new Point3[numVerts];
pt[0].set(0, 0, 0);
pt[1].set(1, 0, 0);
pt[2].set(0, 1, 0);
pt[3].set(0, 0, 1);
![Page 107: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/107.jpg)
Slide 107Faculty of Computer Science and Engineering - HCMUT
Modeling Shapes with Polygonal Meshes
numFaces= 4;
face = new Face[numFaces];
face[0].nVerts = 3;
face[0].vert = new VertexID[face[0].nVerts];
face[0].vert[0].vertIndex = 1;
face[0].vert[1].vertIndex = 2;
face[0].vert[2].vertIndex = 3;
face[0].vert[0].normIndex = 0;
face[0].vert[1].normIndex = 0;
face[0].vert[2].normIndex = 0;
![Page 108: COMPUTER GRAPHICS Hochiminh city University of Technology Faculty of Computer Science and Engineering CHAPTER 02: Graphics Programming.](https://reader036.fdocuments.in/reader036/viewer/2022081513/56649f445503460f94c65e1a/html5/thumbnails/108.jpg)
Slide 108Faculty of Computer Science and Engineering - HCMUT
Further Reading “Interactive Computer Graphics: A Topdown
Approach Using OpenGL”, Edward Angel
– Chapter 2: Graphics Programming “Đồ họa máy tính trong không gian hai chiều”, Trần
Giang Sơn
– Chương 2: Bước đầu tạo hình ảnh “Đồ họa máy tính trong không gian ba chiều”, Trần Giang
Sơn
– Chương 1: Mô hình hóa đối tượng ba chiều bằng lưới đa giác