25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces...
Transcript of 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces...
![Page 1: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/1.jpg)
CS452/552; EE465/505
Scientific Visualization
4-21–15
![Page 2: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/2.jpg)
! Rendering the teapot ! Graphics API support for Curves and Surfaces
✦ Tessellation Shading ✦ Geometry Shading
! Scientific Visualization
Read: Angel, ✦Chapter 11.10, The Utah Teapot ✦Chapter 11.14, Tessellation and Geometry Shaders
Final Exam: Monday, April 27th, 3:15 to 6:15, SC162
Outline
![Page 3: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/3.jpg)
! can export to WebGL ✦ https://blog.mozilla.org/blog/2015/03/03/unity-5-ships-and-
brings-one-click-webgl-export-to-legions-of-game-developers/ ✦ http://docs.unity3d.com/Manual/webgl-building.html ✦ http://www.gamasutra.com/view/news/213459/
Indepth_on_Unity_5s_WebGL_publishing_tech.php
Unity 5
![Page 4: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/4.jpg)
How to Draw Spline Curves
![Page 5: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/5.jpg)
Drawing Splines, continued
![Page 6: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/6.jpg)
Summary
![Page 7: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/7.jpg)
! Look at rendering with WebGL ! Use Utah teapot for examples
✦Recursive subdivision ✦Polynomial evaluation ✦Adding lighting
Rendering the Teapot
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 8: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/8.jpg)
Teapots: Angel, Chapter 11teapot1: recursive subdivision of Bezier curves
teapot2: uses polynomial evaluation
teapot3: same as teapot2 with rotation
![Page 9: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/9.jpg)
Teapots: Angel, Chapter 11teapot5: rotating, uses polynomial evaluation and normals computed for each triangle
teapot4: rotating, uses polynomial evaluation and exact normals
![Page 10: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/10.jpg)
! Most famous data set in computer graphics !Widely available as a list of 306 3D vertices and the indices that define 32 Bezier patches
Utah Teapot
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 11: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/11.jpg)
vertices.js
var numTeapotVertices = 306; var vertices = [ vec3(1.4 , 0.0 , 2.4), vec3(1.4 , -0.784 , 2.4), vec3(0.784 , -1.4 , 2.4), vec3(0.0 , -1.4 , 2.4), vec3(1.3375 , 0.0 , 2.53125), . . . ];
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 12: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/12.jpg)
patches.jsvar numTeapotPatches = 32; var indices = new Array(numTeapotPatches); indices[0] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]; indices[1] = [3, 16, 17, 18, . . ];
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 13: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/13.jpg)
Evaluation of Polynomials
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 14: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/14.jpg)
Bezier Functionbezier = function(u) { var b = []; var a = 1-u; b.push(u*u*u); b.push(3*a*u*u); b.push(3*a*a*u); b.push(a*a*a); return b; }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 15: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/15.jpg)
Patch Indices to Data var h = 1.0/numDivisions;
patch = new Array(numTeapotPatches); for(var i=0; i<numTeapotPatches; i++) patch[i] = new Array(16); for(var i=0; i<numTeapotPatches; i++) for(j=0; j<16; j++) { patch[i][j] = vec4([vertices[indices[i][j]][0], vertices[indices[i][j]][2], vertices[indices[i][j]][1], 1.0]); }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 16: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/16.jpg)
Vertex Data for ( var n = 0; n < numTeapotPatches; n++ ) { var data = new Array(numDivisions+1); for(var j = 0; j<= numDivisions; j++) data[j] = new Array(numDivisions+1); for(var i=0; i<=numDivisions; i++) for(var j=0; j<= numDivisions; j++) { data[i][j] = vec4(0,0,0,1); var u = i*h; var v = j*h; var t = new Array(4); for(var ii=0; ii<4; ii++) t[ii]=new Array(4); for(var ii=0; ii<4; ii++) for(var jj=0; jj<4; jj++) t[ii][jj] = bezier(u)[ii]*bezier(v)[jj]; for(var ii=0; ii<4; ii++) for(var jj=0; jj<4; jj++) { temp = vec4(patch[n][4*ii+jj]); temp = scale( t[ii][jj], temp); data[i][j] = add(data[i][j], temp); } } Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 17: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/17.jpg)
Quads for(var i=0; i<numDivisions; i++) for(var j =0; j<numDivisions; j++) { points.push(data[i][j]); points.push(data[i+1][j]); points.push(data[i+1][j+1]); points.push(data[i][j]); points.push(data[i+1][j+1]); points.push(data[i][j+1]); index += 6; } }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 18: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/18.jpg)
Recursive Subdivision
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 19: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/19.jpg)
Divide CurvedivideCurve = function( c, r , l){ // divides c into left (l) and right ( r ) curve data var mid = mix(c[1], c[2], 0.5); l[0] = vec4(c[0]); l[1] = mix(c[0], c[1], 0.5 ); l[2] = mix(l[1], mid, 0.5 ); r[3] = vec4(c[3]); r[2] = mix(c[2], c[3], 0.5 ); r[1] = mix( mid, r[2], 0.5 ); r[0] = mix(l[2], r[1], 0.5 ); l[3] = vec4(r[0]); return; }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 20: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/20.jpg)
Divide PatchdividePatch = function (p, count ) { if ( count > 0 ) { var a = mat4(); var b = mat4(); var t = mat4(); var q = mat4(); var r = mat4(); var s = mat4(); // subdivide curves in u direction, transpose results, divide // in u direction again (equivalent to subdivision in v) for ( var k = 0; k < 4; ++k ) { var pp = p[k]; var aa = vec4(); var bb = vec4();
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 21: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/21.jpg)
Divide Patch divideCurve( pp, aa, bb ); a[k] = vec4(aa); b[k] = vec4(bb); } a = transpose( a ); b = transpose( b ); for ( var k = 0; k < 4; ++k ) { var pp = vec4(a[k]); var aa = vec4(); var bb = vec4(); divideCurve( pp, aa, bb ); q[k] = vec4(aa); r[k] = vec4(bb); } for ( var k = 0; k < 4; ++k ) { var pp = vec4(b[k]); var aa = vec4();
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 22: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/22.jpg)
Divide Patch var bb = vec4(); divideCurve( pp, aa, bb ); t[k] = vec4(bb); } // recursive division of 4 resulting patches dividePatch( q, count - 1 ); dividePatch( r, count - 1 ); dividePatch( s, count - 1 ); dividePatch( t, count - 1 ); } else { drawPatch( p ); } return; }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 23: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/23.jpg)
Draw PatchdrawPatch = function(p) { // Draw the quad (as two triangles) bounded by // corners of the Bezier patch points.push(p[0][0]); points.push(p[0][3]); points.push(p[3][3]); points.push(p[0][0]); points.push(p[3][3]); points.push(p[3][0]); index+=6; return; }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 24: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/24.jpg)
Adding Shading
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 25: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/25.jpg)
Using Face Normals var t1 = subtract(data[i+1][j], data[i][j]); var t2 =subtract(data[i+1][j+1], data[i][j]); var normal = cross(t1, t2); normal = normalize(normal); normal[3] = 0; points.push(data[i][j]); normals.push(normal); points.push(data[i+1][j]); normals.push(normal); points.push(data[i+1][j+1]); normals.push(normal); points.push(data[i][j]); normals.push(normal); points.push(data[i+1][j+1]); normals.push(normal); points.push(data[i][j+1]); normals.push(normal); index+= 6;
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 26: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/26.jpg)
Exact Normalsnbezier = function(u) { var b = []; b.push(3*u*u); b.push(3*u*(2-3*u)); b.push(3*(1-4*u+3*u*u)); b.push(-3*(1-u)*(1-u)); return b; }
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 27: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/27.jpg)
! Basic limitation on rasterization is that each execution of a vertex shader is triggered by one vertex and can output only one vertex
! Geometry shaders allow a single vertex and other data to produce many vertices
! Example: send four control points to a geometry shader and it can produce as many points as needed for Bezier curve
Geometry Shader
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 28: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/28.jpg)
! Can take many data points and produce triangles
! More complex since tessellation has to deal with inside/outside issues and topological issues such as holes
! Neither geometry or tessellation shaders supported by ES
! ES 3.1 (just announced) has compute shaders
Tessellation Shaders
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 29: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/29.jpg)
Scientific Visualization
![Page 30: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/30.jpg)
! Scalar fields (3D volume of scalars) ■ e.g. x-ray densities (MRI, CT scan)
! Vector fields (3D volume of vectors) ■ e.g. velocities in a wind tunnel
! Tensor fields (3D volume of tensors [matrices]) ■ e.g. stresses in a mechanical part
! Static or dynamic over time
Types of Data
![Page 31: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/31.jpg)
Outline! Height Fields and Contours ! Scalar Fields ! Volume Rendering ! Vector Fields
![Page 32: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/32.jpg)
Height Field
See Angel, Color Plate 25 Elevation data for Honolulu, Hawaii
![Page 33: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/33.jpg)
Meshes
![Page 34: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/34.jpg)
Contour Curves
![Page 35: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/35.jpg)
Marching Squares
![Page 36: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/36.jpg)
Interpolating Intersections
![Page 37: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/37.jpg)
Cases for Vertex Labels
![Page 38: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/38.jpg)
Ambiguities of Labelings
![Page 39: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/39.jpg)
Marching Squares Example
![Page 40: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/40.jpg)
Outline! Height Fields and Contours ! Scalar Fields ! Volume Rendering ! Vector Fields
![Page 41: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/41.jpg)
Scalar Fields
![Page 42: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/42.jpg)
Isosurfaces
![Page 43: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/43.jpg)
Marching Cubes
![Page 44: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/44.jpg)
Marching Cube Tessellations
![Page 45: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/45.jpg)
Outline! Height Fields and Contours ! Scalar Fields ! Volume Rendering ! Vector Fields
![Page 46: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/46.jpg)
Volume Rendering
![Page 47: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/47.jpg)
■ 3D models of surfaces ■ Convert to triangles ■ Draw primitives ■ Lose or disguise data ■ Good for opaque objects
Surface vs. Volume Rendering■ Scalar field in 3D ■ Convert it to RGBA values ■ Render volume “directly” ■ See data as given ■ Good for complex objects
![Page 48: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/48.jpg)
! Medical ✦Computed Tomography (CT) ✦Magnetic Resonance Imaging (MRI) ✦Ultrasound
! Engineering and Science ✦Computational Fluid Dynamic (CFD) ✦Aerodynamic simulations ✦Meterorology ✦Astrophysics
Sample ApplicationsSee Angel, Color Plate 20 Volume Rendering of CT data
![Page 49: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/49.jpg)
Volume Rendering Pipeline
![Page 50: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/50.jpg)
Transfer Functions
![Page 51: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/51.jpg)
Transfer Function Example
See Angel, Color Plate 19 Fluid dynamics of the Earth’s mantle
![Page 52: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/52.jpg)
! Three volume rendering techniques ■ Volume ray casting ■ Splatting ■ 3D texture mapping
! Ray Casting ■ Integrate color through volume ■ Consider lighting (surfaces?) ■ Use regular x,y,z data grid when possible ■ Finite elements when necessary (e.g. ultrasound) ■ 3D-rasterize geometrical primitives
Volume Ray Casting
![Page 53: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/53.jpg)
Accumulating Opacity
![Page 54: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/54.jpg)
Trilinear Interpolation
![Page 55: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/55.jpg)
Splatting
![Page 56: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/56.jpg)
3D Textures
![Page 57: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/57.jpg)
Example: 3D Textures
![Page 58: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/58.jpg)
Example: 3D Textures
![Page 59: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/59.jpg)
Other Techniques
![Page 60: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/60.jpg)
! Basic problem: Huge data sets ! Must program for locality (cache) ! Divide into multiple blocks if necessary
■ example: marching cubes ! Use error measures to stop iteration ! Exploit parallelism
Acceleration of Volume Rendering
![Page 61: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/61.jpg)
Outline! Height Fields and Contours ! Scalar Fields ! Volume Rendering ! Vector Fields
![Page 62: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/62.jpg)
Vector Fields
![Page 63: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/63.jpg)
Using Glyphs and Streaklines
![Page 64: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/64.jpg)
More Flow Examples
![Page 65: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/65.jpg)
Example: Jet Shockwave
![Page 66: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/66.jpg)
! Height Fields and Contours ! Scalar Fields
■ Isosurfaces ■ Marching cubes
! Volume Rendering ■ Volume ray tracing ■ Splatting ■ 3D Textures
! Vector Fields ■ Hedgehogs ■ Animated and interactive visualization
Summary
![Page 67: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/67.jpg)
! Finite Element Models ■ general divisions of solid objects into polyhedral chunks ■ good for modeling and simulation applications
! Voxels – cube divisions, e.g. Minecraft ■ models the world with large voxels ■ takes advantage of the efficiency of local graphlike operations on voxels to model all illumination and physical dynamics as cellular finite automata
■ stores type of material in each cell (position is implicit); one byte per cubic meter of storage
! Volumetric Fog ■ constrained to fit within a containing volume
! Particle Systems
Volumetric Models
![Page 68: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/68.jpg)
Particle Systems! What is a Particle System
! How a Particle System works
! Types of Particle Systems
![Page 69: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/69.jpg)
What is a Particle System?! Technique to simulate “fuzzy” phenomena
■ William Reeves, Particle Systems: A Technique for Modeling a Class of Fuzzy Objects, 1983
! Dynamic simulation of a group of objects
![Page 70: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/70.jpg)
How a Particle System Works! Set of Points; each follow a kinematics equation ! Controlled by an Emitter ■ set of behavioral parameters and a 3D position ■ behaviors: spawning rate, initial velocity, particle life, particle
color/image ! Has two stages
1. Simulation stage 2. Rendering stage
● sprite – an image that always faces the viewer
source: Jacob Buck; maya particle system imported from Houdini with a fluidEffects shader applied
![Page 71: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/71.jpg)
! initial position ! initial velocity (both speed and direction) ! initial size ! initial color ! initial transparency ! shape/sprite ! lifetime
Particle Attributes
![Page 72: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/72.jpg)
Types of Particle Systems! Cylinder ! Curve ! Disc ! Sphere ! Point ! Planar ! Line ! Area
![Page 73: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/73.jpg)
Examples! Fire & Explosions ! Clouds & Smoke ! Water ! Falling Leaves ! Cloth ! Hair & Fur ! Galaxy
![Page 74: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/74.jpg)
! Demo: fountain
! References: ■ http://www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/particles-instancing/
■ http://www.antongerdelan.net/opengl/particles.html ■ threejs.org/examples/webgl_particles_random.html
Particle Systems in OpenGL & WebGL
![Page 75: 25.visualization - extra slidesRendering the teapot ! Graphics API support for Curves and Surfaces Tessellation Shading Geometry Shading Scientific Visualization Read: Angel, Chapter](https://reader033.fdocuments.in/reader033/viewer/2022053009/5f0cc62e7e708231d437108c/html5/thumbnails/75.jpg)
Summary! Particle systems are used to create realistic natural phenomena rendering for dynamic groups of objects in real time
! Applications: ■ special effects in Animation, Games, Movies, … ■ computational science for rendering mathematical models
■ visualization