What you have to know about IGDA VIETNAM, HA NOI 17 th September 2010

1. What you have to know about IGDA VIETNAM, HA NOI17th September 2010 3D 3D

2. Content of the presentation • Introduction to 3D • 3D object’s structure • 3D Data integration • Modeling • Texturing/Shading • Animation • Tools

3. LEXICON 3D Space: Không gian 3D Front/Back/Left/Right/Top/Bottom: Trước/Sau/Trái/Phải/Trên/Dưới Matrix: Ma trận Transformation: Phép biến đổi Translation: Dịch chuyển Rotation: Xoay Scale: Biến đổi tỉ lệ Vertical: Chiều ngang Horizontal: Chiều dọc Depth: Chiều sâu Axis: Trục tọa độ Coordinate: Tọa độ Introduction to 3D in game • 3D Space description

4. Introduction to 3D in game • 3D Space description • 3 dimensions • X: horizontal axis • Y: vertical axis • Z: depth axis • Depth buffer= Z values from view point. • 3D Transformation Matrices

5. LEXICON View: Khung nhìn Camera: Camera Buffer: Bộ đệm Local coordinates: Tọa độ địa phương World coordinates: Tọa độ toàn cục Clip plan: Mặt phẳng cắt – dùng để cắt bỏ các đối tượng ở quá xa Near: Gần Far: Xa Render: Kết xuất Perspective: Phối cảnh Orthographic: Phép chiếu trực giao Focus: Điểm hội tụ Introduction to 3D in game • View / Camera

6. Introduction to 3D in game • View / Camera • Clip planes • Near: the “screen position” • Far: How far we can see. • Screen coordinates based on Camera local coordinates from near clip plane. The position of the camera represents the eyes of the user in the virtual 3D world. • Only the part of the 3D space between the clip planes is rendered and displayed on the screen.

7. LEXICON Object: Đối tượng Polygon: Mặt Edge: Cạnh Vertex/Vertices: Điểm Surface: Bề mặt Mesh: Đối tượng 3D dạng lưới Hierarchy: Cây Parent: Cha Children: Con 3D object’s structure • Object • Coordinates in world space • A list of triangles that makes its surface= Mesh

8. 3D object’s structure • Polygons • Made of triangles

9. 3D object’s structure • Triangles • Made of 3 edges

10. 3D object’s structure • Edges • Made of 2 vertices

11. 3D object’s structure • Vertices • Coordinates in Object’s local reference

12. Teapot Cap 3D object’s structure • Hierarchy (inheritance) • Parent/Children relationship • The Parent’s coordinates are in the world’s space.  Transform the Parent will transform the Children • The Children’s coordinates are in the Parent’s local system.  Transform a Child won’t transform the Parent. Cap is a child of Teapot.

13. 3D Data integration • Make the game engine able to “read” the 3D data to display an object • Check the Game Engine’s 3D format compatibilities • Choose the right 3D format to export the data: OBJ, DAE, FBX… • If you develop your own 3D data integration system you may: • Prefer export ASCII format (text) rather than binary format: easier to read, modify and debug. • Generate your own binary file from that to include only the required data and add game parameters (about physics, level, characters, GUI etc…). • Example of a cube:

14. 3D Data integration # # object Box01 # v 0.0000 0.0000 0.0000 v 0.0000 1.0000 0.0000 v 1.0000 1.0000 0.0000 v 1.0000 0.0000 0.0000 v 0.0000 0.0000 1.0000 v 1.0000 0.0000 1.0000 v 1.0000 1.0000 1.0000 v 0.0000 1.0000 1.0000 # 8 vertices • OBJ format: vn 0.0000 0.0000 -1.0000 vn 0.0000 0.0000 1.0000 vn 0.0000 -1.0000 0.0000 vn 1.0000 0.0000 0.0000 vn 0.0000 1.0000 0.0000 vn -1.0000 0.0000 0.0000 # 6 vertex normals vt 1.0000 0.0000 0.0000 vt 1.0000 1.0000 0.0000 vt 0.0000 1.0000 0.0000 vt 0.0000 0.0000 0.0000 # 4 texture coords g Box01 usemtl wire_154215229 s 2 f 1/1/1 2/2/1 3/3/1 4/4/1 s 4 f 5/4/2 6/1/2 7/2/2 8/3/2 s 8 f 1/4/3 4/1/3 6/2/3 5/3/3 s 16 f 4/4/4 3/1/4 7/2/4 6/3/4 s 32 f 3/4/5 2/1/5 8/2/5 7/3/5 s 64 f 2/4/6 1/1/6 5/2/6 8/3/6 # 6 polygons

