![Page 1: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/1.jpg)
Interactive Computer Graphics
CS 418 – Spring 2015
Mesh Rendering, Transformation, Camera Viewing and Projection
in OpenGL
![Page 2: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/2.jpg)
Agenda
Mesh formatDrawing with OpenGLMatrix transformation
![Page 3: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/3.jpg)
How to Load Your Mesh
Customized .obj 3D models with colors. Won’t work with a obj reader code. You should have skills to write a simple
parser loading the files.
![Page 4: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/4.jpg)
Our Mesh File Format
You will have a list of vertex attributes : Positions (v), Colors (vc), etc.
Vertices are indexed according to their orders in file.
Another indexed list for triangles ( f ) Ex : Triangle 1 is formed by
vertex v1,v2 and v3
v 0.0 0.0 v 0.0 0.0 0.00.0
v 1.0 0.0 v 1.0 0.0 0.00.0
……....
vc 1 0 0 vc 1 0 0
vc 0 0 1vc 0 0 1
……....
f 1 2 3f 1 2 3
f 1 3 4f 1 3 4
……....
Position v1Position v1
Position v2Position v2
Color v1Color v1
Color v2Color v2
![Page 5: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/5.jpg)
Exercise
v 0.0 0.0 0.0v 1.0 0.0 0.0v 1.0 1.0 0.0v 0.0 1.0 0.0
vc 1 0 0 vc 0 0 1vc 1 0 0vc 0 1 0
f 1 2 3f 1 3 4
Draw the object from the given vertex/face list :
![Page 6: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/6.jpg)
Mesh Structure
Face-index List : Recommend to use/implement basic
matrix/vector structure and operations. (ex : libgfx )
Store vertex attributes in one array Store face-vertex indices in another array. When rendering, iterate through each face,
and grab vertex attributes based on Indices.
More complicated structure is possible Half-Edge, etc.
![Page 7: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/7.jpg)
Display Your Mesh
Assuming you’ve set up the view/projection transformation.
Display one triangleglBegin(GL_TRIANGLES);
glVertex3f(x1,y1,z1);glVertex3f(x2,y2,z2);glVertex3f(x3,y3,z3);
glEnd();
glBeginDecide which primitive you will display. GL_POINTS, GL_LINES, GL_TRIANGLES, etc.
Display a mesh is similar, just go through each triangle in the mesh. ( Put loop between glBegin/glEnd)
![Page 8: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/8.jpg)
Color Your Mesh
glColor3fSet R,G,B color Range from 0.0~1.0. (1.0,1.0,1.0) is white.
Use the provided colors, or generate your own.
Ex : Color one triangle with Red, Green, Blue at each vertex
glBegin(GL_TRIANGLES);glColor3f(1.0,0.0,0.0); //redglVertex3f(x1,y1,z1);glColor3f(0.0,1.0,0.0); // greenglVertex3f(x2,y2,z2);glColor3f(0.0,0.0,1.0); // blueglVertex3f(x3,y3,z3);
glEnd();
![Page 9: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/9.jpg)
Vertex Arrays
Vertex Arrays are retained in the sense that everything is sent at once.
GLfloat vertices[] = {...}; // 8 of vertex cordsGLfloat colors[] = {...}; // 8 of vertex colors GLubyte indices[] = {0,1,2, 2,3,0, // 36 of indices 0,3,4, 4,5,0, 0,5,6, 6,1,0, 1,6,7, 7,2,1, 7,4,3, 3,2,7, 4,7,6, 6,5,4}; ...
glEnableClientState(GL_VERTEX_ARRAY); glVertexPointer(3, GL_FLOAT, 0, vertices);glColorPointer(3, GL_FLOAT, 0, colors);
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indices);
glDisableClientState(GL_VERTEX_ARRAY);
![Page 10: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/10.jpg)
Vertex Buffer Object 1
VBO are closer to true retained mode rendering because the data is actually transferred over to GPU memoryGLuint vboId;GLfloat* vertices = new GLfloat[vCount*4]
glGenBuffersARB(1, &vboId);
glBindBufferARB(GL_ARRAY_BUFFER_ARB, vboId); glBufferDataARB(GL_ARRAY_BUFFER_ARB, dataSize, vertices, GL_STATIC_DRAW_ARB);
delete [] vertices;//notice we are not managing the memoryglDeleteBuffersARB(1, &vboId);
![Page 11: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/11.jpg)
Vertex Buffer Object 2
Draws use the same commands as Vertex Arrays with null pointers
glBindBufferARB(GL_ARRAY_BUFFER_ARB, vboId1); glBindBufferARB(GL_ELEMENT_ARRAY_BUFFER_ARB, vboId2);
glEnableClientState(GL_VERTEX_ARRAY);glVertexPointer(3, GL_FLOAT, 0, 0); glDrawElements(GL_QUADS, 24, GL_UNSIGNED_BYTE, 0); glDisableClientState(GL_VERTEX_ARRAY);
glBindBufferARB(GL_ARRAY_BUFFER_ARB, 0); glBindBufferARB(GL_ELEMENT_ARRAY_BUFFER_ARB, 0);
![Page 12: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/12.jpg)
OpenGL Matrix Transformation
Essential for interactive viewing/animation.
Things to Take Home #1 : You are modifying a global “current
matrix” #2 : The “last” transformation gets applied
“first”. #3 : OpenGL store matrix in “Column
Major”
![Page 13: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/13.jpg)
glScalef (2.5, 2.5, 1.0);
Review of Matrix Ops.Review of Matrix Ops.
![Page 14: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/14.jpg)
Scaling
![Page 15: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/15.jpg)
Translation
glTranslatef(2.5,2.0,0.0);
![Page 16: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/16.jpg)
Translation
![Page 17: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/17.jpg)
Rotation
glRotatef(90.0, 0.0, 0.0, 1.0)
![Page 18: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/18.jpg)
Rotation
You may also specify rotation about an You may also specify rotation about an arbitrary axis.arbitrary axis.
![Page 19: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/19.jpg)
#1 Current Matrix
An OpenGL matrix operation affects a global 4x4 matrix.
It is the top matrix in the matrix stack you are currently working on. glMatrixMode
Projection Matrix
Model View Matrix
Current MatrixglMatrixMode(GL_MODEL_VIEW)
glMatrixMode(GL_PROJECTION)
glRotatef(1.0,0.0,0.0,1.0);
gluPerspective(…);
M1=M1*R
M2=M2*P
![Page 20: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/20.jpg)
#1 Current Matrix
When rendering, both of them are combined to transform the object.
MVP = (Projection)*(Model View)
Projection Matrix
Model View Matrix
V_Transform = MVP * V
Object V
Transform
V_Transform
MVP
![Page 21: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/21.jpg)
#2 Last Transform Applied First OpenGL Post-multiply new transformation
with current matrix when we call glRotate, glTranslate, or glScale.
The last transformation is applied first to the object.
glRotatef(1.0,0.0,0.0,1.0);
M=I
glLoadIdentity();
R
glTranslatef(0.5,0.5,0.5);
T
glRotatef(1.0,0.0,0.0,1.0);
glTranslatef(0.5,0.5,0.5);
RTM=I
glLoadIdentity();
![Page 22: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/22.jpg)
Exercise
Draw the result of the following OpenGL transformation code.
glMatrixMode(GL_MODELVIEW);glLoadIdentity();glScalef(1.5, 1.0, 1.0);glRotatef(90.0, 0.0, 0.0, 1.0);glTranslatef(2.0, 2.0, 0.0);draw_teapot_image();
![Page 23: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/23.jpg)
Exercise
glMatrixMode(GL_MODELVglMatrixMode(GL_MODELVIEW);IEW);
glLoadIdentity();glLoadIdentity();glScalef(1.5, 1.0, 1.0);glScalef(1.5, 1.0, 1.0);glRotatef(90.0, 0.0, 0.0, glRotatef(90.0, 0.0, 0.0,
1.0);1.0);glTranslatef(2.0, 2.0, 0.0);glTranslatef(2.0, 2.0, 0.0);draw_teapot_image();draw_teapot_image();
![Page 24: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/24.jpg)
Exercise
glMatrixMode(GL_MODELVglMatrixMode(GL_MODELVIEW);IEW);
glLoadIdentity();glLoadIdentity();glScalef(1.5, 1.0, 1.0);glScalef(1.5, 1.0, 1.0);glRotatef(90.0, 0.0, 0.0, glRotatef(90.0, 0.0, 0.0,
1.0);1.0);glTranslatef(2.0, 2.0, 0.0);glTranslatef(2.0, 2.0, 0.0);draw_teapot_image();draw_teapot_image();
![Page 25: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/25.jpg)
Exercise
glMatrixMode(GL_MODELVglMatrixMode(GL_MODELVIEW);IEW);
glLoadIdentity();glLoadIdentity();glScalef(1.5, 1.0, 1.0);glScalef(1.5, 1.0, 1.0);glRotatef(90.0, 0.0, 0.0, glRotatef(90.0, 0.0, 0.0,
1.0);1.0);glTranslatef(2.0, 2.0, 0.0);glTranslatef(2.0, 2.0, 0.0);draw_teapot_image();draw_teapot_image();
![Page 26: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/26.jpg)
Exercise
glMatrixMode(GL_MODELVglMatrixMode(GL_MODELVIEW);IEW);
glLoadIdentity();glLoadIdentity();glScalef(1.5, 1.0, 1.0);glScalef(1.5, 1.0, 1.0);glRotatef(90.0, 0.0, 0.0, glRotatef(90.0, 0.0, 0.0,
1.0);1.0);glTranslatef(2.0, 2.0, 0.0);glTranslatef(2.0, 2.0, 0.0);draw_teapot_image();draw_teapot_image();
![Page 27: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/27.jpg)
Useful OpenGL Matrix Ops.
glLoadIdentity : M = I
glScale : M = MS
glTranslate : M = MT
glRotate : Specify rotation axis, angle. M = MR
![Page 28: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/28.jpg)
Column Major
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
2D array in C :
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12 16
Matrix in OpenGL :
1 2 3 4 5 6 7 8 9 10
11
12
13
14
15
16
Given a 1D array of 16 floats :
![Page 29: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/29.jpg)
Pre-multiply ?
What to do if you want to pre-multiply the matrix ?
M=RM ? Make use of “glGetFloat” &
“glMultMatrix”.glLoadIdentity();
glGetFloat(MODEL_VIEW,tempM);
glTranslatef(0.3,0.3,0.2);
glLoadIdentity();
glMultMatrix(tempM);
glRotatef(1.0,0.0,0.0,1.0);
M=ITtempM=
M=I R tempM
Useful for updating transformation with UI control.
![Page 30: Interactive Computer Graphics CS 418 – Spring 2015 Mesh Rendering, Transformation, Camera Viewing and Projection in OpenGL TA: Zhicheng Yan Sushma S Kini](https://reader036.vdocuments.us/reader036/viewer/2022070400/56649edc5503460f94bec805/html5/thumbnails/30.jpg)
Q&A