Triangulation Introduction to Computer Graphics and Animation Principle

Triangulation Introduction to Computer Graphics and Animation (Principle of Computer Graphics) Rattapoom Waranusast

Triangulations • A valid triangulation of a figure X is a collection of triangles (T) satisfying the following two properties: 1. The collection T together exactly covers X. 2. Any given two triangles t 1 and t 2 in the collection are either (a) disjoint (ie. , do not intersect at all), or (b) intersect exactly in a vertex of both, or (c) intersect exactly in an edge (side) of both.

Examples • Triangulation is not a unique process and the same object may have multiple triangulations.

Exercise 5. 1 • Draw a square identical to the one in square. cpp, but using triangulation. – Use TRIANGLE_STRIP – Use TRIANGLE_FAN • Draw a square and a triangle using triangulation with Steiner vertices. • Draw a circle using triangulation – Without a Steiner vertex – With a Steiner vertex

Why should we care? • If the collection satisfies the properties of a triangulation, then the image is independent of the order in which the triangles are rendered.

Experiment 5. 1 • Run invalid. Triangulation. cpp, press space bar to interchange the order of drawn vertices. • Experiment with glut. Keyboard. Func(key. Input) and key. Input(unsigned char key, int x, int y).

Quality of Triangulation • Good triangulation – Few slivers – Most triangles being of nearly equal size – And each relatively small with respect to the entire object

Quality of Triangulation A C P B D

Triangulation by Open. GL and the Trouble with Non-Convexity • Do the Experiment 4. 16 again. • When Open. GL is asked to draw a filled polygon, it creates a fan around the first vertex. • Make sure to use GL_QUADS, GL_QUAD_STRIP, and GL_POLYGON with convex shape.

Experiment 5. 2 • Replace the polygon declaration part of square. cpp with gl. Begin(GL_POLYGON); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(80. 0, 20. 0, 0. 0); gl. Color 3 f(1. 0, 0. 0); gl. Vertex 3 f(40. 0, 0. 0); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(20. 0, 80. 0, 0. 0); gl. Vertex 3 f(20. 0, 0. 0); gl. End(); • The rendered ‘triangle’ is all white with no sign of red at all. Why?

Experiment 5. 2 • Replace the polygon declaration part of square. cpp with gl. Begin(GL_POLYGON); gl. Vertex 3 f(50. 0, gl. Vertex 3 f(40. 0, gl. Vertex 3 f(10. 0, gl. Vertex 3 f(90. 0, gl. Vertex 3 f(60. 0, gl. End(); 10. 0, 50. 0, 60. 0, 50. 0, 0. 0); • Predict the filled output each time as you rotate the vertices cyclically.

Experiment 5. 2 • Replace the polygon declaration part of square. cpp with gl. Begin(GL_POLYGON); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(20. 0, 0. 0); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(50. 0, 20. 0, 0. 0); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(80. 0, 50. 0, 0. 0); gl. Color 3 f(1. 0, 1. 0); gl. Vertex 3 f(80. 0, 0. 0); gl. Color 3 f(1. 0, 0. 0); gl. Vertex 3 f(20. 0, 80. 0, 0. 0); gl. End(); • Rotate the vertices by putting the first vertex (with its color) to the end of the list. • Explain the difference in the rendering between the two listings?

Recommendation • Avoid using GL_QUADS, GL_QUAD_STRIP, and GL_POLYGON. • Use only the points, lines (including strip or loop) and triangles (including strip and fan) primitives – Convexity of individual piece is guaranteed – You control the quality of triangulation rather than trusting the Open. GL’s fan-maker.

Vertex Array • gl. Vertex 3 fv(*pointer) • gl. Color 3 fv(*pointer) • Separate data and code – Reduce redundancy and errors – Improve memory usage efficiency – Easy to modularize and debug

Experiment 5. 3 • Run square. Annulus 1. cpp. Press the space bar to see the wireframe. • Run square. Annulus 2. cpp. Compare the code with the previous experiment. • Run square. Annulus 3. cpp. Compare the code with the previous experiments.

Initializing Vertex Array • Vertex arrays are enabled with calls to gl. Enable. Client. State(array) • The data for the arrays are specified with calls to gl. Vertex. Pointer(size, type, stride, *pointer) and gl. Color. Pointer(size, type, stride, *pointer)

Experiment 5. 3 • Run square. Annulus 4. cpp. Compare the code with the previous experiments. • gl. Draw. Elements(primitive, count, type, *indices) • gl. Begin(primitive) for (i=0 ; i < count ; i++) gl. Array. Element(indices[i]); gl. End;

Assignment 2 1. Draw a face as in the picture. It need not be an exact replica but should be similar. – – – Head and ears are circular The user should be able to toggle between the filled rendering and a wireframe via keyboard interaction. You can paint your face in any colors. A rainbow, if you like.

Assignment 2 2. Triangulate the figure "8". The "8" is thick. Color the figure as creatively as you like.

Assignment 2 • Note on assignment 2 – Make sure you have your shapes valid triangulation – Allow the user to toggle between the filled rendering and wireframe by pressing the space bar. – You are free to color objects as you like. – Instructions for user interaction should always be output to the main C++ Window and also be written as comments at the top of your program file.