15. 3D Data integration …<geometry id="geom-Box01" name="Box01"> <mesh> <source id="geom-Box01-positions"> <float_array id="geom-Box01-positions-array" count="24">0 0 0 1 0 0 0 1 0 1 1 0 0 0 1 1 0 1 0 1 1 1 1 … <source id="geom-Box01-normals"> <float_array id="geom-Box01-normals-array" count="72">0 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 1 0 0 1 0 0 1 0 0 1 0 -1 0 0 -1 0 0 -1 0 0 -1 0 1 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 -1 0 0 -1 0 0 -1 0 0 -1 0 0 … <source id="geom-Box01-map1"> <float_array id="geom-Box01-map1-array" count="36">0 0 0 1 0 0 0 1 0 1 1 0 0 0 0 1 0 0 0 1 0 1 1 0 0 0 0 1 0 0 0 1 0 1 1 0 <vertices id="geom-Box01-vertices"> <input semantic="POSITION" source="#geom-Box01-positions"/> </vertices> <triangles material="ColorMaterial" count="12"> <input semantic="VERTEX" source="#geom-Box01-vertices" offset="0"/> <input semantic="NORMAL" source="#geom-Box01-normals" offset="1"/> <input semantic="TEXCOORD" source="#geom-Box01-map1" offset="2" set="1"/> <p>3 0 10 1 1 8 0 2 9 0 2 9 2 3 11 3 0 10 7 4 11 6 5 10 4 6 8 4 6 8 5 7 9 7 4 11 5 8 7 4 9 6 0 10 4 0 10 4 1 11 5 5 8 7 7 12 3 5 13 2 1 14 0 1 14 0 3 15 1 7 12 3 6 16 7 7 17 6 3 18 4 3 18 4 2 19 5 6 16 7 4 20 3 6 21 2 2 22 0 2 22 0 0 23 1 4 20 3</p> … • DAE format:

16. Q&Aabout 3D object’s structure 3D Data integration

17. LEXICON Transformation: Phép biến đổi Translation: Dịch chuyển Rotation: Xoay Scale: Biến đổi tỉ lệ Add: Thêm Remove: Bỏ đi Copy: Sao chép Extrude: Tạo khối Chamfer: Cắt cạnh Optimization: Tối ưu hóa Back face culling: Khử mặt khuất Smoothing: Làm mượt Modeling • Mesh (Vertex/Edge/Polygon) • Transformation: translation/rotation/scale • Modification: add/remove/copy/extrude/chamfer… • Start modeling from a primitive: plane,cube,sphere…

18. Modeling • Basic optimization • Adapt the number of polygons to the configuration of the device. 4000 polygons 2200 polygons

19. Modeling • Basic optimization • Minimum of polygon but the shape must be as good as possible.

20. Modeling • Basic optimization • Back Face Culling: In most of the cases, only one face of an object’s polygon is visible. To avoid to perform rendering calculation for the “inside” face, use the “Back Face Culling”.

21. Q&Aabout 3D Modeling

