Downloaded 11 times
![ďŞ 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âŚ](https://image.slidesharecdn.com/graphicsworkshop2014-2-140729010959-phpapp02/85/Trident-International-Graphics-Workshop-2014-2-5-14-320.jpg)
Uploaded byTakao Wada
Trident International Graphics Workshop 2014 2/5
The document outlines the second day of an international 5-day graphics programming workshop focused on 3D geometry and transformations using Cocos2D-x. It covers topics such as camera usage, world and view transformations, projection, texture mapping, and the mathematics behind 3D graphics. The agenda includes practical work on dice modeling, shader programming, and managing the drawing order using depth buffers.
SoftwareâŚ
More Related Content
![[shaderx7] 4.1 Practical Cascaded Shadow Maps](https://cdn.slidesharecdn.com/ss_thumbnails/4-1practicalcascadedshadowmaps-100125174455-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Trident International Graphics Workshop 2014 2/5
Trident International Graphics Workshop 2014 2/5
- 1. International 5-days Graphics ProgrammingWorkshop using Cocos-2d-x DAY 2 Trident College of Information Technology Takao WADA
- 2. 1. Review 2. 3-Dgeometry 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 cutoff 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 aplane 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 coordinatesystem Left-handed coordinate system X Y Z X Y Z ⢠Mathematics ⢠Most of modeling tools ⢠OpenGL, etc. ⢠DirectX ⢠Unity, etc.
- 7. ďŞ Transform calculationof 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 spaceWorld 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 00 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 fromthe 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 aview 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 thenormalized pixel data to a screen Screen transformation Projection space 1 1 -1 -1
- 14. ďŞ Draw acubic 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 acamera Work 2-3 X Y 5 5
- 16. ďŞ Add acamera 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 programsusing 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 thevalue of FOV = Zooming ďŞ 0 < FOV < 180 (in degree) Telephoto <- -> Wide Work with a camera Stereoscopic effect is lost
- 19. ďŞ Change theFOV 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 transformation1 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 ďŞ AroundX,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 transformation3 Mat4 worldMatrix; Mat4::createTranslation(4, 0, 0, &worldMatrix); Ex. Move to (4, 0, 0)
- 23. ďŞ Scale amodel ďŞ 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 orderproblem ďŞ 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 a3-D Camera class, âCamera3dâ for Cocos-2d-x Work 2-6