Programming with Web GL Part 6 Three Dimensions

Programming with Web. GL Part 6: Three Dimensions CS 4722 Computer Graphics and Multimedia Spring 2018

Objectives • Develop a more sophisticated three-dimensional example • Sierpinski gasket: a fractal • Introduce hidden-surface removal Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 2

Three-dimensional Applications • In Web. GL, two-dimensional applications are a special case of three -dimensional graphics • Going to 3 D • Not much changes • Use vec 3, gl. uniform 3 f • Have to worry about the order in which primitives are rendered or use hidden-surface removal Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 3

Sierpinski Gasket (2 D) • Start with a triangle • Connect bisectors of sides and remove central triangle • Repeat Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 4

Example • Five subdivisions Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 5

The gasket as a fractal • Consider the filled area (black) and the perimeter (the length of all the lines around the filled triangles) • As we continue subdividing • the area goes to zero • but the perimeter goes to infinity • This is not an ordinary geometric object • It is neither two- nor three-dimensional • It is a fractal (fractional dimension) object Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 6

Gasket Program • HTML file • • Same as in other examples Pass through vertex shader Fragment shader sets color Read in JS file Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 7

Gasket Program var points = []; var Num. Times. To. Subdivide = 5; /* initial triangle */ var vertices = [ vec 2( -1, -1 ), vec 2( 0, 1 ), vec 2( 1, -1 ) ]; divide. Triangle( vertices[0], vertices[1], vertices[2], Num. Times. To. Subdivide); Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 8

Draw one triangle /* display one triangle */ function triangle( a, b, c ){ points. push( a, b, c ); } Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 9

Triangle Subdivision function divide. Triangle( a, b, // check for end of recursion if ( count === 0 ) { triangle( a, b, c ); } else { //bisect the sides var ab = mix( a, b, 0. 5 ); var ac = mix( a, c, 0. 5 ); var bc = mix( b, c, 0. 5 ); --count; // three new triangles divide. Triangle( a, ab, ac, divide. Triangle( c, ac, bc, divide. Triangle( b, bc, ab, } } c, count ){ count-1 ); Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 10

init() var program = init. Shaders( gl, "vertexshader", "fragment-shader" ); gl. use. Program( program ); var buffer. Id = gl. create. Buffer(); gl. bind. Buffer( gl. ARRAY_BUFFER, buffer. Id ) gl. buffer. Data( gl. ARRAY_BUFFER, flatten(points), gl. STATIC_DRAW ); var v. Position = gl. get. Attrib. Location( program, "v. Position" ); gl. vertex. Attrib. Pointer( v. Position, 2, gl. FLOAT, false, 0, 0 ); gl. enable. Vertex. Attrib. Array( v. Position ); 11 render(); Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015

Render Function function render(){ gl. clear( gl. COLOR_BUFFER_BIT ); gl. draw. Arrays( gl. TRIANGLES, 0, points. length ); } Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 12