Building Models. Objectives Introduce simple data structures for building polygonal models. Vertex lists Edge lists

Transcription

1 Building Models Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 1

2 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v v e 4 1 e 11 v e v v e e e 4 v 3 There are 8 nodes and 12 edges 5 interior polygons 6 interior (shared) edges Each vertex has a location v i = (x i y i z i ) e 2 e 5 e 10 2

3 Simple Representation Define each polygon by the geometric locations of its vertices Leads to WebGL code such as vertex.push(vec3(x1, y1, z1)); vertex.push(vec3(x6, y6, z6)); vertex.push(vec3(x7, y7, z7)); Inefficient and unstructured Consider moving a vertex to a new location Must search for all occurrences 3

4 Polygons: Inward and Outward The order {v 1, v 6, v 7 } and {v 6, v 7, v 1 } are equivalent in that the same polygon will be rendered by OpenGL but the order {v 1, v 7, v 6 } is different The first two describe outwardly facing polygons Use the right-hand rule = counter-clockwise encirclement of outward-pointing normal OpenGL can treat inward and outward facing polygons differently 4

5 Geometry vs Topology Generally it is a good idea to look for data structures that separate the geometry from the topology Geometry: locations of the vertices Topology: organization of the vertices and edges Example: a polygon is an ordered list of vertices with an edge connecting successive pairs of vertices and the last to the first Topology holds even if geometry changes 5

6 Vertex Lists Put the geometry in an array Use pointers from the vertices into this array Introduce a polygon list P1 P2 P3 P4 P5 topology v 1 v 7 v 6 v 8 v 5 v 6 geometry x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 6

7 Shared Edges Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice Can store mesh by edge list 7

8 Edge List e1 e2 e3 e4 e5 e6 e7 e8 e9 v1 v6 x 1 y 1 z 1 x 2 y 2 z 2 x 3 y 3 z 3 x 4 y 4 z 4 x 5 y 5 z 5. x 6 y 6 z 6 x 7 y 7 z 7 x 8 y 8 z 8 v 6 v 8 v 5 e 1 e 8 e 3 e 11 e v v e v e e 2 e 9 e 5 e 10 Note polygons are not represented v 3 e 4 8

9 Modeling a Cube Model a color cube for rotating cube program Define global arrays for vertices and colors GLfloat vertices[][3] = {{-1.0,-1.0,-1.0},{1.0,- 1.0,-1.0}, {1.0,1.0,-1.0}, {-1.0,1.0,-1.0}, {-1.0,-1.0,1.0}, {1.0,-1.0,1.0}, {1.0,1.0,1.0}, {-1.0,1.0,1.0}}; GLfloat colors[][3] = {{0.0,0.0,0.0},{1.0,0.0,0.0}, {1.0,1.0,0.0}, {0.0,1.0,0.0}, {0.0,0.0,1.0}, {1.0,0.0,1.0}, {1.0,1.0,1.0}, {0.0,1.0,1.0}}; 9

10 Polygon from a List of Indices Draw a quad polygon from a list of indices into the array vertices and use color corresponding to first index void polygon(int a, int b, int c, int d) { glbegin(gl_polygon); glcolor3fv(colors[a]); glvertex3fv(vertices[a]); glvertex3fv(vertices[b]); glvertex3fv(vertices[c]); glvertex3fv(vertices[d]); glend(); } 10

11 Draw Cube from Faces void colorcube( ) { polygon(0,3,2,1); polygon(2,3,7,6); polygon(0,4,7,3); polygon(1,2,6,5); polygon(4,5,6,7); polygon(0,1,5,4); } Note that vertices are ordered so that we obtain correct outward facing normals

12 Rotating Cube Again Define global array for vertices var vertices = [ vec3( -0.5, -0.5, 0.5 ), vec3( -0.5, 0.5, 0.5 ), vec3( 0.5, 0.5, 0.5 ), vec3( 0.5, -0.5, 0.5 ), vec3( -0.5, -0.5, -0.5 ), vec3( -0.5, 0.5, -0.5 ), vec3( 0.5, 0.5, -0.5 ), vec3( 0.5, -0.5, -0.5 ) ]; 12

13 Colors Define global array for colors var vertexcolors = [ [ 0.0, 0.0, 0.0, 1.0 ], // black [ 1.0, 0.0, 0.0, 1.0 ], // red [ 1.0, 1.0, 0.0, 1.0 ], // yellow [ 0.0, 1.0, 0.0, 1.0 ], // green [ 0.0, 0.0, 1.0, 1.0 ], // blue [ 1.0, 0.0, 1.0, 1.0 ], // magenta [ 0.0, 1.0, 1.0, 1.0 ], // cyan [ 1.0, 1.0, 1.0, 1.0 ] // white ]; 13

14 Draw cube from faces function colorcube( ) { quad(0,3,2,1); quad(2,3,7,6); quad(0,4,7,3); quad(1,2,6,5); quad(4,5,6,7); quad(0,1,5,4); } Note that vertices are ordered so that we obtain correct outward facing normals Each quad generates two triangles 14

15 Render Function function render(){ gl.clear( gl.color_buffer_bit gl.depth_buffer_bit); gl.drawarrays( gl.triangles, 0, numvertices ); requestanimframe( render ); } 15

16 Mapping indices to faces var indices = [ 1,0,3, 3,2,1, 2,3,7, 7,6,2, 3,0,4, 4,7,3, 6,5,1, 1,2,6, 4,5,6, 6,7,4, 5,4,0, 0,1,5 ];

17 Rendering by Elements Send indices to GPU var ibuffer = gl.createbuffer(); gl.bufferdata(gl.array_buffer,flatten(vertices), gl.static_draw); gl.bufferdata(gl.array_buffer,flatten(vertexcolors), gl.static_draw); gl.bindbuffer(gl.element_array_buffer, ibuffer); gl.bufferdata(gl.element_array_buffer, new Uint8Array(indices), gl.static_draw); Render by elements gl.drawelements( gl.triangles, numvertices, gl.unsigned_byte, 0 ); 17

18 Example 7E/04/cubev.js 18