Modeling/Transformation Examples Modeling a colored cube Hierarchical modeling.

Slides:



Advertisements
Similar presentations
1 3D Transformations CS 234 Jeff Parker. 2 Objectives Notifications Homework Gallery Pen and Paper Review transformations Apply these ideas to 3D movement.
Advertisements

As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1.
Open Graphics Library (OpenGL)
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Ring, Circle, Cone Chapter 4. 2 Triangle rotating We have a triangle in the following position We want to rotate it around line y =  2. For this purpose,
A Really (too) Short Introduction to OpenGL Peter Rautek.
And an introduction to matrices COORDINATE SYSTEMS JEFF CHASTINE 1.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
CS 450: COMPUTER GRAPHICS PORTRAIT OF AN OPENGL PROGRAM SPRING 2015 DR. MICHAEL J. REALE.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
Exam Review Questions. Problem: A cube has vertices with world coordinates: (1, 0, 0) (2, 0, 0) (1, 1, 0) (2, 1, 0) (1, 0, 1) (2, 0, 1) (1, 1, 1) (2,
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 User Interaction Includes material by Ed Angel Jeff Parker © 2013.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
User Input and Animation. For Further Reading Angel 7 th Ed: –Chapter 3: Input and Animation. –Chapter 4: Rotation and other transformation. Beginning.
Transformations Tutorial
1 Graphics CSCI 343, Fall 2015 Lecture 6 Viewing, Animation, User Interface.
1 Graphics CSCI 343, Fall 2015 Lecture 21 Lighting and Shading III.
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
Jeff Parker, 2013 Thanks to Prof. Okan Arikan, UT Austin Ed Angel, UNM
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Vertex Buffer Objects and Shader Attributes. For Further Reading Angel 7 th Ed: –Most parts of Chapter 2. Beginning WebGL: –Chapter 1: vertex Buffer Objects,
Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning.
Shading. For Further Reading Angel 7 th Ed: ­Chapter 6 2.
1 Graphics CSCI 343, Fall 2015 Lecture 18 Viewing III--More Projection.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
University of Texas at Austin CS384G - Computer Graphics Fall 2010 Don Fussell Hierarchical Modeling.
Attack of the Clones Image source:
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
Mouse Input. For Further Reading Learning WebGL, Lesson 11: 2.
CS559: Computer Graphics Lecture 13: Hierarchical Modeling and Curves Li Zhang Spring 2010.
A study of efficiency INDEX BUFFERS JEFF CHASTINE 1.
Advanced Texture Mapping Bump Mapping & Environment Mapping (Reflection)
1 Introduction to Computer Graphics with WebGL ADOPTED from Ed Angel Chapter 2 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
An Introduction to WebGL Programming Ed Angel Dave Shreiner.
Introduction to Computer Graphics with WebGL
Interactive Computer Graphics CS 418 – Fall 2017 Indexed Meshes Transformations Background Imagery:
Introduction to Computer Graphics with WebGL
Graphics CSCI 343, Fall 2017 Lecture 13 More on WebGL
Introduction to Computer Graphics with WebGL
Application Development with WebGL University of New Mexico
Introduction to Computer Graphics with WebGL
Objectives Simple Shaders Programming shaders with GLSL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Programming with OpenGL Part 2: Complete Programs
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Chapter VI OpenGL ES and Shader
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Building Models Ed Angel Professor Emeritus of Computer Science
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Hierarchical Modeling & Constructive Solid Geometry
Introduction to Computer Graphics with WebGL
Isaac Gang University of Mary Hardin-Baylor
Introduction to Computer Graphics with WebGL
Computer Graphics Transformations
Textures in WebGL.
Introduction to Computer Graphics with WebGL
Presentation transcript:

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 aa bc 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) // array element buffer var iBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW); // color array atrribute buffer var cBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW ); // vertex array attribute buffer var vBuffer = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );

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 function initNodes(Id) { var m = mat4(); switch(Id) { case leftUpperArmId: m = translate(-(torsoWidth+upperArmWidth), 0.9*torsoHeight, 0.0); m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0)); figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId ); break; }

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 var render = function() { gl.clear( gl.COLOR_BUFFER_BIT ); traverse(torsoId); requestAnimFrame(render); }