modeling/transformation examples modeling a colored cube hierarchical modeling
TRANSCRIPT
![Page 1: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/1.jpg)
Modeling/Transformation Examples
• Modeling a colored cube• Hierarchical modeling
![Page 2: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/2.jpg)
Modeling a Colored Cube
cube & cubev of Chapter 4
![Page 3: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/3.jpg)
Cube
function colorCube() { quad( 1, 0, 3, 2 ); quad( 2, 3, 7, 6 ); quad( 3, 0, 4, 7 ); quad( 6, 5, 1, 2 ); quad( 4, 5, 6, 7 ); quad( 5, 4, 0, 1 );}
(-0.5,-0.5,0.5)
(0.5,0.5,-0.5)
![Page 4: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/4.jpg)
Inward and Outward-Pointing Faces
![Page 5: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/5.jpg)
Divide a Quadrilateral into Two Triangles
a a
b c
d
c
d
b
![Page 6: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/6.jpg)
Color Interpolation by Rasterizaton
Interpolation using barycentric coordinates
![Page 7: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/7.jpg)
Transformation Performed at Vertex Shader
attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;
uniform vec3 theta;
void main() { // Remeber: thse matrices are column-major mat4 rx = mat4( ……); mat4 ry = mat4( ….. ); mat4 rz = mat4( …… );
fColor = vColor; gl_Position = rz * ry * rx * vPosition;}
![Page 8: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/8.jpg)
Draw with gl.drawArrays
var axis = 0;var theta = [ 0, 0, 0 ];var thetaLoc; thetaLoc = gl.getUniformLocation(program, "theta");
theta[axis] += 2.0;gl.uniform3fv(thetaLoc, theta);
gl.drawArrays( gl.TRIANGLES, 0, NumVertices );
![Page 9: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/9.jpg)
Draw with gl.drawElements(Array of Indices)
var indices = [ 1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2, 3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6, 4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5];
(-0.5,-0.5,0.5)
(0.5,0.5,-0.5)
![Page 10: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/10.jpg)
Draw with gl.drawElements(Create Buffers)
![Page 11: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/11.jpg)
Draw with gl.drawElements
var axis = 0;var theta = [ 0, 0, 0 ];var thetaLoc; thetaLoc = gl.getUniformLocation(program, "theta");
theta[axis] += 2.0;gl.uniform3fv(thetaLoc, theta);
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
![Page 12: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/12.jpg)
Hierarchical Modeling
RobotArm & figure of Chapter 9
![Page 13: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/13.jpg)
Robot Arm
![Page 14: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/14.jpg)
Each Individual Part
function lowerArm(){ var s = scale4(LOWER_ARM_WIDTH, LOWER_ARM_HEIGHT, LOWER_ARM_WIDTH); var instanceMatrix = mult( translate( 0.0, 0.5 * LOWER_ARM_HEIGHT, 0.0 ), s); var t = mult(modelViewMatrix, instanceMatrix); gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(t) ); gl.drawArrays( gl.TRIANGLES, 0, NumVertices );}
![Page 15: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/15.jpg)
The render() Function
modelViewMatrix = rotate(theta[Base], 0, 1, 0 ); base();
modelViewMatrix = mult(modelViewMatrix, translate(0.0, BASE_HEIGHT, 0.0)); modelViewMatrix = mult(modelViewMatrix, rotate(theta[LowerArm], 0, 0, 1 )); lowerArm();
modelViewMatrix = mult(modelViewMatrix, translate(0.0, LOWER_ARM_HEIGHT, 0.0)); modelViewMatrix = mult(modelViewMatrix, rotate(theta[UpperArm], 0, 0, 1) ); upperArm();
![Page 16: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/16.jpg)
Vertex Shader
attribute vec4 vPosition;attribute vec4 vColor;varying vec4 fColor;
uniform mat4 modelViewMatrix;uniform mat4 projectionMatrix;
void main() { fColor = vColor; gl_Position = projectionMatrix * modelViewMatrix * vPosition;}
![Page 17: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/17.jpg)
Figure
![Page 18: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/18.jpg)
Binary Tree Representation of a Regular Tree
function createNode(transform, render, sibling, child){ var node = { transform: transform, render: render, sibling: sibling, child: child, } return node;}
![Page 19: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/19.jpg)
Each Individual Part
function rightLowerArm() { instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) ); instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth) ); gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix)); for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);}
![Page 20: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/20.jpg)
Build the Figure
![Page 21: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/21.jpg)
Matrix Stack
var modelViewMatrix;var stack = [];
stack.push(modelViewMatrix);
modelViewMatrix = stack.pop();
![Page 22: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/22.jpg)
Tree Traversal
function traverse(Id) { if(Id == null) return; stack.push(modelViewMatrix); modelViewMatrix = mult(modelViewMatrix, figure[Id].transform); figure[Id].render(); if(figure[Id].child != null) traverse(figure[Id].child); modelViewMatrix = stack.pop(); if(figure[Id].sibling != null) traverse(figure[Id].sibling); }
![Page 23: Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling](https://reader036.vdocuments.mx/reader036/viewer/2022062407/56649d305503460f94a085ac/html5/thumbnails/23.jpg)
The render Function