4. To cut off a part, specify the UV coordinate less than 1
Cut off a part of a texture
U
V
0.0
0.0
1.0
1.00.25 0.5 0.75
0.5
0.25
5. Create a plane dice
Copy “dice.png” to your
“Resources/Imgaes” folder
Draw a whole image
Cut off the part of “1” and draw
Cut off another number and draw
Work2-1
6. 3D geometry
Right-handed coordinate system Left-handed coordinate system
X
Y
Z
X
Y
Z
• Mathematics
• Most of modeling tools
• OpenGL, etc.
• DirectX
• Unity, etc.
7. Transform calculation of 3-D graphics
Difference between RHS and LHS
x'
y'
z'
w'
æ
è
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
=
a b c d
e f g h
i j k l
m n o p
æ
è
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
x
y
z
w
æ
è
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
x' y' z' w'( )= x y z w( )
a b c d
e f g h
i j k l
m n o p
æ
è
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
RHS (Right-handed system) uses column vector as vectors, i.e.
position, direction, etc.
LHS (Left-handed system) uses row vector as vectors, i.e. position,
direction, etc.
8. 3-D Transformation
Model space World space View space Screen space
Y
XZ
Y
XZ
Y
XZ
Projection space
Cy C
x C
z
World
transform
View
transform
Projection
transform
Screen
transform
10. Transform from the world space to the camera space
View transformation
// Cocos-2d-x
Mat4::createLookAt(eye, center, up, &modelViewMatrix);
X
Y
Z
eye
lookat
up
eye: Eye position (camera position)
lookat: Look at point (target to look)
up: Up vector (camera attitude)
11. Create a view matrix
Cont’d
X,Y,Z: Normalized basis vector of a model
X’,Y’,Z’: Normalized basis vector of a camera
E: Camera position
x’ = P X’
y’ = P Y’
z’ = P Z’
Xx ' Xy ' Xz ' -(E'· X')
Yx ' Yy ' Yz ' -(E·Y ')
Zx ' Zy ' Zz ' -(E ·Z ')
0 0 0 1
æ
è
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
Z
X
X’
Z’
P
x
z
x’z’
E
12. FOVy – Filed of view (Vertical)
Perspective projection
transformation
FOVy
Near clip plane Far clip plane
// Cocos-2d-x
Mat4::createPerspective(60, (GLfloat)width / height, 0.1f, 100.0f, &projectionMatrix);
width
height
Aspect ratio
= width / height
Transform from the view space to the normalized 2-D space
-1≤ x ≤ 1
-1 ≤ y ≤ 1
-1 ≤ z ≤ 1
13. Draw the normalized pixel data to a screen
Screen transformation
Projection space
1
1
-1
-1
14. Draw a cubic dice not using a camera
Copy the whole project to a new project “WSSample2”
Create a cube vertices and draw
For lighting, prepare normal vectors (Nx,Ny,Nz)
Work 2-2
GLfloat vertices[] = {
// x y z Nx Ny Nz R G B A U V
-1.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, // 1
-1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.25f,
1.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.25f, 0.0f,
1.0f, 1.0f, -1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.25f, 0.0f,
-1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.25f,
1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.25f, 0.25f,
// snip…
21. Rotation
Around X,Y or Z axis
Around any vector
Affine transformation 2
Mat4 worldMatrix;
rotY += 1.0f * M_PI / 180; // Convert from degree to
radian
Mat4::createRotationY(rotY, &worldMatrix);
getGLProgramState()->setUniformMat4("u_world", worldMatrix);
Ex. Rotate 1 degree per frame along Y-
axis
23. Scale a model
Scaling matrix (MS)
Rotate a model
Rotation matrix around X or Y or Z axis (MRx, MRy, MRz)
Translate a model
Translation matrix (MT)
Combine transformations by multiplying transformation
matrices
MS * MR * MT
MS * MT * MR
Try other combinations
Work 2-5
24. Draw order problem
Use a depth buffer (2-D array, elements are for pixels)
Store the z-coordinate of the pixel.
If another pixel is rendered in the same pixel, compare its z-
coordinate with the buffer value to decide whether replace or not.
Usually used 16bit depth (unsigned short, 0 – 65535)
Buffer is to be cleared first each frame
Depth buffer and depth test
glClear(GL_DEPTH_BUFFER_BIT | GL_COLOR_BUFFER_BIT);
glEnable(GL_DEPTH_TEST);
25. Create a 3-D Camera class, “Camera3d” for
Cocos-2d-x
Work 2-6