Modeling/Transformation Examples

• Modeling a colored cube• Hierarchical modeling

Modeling a Colored Cube

cube & cubev of Chapter 4

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)

Inward and Outward-Pointing Faces

Divide a Quadrilateral into Two Triangles

a a

b c

d

c

d

b

Color Interpolation by Rasterizaton

Interpolation using barycentric coordinates

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;}

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 );

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)

Draw with gl.drawElements(Create Buffers)

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 );

Hierarchical Modeling

RobotArm & figure of Chapter 9

Robot Arm

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 );}

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();

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;}

Figure

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;}

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);}

Build the Figure

Matrix Stack

var modelViewMatrix;var stack = [];

stack.push(modelViewMatrix);

modelViewMatrix = stack.pop();

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); }

The render Function