Upload
takao-wada
View
164
Download
0
Embed Size (px)
DESCRIPTION
International Graphics Workshop 2014 at Trident College of Information Technology from July 1st to July 29th in 2014.
Citation preview
International 5-days Graphics
Programming Workshop
using Cocos-2d-x
DAY 2
Trident College of Information Technology
Takao WADA
1. Review
2. 3-D geometry
3. Using camera
4. World transformation
5. View transformation
6. Projection transformation
7. Affine Transformation
Agenda
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
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
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
3D geometry
Right-handed coordinate system Left-handed coordinate system
X
Y
Z
X
YZ
• Mathematics
• Most of modeling tools
• OpenGL, etc.
• DirectX
• Unity, etc.
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.
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
transformProjection
transform
Screen
transform
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.
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)
Create a view matrix
Cont’d
X,Y,Z: Normalized basis vector of a modelX’,Y’,Z’: Normalized basis vector of a cameraE: 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
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
Draw the normalized pixel data to a screen
Screen transformation
Projection space
1
1
-1
-1
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…
Use a camera
Work 2-3
X
Y
5
5
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;
}
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
Alter the value of FOV = Zooming 0 < FOV < 180 (in degree)
Telephoto <- -> Wide
Work with a camera
Stereoscopic effect is
lost
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)
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
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
Translation
Affine transformation 3
Mat4 worldMatrix;
Mat4::createTranslation(4, 0, 0, &worldMatrix);
Ex. Move to (4, 0, 0)
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
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);
Create a 3-D Camera class, “Camera3d” for
Cocos-2d-x
Work 2-6