building models - kennesaw state universityksuweb.kennesaw.edu › ... › slides ›...
TRANSCRIPT
![Page 1: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/1.jpg)
Building Models
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
1
![Page 2: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/2.jpg)
Objectives
• Introduce simple data structures for building polygonal models
• Vertex lists• Edge lists
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
2
![Page 3: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/3.jpg)
Representing a Mesh
• Consider a mesh
• There are 8 nodes and 12 edges• 5 interior polygons• 6 interior (shared) edges
• Each vertex has a location vi = (xi yi zi)Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015 3
v1 v2
v7
v6v8
v5
v4
v3
e1e8
e3
e2
e11
e6
e7e10
e5
e4
e9
e12
![Page 4: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/4.jpg)
Simple Representation
• Define each polygon by the geometric locations of its vertices• Leads to WebGL code such as
• Inefficient and unstructured• Consider moving a vertex to a new location• Must search for all occurrences
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
4
vertex.push(vec3(x1, y1, z1));vertex.push(vec3(x6, y6, z6));vertex.push(vec3(x7, y7, z7));
![Page 5: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/5.jpg)
Inward and Outward Facing Polygons
• The order {v1, v6, v7} and {v6, v7, v1} are equivalent in that the same polygon will be rendered by OpenGL but the order {v1, v7, v6} is different
• The first two describe outwardly facing polygons• Use the right-hand rule = counter-clockwise encirclement of outward-pointing normal • OpenGL can treat inward and outward facing polygons differently
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
5
![Page 6: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/6.jpg)
Geometry vs Topology
• Generally it is a good idea to look for data structures that separate the geometry from the topology
• Geometry: locations of the vertices• Topology: organization of the vertices and edges• Example: a polygon is an ordered list of vertices with an edge connecting
successive pairs of vertices and the last to the first• Topology holds even if geometry changes
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
6
![Page 7: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/7.jpg)
Vertex Lists
• Put the geometry in an array• Use pointers from the vertices into this array• Introduce a polygon list
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
7
x1 y1 z1x2 y2 z2x3 y3 z3x4 y4 z4x5 y5 z5.x6 y6 z6x7 y7 z7x8 y8 z8
P1P2P3P4P5
v1v7v6
v8v5v6
topology geometry
![Page 8: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/8.jpg)
Shared Edges
• Vertex lists will draw filled polygons correctly but if we draw the polygon by its edges, shared edges are drawn twice
• Can store mesh by edge list
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
8
![Page 9: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/9.jpg)
Edge List
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
9
v1 v2
v7
v6v8
v5
v3
e1e8
e3
e2
e11
e6
e7e10
e5
e4
e9
e12
e1e2e3e4e5e6e7e8e9
x1 y1 z1x2 y2 z2x3 y3 z3x4 y4 z4x5 y5 z5.x6 y6 z6x7 y7 z7x8 y8 z8
v1v6
Note polygons arenot represented
![Page 10: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/10.jpg)
Draw cube from faces
var colorCube( ){
quad(0,3,2,1);quad(2,3,7,6);quad(0,4,7,3);quad(1,2,6,5);quad(4,5,6,7);quad(0,1,5,4);
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
10
0
5 6
2
4 7
1
3
![Page 11: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/11.jpg)
11
The Rotating Square
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 12: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/12.jpg)
12
Objectives
• Put everything together to display rotating cube• Two methods of display
• by arrays• by elements
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 13: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/13.jpg)
13
Modeling a Cube
var vertices = [vec3( -0.5, -0.5, 0.5 ),vec3( -0.5, 0.5, 0.5 ),vec3( 0.5, 0.5, 0.5 ),vec3( 0.5, -0.5, 0.5 ),vec3( -0.5, -0.5, -0.5 ),vec3( -0.5, 0.5, -0.5 ),vec3( 0.5, 0.5, -0.5 ),vec3( 0.5, -0.5, -0.5 )
];
Define global array for vertices
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 14: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/14.jpg)
14
Colors
var vertexColors = [[ 0.0, 0.0, 0.0, 1.0 ], // black[ 1.0, 0.0, 0.0, 1.0 ], // red[ 1.0, 1.0, 0.0, 1.0 ], // yellow[ 0.0, 1.0, 0.0, 1.0 ], // green[ 0.0, 0.0, 1.0, 1.0 ], // blue[ 1.0, 0.0, 1.0, 1.0 ], // magenta[ 0.0, 1.0, 1.0, 1.0 ], // cyan[ 1.0, 1.0, 1.0, 1.0 ] // white
];
Define global array for colors
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 15: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/15.jpg)
15
Draw cube from faces
function colorCube( ){
quad(0,3,2,1);quad(2,3,7,6);quad(0,4,7,3);quad(1,2,6,5);quad(4,5,6,7);quad(0,1,5,4);
}
0
5 6
2
4 7
1
3Note that vertices are ordered so that we obtain correct outward facing normalsEach quad generates two triangles
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 16: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/16.jpg)
Initialization
16
var canvas, gl;var numVertices = 36;var points = [];var colors = [];
window.onload = function init(){canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas );
colorCube();
gl.viewport( 0, 0, canvas.width, canvas.height );gl.clearColor( 1.0, 1.0, 1.0, 1.0 );gl.enable(gl.DEPTH_TEST);
// rest of initialization and html file // same as previous examples
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 17: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/17.jpg)
17
The quad Function
Put position and color data for two triangles from a list of indices into the array vertices
var quad(a, b, c, d){
var indices = [ a, b, c, a, c, d ];for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]]);colors.push( vertexColors[indices[i]] );
// for solid colored faces use //colors.push(vertexColors[a]);
}} Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 18: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/18.jpg)
Render Function
18
function render(){gl.clear( gl.COLOR_BUFFER_BIT |gl.DEPTH_BUFFER_BIT);gl.drawArrays( gl.TRIANGLES, 0, numVertices );requestAnimFrame( render );
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 19: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/19.jpg)
19
Mapping indices to facesvar indices = [1,0,3,3,2,1,2,3,7,7,6,2, 3,0,4,4,7,3,6,5,1,1,2,6,4,5,6,6,7,4,5,4,0,0,1,5]; Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 20: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/20.jpg)
Rendering by Elements
• Send indices to GPU
• Render by elements
• Even more efficient if we use triangle strips or triangle fans
20
var iBuffer = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
new Uint8Array(indices), gl.STATIC_DRAW);
gl.drawElements( gl.TRIANGLES, numVertices,gl.UNSIGNED_BYTE, 0 );
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 21: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/21.jpg)
Adding Buttons for Rotation
21
var xAxis = 0;var yAxis = 1;var zAxis = 2;var axis = 0;var theta = [ 0, 0, 0 ];var thetaLoc;
document.getElementById( "xButton" ).onclick = function () { axis = xAxis; }; document.getElementById( "yButton" ).onclick = function () { axis = yAxis; }; document.getElementById( "zButton" ).onclick = function () { axis = zAxis; };
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 22: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/22.jpg)
Render Function
22
function render(){gl.clear( gl.COLOR_BUFFER_BIT |gl.DEPTH_BUFFER_BIT);theta[axis] += 2.0;gl.uniform3fv(thetaLoc, theta);gl.drawArrays( gl.TRIANGLES, 0, numVertices );requestAnimFrame( render );
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 23: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/23.jpg)
23
Classical Viewing
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 24: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/24.jpg)
24
Objectives
• Introduce the classical views• Compare and contrast image formation by
computer with how images have been formed by architects, artists, and engineers
• Learn the benefits and drawbacks of each type of view
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 25: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/25.jpg)
25
Classical Viewing• Viewing requires three basic elements
• One or more objects• A viewer with a projection surface• Projectors that go from the object(s) to the projection
surface
• Classical views are based on the relationship among these elements
• The viewer picks up the object and orients it how she would like to see it
• Each object is assumed to constructed from flat principal faces
• Buildings, polyhedra, manufactured objects
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 26: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/26.jpg)
26
Planar Geometric Projections
• Standard projections project onto a plane• Projectors are lines that either
• converge at a center of projection• are parallel
• Such projections preserve lines• but not necessarily angles
• Nonplanar projections are needed for applications such as map construction
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 27: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/27.jpg)
27
Classical Projections
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 28: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/28.jpg)
28
Perspective vs Parallel
• Computer graphics treats all projections the same and implements them with a single pipeline
• Classical viewing developed different techniques for drawing each type of projection
• Fundamental distinction is between parallel and perspective viewing even though mathematically parallel viewing is the limit of perspective viewing
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 29: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/29.jpg)
29
Taxonomy of Planar Geometric Projections
parallel perspective
axonometricmultivieworthographic
oblique
isometric dimetric trimetric
2 point1 point 3 point
planar geometric projections
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 30: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/30.jpg)
30
Perspective Projection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 31: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/31.jpg)
31
Parallel Projection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 32: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/32.jpg)
32
Orthographic ProjectionProjectors are orthogonal to projection surface
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 33: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/33.jpg)
33
Multiview Orthographic Projection
• Projection plane parallel to principal face• Usually form front, top, side views
isometric (not multivieworthographic view) front
sidetop
in CAD and architecture, we often display three multiviews plus isometric
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 34: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/34.jpg)
34
Advantages and Disadvantages
• Preserves both distances and angles• Shapes preserved• Can be used for measurements
• Building plans• Manuals
• Cannot see what object really looks like because many surfaces hidden from view
• Often we add the isometric
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 35: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/35.jpg)
35
Axonometric Projections
Allow projection plane to move relative to object
classify by how many angles ofa corner of a projected cube are the same
none: trimetrictwo: dimetricthree: isometric
θ 1θ 3θ 2
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 36: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/36.jpg)
36
Types of Axonometric Projections
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 37: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/37.jpg)
37
Advantages and Disadvantages
• Lines are scaled (foreshortened) but can find scaling factors• Lines preserved but angles are not
• Projection of a circle in a plane not parallel to the projection plane is an ellipse
• Can see three principal faces of a box-like object• Some optical illusions possible
• Parallel lines appear to diverge
• Does not look real because far objects are scaled the same as near objects
• Used in CAD applications
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 38: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/38.jpg)
38
Oblique Projection
Arbitrary relationship between projectors and projection plane
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 39: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/39.jpg)
39
Advantages and Disadvantages
• Can pick the angles to emphasize a particular face• Architecture: plan oblique, elevation oblique
• Angles in faces parallel to projection plane are preserved while we can still see “around” side
• In physical world, cannot create with simple camera; possible with bellows camera or special lens (architectural)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 40: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/40.jpg)
40
Perspective Projection
Projectors coverge at center of projection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 41: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/41.jpg)
41
Vanishing Points
• Parallel lines (not parallel to the projection plan) on the object converge at a single point in the projection (the vanishing point)
• Drawing simple perspectives by hand uses these vanishing point(s)
vanishing point
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 42: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/42.jpg)
42
Three-Point Perspective
• No principal face parallel to projection plane• Three vanishing points for cube
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 43: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/43.jpg)
43
Two-Point Perspective
• On principal direction parallel to projection plane• Two vanishing points for cube
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 44: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/44.jpg)
44
One-Point Perspective
• One principal face parallel to projection plane• One vanishing point for cube
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 45: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/45.jpg)
45
Advantages and Disadvantages
• Objects further from viewer are projected smaller than the same sized objects closer to the viewer (diminution)
• Looks realistic
• Equal distances along a line are not projected into equal distances (nonuniform foreshortening)
• Angles preserved only in planes parallel to the projection plane• More difficult to construct by hand than parallel projections (but not
more difficult by computer)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 46: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/46.jpg)
46
Computer ViewingPositioning the Camera
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 47: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/47.jpg)
47
Objectives
• Introduce the mathematics of projection• Introduce WebGL viewing functions in MV.js• Look at alternate viewing APIs
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 48: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/48.jpg)
From the Beginning
• In the beginning:• fixed function pipeline• Model-View and Projection Transformation• Predefined frames: model, object, camera, clip, ndc, window
• After deprecation• pipeline with programmable shaders• no transformations• clip, ndc window frames
• MV.js reintroduces original capabilities
48Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 49: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/49.jpg)
49
Computer Viewing
• There are three aspects of the viewing process, all of which are implemented in the pipeline,
• Positioning the camera• Setting the model-view matrix
• Selecting a lens• Setting the projection matrix
• Clipping• Setting the view volume
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 50: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/50.jpg)
50
The WebGL Camera• In WebGL, initially the object and camera frames
are the same• Default model-view matrix is an identity
• The camera is located at origin and points in the negative z direction
• WebGL also specifies a default view volume that is a cube with sides of length 2 centered at the origin
• Default projection matrix is an identity
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 51: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/51.jpg)
51
Default Projection
Default projection is orthogonal
clipped out
z=0
2
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 52: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/52.jpg)
52
Moving the Camera Frame
• If we want to visualize objects with both positive and negative z values we can either
• Move the camera in the positive z direction• Translate the camera frame
• Move the objects in the negative z direction• Translate the world frame
• Both of these views are equivalent and are determined by the model-view matrix
• Want a translation (translate(0.0,0.0,-d);)• d > 0
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 53: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/53.jpg)
53
Moving Camera back from Origin
default frames
frames after translation by –dd > 0
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 54: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/54.jpg)
54
Moving the Camera
• We can move the camera to any desired position by a sequence of rotations and translations
• Example: side view• Rotate the camera• Move it away from origin• Model-view matrix C = TR
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 55: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/55.jpg)
55
WebGL code• Remember that last transformation specified is
first to be applied
// Using MV.js
var t = translate (0.0, 0.0, -d);var ry = rotateY(90.0);var m = mult(t, ry);
or
var m = mult(translate (0.0, 0.0, -d),rotateY(90.0););
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 56: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/56.jpg)
56
lookAtLookAt(eye, at, up)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 57: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/57.jpg)
57
The lookAt Function• The GLU library contained the function gluLookAt to
form the required modelview matrix through a simple interface
• Note the need for setting an up direction• Replaced by lookAt() in MV.js
• Can concatenate with modeling transformations
• Example: isometric view of cube aligned with axesvar eye = vec3(1.0, 1.0, 1.0);var at = vec3(0.0, 0.0, 0.0);var up = vec3(0.0, 1.0, 0.0);
var mv = LookAt(eye, at, up); Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 58: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/58.jpg)
58
Other Viewing APIs
• The LookAt function is only one possible API for positioning the camera
• Others include• View reference point, view plane normal, view up (PHIGS, GKS-3D)• Yaw, pitch, roll• Elevation, azimuth, twist• Direction angles
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 59: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/59.jpg)
59
Computer ViewingProjection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 60: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/60.jpg)
60
Objectives
• Introduce the mathematics of projection• Add WebGL projection functions in MV.js
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 61: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/61.jpg)
61
Projections and Normalization
• The default projection in the eye (camera) frame is orthogonal
• For points within the default view volume
• Most graphics systems use view normalization• All other views are converted to the default view by
transformations that determine the projection matrix• Allows use of the same pipeline for all views
xp = xyp = yzp = 0
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 62: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/62.jpg)
62
Homogeneous Coordinate Representation
xp = xyp = yzp = 0wp = 1
pp = Mp
M =
1000000000100001
In practice, we can let M = I and setthe z term to zero later
default orthographic projection
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 63: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/63.jpg)
63
Simple Perspective
• Center of projection at the origin• Projection plane z = d, d < 0
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 64: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/64.jpg)
64
Perspective EquationsConsider top and side views
xp =
dzx/
dzx/
yp =dz
y/
zp = d
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 65: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/65.jpg)
65
Homogeneous Coordinate Form
M =
0/100010000100001
d
consider q = Mp where
1zyx
dzzyx
/
q = ⇒ p =
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 66: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/66.jpg)
66
Perspective Division• However w ≠ 1, so we must divide by w to return
from homogeneous coordinates• This perspective division yields
the desired perspective equations • We will consider the corresponding clipping volume
with mat.h functions that are equivalent to deprecated OpenGL functions
xp = dzx/ yp =
dzy/ zp = d
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 67: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/67.jpg)
67
WebGL Orthogonal Viewingortho(left,right,bottom,top,near,far)
near and far measured from camera
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 68: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/68.jpg)
68
WebGL Perspectivefrustum(left,right,bottom,top,near,far)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 69: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/69.jpg)
69
Using Field of View• With frustum it is often difficult to get the desired
view• perpective(fovy, aspect, near, far)
often provides a better interface
aspect = w/h
front plane
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 70: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/70.jpg)
Computing Matrices• Compute in JS file, send
to vertex shader with gl.uniformMatrix4fv
• Dynamic: update in render() or shader
70Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 71: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/71.jpg)
persepctive2.js
71
var render = function(){gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));modelViewMatrix = lookAt(eye, at , up);projectionMatrix = perspective(fovy, aspect, near, far);gl.uniformMatrix4fv( modelViewMatrixLoc, false,
flatten(modelViewMatrix) );gl.uniformMatrix4fv( projectionMatrixLoc, false,
flatten(projectionMatrix) );gl.drawArrays( gl.TRIANGLES, 0, NumVertices );requestAnimFrame(render);
}Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 72: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/72.jpg)
vertex shader
72
attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;
void main() {gl_Position = projectionMatrix*modelViewMatrix*vPosition;fColor = vColor;
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 73: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/73.jpg)
The Virtual Trackball
73Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 74: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/74.jpg)
74
Objectives
• This is an optional lecture that • Introduces the use of graphical (virtual) devices that
can be created using WebGL• Reinforce the benefit of not using direction angles and
Euler angles• Makes use of transformations• Leads to reusable code that will be helpful later
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 75: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/75.jpg)
75
Physical Trackball
• The trackball is an “upside down” mouse
• If there is little friction between the ball and the rollers, we can give the ball a push and it will keep rolling yielding continuous changes
• Two possible modes of operation• Continuous pushing or tracking hand motion• Spinning
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 76: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/76.jpg)
76
A Trackball from a Mouse
• Problem: we want to get the two behavior modes from a mouse• We would also like the mouse to emulate a frictionless (ideal)
trackball• Solve in two steps
• Map trackball position to mouse position• Use event listeners to handle the proper modes
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 77: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/77.jpg)
Using Quaternions
• Quaternion arithmetic works well for representing rotations around the origin
• Can use directly avoiding rotation matrices in the virtual trackball• Code was made available long ago (pre shader) by SGI• Quaternion shaders are simple
77Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015
![Page 78: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/78.jpg)
78
Trackball Frame
origin at center of ball
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 79: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/79.jpg)
79
Projection of Trackball Position
• We can relate position on trackball to position on a normalized mouse pad by projecting orthogonally onto pad
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 80: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/80.jpg)
80
Reversing Projection
• Because both the pad and the upper hemisphere of the ball are two-dimensional surfaces, we can reverse the projection
• A point (x,z) on the mouse pad corresponds to the point (x,y,z) on the upper hemisphere where
y = 222 zxr −− if r ≥ |x|≥ 0, r ≥ |z| ≥ 0
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 81: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/81.jpg)
81
Computing Rotations
• Suppose that we have two points that were obtained from the mouse.
• We can project them up to the hemisphere to points p1 and p2
• These points determine a great circle on the sphere• We can rotate from p1 to p2 by finding the proper axis of rotation and
the angle between the points
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 82: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/82.jpg)
82
Using the cross product
• The axis of rotation is given by the normal to the plane determined by the origin, p1 , and p2
n = p1 × p2
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 83: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/83.jpg)
83
Obtaining the angle
• The angle between p1 and p2 is given by
• If we move the mouse slowly or sample its position frequently, then θwill be small and we can use the approximation
| sin θ| = ||||
||
21 ppn
sin θ ≈ θ
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 84: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/84.jpg)
84
Implementing with WebGL
• Define actions in terms of three booleans• trackingMouse: if true update trackball position• redrawContinue: if true, idle function posts a redisplay• trackballMove: if true, update rotation matrix
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 85: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/85.jpg)
Vertex Shader I
85
in vec4 vPosition;in vec4 vColor;out vec4 color;uniform vec4 rquat; // rotation quaternion
// quaternion multiplier
vec4 multq(vec4 a, vec4 b){
return(vec4(a.x*b.x - dot(a.yzw, b.yzw), a.x*b.yzw+b.x*a.yzw+cross(b.yzw, a.yzw)));
}
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
![Page 86: Building Models - Kennesaw State Universityksuweb.kennesaw.edu › ... › Slides › Lecture_6.pdf• Can pick the angles to emphasize a particular face • Architecture: plan oblique,](https://reader030.vdocument.in/reader030/viewer/2022041104/5f04caf97e708231d40fbb97/html5/thumbnails/86.jpg)
Vertex Shader II
86
// inverse quaternionvec4 invq(vec4 a){ return(vec4(a.x, -a.yzw)/dot(a,a)); }
void main() {vec3 axis = rquat.yxw;float theta = rquat.x;vec4 r, p;p = vec4(0.0, vPosition.xyz); // input point quaternionp = multq(rquat, multq(p, invq(rquat))); // rotated point quaterniongl_Position = vec4( p.yzw, 1.0); // back to homogeneous coordinatescolor = vColor;
} Angel and Shreiner: Interactive Computer Graphics 7E
© Addison-Wesley 2015