International Graphics Workshop 2014 at Trident College of Information Technology from July 1st to July 29th in 2014.

1. International 5-days Graphics
Programming Workshop
using Cocos-2d-x
DAY 2
Trident College of Information Technology
Takao WADA

2. 1. Review
2. 3-D geometry
3. Using camera
4. World transformation
5. View transformation
6. Projection transformation
7. Affine Transformation
Agenda

3.  Vertex formats
 position + color + texture coordinate
 Shader variables
 attribute, uniform, varying
 Computing
 v_position = a_position;
 v_position.x = a_position.x + 0.5;
 v_position.xyz = a_position.yzx;
 Texture mapping
 UV coordinate
Review

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

9. World transform
Sx 0 0 0
0 Sy 0 0
0 0 Sz 0
0 0 0 1
æ
è
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
Scaling matrix
cosq 0 sinq 0
0 1 0 0
-sinq 0 cosq 0
0 0 0 1
æ
è
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
Rotation matrix
0 0 0 Tx
0 0 0 Ty
0 0 0 Tz
0 0 0 1
æ
è
ç
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
÷
Translation matrix
1 0 0 0
0 cosq -sinq 0
0 sinq cosq 0
0 0 0 1
æ
è
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
Around X-axis Around Y-axis Around Z-axis
cosq -sinq 0 0
sinq cosq 0 0
0 0 1 0
0 0 0 1
æ
è
ç
ç
ç
ç
ö
ø
÷
÷
÷
÷
 Scaling, rotation, translation, etc.

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…

15.  Use a camera
Work 2-3
X
Y
5
5

16.  Add a camera
Cont’d
bool DiceShaderNode::initWithVertex(const std::string &vert, const std::string &frag,
Texture2D* texture, int width, int height)
{
// snip..
// Pass the model-view matrix
Mat4 modelViewMatrix; // Model-View matrix
Vec3 eye(0, 10, 10); // Eye position
Vec3 lookat(0, 0, 0); // Lookat position
Vec3 up(0, 1, 0); // Up vector
Mat4::createLookAt(eye, lookat, up, &modelViewMatrix);
getGLProgramState()->setUniformMat4("u_modelView", modelViewMatrix);
// Pass the projection matrix
Mat4 projectionMatrix; // Projection matrix
Mat4::createPerspective(60, (GLfloat)width / height, 0.1f, 100.0f,
&projectionMatrix);
getGLProgramState()->setUniformMat4("u_proj", projectionMatrix);
//snip...
return true;
}

17.  Shader programs using a camera
Cont’d.
attribute vec4 a_position;
attribute vec3 a_normal;
attribute vec4 a_color;
attribute vec2 a_texCoord;
uniform mat4 u_modelView;
uniform mat4 u_proj;
varying vec2 v_texCoord;
void main()
{
// Set the transformed position
gl_Position = u_proj * u_modelView *
a_position;
// Pass through parameters
v_texCoord = a_texCoord;
}
uniform sampler2D u_texture0;
varying vec2 v_texCoord;
void main(void) {
gl_FragColor = texture2D(u_texture0,
v_texCoord);
}
Vertex shader Fragment shader

18.  Alter the value of FOV = Zooming
 0 < FOV < 180 (in degree)
Telephoto <- -> Wide
Work with a camera
Stereoscopic effect is
lost

19.  Change the FOV and/or the eye position
Work 2-4
FOV: 30 (deg.)
Eye: (5, 5, 5)
FOV: 120 (deg.)
Eye: (2, 2, 2)

20.  Scaling
Affine transformation 1
Mat4::createScale(2, 3, 4, &worldMatrix);
getGLProgramState()->setUniformMat4("u_world", worldMatrix);
// snip…
uniform mat4 u_world;
// snip…
void main()
{
// snip…
gl_Position = u_proj * u_modelView * u_world * a_position;
// snip…
}
Vertex shader

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

22.  Translation
Affine transformation 3
Mat4 worldMatrix;
Mat4::createTranslation(4, 0, 0, &worldMatrix);
Ex. Move to (4, 0, 0)

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