22. LEXICON Texture: Là một hình ảnh dùng để áp lên bề mặt đối tượng 3D Pixel (Picture Element): Điểm ảnh Texel (Texture Element): Là thành tố cơ bản của texture. Một texture được cấu tạo bởi tập hợp texel, lặp đi lặp lại. Image Resolution: Độ phân giải hình ảnh Material: Vật liệu Map: Thuật toán để tạo hiệu ứng bề mặt trên vật thể 3D Diffuse color Map: Thuật toán tạo ánh sáng khuyếch tán trên bề mặt 3D Specular Map: Thuật toán tạo ánh sáng phản chiếu trên bề mặt Normal Map: Thuật toán tạo hiệu ứng gồ ghề trên bề mặt Height Map: Thuật toán tạo địa hình 3D từ một tấm ảnh Shading: Quá trình tô màu cho bề mặt 3D dựa trên góc và khoảng cách đến nguồn sáng Shadow: Bóng đổ Light: Ánh sáng Texturing/Shading • The texture • Determine the aspect of a triangle’s surface by applying a pixel of a picture to a texel on a surface. • It’s the most popular way to apply detailed colors on a 3D model (other type: procedural texture).

23. Texturing/Shading • UV coordinates from an image in a 2D space mapped on a triangle in a 3D space.

24. Texturing • Basic optimization • Use sizes that are power of 2 for width and height : …,128 ,256 ,512 ,… • Minimum size but the aspect must be as good as possible: 1 texel = 1 pixel • Use texture tiling to repeat a texture on a large surface.

25. Texturing/Shading • Material= Properties of a surface such as transparency, roughness, softness etc… to render material like plastic, metal, wood, glass etc…

26. Texturing/Shading • Basic shading • The shading = How the light interacts with the object’s surface.

27. Texturing/Shading • Basic shading • Flat: the Light is reflected following the normal vector of each polygon as if they are separated. Very fast processing. NORMAL VECTOR

28. Texturing/Shading Henri Gouraud (1944): French computer scientist, inventor of Gouraud Shading. Graduated at the University of Utah. • Basic shading • Gouraud: the Light is reflected following vectors from each vertex that are calculated by making an average of the normal vector of each polygon. Fast processing. NORMAL VECTOR

29. Texturing/Shading Bùi Tường Phong(1942-1975): Vietnamese computer graphics researcher born in Hanoi and living in France, inventor of Phong Shading and Phong reflection model. Graduated at the University of Utah. • Basic shading • Phong: the Light is reflected following interpolations of the normal vector of each polygon to simulate a curved surface. Slow processing. NORMAL VECTOR

30. Texturing/Shading • Advanced shading • The Shaders: Programs that modify the 3D render by applying calculation in the GPU (Graphics Processing Unit). • Vertex shader: Can manipulate Vertex’s position, color or Texture’s coordinates (UV). • Geometry shader: Can add or remove vertices of a mesh. • Pixel shader: Calculate the color of individual pixels.

31. Q&Aabout Texture/Shading

32. LEXICON Animation: Diễn họat Time Lime: Khung thời gian Frame: Khung Key frame: Khung chính Interpolation: Nội suy Curve: Đường cong Bone: Xương Rigging: Gắn xương Animation • Principles • Time line= Set the duration of an animation. • Frame = Corresponds to the display of one image • Frame rate = How fast the frame are displayed. It’s usually measured in frame per second (FPS) • Key Frame= Frame in which main transformations are operated. • Frame Interpolation = Calculate intermediate frames between two key frames following animation curves. • Methods to animate an object: • Transform the object at key frames. • Use bones that will influence the object’s surface. • Morphing

33. Animation • 1st method: • Transform the object at key frames. • Arrange the animation curve.

34. Animation • 2nd method: • Create a bones structure • Apply the influence of the bones on the object surface. • Animate the bones.

35. Animation • 3rd method: • Duplicate the 3D object • Transform the vertices of the copies. • Morph the object by applying a level of similarity with each of its copies.

36. Q&Aabout Animation

37. Tools • 3D Modeling/Animation • 3DS Max • Maya • XSI Softimage • Zbrush • Blender (free)

38. Tools • Texture • Photoshop • Paint Shop Pro • Painter • Gimp (free) • Or any image editor

39. Q&A