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