Programming Assignment II
Tutorial on 3D Modeling
COMP3271 Tutorial
Submission
Deadline:
11:59 PM Nov 04, 2022
Submission:
MainFrame.cpp
If you want to change any other files or implement the program
without the template, please email me (qindafei@connect.hku.hk)
before submission.
Outline
3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment II
About the Template
About the Task
Mouse controlled model editing
World space visualization
Outline
3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment II
About the Template
About the Task
Mouse controlled model editing
World space visualization
Draw Geometric Objects –3D
/ / Object¶s coordinatesglVertex3f(-0.5, 0.5,0.5);
glVertex3f(0.5, 0.5, 0.6);
glVertex3f(0.5, -0.5,1.0);
glEnd();
void glVertex3{b,s,i,f,ub,us,ui}(TYPE x, TYPE y, TYPEz);
void glVertex3{b,s,i,f,ub,us,ui}v(const TYPE*v);
Example1: draw a triangle in 3D space
glBegin(GL_TRIANGLES); // Specify object type
Draw Geometric Objects –3D
Example2: draw acube
(0.5,-0.5,-0.5)
(0.5,-0.5,0.5)
Draw Geometric Objects –3D
Example2: draw acube
(0.5,-0.5,-0.5)
(0.5,-0.5,0.5)
(0.5,0.5,-0.5)
(-0.5,0.5,-0.5)
(-0.5,-0.5,0.5)
(-0.5,0.5,0.5)
(0.5,0.5,0.5)
(-0.5,-0.5,-0.5)
Draw Geometric Objects ±3D
Draw Geometric Objects –3D
Coordinate system
1. Object or modelcoordinates
2. World coordinates
3. Eye (or Camera)coordinates
4. Clip coordinates
5. Normalized device coordinates
6. Window (or screen)coordinates
3DRendering
3DRendering
Choose the transformation matrix
Projectionmatrix
Define the canvas in 2D case and the viewing volume in 3Dcase.
glOrtho, glm͗͗ peƌƐpecƚiǀe ͕͙
Modelviewmatrix
Define the transformation of thecamera and objects.
glTranslate, glRotate,glScale
glm::lookAt, glm::translate, glm::rotate, glm::scale
Choose the matrix to operatewith:
void glMatrixMode(MatrixType);
GL_PROJECTION : Choose projection matrix
GL_MODELVIEW : Choose model viewmatrix
3D Rendering
3D Rendering
3D Rendering
3D Rendering
3DRendering
As a programmer, you need to do the following things:
- Specify the location/parameters of camera.
- Specify the geometry of the objects.
- Specify the lights (optional).
OpenGL will compute the result 2D image
3D Rendering
Specify the extrinsic parameters ofcamera
glm::lookAt(glm::vec3 eye,glm::vec3 center,glm::vec3 up);
Returns a 4x4 transformation matrix.
eye: Position of the eye
center: Position where the camera is looking
at.
up: Direction of upvector.
3D Rendering
Define the viewingvolume
Perspective projection
glm::perspective(fov, aspect, near,far);
Purpose: Define the perspective projectionmatrix
fov:specify the angleof sceneview in model space.
aspect: specify the scene view height/width ratio; near
: distance of near plane from eye point(>0). far : distance
of far plane from eyepoint(>near).
3D Rendering
Define the viewingvolume
Orthogonalprojection
glOrtho(Xmin, Xmax, Ymin, Ymax, near,far)
Outline
3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment 2
About the Template
About the Task
Mouse controlled model editing
Word space visualization
Template Provided Functions
Simple 3D primitive rendering
Face subdivision
Navigate editing mode by the number keys
(1: rotation, 2: translation, 3: face subdivision,
4: extrusion)
Viewpoint rotation / view scaling
viewpoint
rotation
view
scaling
object
editing
Template Structure
class MainFrame
camera_
mesh_
glm::mat4x4 view_mat_ (world to
camera matrix)
glm::mat4x4 projection_mat_(camera
projection matrix)
std::vector
vertices_;
std::vector faces_; (quad face)
glm::vec3 center_;
*Refer to the headers for more information
Transformation Conventions
World coordinates Eye coordinates / Camera
coordinates
Screen coordinatesNDC coordinates
-1
x
y
1
-1
1
0
width
height
View transformation
camera_.view_mat_
Projection transformation
camera_.projection_mat_
About the Template
24
Initial GL Setting
Initial Viewport
World Frame
Visualization
Display
To be finished
Finished
Your Task
Object Transformation
Draw 3D Object
Outline
3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment
About the Template
About the Task
Mouse controlled model editing
World space visualization
Your Tasks
26
Mouse controlled model editing ;in ͚LeftMouseMove͛ functionΎͿ
Object Translation (View plane aligned)
Object Rotation (Trackball style)
Object Extrusion (Face normal aligned)
ϯD world space visualization ;in ͚VisualizeWorldSpace͛ functionΎͿ
ΎBoth functions are in ͚MainFrame͘cpp͛
Outline
3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment
About the Template
About the Task
Mouse controlled model editing
World space visualization
Basic Mouse Control
28
Mouse Click Mouse Move Mouse Release
LeftMouseClick(…)
Setup Editing Mode
LeftMouseMove(…)
Apply Transformation
LeftMouseRelease(…)
Commit
Transformation &
Exit Editing Mode
To be finished
Implementation Outline – 3D object modeling
Implementation Outline – Interface of LeftMouseMove()
Input
Object information
mesh_ (class member)
View information
camera_ (class member)
2D screen position
Start mouse position in screen coordinate (Sstart): start_x , start_y
Current mouse position in screen coordinate (Scurr): end_x, end_y
To-do
Find the corresponding transformation matrices and multiply it to the object.
30
Your Tasks
31
Mouse controlled model editing ;in ͚LeftMouseMove͛ functionΎͿ
Object Translation (View plane aligned)
Object Rotation (Trackball style)
Object Extrusion (Face normal aligned)
World space visualization ;in ͚DrawWorldFrame͛ functionΎͿ
ΎBoth functions are in ͚MainFrame͘cpp͛
Task 1: Object Translation
32
Object Translation – Find the start & current position
33
Find Pstart and Pcurr corresponding to Sstart and Scurr
respectively.
Pstart is the intersected point of the object and the ray that
goes through Sstart.
Pcurr is on the ray ଵ that goes through Scurr.
Pcurr and Pstart should have the same z-value in camera
coordinates.
Some possible useful functions:
yglm::vec3 Screen2World(float scr_x, float scr_y, float camera_z);
ystd::tuple Screen2WorldRay(float scr_x, float scr_y);
ystd::tuple Mesh::FaceIntersection(const glm::vec3& o, const glm::vec3& d)
ݏݐݎݐ ݑݎݎ
ଵ
viewpoint
Object Translation – Construct translation
matrix
1, 0, 0, Pcurr[0] – Pstart[0]
0, 1, 0, Pcurr[1] – Pstart[1]
0, 0, 1, Pcurr[2] – Pstart[2]
0, 0, 0, 1
Or directly use glm::translate(glm::mat4x4(1.f), Pcurr - Pstart)
Identity matrix Translation vector
Object Translation - Procedure
Step 1: For the start mouse position Sstart, find Pstart in world coordinate
Step 2: For the current mouse position Scurr, find Pcurr in world coordinate
Step 3: Create the translation matrix (Pstart -> Pcurr)
Step 4: Apply the transformation
35
Your Tasks
36
Mouse controlled model editing ;in ͚LeftMouseMove͛ functionΎͿ
Object Translation (View plane aligned)
Object Rotation (Trackball style)
Object Extrusion (Face normal aligned)
World space visualization ;in ͚DrawWorldFrame͛ functionΎͿ
ΎBoth functions are in ͚MainFrame͘cpp͛
Task 2: Object Rotation
Object Rotation – Rotation About a Fixed Point
38
Move fixed point P to origin
Rotate around the origin
Move fixed point P back
ൌ ∗ ∗ ሺെሻ
Object Rotation – Construct the transformation matrix
39
mesh_.center_ is the fixed point. The overall transformation is
You may use glm::mat4x4 to do the matrix multiplications.
1, 0, 0, -center_[0]
0, 1, 0, -center_[1]
0, 0, 1, -center_[2]
0, 0, 0, 1
R
1, 0, 0, center_[0]
0, 1, 0, center_[1]
0, 0, 1, center_[2]
0, 0, 0, 1
Object Rotation – Find the rotation axis & rotation angle
2D vector V = Scurr ʹ Sstart = (Vx, Vy)
Rotate V by 90 degree to get vector A(Ax, Ay), here Ax=-Vy, Ay=Vx.
Project Sstart and Sstart + A to world coordinates to get Sstart͛ and
(Sstart н AͿ͛ with function ͚Screen2World͛͘
Rotation axis ra= normalize((Sstart +A)’-Sstart’) (world space)
Rotation angle =
(assign proper constant k by yourself)
40
ൈ || ൌ ൈ ݔଶ ݕଶ
(in 2D screen space)
rotation axis
start mouse position
Current mouse position
Sstart(start_x, start_y)
Scurr(curr_x, curr_y)
Object Rotation – Construct the Rotational Matrix
41
1. Use OpenGL library to compute R: 2. Or use GLM to compute R:
float R[16];
glPushMatrix();
glLoadIdentity();
//angle is the rotation angle, ra is the rotation axis
glRotatef(angle,ra[0],ra[1],ra[2]);
glGetFloatv(GL_MODELVIEW_MATRIX, R);
glPopMatrix();
glm::mat4x4 R;
R = glm::rotate(glm::mat4x4(1.f), angle, ra);
Object Rotation - Procedure
Step 1 : Find the rotation axis and determine the rotation angle
Step 2 : Get the rotation matrix about the rotation axis
Step 3 : For the current object:
(a) Translate the rotation center to the origin
(b) Rotate round the origin
(c) Translate the rotation center back
Step 4: Apply the transformation
42
Your Tasks
43
Mouse controlled model editing ;in ͚LeftMouseMove͛ functionΎͿ
Object Translation (View plane aligned)
Object Rotation (Trackball style)
Object Extrusion (Face normal aligned)
World space visualization ;in ͚DrawWorldFrame͛ functionΎͿ
ΎBoth functions are in ͚MainFrame͘cpp͛
Task 3: Object Extrusion
44
Face subdivision (provided) Face extrusion (to be finished)
Object Extrusion – Find the start & current position
Sstart/Pstart
Face normal ScurrPcurr
Object Extrusion – Find the start & current position
46
Find Pstart and Pcurr corresponding to Sstart and Scurr respectively.
Pstart is the intersected point of the object and the ray that goes
through Sstart.
Pcurr is on the ray ൌ ݏݐݎݐ ݐ ⋅ , where is the normal vector of
the intersected face.
Pcurr is the closest point to ray ଵ that goes through Scurr.
ൌ ݎݏݏ , ( means the shortest path between and ଵ)
Plane can be defined by and ray ଵ.
ݑݎݎ is the intersection point of Plane and line .
ݏݐݎݐ
ݑݎݎ
ଵ
viewpoint
Some possible useful functions:
yglm::vec3 Screen2World(float scr_x, float scr_y, float camera_z);
ystd::tuple Screen2WorldRay(float scr_x, float scr_y);
ystd::tuple Mesh::FaceIntersection(const glm::vec3& o, const glm::vec3& d)
Object Extrusion - Procedure
Step 1: For the current intersected face by ray , calculate the normal
Step 3: Calculate ݑݎݎ
Step 3: Create the translation matrix (ݏݐݎݐ -> ݑݎݎ)
Step 4: Apply the transformation
47
Outline
3D Modeling & 3D Rendering in OpenGL
3D Modeling & Interface Design ʹ Programming Assignment
About the Template
About the Task
Mouse controlled model editing
World space visualization
World Space Visualization
VisualizeWorldSpace(͙)
Called in each time of
rendering.
Add codes to function ͞VisualizeWorldSpace͟ in
file ͞MainFrame͘cpp͟
Examples
GLM(OpenGL Mathematics) operations
Vectors͗ glm͗͗vecϯ͕ glm͗͗vecϰ͕ ͙
Normalize ͗ glm͗͗normalize;͙Ϳ
Length ͗ glm͗͗length;͙Ϳ͖
Dot product ͗ glm͗͗dot;͙Ϳ͖
Cross product ͗ glm͗͗cross;͙Ϳ͖
Matrices͗ glm͗͗matϰxϰ͕ ͙
Matrices multiplication: operator *
Matrices inverse͗ glm͗͗inverse;͙Ϳ͖
͙
Some Notes
51
Memory layout of matrices in OpenGL is column-major (GLM is the
same):
The origin of the screen coordinate you get is at the bottom left
corner.
m0, m4, m8, m12
m1, m5, m9, m13
m2, m6, m10, m14
m3, m7, m11, m15
M=
Marking Scheme
52
Model Transformation
Translation (view plane aligned)
Rotation (trackball style)
Extrusion (face normal aligned)
World Space Visualization
Programming Structure
Hand-in
53
Submit your MainFrame.cpp file through Moodle.
Late Policy
50% off for the delay of each day.
Re-submission after deadline is treated as late submission.
NO PLAGIARISM!
References
OpenGL Official Site
http://www.opengl.org
GLM reference
http://glm.g-truc.net/0.9.8/api/index.html
Edward Angel, Interactive Computer Graphics, a top-down approach with OpenGL(5th
edition), Addison Wesley, 2009
Jackie Neider, Tom Davis, Mason Woo, OpenGL Programming Guide, Addison Wesley,
1996