Rendering the Teapot 1 Utah Teapot 2 Angel
![Rendering the Teapot 1 Rendering the Teapot 1](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-1.jpg)
![Utah Teapot 2 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015 Utah Teapot 2 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-2.jpg)
![vertices. js var num. Teapot. Vertices = 306; var vertices = [ vec 3(1. vertices. js var num. Teapot. Vertices = 306; var vertices = [ vec 3(1.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-3.jpg)
![patches. js var num. Teapot. Patches = 32; var indices = new Array(num. Teapot. patches. js var num. Teapot. Patches = 32; var indices = new Array(num. Teapot.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-4.jpg)
![Evaluation of Polynomials 5 Evaluation of Polynomials 5](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-5.jpg)
![Modeling Modeling](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-6.jpg)
![Topics • Introduce types of curves and surfaces – Explicit – Implicit – Parametric Topics • Introduce types of curves and surfaces – Explicit – Implicit – Parametric](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-7.jpg)
![Escaping Flatland • Lines and flat polygons – Fit well with graphics hardware – Escaping Flatland • Lines and flat polygons – Fit well with graphics hardware –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-8.jpg)
![Modeling with Curves interpolating data points approximating curve 9 Modeling with Curves interpolating data points approximating curve 9](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-9.jpg)
![Good Representation? • Properties – Stable – Smooth – Easy to evaluate – Must Good Representation? • Properties – Stable – Smooth – Easy to evaluate – Must](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-10.jpg)
![Explicit Representation • Function y=f(x) • Cannot represent all curves y – Vertical lines Explicit Representation • Function y=f(x) • Cannot represent all curves y – Vertical lines](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-11.jpg)
![Implicit Representation • Two dimensional curve(s) g(x, y)=0 • Much more robust – All Implicit Representation • Two dimensional curve(s) g(x, y)=0 • Much more robust – All](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-12.jpg)
![Algebraic Surface Quadric surface At most 10 terms 13 2 i+j+k Algebraic Surface Quadric surface At most 10 terms 13 2 i+j+k](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-13.jpg)
![Parametric Curves • Separate equation for each spatial variable x=x(u) y=y(u) p(u)=[x(u), y(u), z(u)]T Parametric Curves • Separate equation for each spatial variable x=x(u) y=y(u) p(u)=[x(u), y(u), z(u)]T](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-14.jpg)
![Parametric Lines We can normalize u to be over the interval (0, 1) Line Parametric Lines We can normalize u to be over the interval (0, 1) Line](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-15.jpg)
![Parametric Surfaces • Surfaces require 2 parameters y x=x(u, v) p(u, 1) y=y(u, v) Parametric Surfaces • Surfaces require 2 parameters y x=x(u, v) p(u, 1) y=y(u, v)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-16.jpg)
![Normals We can differentiate with respect to u and v to obtain the normal Normals We can differentiate with respect to u and v to obtain the normal](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-17.jpg)
![Curve Segments p(u) p(0) 18 join point p(1) = q(0) q(u) q(1) Curve Segments p(u) p(0) 18 join point p(1) = q(0) q(u) q(1)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-18.jpg)
![Parametric Polynomial Curves • If N=M=L, we need to determine 3(N+1) coefficients • Curves Parametric Polynomial Curves • If N=M=L, we need to determine 3(N+1) coefficients • Curves](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-19.jpg)
![Why Polynomials • Easy to evaluate • Continuous and differentiable everywhere – Continuity at Why Polynomials • Easy to evaluate • Continuous and differentiable everywhere – Continuity at](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-20.jpg)
![Cubic Polynomials • N=M=L=3, • Four coefficients to determine for each of x, y Cubic Polynomials • N=M=L=3, • Four coefficients to determine for each of x, y](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-21.jpg)
![Matrix-Vector Form define then 22 Matrix-Vector Form define then 22](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-22.jpg)
![Interpolating Curve p 1 p 0 p 3 p 2 Given four data (control) Interpolating Curve p 1 p 0 p 3 p 2 Given four data (control)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-23.jpg)
![Interpolation Equations apply the interpolating conditions at u=0, 1/3, 2/3, 1 p 0=p(0)=c 0 Interpolation Equations apply the interpolating conditions at u=0, 1/3, 2/3, 1 p 0=p(0)=c 0](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-24.jpg)
![Interpolation Matrix Solving for c we find the interpolation matrix c=MIp Note that MI Interpolation Matrix Solving for c we find the interpolation matrix c=MIp Note that MI](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-25.jpg)
![Interpolating Multiple Segments use p = [p 0 p 1 p 2 p 3 Interpolating Multiple Segments use p = [p 0 p 1 p 2 p 3](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-26.jpg)
![Blending Functions Rewriting the equation for p(u)=u. Tc=u. TMIp = b(u)Tp where b(u) = Blending Functions Rewriting the equation for p(u)=u. Tc=u. TMIp = b(u)Tp where b(u) =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-27.jpg)
![Blending Functions – NOT GOOD b 0(u) = -4. 5(u-1/3)(u-2/3)(u-1) b 1(u) = 13. Blending Functions – NOT GOOD b 0(u) = -4. 5(u-1/3)(u-2/3)(u-1) b 1(u) = 13.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-28.jpg)
![As Opposed to … As Opposed to …](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-29.jpg)
![Parametric Surface Parametric Surface](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-30.jpg)
![Cubic Polynomial Surfaces p(u, v)=[x(u, v), y(u, v), z(u, v)]T where p is any Cubic Polynomial Surfaces p(u, v)=[x(u, v), y(u, v), z(u, v)]T where p is any](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-31.jpg)
![Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u, Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u,](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-32.jpg)
![Matrix Form Define v = [1 v v 2 v 3]T C = [cij] Matrix Form Define v = [1 v v 2 v 3]T C = [cij]](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-33.jpg)
![Blending Patches Each bi(u)bj(v) is a blending patch Shows that we can build analyze Blending Patches Each bi(u)bj(v) is a blending patch Shows that we can build analyze](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-34.jpg)
![Bezier and Spline Curves and Surfaces Bezier and Spline Curves and Surfaces](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-35.jpg)
![Bezier Bezier](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-36.jpg)
![Bezier Surface Patches Bezier Surface Patches](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-37.jpg)
![Utah Teapot – Bezier Avatar Available as a list of 306 3 D vertices Utah Teapot – Bezier Avatar Available as a list of 306 3 D vertices](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-38.jpg)
![Bezier • Do not usually have derivative data • Bezier suggested using the same Bezier • Do not usually have derivative data • Bezier suggested using the same](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-39.jpg)
![Approximating Derivatives p 2 p 1 p 2 located at u=2/3 p 1 located Approximating Derivatives p 2 p 1 p 2 located at u=2/3 p 1 located](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-40.jpg)
![Equations Interpolating conditions are the same p(0) = p 0 = c 0 p(1) Equations Interpolating conditions are the same p(0) = p 0 = c 0 p(1)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-41.jpg)
![Bezier Matrix p(u) = u. TMBp = b(u)Tp blending functions 42 Bezier Matrix p(u) = u. TMBp = b(u)Tp blending functions 42](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-42.jpg)
![Blending Functions Note that all zeros are at 0 and 1 which forces the Blending Functions Note that all zeros are at 0 and 1 which forces the](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-43.jpg)
![Bernstein Polynomials Blending polynomials for any degree d – All zeros at 0 and Bernstein Polynomials Blending polynomials for any degree d – All zeros at 0 and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-44.jpg)
![Rendering Curves and Surfaces 45 Rendering Curves and Surfaces 45](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-45.jpg)
![Evaluation of Polynomials 46 Evaluation of Polynomials 46](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-46.jpg)
![Evaluating Polynomials • Polynomial curve – evaluate polynomial at many points and form an Evaluating Polynomials • Polynomial curve – evaluate polynomial at many points and form an](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-47.jpg)
![Evaluate without Computation? Evaluate without Computation?](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-48.jpg)
![Convex Hull Property • Bezier curves lie in the convex hull of their control Convex Hull Property • Bezier curves lie in the convex hull of their control](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-49.jpg)
![de. Casteljau Recursion • Use convex hull property to obtain an efficient recursive method de. Casteljau Recursion • Use convex hull property to obtain an efficient recursive method](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-50.jpg)
![Splitting a Cubic Bezier p 0, p 1 , p 2 , p 3 Splitting a Cubic Bezier p 0, p 1 , p 2 , p 3](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-51.jpg)
![l(u) and r(u) Since l(u) and r(u) are Bezier curves, we should be able l(u) and r(u) Since l(u) and r(u) are Bezier curves, we should be able](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-52.jpg)
![Convex Hulls {l 0, l 1, l 2, l 3} and {r 0, r Convex Hulls {l 0, l 1, l 2, l 3} and {r 0, r](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-53.jpg)
![Efficient Form l 0 = p 0 r 3 = p 3 l 1 Efficient Form l 0 = p 0 r 3 = p 3 l 1](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-54.jpg)
![Bezier in general Bezier 55 Interpolating B Spline Bezier in general Bezier 55 Interpolating B Spline](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-55.jpg)
![Bezier Patches Using same data array P=[pij] as with interpolating form Patch lies in Bezier Patches Using same data array P=[pij] as with interpolating form Patch lies in](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-56.jpg)
![Evaluation of Polynomials 57 Evaluation of Polynomials 57](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-57.jpg)
![de. Casteljau Recursion 58 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley de. Casteljau Recursion 58 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-58.jpg)
![Surfaces • Recall that for a Bezier patch curves of constant u (or v) Surfaces • Recall that for a Bezier patch curves of constant u (or v)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-59.jpg)
![Second Subdivision 16 final points for 1 of 4 patches created 60 Second Subdivision 16 final points for 1 of 4 patches created 60](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-60.jpg)
![Angel’s Gifts – Chapter 11, 7 e http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/ Angel’s Gifts – Chapter 11, 7 e http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-61.jpg)
![vertices. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/vertices. js var num. Teapot. Vertices vertices. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/vertices. js var num. Teapot. Vertices](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-62.jpg)
![patches. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/patches. js var num. Teapot. Patches patches. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/patches. js var num. Teapot. Patches](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-63.jpg)
![Patch Reader http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/pat ch. Reader. js Patch Reader http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/pat ch. Reader. js](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-64.jpg)
![Bezier Function – Teapot 2 bezier = function(u) { var b = []; var Bezier Function – Teapot 2 bezier = function(u) { var b = []; var](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-65.jpg)
![Patch Indices to Data var h = 1. 0/num. Divisions; patch = new Array(num. Patch Indices to Data var h = 1. 0/num. Divisions; patch = new Array(num.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-66.jpg)
![Vertex Data for ( var n = 0; n < num. Teapot. Patches; n++ Vertex Data for ( var n = 0; n < num. Teapot. Patches; n++](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-67.jpg)
![Quads for(var i=0; i<num. Divisions; i++) for(var j =0; j<num. Divisions; j++) { points. Quads for(var i=0; i<num. Divisions; i++) for(var j =0; j<num. Divisions; j++) { points.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-68.jpg)
![Recursive Subdivision http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/teapot 1. html 69 Angel and Recursive Subdivision http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/teapot 1. html 69 Angel and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-69.jpg)
![Divide Curve divide. Curve = function( c, r , l){ // divides c into Divide Curve divide. Curve = function( c, r , l){ // divides c into](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-70.jpg)
![Divide Patch divide. Patch = function (p, count ) { if ( count > Divide Patch divide. Patch = function (p, count ) { if ( count >](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-71.jpg)
![Divide Patch divide. Curve( pp, aa, bb ); a[k] = vec 4(aa); b[k] = Divide Patch divide. Curve( pp, aa, bb ); a[k] = vec 4(aa); b[k] =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-72.jpg)
![Divide Patch var bb = vec 4(); divide. Curve( pp, aa, bb ); t[k] Divide Patch var bb = vec 4(); divide. Curve( pp, aa, bb ); t[k]](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-73.jpg)
![Draw Patch draw. Patch = function(p) { // Draw the quad (as two triangles) Draw Patch draw. Patch = function(p) { // Draw the quad (as two triangles)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-74.jpg)
![Vertex Shader <script id="vertex-shader" type="xshader/x-vertex"> attribute vec 4 v. Position; void main() { mat Vertex Shader <script id="vertex-shader" type="xshader/x-vertex"> attribute vec 4 v. Position; void main() { mat](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-75.jpg)
![Fragment Shader <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { gl_Frag. Color = Fragment Shader <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { gl_Frag. Color =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-76.jpg)
![Adding Shading http: //www. cs. unm. edu/~angel/We. Face Normals b. GL/7 E/11/teapot 4. html Adding Shading http: //www. cs. unm. edu/~angel/We. Face Normals b. GL/7 E/11/teapot 4. html](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-77.jpg)
![Using Face Normals var t 1 = subtract(data[i+1][j], data[i][j]); var t 2 =subtract(data[i+1][j+1], data[i][j]); Using Face Normals var t 1 = subtract(data[i+1][j], data[i][j]); var t 2 =subtract(data[i+1][j+1], data[i][j]);](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-78.jpg)
![Exact Normals nbezier = function(u) { var b = []; b. push(3*u*u); b. push(3*u*(2 Exact Normals nbezier = function(u) { var b = []; b. push(3*u*u); b. push(3*u*(2](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-79.jpg)
![Vertex Shader <script id="vertex-shader" type="x-shader/x-vertex”> attribute vec 4 v. Position; attribute vec 4 v. Vertex Shader <script id="vertex-shader" type="x-shader/x-vertex”> attribute vec 4 v. Position; attribute vec 4 v.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-80.jpg)
![Fragment Shader <script id="fragment-shader" type="x-shader/xfragment"> precision mediump float; varying vec 4 f. Color; void Fragment Shader <script id="fragment-shader" type="x-shader/xfragment"> precision mediump float; varying vec 4 f. Color; void](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-81.jpg)
![Post Geometry Shaders Post Geometry Shaders](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-82.jpg)
![Pipeline Polygon Soup Pipeline Polygon Soup](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-83.jpg)
![Pipeline Pipeline](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-84.jpg)
![Topics • Clipping • Scan conversion Topics • Clipping • Scan conversion](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-85.jpg)
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-86.jpg)
![Clipping • After geometric stage – vertices assembled into primitives • Must clip primitives Clipping • After geometric stage – vertices assembled into primitives • Must clip primitives](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-87.jpg)
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-88.jpg)
![Scan Conversion Which pixels can be affected by each primitive – Fragment generation – Scan Conversion Which pixels can be affected by each primitive – Fragment generation –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-89.jpg)
![Additional Tasks Some tasks deferred until fragment processing – Hidden surface removal – Antialiasing Additional Tasks Some tasks deferred until fragment processing – Hidden surface removal – Antialiasing](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-90.jpg)
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-91.jpg)
![Contexts • 2 D against clipping window • 3 D against clipping volume Contexts • 2 D against clipping window • 3 D against clipping volume](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-92.jpg)
![2 D Line Segments Brute force: – compute intersections with all sides of clipping 2 D Line Segments Brute force: – compute intersections with all sides of clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-93.jpg)
![Cohen-Sutherland Algorithm • Eliminate cases without computing intersections • Start with four lines of Cohen-Sutherland Algorithm • Eliminate cases without computing intersections • Start with four lines of](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-94.jpg)
![The Cases • Case 1: both endpoints of line segment inside all four lines The Cases • Case 1: both endpoints of line segment inside all four lines](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-95.jpg)
![The Cases • Case 3: One endpoint inside, one outside – Must do at The Cases • Case 3: One endpoint inside, one outside – Must do at](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-96.jpg)
![Defining Outcodes • For each endpoint, define an outcode b 0 b 1 b Defining Outcodes • For each endpoint, define an outcode b 0 b 1 b](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-97.jpg)
![Using Outcodes Consider the 5 cases below AB: outcode(A) = outcode(B) = 0 – Using Outcodes Consider the 5 cases below AB: outcode(A) = outcode(B) = 0 –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-98.jpg)
![Using Outcodes CD: outcode (C) = 0, outcode(D) 0 – Compute intersection – Location Using Outcodes CD: outcode (C) = 0, outcode(D) 0 – Compute intersection – Location](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-99.jpg)
![Using Outcodes If there were a segment from A to a point in a Using Outcodes If there were a segment from A to a point in a](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-100.jpg)
![Using Outcodes EF: outcode(E) logically ANDed with outcode(F) (bitwise) 0 – Both outcodes have Using Outcodes EF: outcode(E) logically ANDed with outcode(F) (bitwise) 0 – Both outcodes have](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-101.jpg)
![Using Outcodes • GH and IJ – same outcodes, neither zero but logical AND Using Outcodes • GH and IJ – same outcodes, neither zero but logical AND](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-102.jpg)
![Cohen Sutherland in 3 D • Use 6 -bit outcodes • When needed, clip Cohen Sutherland in 3 D • Use 6 -bit outcodes • When needed, clip](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-103.jpg)
![Liang-Barsky Clipping Consider parametric form of a line segment p(a) = (1 -a)p 1+ Liang-Barsky Clipping Consider parametric form of a line segment p(a) = (1 -a)p 1+](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-104.jpg)
![Liang-Barsky Clipping • In (a): a 4 > a 3 > a 2 > Liang-Barsky Clipping • In (a): a 4 > a 3 > a 2 >](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-105.jpg)
![Advantages • Can accept/reject as easily as with Cohen. Sutherland • Using values of Advantages • Can accept/reject as easily as with Cohen. Sutherland • Using values of](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-106.jpg)
![Polygon Clipping • Not as simple as line segment clipping – Clipping a line Polygon Clipping • Not as simple as line segment clipping – Clipping a line](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-107.jpg)
![Fixes Fixes](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-108.jpg)
![Tessellation and Convexity Replace nonconvex (concave) polygons with triangular polygons (a tessellation) 109 Tessellation and Convexity Replace nonconvex (concave) polygons with triangular polygons (a tessellation) 109](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-109.jpg)
![Clipping as a Black Box Line segment clipping - takes in two vertices and Clipping as a Black Box Line segment clipping - takes in two vertices and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-110.jpg)
![Pipeline Clipping - Line Segments Clipping side of window is independent of other sid Pipeline Clipping - Line Segments Clipping side of window is independent of other sid](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-111.jpg)
![Pipeline Clipping of Polygons • Three dimensions: add front and back clippers • Small Pipeline Clipping of Polygons • Three dimensions: add front and back clippers • Small](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-112.jpg)
![Bounding Boxes Ue an axis-aligned bounding box or extent – Smallest rectangle aligned with Bounding Boxes Ue an axis-aligned bounding box or extent – Smallest rectangle aligned with](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-113.jpg)
![Bounding boxes Can usually determine accept/reject based only on bounding box reject accept requires Bounding boxes Can usually determine accept/reject based only on bounding box reject accept requires](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-114.jpg)
![Clipping vs. Visibility • Clipping similar to hidden-surface removal • Remove objects that are Clipping vs. Visibility • Clipping similar to hidden-surface removal • Remove objects that are](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-115.jpg)
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-116.jpg)
![Hidden Surface Removal Object-space approach: use pairwise testing between polygons (objects) partially obscuring can Hidden Surface Removal Object-space approach: use pairwise testing between polygons (objects) partially obscuring can](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-117.jpg)
![Better Still Better Still](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-118.jpg)
![Better Still Better Still](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-119.jpg)
![Painter’s Algorithm Render polygons a back to front order so that polygons behind others Painter’s Algorithm Render polygons a back to front order so that polygons behind others](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-120.jpg)
![Depth Sort Requires ordering of polygons first – O(n log n) calculation for ordering Depth Sort Requires ordering of polygons first – O(n log n) calculation for ordering](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-121.jpg)
![Easy Cases A lies behind all other polygons – Can render Polygons overlap in Easy Cases A lies behind all other polygons – Can render Polygons overlap in](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-122.jpg)
![Hard Cases Overlap in all directions but can one is fully on one side Hard Cases Overlap in all directions but can one is fully on one side](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-123.jpg)
![Back-Face Removal (Culling) face is visible iff 90 -90 equivalently cos 0 or v Back-Face Removal (Culling) face is visible iff 90 -90 equivalently cos 0 or v](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-124.jpg)
![Image Space Approach • Look at each ray (nm for an n x m Image Space Approach • Look at each ray (nm for an n x m](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-125.jpg)
![z-Buffer Algorithm • Use a buffer called z or depth buffer to store depth z-Buffer Algorithm • Use a buffer called z or depth buffer to store depth](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-126.jpg)
![z-Buffer for(each polygon P in the polygon list) do{ for(each pixel(x, y) that intersects z-Buffer for(each polygon P in the polygon list) do{ for(each pixel(x, y) that intersects](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-127.jpg)
![](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-128.jpg)
![Efficiency - Scanline As we move across a scan line, the depth changes satisfy Efficiency - Scanline As we move across a scan line, the depth changes satisfy](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-129.jpg)
![Scan-Line Algorithm Combine shading and hsr through scan line algorithm scan line i: no Scan-Line Algorithm Combine shading and hsr through scan line algorithm scan line i: no](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-130.jpg)
![Implementation Need a data structure to store – Flag for each polygon (inside/outside) – Implementation Need a data structure to store – Flag for each polygon (inside/outside) –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-131.jpg)
![Rasterization • Rasterization (scan conversion) – Determine which pixels that are inside primitive specified Rasterization • Rasterization (scan conversion) – Determine which pixels that are inside primitive specified](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-132.jpg)
![Scan-Line Rasterization Scan-Line Rasterization](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-133.jpg)
![Scan. Conversion -Line Segments • Start with line segment in window coordinates with integer Scan. Conversion -Line Segments • Start with line segment in window coordinates with integer](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-134.jpg)
![DDA Algorithm • Digital Differential Analyzer – Line y=mx+ h satisfies differential equation dy/dx DDA Algorithm • Digital Differential Analyzer – Line y=mx+ h satisfies differential equation dy/dx](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-135.jpg)
![Problem DDA = for each x plot pixel at closest y – Problems for Problem DDA = for each x plot pixel at closest y – Problems for](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-136.jpg)
![Bresenham’s Algorithm • DDA requires one floating point addition per step • Eliminate computations Bresenham’s Algorithm • DDA requires one floating point addition per step • Eliminate computations](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-137.jpg)
![Main Premise If we start at a pixel that has been written, there are Main Premise If we start at a pixel that has been written, there are](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-138.jpg)
![Candidate Pixels 1 m 0 candidates last pixel Note that line could have passed Candidate Pixels 1 m 0 candidates last pixel Note that line could have passed](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-139.jpg)
![Decision Variable d = x(b-a) d is an integer d > 0 use upper Decision Variable d = x(b-a) d is an integer d > 0 use upper](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-140.jpg)
![Incremental Form Inspect dk at x = k dk+1= dk – 2 Dy, if Incremental Form Inspect dk at x = k dk+1= dk – 2 Dy, if](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-141.jpg)
![Polygon Scan Conversion • Scan Conversion = Fill • How to tell inside from Polygon Scan Conversion • Scan Conversion = Fill • How to tell inside from](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-142.jpg)
![Filling in the Frame Buffer Fill at end of pipeline – Convex Polygons only Filling in the Frame Buffer Fill at end of pipeline – Convex Polygons only](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-143.jpg)
![Using Interpolation C 1 C 2 C 3 specified by vertex shading C 4 Using Interpolation C 1 C 2 C 3 specified by vertex shading C 4](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-144.jpg)
![Scan Line Fill Can also fill by maintaining a data structure of all intersections Scan Line Fill Can also fill by maintaining a data structure of all intersections](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-145.jpg)
![Data Structure Data Structure](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-146.jpg)
![Aliasing • Ideal rasterized line should be 1 pixel wide • Choosing best y Aliasing • Ideal rasterized line should be 1 pixel wide • Choosing best y](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-147.jpg)
![Antialiasing by Area Averaging • Color multiple pixels for each x depending on coverage Antialiasing by Area Averaging • Color multiple pixels for each x depending on coverage](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-148.jpg)
![Polygon Aliasing • Aliasing problems can be serious for polygons – Jaggedness of edges Polygon Aliasing • Aliasing problems can be serious for polygons – Jaggedness of edges](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-149.jpg)
- Slides: 149
![Rendering the Teapot 1 Rendering the Teapot 1](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-1.jpg)
Rendering the Teapot 1
![Utah Teapot 2 Angel and Shreiner Interactive Computer Graphics 7 E AddisonWesley 2015 Utah Teapot 2 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-2.jpg)
Utah Teapot 2 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![vertices js var num Teapot Vertices 306 var vertices vec 31 vertices. js var num. Teapot. Vertices = 306; var vertices = [ vec 3(1.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-3.jpg)
vertices. js var num. Teapot. Vertices = 306; var vertices = [ vec 3(1. 4 , 0. 0 , 2. 4), vec 3(1. 4 , -0. 784 , 2. 4), vec 3(0. 784 , -1. 4 , 2. 4), vec 3(0. 0 , -1. 4 , 2. 4), vec 3(1. 3375 , 0. 0 , 2. 53125), . . . ]; 3
![patches js var num Teapot Patches 32 var indices new Arraynum Teapot patches. js var num. Teapot. Patches = 32; var indices = new Array(num. Teapot.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-4.jpg)
patches. js var num. Teapot. Patches = 32; var indices = new Array(num. Teapot. Patches); indices[0] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]; indices[1] = [3, 16, 17, 18, . . ]; 4
![Evaluation of Polynomials 5 Evaluation of Polynomials 5](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-5.jpg)
Evaluation of Polynomials 5
![Modeling Modeling](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-6.jpg)
Modeling
![Topics Introduce types of curves and surfaces Explicit Implicit Parametric Topics • Introduce types of curves and surfaces – Explicit – Implicit – Parametric](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-7.jpg)
Topics • Introduce types of curves and surfaces – Explicit – Implicit – Parametric • Discuss Modeling and Approximations
![Escaping Flatland Lines and flat polygons Fit well with graphics hardware Escaping Flatland • Lines and flat polygons – Fit well with graphics hardware –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-8.jpg)
Escaping Flatland • Lines and flat polygons – Fit well with graphics hardware – Mathematically simple • But world is not flat – Need curves and curved surfaces – At least at the application level – Render them approximately with flat primitives
![Modeling with Curves interpolating data points approximating curve 9 Modeling with Curves interpolating data points approximating curve 9](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-9.jpg)
Modeling with Curves interpolating data points approximating curve 9
![Good Representation Properties Stable Smooth Easy to evaluate Must Good Representation? • Properties – Stable – Smooth – Easy to evaluate – Must](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-10.jpg)
Good Representation? • Properties – Stable – Smooth – Easy to evaluate – Must we interpolate or can we just come close to data? – Do we need derivatives?
![Explicit Representation Function yfx Cannot represent all curves y Vertical lines Explicit Representation • Function y=f(x) • Cannot represent all curves y – Vertical lines](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-11.jpg)
Explicit Representation • Function y=f(x) • Cannot represent all curves y – Vertical lines – Circles x • Extension to 3 D y – y=f(x), z=g(x) – The form z = f(x, y) defines a surface x z
![Implicit Representation Two dimensional curves gx y0 Much more robust All Implicit Representation • Two dimensional curve(s) g(x, y)=0 • Much more robust – All](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-12.jpg)
Implicit Representation • Two dimensional curve(s) g(x, y)=0 • Much more robust – All lines ax+by+c=0 – Circles x 2+y 2 -r 2=0 • Three dimensions g(x, y, z)=0 defines a surface – Intersect two surface to get a curve
![Algebraic Surface Quadric surface At most 10 terms 13 2 ijk Algebraic Surface Quadric surface At most 10 terms 13 2 i+j+k](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-13.jpg)
Algebraic Surface Quadric surface At most 10 terms 13 2 i+j+k
![Parametric Curves Separate equation for each spatial variable xxu yyu puxu yu zuT Parametric Curves • Separate equation for each spatial variable x=x(u) y=y(u) p(u)=[x(u), y(u), z(u)]T](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-14.jpg)
Parametric Curves • Separate equation for each spatial variable x=x(u) y=y(u) p(u)=[x(u), y(u), z(u)]T z=z(u) • For umax u umin we trace out a curve in two or three dimensions p(u) p(umax) p(umin) 14
![Parametric Lines We can normalize u to be over the interval 0 1 Line Parametric Lines We can normalize u to be over the interval (0, 1) Line](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-15.jpg)
Parametric Lines We can normalize u to be over the interval (0, 1) Line connecting two points p 0 and p 1 p(1)= p 1 p(u)=(1 -u)p 0+up 1 p(0) = p 0 Ray from p 0 in the direction d p(u)=p 0+ud d p(0) = p 0 15 p(1)= p 0 +d
![Parametric Surfaces Surfaces require 2 parameters y xxu v pu 1 yyu v Parametric Surfaces • Surfaces require 2 parameters y x=x(u, v) p(u, 1) y=y(u, v)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-16.jpg)
Parametric Surfaces • Surfaces require 2 parameters y x=x(u, v) p(u, 1) y=y(u, v) p(0, v) p(1, v) z=z(u, v) x p(u, v) = [x(u, v), y(u, v), z(u, v)]T z p(u, 0) • Want same properties as curves: – Smoothness – Differentiability – Ease of evaluation 16
![Normals We can differentiate with respect to u and v to obtain the normal Normals We can differentiate with respect to u and v to obtain the normal](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-17.jpg)
Normals We can differentiate with respect to u and v to obtain the normal at any point p 17
![Curve Segments pu p0 18 join point p1 q0 qu q1 Curve Segments p(u) p(0) 18 join point p(1) = q(0) q(u) q(1)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-18.jpg)
Curve Segments p(u) p(0) 18 join point p(1) = q(0) q(u) q(1)
![Parametric Polynomial Curves If NML we need to determine 3N1 coefficients Curves Parametric Polynomial Curves • If N=M=L, we need to determine 3(N+1) coefficients • Curves](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-19.jpg)
Parametric Polynomial Curves • If N=M=L, we need to determine 3(N+1) coefficients • Curves for x, y and z are independent, we can define each independently in an identical manner • We will use the form where p can be any of x, y, z 19
![Why Polynomials Easy to evaluate Continuous and differentiable everywhere Continuity at Why Polynomials • Easy to evaluate • Continuous and differentiable everywhere – Continuity at](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-20.jpg)
Why Polynomials • Easy to evaluate • Continuous and differentiable everywhere – Continuity at join points including continuity of derivatives p(u) q(u) join point p(1) = q(0) but p’(1) q’(0)
![Cubic Polynomials NML3 Four coefficients to determine for each of x y Cubic Polynomials • N=M=L=3, • Four coefficients to determine for each of x, y](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-21.jpg)
Cubic Polynomials • N=M=L=3, • Four coefficients to determine for each of x, y and z • Seek four independent conditions for various values of u resulting in 4 equations in 4 unknowns for each of x, y and z – Conditions are a mixture of continuity requirements at the join points and conditions for fitting the data
![MatrixVector Form define then 22 Matrix-Vector Form define then 22](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-22.jpg)
Matrix-Vector Form define then 22
![Interpolating Curve p 1 p 0 p 3 p 2 Given four data control Interpolating Curve p 1 p 0 p 3 p 2 Given four data (control)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-23.jpg)
Interpolating Curve p 1 p 0 p 3 p 2 Given four data (control) points p 0 , p 1 , p 2 , p 3 determine cubic p(u) which passes through them Must find c 0 , c 1 , c 2 , c 3 23
![Interpolation Equations apply the interpolating conditions at u0 13 23 1 p 0p0c 0 Interpolation Equations apply the interpolating conditions at u=0, 1/3, 2/3, 1 p 0=p(0)=c 0](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-24.jpg)
Interpolation Equations apply the interpolating conditions at u=0, 1/3, 2/3, 1 p 0=p(0)=c 0 p 1=p(1/3)=c 0+(1/3)c 1+(1/3)2 c 2+(1/3)3 c 2 p 2=p(2/3)=c 0+(2/3)c 1+(2/3)2 c 2+(2/3)3 c 2 p 3=p(1)=c 0+c 1+c 2 or in matrix form with p = [p 0 p 1 p 2 p 3]T p=Ac 24
![Interpolation Matrix Solving for c we find the interpolation matrix cMIp Note that MI Interpolation Matrix Solving for c we find the interpolation matrix c=MIp Note that MI](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-25.jpg)
Interpolation Matrix Solving for c we find the interpolation matrix c=MIp Note that MI does not depend on input data and can be used for each segment in x, y, and z 25
![Interpolating Multiple Segments use p p 0 p 1 p 2 p 3 Interpolating Multiple Segments use p = [p 0 p 1 p 2 p 3](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-26.jpg)
Interpolating Multiple Segments use p = [p 0 p 1 p 2 p 3 ]T use p = [p 3 p 4 p 5 p 6]T Get continuity at join points but not continuity of derivatives 26
![Blending Functions Rewriting the equation for puu Tcu TMIp buTp where bu Blending Functions Rewriting the equation for p(u)=u. Tc=u. TMIp = b(u)Tp where b(u) =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-27.jpg)
Blending Functions Rewriting the equation for p(u)=u. Tc=u. TMIp = b(u)Tp where b(u) = [b 0(u) b 1(u) b 2(u) b 3(u)]T is an array of blending polynomials such that p(u) = b 0(u)p 0+ b 1(u)p 1+ b 2(u)p 2+ b 3(u)p 3 b 0(u) = -4. 5(u-1/3)(u-2/3)(u-1) b 1(u) = 13. 5 u (u-2/3)(u-1) b 2(u) = -13. 5 u (u-1/3)(u-1) b 3(u) = 4. 5 u (u-1/3)(u-2/3) 27
![Blending Functions NOT GOOD b 0u 4 5u13u23u1 b 1u 13 Blending Functions – NOT GOOD b 0(u) = -4. 5(u-1/3)(u-2/3)(u-1) b 1(u) = 13.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-28.jpg)
Blending Functions – NOT GOOD b 0(u) = -4. 5(u-1/3)(u-2/3)(u-1) b 1(u) = 13. 5 u (u-2/3)(u-1) b 2(u) = -13. 5 u (u-1/3)(u-1) b 3(u) = 4. 5 u (u-1/3)(u-2/3) 28
![As Opposed to As Opposed to …](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-29.jpg)
As Opposed to …
![Parametric Surface Parametric Surface](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-30.jpg)
Parametric Surface
![Cubic Polynomial Surfaces pu vxu v yu v zu vT where p is any Cubic Polynomial Surfaces p(u, v)=[x(u, v), y(u, v), z(u, v)]T where p is any](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-31.jpg)
Cubic Polynomial Surfaces p(u, v)=[x(u, v), y(u, v), z(u, v)]T where p is any of x, y or z Need 48 coefficients ( 3 independent sets of 16) to determine a surface patch 31
![Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u,](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-32.jpg)
Interpolating Patch Need 16 conditions to determine the 16 coefficients cij Choose at u, v = 0, 1/3, 2/3, 1 32
![Matrix Form Define v 1 v v 2 v 3T C cij Matrix Form Define v = [1 v v 2 v 3]T C = [cij]](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-33.jpg)
Matrix Form Define v = [1 v v 2 v 3]T C = [cij] P = [pij] p(u, v) = u. TCv If we observe that for constant u (v), we obtain interpolating curve in v (u), we can show C=MIPMI p(u, v) = u. TMIPMITv 33
![Blending Patches Each biubjv is a blending patch Shows that we can build analyze Blending Patches Each bi(u)bj(v) is a blending patch Shows that we can build analyze](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-34.jpg)
Blending Patches Each bi(u)bj(v) is a blending patch Shows that we can build analyze surfaces from our knowledge of curves 34
![Bezier and Spline Curves and Surfaces Bezier and Spline Curves and Surfaces](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-35.jpg)
Bezier and Spline Curves and Surfaces
![Bezier Bezier](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-36.jpg)
Bezier
![Bezier Surface Patches Bezier Surface Patches](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-37.jpg)
Bezier Surface Patches
![Utah Teapot Bezier Avatar Available as a list of 306 3 D vertices Utah Teapot – Bezier Avatar Available as a list of 306 3 D vertices](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-38.jpg)
Utah Teapot – Bezier Avatar Available as a list of 306 3 D vertices and the indices that define 32 Bezier patches 38
![Bezier Do not usually have derivative data Bezier suggested using the same Bezier • Do not usually have derivative data • Bezier suggested using the same](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-39.jpg)
Bezier • Do not usually have derivative data • Bezier suggested using the same 4 data points as with the cubic interpolating curve to approximate the derivatives 39
![Approximating Derivatives p 2 p 1 p 2 located at u23 p 1 located Approximating Derivatives p 2 p 1 p 2 located at u=2/3 p 1 located](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-40.jpg)
Approximating Derivatives p 2 p 1 p 2 located at u=2/3 p 1 located at u=1/3 slope p’(1) slope p’(0) p 0 u p 3 40 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Equations Interpolating conditions are the same p0 p 0 c 0 p1 Equations Interpolating conditions are the same p(0) = p 0 = c 0 p(1)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-41.jpg)
Equations Interpolating conditions are the same p(0) = p 0 = c 0 p(1) = p 3 = c 0+c 1+c 2+c 3 Approximating derivative conditions p’(0) = 3(p 1 - p 0) = c 0 p’(1) = 3(p 3 - p 2) = c 1+2 c 2+3 c 3 Solve four linear equations for c=MBp 41 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Bezier Matrix pu u TMBp buTp blending functions 42 Bezier Matrix p(u) = u. TMBp = b(u)Tp blending functions 42](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-42.jpg)
Bezier Matrix p(u) = u. TMBp = b(u)Tp blending functions 42
![Blending Functions Note that all zeros are at 0 and 1 which forces the Blending Functions Note that all zeros are at 0 and 1 which forces the](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-43.jpg)
Blending Functions Note that all zeros are at 0 and 1 which forces the functions to be smooth over (0, 1) 43
![Bernstein Polynomials Blending polynomials for any degree d All zeros at 0 and Bernstein Polynomials Blending polynomials for any degree d – All zeros at 0 and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-44.jpg)
Bernstein Polynomials Blending polynomials for any degree d – All zeros at 0 and 1 – For any degree they all sum to 1 – They are all between 0 and 1 inside (0, 1) 44
![Rendering Curves and Surfaces 45 Rendering Curves and Surfaces 45](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-45.jpg)
Rendering Curves and Surfaces 45
![Evaluation of Polynomials 46 Evaluation of Polynomials 46](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-46.jpg)
Evaluation of Polynomials 46
![Evaluating Polynomials Polynomial curve evaluate polynomial at many points and form an Evaluating Polynomials • Polynomial curve – evaluate polynomial at many points and form an](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-47.jpg)
Evaluating Polynomials • Polynomial curve – evaluate polynomial at many points and form an approximating polyline • Surfaces – approximating mesh of triangles or quadrilaterals 47
![Evaluate without Computation Evaluate without Computation?](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-48.jpg)
Evaluate without Computation?
![Convex Hull Property Bezier curves lie in the convex hull of their control Convex Hull Property • Bezier curves lie in the convex hull of their control](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-49.jpg)
Convex Hull Property • Bezier curves lie in the convex hull of their control points • Do not interpolate all the data; cannot be too far away p 1 p 2 convex hull Bezier curve p 0 49 p 3
![de Casteljau Recursion Use convex hull property to obtain an efficient recursive method de. Casteljau Recursion • Use convex hull property to obtain an efficient recursive method](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-50.jpg)
de. Casteljau Recursion • Use convex hull property to obtain an efficient recursive method that does not require any function evaluations – Uses only the values at the control points • Based on the idea that “any polynomial and any part of a polynomial is a Bezier polynomial for properly chosen control data” 50
![Splitting a Cubic Bezier p 0 p 1 p 2 p 3 Splitting a Cubic Bezier p 0, p 1 , p 2 , p 3](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-51.jpg)
Splitting a Cubic Bezier p 0, p 1 , p 2 , p 3 determine a cubic Bezier polynomial and its convex hull Consider left half l(u) and right half r(u)
![lu and ru Since lu and ru are Bezier curves we should be able l(u) and r(u) Since l(u) and r(u) are Bezier curves, we should be able](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-52.jpg)
l(u) and r(u) Since l(u) and r(u) are Bezier curves, we should be able to find two sets of control points {l 0, l 1, l 2, l 3} and {r 0, r 1, r 2, r 3} that determine them
![Convex Hulls l 0 l 1 l 2 l 3 and r 0 r Convex Hulls {l 0, l 1, l 2, l 3} and {r 0, r](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-53.jpg)
Convex Hulls {l 0, l 1, l 2, l 3} and {r 0, r 1, r 2, r 3}each have a convex hull that is closer to p(u) than the convex hull of {p 0, p 1, p 2, p 3} This is known as the variation diminishing property. The polyline from l 0 to l 3 (= r 0) to r 3 is an approximation to p(u). Repeating recursively we get better approximations.
![Efficient Form l 0 p 0 r 3 p 3 l 1 Efficient Form l 0 = p 0 r 3 = p 3 l 1](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-54.jpg)
Efficient Form l 0 = p 0 r 3 = p 3 l 1 = ½(p 0 + p 1) r 1 = ½(p 2 + p 3) l 2 = ½(l 1 + ½( p 1 + p 2)) r 1 = ½(r 2 + ½( p 1 + p 2)) l 3 = r 0 = ½(l 2 + r 1) Requires only shifts and adds! 54
![Bezier in general Bezier 55 Interpolating B Spline Bezier in general Bezier 55 Interpolating B Spline](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-55.jpg)
Bezier in general Bezier 55 Interpolating B Spline
![Bezier Patches Using same data array Ppij as with interpolating form Patch lies in Bezier Patches Using same data array P=[pij] as with interpolating form Patch lies in](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-56.jpg)
Bezier Patches Using same data array P=[pij] as with interpolating form Patch lies in convex hull
![Evaluation of Polynomials 57 Evaluation of Polynomials 57](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-57.jpg)
Evaluation of Polynomials 57
![de Casteljau Recursion 58 Angel and Shreiner Interactive Computer Graphics 7 E AddisonWesley de. Casteljau Recursion 58 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-58.jpg)
de. Casteljau Recursion 58 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Surfaces Recall that for a Bezier patch curves of constant u or v Surfaces • Recall that for a Bezier patch curves of constant u (or v)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-59.jpg)
Surfaces • Recall that for a Bezier patch curves of constant u (or v) are Bezier curves in u (or v) • First subdivide in u – Process creates new points – Some of the original points are discarded original and kept new
![Second Subdivision 16 final points for 1 of 4 patches created 60 Second Subdivision 16 final points for 1 of 4 patches created 60](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-60.jpg)
Second Subdivision 16 final points for 1 of 4 patches created 60
![Angels Gifts Chapter 11 7 e http www cs unm eduangelWeb GL7 E11 Angel’s Gifts – Chapter 11, 7 e http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-61.jpg)
Angel’s Gifts – Chapter 11, 7 e http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/ vertices. js: three versions of the data vertex data patches. js: teapot patch data teapot 1: wire frame teapot by recursive subdivision of Bezier curves teapot 2: wire frame teapot using polynomial evaluation teapot 3: same as teapot 2 with rotation teapot 4: shaded teapot using polynomial evaluation and exact normals teapot 5: shaded teapot using polynomial evaluation and normals computed for each triangle
![vertices js http www cs unm eduangelWeb GL7 E11vertices js var num Teapot Vertices vertices. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/vertices. js var num. Teapot. Vertices](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-62.jpg)
vertices. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/vertices. js var num. Teapot. Vertices = 306; var vertices = [ vec 3(1. 4 , 0. 0 , 2. 4), vec 3(1. 4 , -0. 784 , 2. 4), vec 3(0. 784 , -1. 4 , 2. 4), vec 3(0. 0 , -1. 4 , 2. 4), vec 3(1. 3375 , 0. 0 , 2. 53125), . . . ]; 62
![patches js http www cs unm eduangelWeb GL7 E11patches js var num Teapot Patches patches. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/patches. js var num. Teapot. Patches](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-63.jpg)
patches. js http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/patches. js var num. Teapot. Patches = 32; var indices = new Array(num. Teapot. Patches); indices[0] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ]; indices[1] = [3, 16, 17, 18, . . ];
![Patch Reader http www cs unm eduangelWeb GL7 E11pat ch Reader js Patch Reader http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/pat ch. Reader. js](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-64.jpg)
Patch Reader http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/pat ch. Reader. js
![Bezier Function Teapot 2 bezier functionu var b var Bezier Function – Teapot 2 bezier = function(u) { var b = []; var](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-65.jpg)
Bezier Function – Teapot 2 bezier = function(u) { var b = []; var a = 1 -u; b. push(u*u*u); b. push(3*a*a*u); b. push(a*a*a); return b; } 65
![Patch Indices to Data var h 1 0num Divisions patch new Arraynum Patch Indices to Data var h = 1. 0/num. Divisions; patch = new Array(num.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-66.jpg)
Patch Indices to Data var h = 1. 0/num. Divisions; patch = new Array(num. Teapot. Patches); for(var i=0; i<num. Teapot. Patches; i++) patch[i] = new Array(16); for(var i=0; i<num. Teapot. Patches; i++) for(j=0; j<16; j++) { patch[i][j] = vec 4([vertices[indices[i][j]][0], vertices[indices[i][j]][2], vertices[indices[i][j]][1], 1. 0]); } 66
![Vertex Data for var n 0 n num Teapot Patches n Vertex Data for ( var n = 0; n < num. Teapot. Patches; n++](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-67.jpg)
Vertex Data for ( var n = 0; n < num. Teapot. Patches; n++ ) { var data = new Array(num. Divisions+1); for(var j = 0; j<= num. Divisions; j++) data[j] = new Array(num. Divisions+1); for(var i=0; i<=num. Divisions; i++) for(var j=0; j<= num. Divisions; j++) { data[i][j] = vec 4(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 = vec 4(patch[n][4*ii+jj]); temp = scale( t[ii][jj], temp); data[i][j] = add(data[i][j], temp); } }
![Quads forvar i0 inum Divisions i forvar j 0 jnum Divisions j points Quads for(var i=0; i<num. Divisions; i++) for(var j =0; j<num. Divisions; j++) { points.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-68.jpg)
Quads for(var i=0; i<num. Divisions; i++) for(var j =0; j<num. Divisions; j++) { points. push(data[i][j]); points. push(data[i+1][j+1]); points. push(data[i][j+1]); index += 6; } }
![Recursive Subdivision http www cs unm eduangelWeb GL7 E11teapot 1 html 69 Angel and Recursive Subdivision http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/teapot 1. html 69 Angel and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-69.jpg)
Recursive Subdivision http: //www. cs. unm. edu/~angel/Web. GL/7 E/11/teapot 1. html 69 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Divide Curve divide Curve function c r l divides c into Divide Curve divide. Curve = function( c, r , l){ // divides c into](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-70.jpg)
Divide Curve divide. Curve = 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] = vec 4(c[0]); l[1] = mix(c[0], c[1], 0. 5 ); l[2] = mix(l[1], mid, 0. 5 ); r[3] = vec 4(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] = vec 4(r[0]); return; }
![Divide Patch divide Patch function p count if count Divide Patch divide. Patch = function (p, count ) { if ( count >](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-71.jpg)
Divide Patch divide. Patch = function (p, count ) { if ( count > 0 ) { var a = mat 4(); var b = mat 4(); var t = mat 4(); var q = mat 4(); var r = mat 4(); var s = mat 4(); // 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 = vec 4(); var bb = vec 4(); 71
![Divide Patch divide Curve pp aa bb ak vec 4aa bk Divide Patch divide. Curve( pp, aa, bb ); a[k] = vec 4(aa); b[k] =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-72.jpg)
Divide Patch divide. Curve( pp, aa, bb ); a[k] = vec 4(aa); b[k] = vec 4(bb); } a = transpose( a ); b = transpose( b ); for ( var k = 0; k < 4; ++k ) { var pp = vec 4(a[k]); var aa = vec 4(); var bb = vec 4(); divide. Curve( pp, aa, bb ); q[k] = vec 4(aa); r[k] = vec 4(bb); } for ( var k = 0; k < 4; ++k ) { var pp = vec 4(b[k]); var aa = vec 4(); 72
![Divide Patch var bb vec 4 divide Curve pp aa bb tk Divide Patch var bb = vec 4(); divide. Curve( pp, aa, bb ); t[k]](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-73.jpg)
Divide Patch var bb = vec 4(); divide. Curve( pp, aa, bb ); t[k] = vec 4(bb); } // recursive division of 4 resulting patches divide. Patch( q, count - 1 ); divide. Patch( r, count - 1 ); divide. Patch( s, count - 1 ); divide. Patch( t, count - 1 ); } else { draw. Patch( p ); } return; } 73
![Draw Patch draw Patch functionp Draw the quad as two triangles Draw Patch draw. Patch = function(p) { // Draw the quad (as two triangles)](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-74.jpg)
Draw Patch draw. Patch = 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; } 74 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Vertex Shader script idvertexshader typexshaderxvertex attribute vec 4 v Position void main mat Vertex Shader <script id="vertex-shader" type="xshader/x-vertex"> attribute vec 4 v. Position; void main() { mat](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-75.jpg)
Vertex Shader <script id="vertex-shader" type="xshader/x-vertex"> attribute vec 4 v. Position; void main() { mat 4 scale = mat 4( 0. 3, 0. 0, 0. 0, 1. 0 ); gl_Position = scale*v. Position; } </script>
![Fragment Shader script idfragmentshader typexshaderxfragment precision mediump float void main glFrag Color Fragment Shader <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { gl_Frag. Color =](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-76.jpg)
Fragment Shader <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main() { gl_Frag. Color = vec 4(1. 0, 0. 0, 1. 0); ; } </script>
![Adding Shading http www cs unm eduangelWe Face Normals b GL7 E11teapot 4 html Adding Shading http: //www. cs. unm. edu/~angel/We. Face Normals b. GL/7 E/11/teapot 4. html](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-77.jpg)
Adding Shading http: //www. cs. unm. edu/~angel/We. Face Normals b. GL/7 E/11/teapot 4. html http: //www. cs. unm. edu/~angel/We b. GL/7 E/11/teapot 5. html 77 Angel and Shreiner: Interactive Computer Graphics 7 E © Addison-Wesley 2015
![Using Face Normals var t 1 subtractdatai1j dataij var t 2 subtractdatai1j1 dataij Using Face Normals var t 1 = subtract(data[i+1][j], data[i][j]); var t 2 =subtract(data[i+1][j+1], data[i][j]);](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-78.jpg)
Using Face Normals var t 1 = subtract(data[i+1][j], data[i][j]); var t 2 =subtract(data[i+1][j+1], data[i][j]); var normal = cross(t 1, t 2); normal = normalize(normal); normal[3] = 0; 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; 78
![Exact Normals nbezier functionu var b b push3uu b push3u2 Exact Normals nbezier = function(u) { var b = []; b. push(3*u*u); b. push(3*u*(2](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-79.jpg)
Exact Normals nbezier = 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)); return b; }
![Vertex Shader script idvertexshader typexshaderxvertex attribute vec 4 v Position attribute vec 4 v Vertex Shader <script id="vertex-shader" type="x-shader/x-vertex”> attribute vec 4 v. Position; attribute vec 4 v.](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-80.jpg)
Vertex Shader <script id="vertex-shader" type="x-shader/x-vertex”> attribute vec 4 v. Position; attribute vec 4 v. Normal; varying vec 4 f. Color; uniform vec 4 ambient. Product, diffuse. Product, specular. Product; uniform mat 4 model. View. Matrix; uniform mat 4 projection. Matrix; uniform vec 4 light. Position; uniform float shininess; uniform mat 3 normal. Matrix; void main() { vec 3 pos = (model. View. Matrix * v. Position). xyz; vec 3 light = light. Position. xyz; vec 3 L = normalize( light - pos ); vec 3 E = normalize( -pos ); vec 3 H = normalize( L + E ); // Transform vertex normal into eye coordinates vec 3 N = normalize( normal. Matrix*v. Normal. xyz); // Compute terms in the illumination equation vec 4 ambient = ambient. Product; float Kd = max( dot(L, N), 0. 0 ); vec 4 diffuse = Kd*diffuse. Product; float Ks = pow( max(dot(N, H), 0. 0), shininess ); vec 4 specular = Ks * specular. Product; if( dot(L, N) < 0. 0 ) { specular = vec 4(0. 0, 1. 0); } gl_Position = projection. Matrix * model. View. Matrix * v. Position; f. Color = ambient + diffuse +specular; f. Color. a = 1. 0; } </script>
![Fragment Shader script idfragmentshader typexshaderxfragment precision mediump float varying vec 4 f Color void Fragment Shader <script id="fragment-shader" type="x-shader/xfragment"> precision mediump float; varying vec 4 f. Color; void](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-81.jpg)
Fragment Shader <script id="fragment-shader" type="x-shader/xfragment"> precision mediump float; varying vec 4 f. Color; void main() { gl_Frag. Color = f. Color; } </script>
![Post Geometry Shaders Post Geometry Shaders](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-82.jpg)
Post Geometry Shaders
![Pipeline Polygon Soup Pipeline Polygon Soup](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-83.jpg)
Pipeline Polygon Soup
![Pipeline Pipeline](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-84.jpg)
Pipeline
![Topics Clipping Scan conversion Topics • Clipping • Scan conversion](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-85.jpg)
Topics • Clipping • Scan conversion
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-86.jpg)
Clipping
![Clipping After geometric stage vertices assembled into primitives Must clip primitives Clipping • After geometric stage – vertices assembled into primitives • Must clip primitives](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-87.jpg)
Clipping • After geometric stage – vertices assembled into primitives • Must clip primitives that are outside view frustum
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-88.jpg)
Clipping
![Scan Conversion Which pixels can be affected by each primitive Fragment generation Scan Conversion Which pixels can be affected by each primitive – Fragment generation –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-89.jpg)
Scan Conversion Which pixels can be affected by each primitive – Fragment generation – Rasterization or scan conversion
![Additional Tasks Some tasks deferred until fragment processing Hidden surface removal Antialiasing Additional Tasks Some tasks deferred until fragment processing – Hidden surface removal – Antialiasing](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-90.jpg)
Additional Tasks Some tasks deferred until fragment processing – Hidden surface removal – Antialiasing
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-91.jpg)
Clipping
![Contexts 2 D against clipping window 3 D against clipping volume Contexts • 2 D against clipping window • 3 D against clipping volume](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-92.jpg)
Contexts • 2 D against clipping window • 3 D against clipping volume
![2 D Line Segments Brute force compute intersections with all sides of clipping 2 D Line Segments Brute force: – compute intersections with all sides of clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-93.jpg)
2 D Line Segments Brute force: – compute intersections with all sides of clipping window – Inefficient
![CohenSutherland Algorithm Eliminate cases without computing intersections Start with four lines of Cohen-Sutherland Algorithm • Eliminate cases without computing intersections • Start with four lines of](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-94.jpg)
Cohen-Sutherland Algorithm • Eliminate cases without computing intersections • Start with four lines of clipping window y = ymax x = xmin x = xmax y = ymin
![The Cases Case 1 both endpoints of line segment inside all four lines The Cases • Case 1: both endpoints of line segment inside all four lines](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-95.jpg)
The Cases • Case 1: both endpoints of line segment inside all four lines – Draw (accept) line segment as is y = ymax x = xmin x = xmax y = ymin • Case 2: both endpoints outside all lines and on same side of a line – Discard (reject) the line segment
![The Cases Case 3 One endpoint inside one outside Must do at The Cases • Case 3: One endpoint inside, one outside – Must do at](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-96.jpg)
The Cases • Case 3: One endpoint inside, one outside – Must do at least one intersection • Case 4: Both outside – May have part inside – Must do at least one intersection y = ymax x = xmin x = xmax
![Defining Outcodes For each endpoint define an outcode b 0 b 1 b Defining Outcodes • For each endpoint, define an outcode b 0 b 1 b](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-97.jpg)
Defining Outcodes • For each endpoint, define an outcode b 0 b 1 b 2 b 3 b 0 = 1 if y > ymax, 0 otherwise b 1 = 1 if y < ymin, 0 otherwise b 2 = 1 if x > xmax, 0 otherwise b 3 = 1 if x < xmin, 0 otherwise • Outcodes divide space into 9 regions • Computation of outcode requires at most 4 comparisons
![Using Outcodes Consider the 5 cases below AB outcodeA outcodeB 0 Using Outcodes Consider the 5 cases below AB: outcode(A) = outcode(B) = 0 –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-98.jpg)
Using Outcodes Consider the 5 cases below AB: outcode(A) = outcode(B) = 0 – Accept line segment
![Using Outcodes CD outcode C 0 outcodeD 0 Compute intersection Location Using Outcodes CD: outcode (C) = 0, outcode(D) 0 – Compute intersection – Location](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-99.jpg)
Using Outcodes CD: outcode (C) = 0, outcode(D) 0 – Compute intersection – Location of 1 in outcode(D) marks edge to intersect with
![Using Outcodes If there were a segment from A to a point in a Using Outcodes If there were a segment from A to a point in a](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-100.jpg)
Using Outcodes If there were a segment from A to a point in a region with 2 ones in outcode, we might have to do two intersections
![Using Outcodes EF outcodeE logically ANDed with outcodeF bitwise 0 Both outcodes have Using Outcodes EF: outcode(E) logically ANDed with outcode(F) (bitwise) 0 – Both outcodes have](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-101.jpg)
Using Outcodes EF: outcode(E) logically ANDed with outcode(F) (bitwise) 0 – Both outcodes have a 1 bit in the same place – Line segment is outside clipping window – reject
![Using Outcodes GH and IJ same outcodes neither zero but logical AND Using Outcodes • GH and IJ – same outcodes, neither zero but logical AND](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-102.jpg)
Using Outcodes • GH and IJ – same outcodes, neither zero but logical AND yields zero • Shorten line by intersecting with sides of window • Compute outcode of intersection – new endpoint of shortened line segment • Recurse algorithm
![Cohen Sutherland in 3 D Use 6 bit outcodes When needed clip Cohen Sutherland in 3 D • Use 6 -bit outcodes • When needed, clip](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-103.jpg)
Cohen Sutherland in 3 D • Use 6 -bit outcodes • When needed, clip line segment against planes
![LiangBarsky Clipping Consider parametric form of a line segment pa 1 ap 1 Liang-Barsky Clipping Consider parametric form of a line segment p(a) = (1 -a)p 1+](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-104.jpg)
Liang-Barsky Clipping Consider parametric form of a line segment p(a) = (1 -a)p 1+ ap 2 1 a 0 p 2 p 1 Intersect with parallel slabs – Pair for Y Pair for X Pair for Z
![LiangBarsky Clipping In a a 4 a 3 a 2 Liang-Barsky Clipping • In (a): a 4 > a 3 > a 2 >](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-105.jpg)
Liang-Barsky Clipping • In (a): a 4 > a 3 > a 2 > a 1 – Intersect right, top, left, bottom: shorten • In (b): a 4 > a 2 > a 3 > a 1 – Intersect right, left, top, bottom: reject
![Advantages Can acceptreject as easily as with Cohen Sutherland Using values of Advantages • Can accept/reject as easily as with Cohen. Sutherland • Using values of](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-106.jpg)
Advantages • Can accept/reject as easily as with Cohen. Sutherland • Using values of a, we do not have to use algorithm recursively as with C-S • Extends to 3 D
![Polygon Clipping Not as simple as line segment clipping Clipping a line Polygon Clipping • Not as simple as line segment clipping – Clipping a line](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-107.jpg)
Polygon Clipping • Not as simple as line segment clipping – Clipping a line segment yields at most one line segment – Clipping a polygon can yield multiple polygons • Convex polygon is cool 107
![Fixes Fixes](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-108.jpg)
Fixes
![Tessellation and Convexity Replace nonconvex concave polygons with triangular polygons a tessellation 109 Tessellation and Convexity Replace nonconvex (concave) polygons with triangular polygons (a tessellation) 109](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-109.jpg)
Tessellation and Convexity Replace nonconvex (concave) polygons with triangular polygons (a tessellation) 109
![Clipping as a Black Box Line segment clipping takes in two vertices and Clipping as a Black Box Line segment clipping - takes in two vertices and](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-110.jpg)
Clipping as a Black Box Line segment clipping - takes in two vertices and produces either no vertices or vertices of a clipped segment 110
![Pipeline Clipping Line Segments Clipping side of window is independent of other sid Pipeline Clipping - Line Segments Clipping side of window is independent of other sid](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-111.jpg)
Pipeline Clipping - Line Segments Clipping side of window is independent of other sid – Can use four independent clippers in a pipeline 111
![Pipeline Clipping of Polygons Three dimensions add front and back clippers Small Pipeline Clipping of Polygons • Three dimensions: add front and back clippers • Small](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-112.jpg)
Pipeline Clipping of Polygons • Three dimensions: add front and back clippers • Small increase in latency 112
![Bounding Boxes Ue an axisaligned bounding box or extent Smallest rectangle aligned with Bounding Boxes Ue an axis-aligned bounding box or extent – Smallest rectangle aligned with](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-113.jpg)
Bounding Boxes Ue an axis-aligned bounding box or extent – Smallest rectangle aligned with axes that encloses the polygon – Simple to compute: max and min of x and y 113
![Bounding boxes Can usually determine acceptreject based only on bounding box reject accept requires Bounding boxes Can usually determine accept/reject based only on bounding box reject accept requires](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-114.jpg)
Bounding boxes Can usually determine accept/reject based only on bounding box reject accept requires detailed clipping 114
![Clipping vs Visibility Clipping similar to hiddensurface removal Remove objects that are Clipping vs. Visibility • Clipping similar to hidden-surface removal • Remove objects that are](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-115.jpg)
Clipping vs. Visibility • Clipping similar to hidden-surface removal • Remove objects that are not visible to the camera • Use visibility or occlusion testing early in the process to eliminate as many polygons as possible before going through the entire pipeline 115
![Clipping Clipping](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-116.jpg)
Clipping
![Hidden Surface Removal Objectspace approach use pairwise testing between polygons objects partially obscuring can Hidden Surface Removal Object-space approach: use pairwise testing between polygons (objects) partially obscuring can](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-117.jpg)
Hidden Surface Removal Object-space approach: use pairwise testing between polygons (objects) partially obscuring can draw independently Worst case complexity O(n 2) for n polygons 117
![Better Still Better Still](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-118.jpg)
Better Still
![Better Still Better Still](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-119.jpg)
Better Still
![Painters Algorithm Render polygons a back to front order so that polygons behind others Painter’s Algorithm Render polygons a back to front order so that polygons behind others](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-120.jpg)
Painter’s Algorithm Render polygons a back to front order so that polygons behind others are simply painted over B behind A as seen by viewer 120 Fill B then A
![Depth Sort Requires ordering of polygons first On log n calculation for ordering Depth Sort Requires ordering of polygons first – O(n log n) calculation for ordering](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-121.jpg)
Depth Sort Requires ordering of polygons first – O(n log n) calculation for ordering – Not all polygons front or behind all other polygons Order polygons and deal with easy cases first, harder late Polygons sorted by distance from COP 121
![Easy Cases A lies behind all other polygons Can render Polygons overlap in Easy Cases A lies behind all other polygons – Can render Polygons overlap in](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-122.jpg)
Easy Cases A lies behind all other polygons – Can render Polygons overlap in z but not in either x or y – Can render independently 122
![Hard Cases Overlap in all directions but can one is fully on one side Hard Cases Overlap in all directions but can one is fully on one side](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-123.jpg)
Hard Cases Overlap in all directions but can one is fully on one side of the other cyclic overlap penetration 123
![BackFace Removal Culling face is visible iff 90 90 equivalently cos 0 or v Back-Face Removal (Culling) face is visible iff 90 -90 equivalently cos 0 or v](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-124.jpg)
Back-Face Removal (Culling) face is visible iff 90 -90 equivalently cos 0 or v • n 0 - plane of face has form ax + by +cz +d =0 - After normalization n = ( 0 0 1 0)T + Need only test the sign of c - Will not work correctly if we have nonconvex objects 124
![Image Space Approach Look at each ray nm for an n x m Image Space Approach • Look at each ray (nm for an n x m](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-125.jpg)
Image Space Approach • Look at each ray (nm for an n x m frame buffer) • Find closest of k polygons • Complexity O(nmk) • Ray tracing • z-buffer 125
![zBuffer Algorithm Use a buffer called z or depth buffer to store depth z-Buffer Algorithm • Use a buffer called z or depth buffer to store depth](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-126.jpg)
z-Buffer Algorithm • Use a buffer called z or depth buffer to store depth of closest object at each pixel found so far • As we render each polygon, compare the depth of each pixel to depth in z buffer • If less, place shade of pixel in color buffer and update z buffer 126
![zBuffer foreach polygon P in the polygon list do foreach pixelx y that intersects z-Buffer for(each polygon P in the polygon list) do{ for(each pixel(x, y) that intersects](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-127.jpg)
z-Buffer for(each polygon P in the polygon list) do{ for(each pixel(x, y) that intersects P) do{ Calculate z-depth of P at (x, y) If (z-depth < z-buffer[x, y]) then{ z-buffer[x, y]=z-depth; COLOR(x, y)=Intensity of P at(x, y); } #If-programming-for alpha compositing: Else if (COLOR(x, y). opacity < 100%) then{ COLOR(x, y)=Superimpose COLOR(x, y) in front of Intensity of P at(x, y); } #Endif-programming-for } } display COLOR array.
![](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-128.jpg)
![Efficiency Scanline As we move across a scan line the depth changes satisfy Efficiency - Scanline As we move across a scan line, the depth changes satisfy](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-129.jpg)
Efficiency - Scanline As we move across a scan line, the depth changes satisfy a x+b y+c z=0 Along scan line y = 0 z = - x In screen space x 129 =1
![ScanLine Algorithm Combine shading and hsr through scan line algorithm scan line i no Scan-Line Algorithm Combine shading and hsr through scan line algorithm scan line i: no](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-130.jpg)
Scan-Line Algorithm Combine shading and hsr through scan line algorithm scan line i: no need for depth information, can only be in no or one polygon scan line j: need depth information only when in more than one polygon 130
![Implementation Need a data structure to store Flag for each polygon insideoutside Implementation Need a data structure to store – Flag for each polygon (inside/outside) –](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-131.jpg)
Implementation Need a data structure to store – Flag for each polygon (inside/outside) – Incremental structure for scan lines that stores which edges are encountered – Parameters for planes 131
![Rasterization Rasterization scan conversion Determine which pixels that are inside primitive specified Rasterization • Rasterization (scan conversion) – Determine which pixels that are inside primitive specified](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-132.jpg)
Rasterization • Rasterization (scan conversion) – Determine which pixels that are inside primitive specified by a set of vertices – Produces a set of fragments – Fragments have a location (pixel location) and other attributes such color and texture coordinates that are determined by interpolating values at vertices • Pixel colors determined later using color, texture, and other vertex properties
![ScanLine Rasterization Scan-Line Rasterization](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-133.jpg)
Scan-Line Rasterization
![Scan Conversion Line Segments Start with line segment in window coordinates with integer Scan. Conversion -Line Segments • Start with line segment in window coordinates with integer](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-134.jpg)
Scan. Conversion -Line Segments • Start with line segment in window coordinates with integer values for endpoints • Assume implementation has a write_pixel function y = mx + h
![DDA Algorithm Digital Differential Analyzer Line ymx h satisfies differential equation dydx DDA Algorithm • Digital Differential Analyzer – Line y=mx+ h satisfies differential equation dy/dx](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-135.jpg)
DDA Algorithm • Digital Differential Analyzer – Line y=mx+ h satisfies differential equation dy/dx = m = Dy/Dx = y 2 -y 1/x 2 -x 1 • Along scan line Dx = 1 For(x=x 1; x<=x 2, ix++) { y+=m; display (x, round(y), line_color) }
![Problem DDA for each x plot pixel at closest y Problems for Problem DDA = for each x plot pixel at closest y – Problems for](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-136.jpg)
Problem DDA = for each x plot pixel at closest y – Problems for steep lines
![Bresenhams Algorithm DDA requires one floating point addition per step Eliminate computations Bresenham’s Algorithm • DDA requires one floating point addition per step • Eliminate computations](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-137.jpg)
Bresenham’s Algorithm • DDA requires one floating point addition per step • Eliminate computations through Bresenham’s algorithm • Consider only 1 m 0 – Other cases by symmetry • Assume pixel centers are at half integers
![Main Premise If we start at a pixel that has been written there are Main Premise If we start at a pixel that has been written, there are](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-138.jpg)
Main Premise If we start at a pixel that has been written, there are only two candidates for the next pixel to be written into the frame buffer
![Candidate Pixels 1 m 0 candidates last pixel Note that line could have passed Candidate Pixels 1 m 0 candidates last pixel Note that line could have passed](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-139.jpg)
Candidate Pixels 1 m 0 candidates last pixel Note that line could have passed through any part of this pixel
![Decision Variable d xba d is an integer d 0 use upper Decision Variable d = x(b-a) d is an integer d > 0 use upper](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-140.jpg)
Decision Variable d = x(b-a) d is an integer d > 0 use upper pixel d < 0 use lower pixel -
![Incremental Form Inspect dk at x k dk1 dk 2 Dy if Incremental Form Inspect dk at x = k dk+1= dk – 2 Dy, if](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-141.jpg)
Incremental Form Inspect dk at x = k dk+1= dk – 2 Dy, if dk <0 dk+1= dk – 2(Dy- Dx), otherwise For each x, we need do only an integer addition and test Single instruction on graphics chips
![Polygon Scan Conversion Scan Conversion Fill How to tell inside from Polygon Scan Conversion • Scan Conversion = Fill • How to tell inside from](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-142.jpg)
Polygon Scan Conversion • Scan Conversion = Fill • How to tell inside from outside – Convex easy – Nonsimple difficult – Odd even test • Count edge crossings
![Filling in the Frame Buffer Fill at end of pipeline Convex Polygons only Filling in the Frame Buffer Fill at end of pipeline – Convex Polygons only](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-143.jpg)
Filling in the Frame Buffer Fill at end of pipeline – Convex Polygons only – Nonconvex polygons assumed to have been tessellated – Shades (colors) have been computed for vertices (Gouraud shading) – Combine with z-buffer algorithm • March across scan lines interpolating shades • Incremental work small
![Using Interpolation C 1 C 2 C 3 specified by vertex shading C 4 Using Interpolation C 1 C 2 C 3 specified by vertex shading C 4](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-144.jpg)
Using Interpolation C 1 C 2 C 3 specified by vertex shading C 4 determined by interpolating between C 1 and C 2 C 5 determined by interpolating between C 2 and C 3 interpolate between C 4 and C 5 along span C 1 scan line C 4 C 2 C 5 C 3 span
![Scan Line Fill Can also fill by maintaining a data structure of all intersections Scan Line Fill Can also fill by maintaining a data structure of all intersections](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-145.jpg)
Scan Line Fill Can also fill by maintaining a data structure of all intersections of polygons with scan lines – Sort by scan line – Fill each span vertex order generated by vertex list desired order E. Angel and D. Shreiner: Interactive Computer Graphics 6 E © Addison-Wesley 2012
![Data Structure Data Structure](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-146.jpg)
Data Structure
![Aliasing Ideal rasterized line should be 1 pixel wide Choosing best y Aliasing • Ideal rasterized line should be 1 pixel wide • Choosing best y](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-147.jpg)
Aliasing • Ideal rasterized line should be 1 pixel wide • Choosing best y for each x (or visa versa) produces aliased raster lines E. Angel and D. Shreiner: Interactive Computer Graphics 6 E © Addison-Wesley 2012
![Antialiasing by Area Averaging Color multiple pixels for each x depending on coverage Antialiasing by Area Averaging • Color multiple pixels for each x depending on coverage](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-148.jpg)
Antialiasing by Area Averaging • Color multiple pixels for each x depending on coverage by ideal line antialiased original magnified
![Polygon Aliasing Aliasing problems can be serious for polygons Jaggedness of edges Polygon Aliasing • Aliasing problems can be serious for polygons – Jaggedness of edges](https://slidetodoc.com/presentation_image_h2/f15ba4c8dfcb7dddc3b1bb60541ffe45/image-149.jpg)
Polygon Aliasing • Aliasing problems can be serious for polygons – Jaggedness of edges – Small polygons neglected – Need compositing so color of one polygon does not totally determine color of pixel All three polygons should contribute to color
History of teapots
Utah teapot vertex data
Teapot deformity in gastric ulcer
The teapot dome scandal centered around *
Dinnertime chorus
Christopher dresser teapot
Slab lantern
Introduction to volume rendering
Blender virtualbox
Camera translate
Radiosity rendering
Guillaume fenelon
Visual rendering
Chris buehler
Clustered forward rendering
Image-based modeling and rendering
Solid edge rendering
Kajiya rendering equation
Direct volume rendering ray casting
David rosen sega
Car paint rendering
Vray elements
Bunkasha games
Rendering
Graphics rendering
Rendering equation
Reyes rendering
Types of rendering techniques
Multipass rendering
Teknik arsir gradasi
Maya rendering with aneka
Rendering carcass
Rendering realtime compositing
Microsoft color control panel
Real time rendering architecture
Computer graphics pipeline
Hair rendering
Lumigraph rendering
Rendering fur with three dimensional textures
Game rendering techniques
"splat"
Inverse rendering
Surfels: surface elements as rendering primitives
Eurographics symposium on rendering
Advances in real time rendering
Teknik rendering grafik tiga dimensi dengan interaksi sinar
Light transport
Volume rendering tutorial
Photorealistic rendering carlsbad
Radiosity rendering
Renderer
Graphics rendering
Indirect volume rendering
Chó sói
Các môn thể thao bắt đầu bằng tiếng đua
Thiếu nhi thế giới liên hoan
Khi nào hổ con có thể sống độc lập
điện thế nghỉ
Một số thể thơ truyền thống
Trời xanh đây là của chúng ta thể thơ
Ng-html
Bảng số nguyên tố
Tia chieu sa te
Các châu lục và đại dương trên thế giới
Chụp phim tư thế worms-breton
Thế nào là hệ số cao nhất
Sơ đồ cơ thể người
ưu thế lai là gì
Tư thế ngồi viết
Cái miệng nó xinh thế chỉ nói điều hay thôi
đặc điểm cơ thể của người tối cổ
Cách giải mật thư tọa độ
Bổ thể
Tư thế ngồi viết
Thẻ vin
Thơ thất ngôn tứ tuyệt đường luật
Chúa sống lại
Các châu lục và đại dương trên thế giới
Từ ngữ thể hiện lòng nhân hậu
Diễn thế sinh thái là
Vẽ hình chiếu vuông góc của vật thể sau
V cc
Phép trừ bù
Tỉ lệ cơ thể trẻ em
Lời thề hippocrates
Sự nuôi và dạy con của hươu
đại từ thay thế
Quá trình desamine hóa có thể tạo ra
Công thức tính độ biến thiên đông lượng
Thế nào là mạng điện lắp đặt kiểu nổi
Hát kết hợp bộ gõ cơ thể
Các loại đột biến cấu trúc nhiễm sắc thể
Vẽ hình chiếu đứng bằng cạnh của vật thể
Thế nào là sự mỏi cơ
Phản ứng thế ankan
Robert kessler utah
Ogden utah gangs
Rural water utah
Manish parashar utah
Peran ombudsman
Greenville elementary logan utah
Utah state university engineering
Dogma of biology
Epinephrine in the brain
Virgin river utah fishing
Family facilitator guide utah
Sunshine.chpc.utah.edu/labs/star life
Birds of utah identification
Ovillos fibrilares
Uupm
University of utah financial and business services
What is the utah fccla state theme this year
Utah state pronunciation
Utah health policy project
Utah
Utah child care licensing
Kaysville city power
How to file a mechanics lien in utah
Anthony pantziris
Traditional mirror settings should be used
How do you know if a karyotype is male or female
Utah state extension fruit trees
Npo medical abbreviation
Why did mormons settle in utah
Utah museums association
Learn.genetics.utah.edu
Utah drought map
Library.med.utah.edu/kw/pharm/hyper heart.html
Michael morse utah
Trauma awareness and treatment center utah
Utah state tree blue spruce
Gyrus precentralis
What is the state animal of utah
What does facts stand for in fccla
Tim whipple
Translaar
Michael morse utah
Equality utah allies dinner
Utah core math standards
Of what value is the weather depiction chart to the pilot?
Learn.genetics.utah/content/addiction/mouse
Utah major industries
Ddw utah
Secure.utah.gov.bes
Webpath
Ketobe
Canyon media st george
Why did the mormons migrate to utah
Division of water resources utah
Nortenos in utah