Animation and Games Development

1. Animation and Games Development 242-515, Semester 1, 2014-2015 • Objective • to describe how shape meshes and models can be used, with emphasis on the OBJ and MTL 3D formats 10. Meshes and Models

2. Overview • Triangle Meshes • Three Custom Meshes • Phong and Gouraud Shading • jME Built-in Shapes • Using Models • Loading Models into a Grid • Using the Chase Camera • The Wavefront (.obj) Format • OBJ Cube Example • Other Geometric Models

3. 1. Triangle Meshes • Modern hardware is optimized for triangle meshes: • polygon meshes where every polygon is a triangle • There are three basic types of information in a triangle mesh: • Vertices • Edges • Faces face edge vertex

4. Triangle Mesh Information • Vertices. Each triangle has exactly three vertices. A vertex may be shared by many triangles. • Edges. An edge connects two vertices. Each triangle has three edges. Usually, each edge is shared by two faces. • Faces. The surfaces of the triangles. Usually stored as a list of three vertices, or a list of three edges.

5. A Pyramid +Y (0,2,0) (-1,0,-1) (1,0,-1) +X (-1,0,1) (1,0,1) +Z

6. Indexed Triangle Mesh • An indexed triangle mesh consists of a list of vertices, and a list of triangles indicies. +Y 4 (0,2,0) 3 (-1,0,-1) (1,0,-1) +X 2 (-1,0,1) (1,0,1) 0 1 +Z

7. Index Order and Front Faces • Each triangle is represented using three indices. • The index order is specified in terms of the front face of the triangle. • The index order follows the right-hand rule: • the front faces the direction of the thumb • the vertices indicies are listed in the counterclockwise order of the fingers

8. Example • The triangle on the front of the pyramid is facing along the +z axis. • This means that the triangle's indicies will be defined counter-clockwise as {0, 1, 4) • {1,4,0} or (4,0,1} also okay +Y 4 1 0 +X

9. jME Code Fragments PyramidMesh.java // Vertex positions in space Vector3f [] verts = new Vector3f[5]; verts[0] = new Vector3f(-1, 0, 1); verts[1] = new Vector3f(1, 0, 1); verts[2] = new Vector3f(1, 0, -1); verts[3] = new Vector3f(-1, 0, -1); verts[4] = new Vector3f(0, 2, 0); // the order in which mesh should be constructed from triangles int [] indexes = {0,3,1, 1,3,2, 2,3,4, 4,3,0, 0,1,4, 4,1,2};

10. // mesh creation Mesh mesh = new Mesh(); // Setting mesh buffers // the 2nd parameter is the number of components in each value mesh.setBuffer(Type.Position, 3, BufferUtils.createFloatBuffer(verts)); mesh.setBuffer(Type.Index, 1, BufferUtils.createIntBuffer(indexes)); mesh.updateBound();

11. // mesh is displayed as a white wireframe Geometry geom = new Geometry("pyramid", mesh); Material matWF = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); matWF.setColor("Color", ColorRGBA.White); geom.setMaterial(matWF); rootNode.attachChild(geom); RenderState rs = matWF.getAdditionalRenderState(); rs.setWireframe(true); // activate wireframe view rs.setFaceCullMode(RenderState.FaceCullMode.Off); cam.setLocation(new Vector3f(0.5f, 3.5f, 4)); cam.lookAt(Vector3f.ZERO, Vector3f.UNIT_Y); // look at the origin with +y-axis being up

12. Execution

13. 2. Three Custom Meshes CustomMeshes.java lit with a directional light solid blue colored verticies

14. The Basic Mesh +Y 2 3 (0,2,0) (2,2,0) (0,0,0) (2,0,0) +X 0 1

15. Create the Mesh Mesh mesh = new Mesh(); // Vertex positions in space Vector3f[] verts = new Vector3f[4]; verts[0] = new Vector3f(0,0,0); // can use any ordering verts[1] = new Vector3f(2,0,0); verts[2] = new Vector3f(0,2,0); verts[3] = new Vector3f(2,2,0); // the order in which mesh should be constructed from triangles int[] indexes = {2,0,1, 1,3,2}; // setting the buffers mesh.setBuffer(Type.Position, 3, BufferUtils.createFloatBuffer(verts)); mesh.setBuffer(Type.Index, 1, BufferUtils.createIntBuffer(indexes)); mesh.updateBound();

16. A Solid Blue Mesh Geometry geom = new Geometry("solid", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); geom.setMaterial(mat); geom.setLocalTranslation(-2, -3, 0); rootNode.attachChild(geom);

17. Coloured Verticies Mesh colMesh = mesh.clone(); Geometry colGeom = new Geometry ("colored", colMesh); Material colMat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); colMat.setBoolean("VertexColor", true); // each vertex requires 4 color values (R G B A) // in the same ordering as the vertices array, verts[] float[] colorArray = { 1f, 0f, 0f, 1f, // red 0.8f, 0.2f, 1f, 1f, // purple 0.8f, 0.2f, 1f, 1f, 0f, 0f, 1f, 1f }; // blue // Set the color buffer colMesh.setBuffer(Type.Color, 4, colorArray); colGeom.setMaterial(colMat); : 2 3 0 1

18. // Set the color buffer colMesh.setBuffer(Type.Color, 4, colorArray); colGeom.setMaterial(colMat); // move mesh so it doesn't overlap with the first one colGeom.setLocalTranslation(2, -3, 0); rootNode.attachChild(colGeom);

19. Lit Mesh, Reflecting Orange Mesh litMesh = mesh.clone(); Geometry litGeom = new Geometry ("lit", litMesh); Material litMat = new Material(assetManager, "Common/MatDefs/Light/Lighting.j3md"); litMat.setBoolean("UseMaterialColors", true); litMat.setColor("Diffuse", ColorRGBA.Orange); // reflection litMat.setColor("Specular", ColorRGBA.White); litMat.setFloat("Shininess", 12); litGeom.setMaterial(litMat); :

20. // verticies require normals for Phong lighting float[] normals = {0,0,1, 0,0,1, 0,0,1, 0,0,1}; // all of them point along +z axis litMesh.setBuffer(Type.Normal, 3, BufferUtils.createFloatBuffer(normals)); litGeom.setLocalTranslation(-2, 1, 0); rootNode.attachChild(litGeom); // add a white light to make the lit object visible DirectionalLight dl = new DirectionalLight(); dl.setDirection(new Vector3f(1, 0, -2).normalizeLocal()); dl.setColor(ColorRGBA.White); rootNode.addLight(dl);

21. Vertex Normals Diagram +Y 2 3 (2,2,0) (0,2,0) (2,0,0) (0,0,0) +X 0 1 directional light +Z

22. 3.3. Phong and Gouraud Shading • Phong shading interpolates normals between all the shape verticies. It uses these normals to calculate the shading for every pixel • many normals are generated • this is the default shading technique in jME • Gouraud shading calculates the shading for each vertex, and interpolates those shading values across every pixel • this requires less computation since only vertex normals are needed

23. Phong Shading in Action • The black arrows are the vertex normals. • The blue arrows are the interpolated surface normals. • These extra normals will make the hexagon look smoother on screen.

24. Phong shading makes polygons look smoother

25. 4. jME Built-in Shapes Dome (the cone and pyramid are special cases) Torus PQTorus Surface (a NURB)

26. Viewing Wireframe Shapes WireShape.java // Sphere mesh = new Sphere(16, 16, 1.0f); // Cylinder mesh = new Cylinder(20, 50, 1, 2, true); : Geometry geom = new Geometry("Shape", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.setColor("Color", ColorRGBA.Blue); geom.setMaterial(mat); rootNode.attachChild(geom); RenderState rs = mat.getAdditionalRenderState(); rs.setWireframe(true); // activate wireframe view rs.setFaceCullMode(RenderState.FaceCullMode.Off);

27. Dome, Cone, Pyramid Dome mesh = new Dome(Vector3f.ZERO, 32, 32, 1f, false); // center, planes, radialSamples, radius, insideView

28. Dome mesh = new Dome(Vector3f.ZERO, 2, 32, 1f, false); // cone: planes == 2 and radialSamples > 4

29. Dome mesh = new Dome(Vector3f.ZERO, 2, 4, 1f, false); // pyramid: planes == 2 and radialSamples == 4

30. Knotted Doughnuts (braids) • For more information see http://en.wikipedia.org/wiki/Torus_knot PQTorus mesh = new PQTorus(2, -3, 2, 1, 64, 64); // trefoil// (2,−3) torus knot

31. PQTorus mesh = new PQTorus(3, -8, 2, 0.5f, 64, 64); // Flower torus, (3, -8) torus knot

32. Shapes and Normals • jME's built-in shapes come with pre-calculated normals, which can be displayed visually with the ShowNormals.j3md material definition. • a color gradient is calculated from the model's surface normals. • no need for lights in the scene

33. Viewing a Cylinder's Normals public void simpleInitApp() { Cylinder mesh = new Cylinder(20, 50, 1, 2, true); Geometry geom = new Geometry("Shape", mesh); Material mat = new Material(assetManager, "Common/MatDefs/Misc/ShowNormals.j3md"); geom.setMaterial(mat); geom.rotate(FastMath.HALF_PI, 0, 0); rootNode.attachChild(geom); }

34. 5. Using Models • There are many free 3D models available online • e.g. at http://archive3d.net/, http://sketchup.google.com/3dwarehouse/ • see the list of websites athttp://www.hongkiat.com/blog/ 60-excellent-free-3d-model-websites/ • There are many 3D model formats: • e.g. 3D Studio (.3ds), Blender (.blend), Wavefront (.obj) • see the list at http://edutechwiki.unige.ch/en/3D_file_format

35. 3D Tools • Blender (http://www.blender.org/) • extremely powerful, free, open source 3D modeller • a confusing GUI which keeps being changed • use it to import models, and export them in a different format • 3DViewer (http://www.xs4all.nl/~karelse/3DViewer/) • very simple, free 3D viewer which is useful for checking models

36. 3D Formats in jME • jME can load models in two formats: • Wavefront .obj format • Ogre XML • I'll use .obj since it's a simple format, and is supported by most (all) 3D modeling tools. • the format is text-based, and is easy to edit manually (see later) • Blender can export Ogre XML files, but it requires the installation of a plugin • details at http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:3d_models

37. jME can also save Spatial nodes as .j3o binary files, which can be loaded later. • details at http://jmonkeyengine.org/wiki/doku.php/jme3:advanced:save_and_load • .j3o files can be viewed and edited by the jME SDK

38. 6. Loading Models into a Grid GridZoneLoad.java

39. The Grid Zone +Y 1 unit +X 1 unit 0.1 unit 1 unit +Z

40. Partial Code GridZoneLoad.java // globals private static final float STEP = 0.1f; // space between grid lines private static final float WIDTH = 1.0f; // extent along +axis of grid and box public void simpleInitApp() { addZone(1.2f,3.2f); // (Y,Z) camera position // load the model Spatial model = assetManager.loadModel("Models/Teapot/Teapot.obj"); rootNode.attachChild(model); } // end of simpleInitApp()

41. private void addZone(float y, float z) { viewPort.setBackgroundColor(ColorRGBA.DarkGray); cam.setLocation(new Vector3f(0,y,z)); cam.lookAt(Vector3f.ZERO, Vector3f.UNIT_Y); // look at the origin with +y-axis being up // grid-based floor int numLines = (int)((WIDTH/STEP)*2 + 1); addWireShape(new Grid(numLines, numLines, STEP), ColorRGBA.White).center(); // axes arrows addArrow(Vector3f.UNIT_X, ColorRGBA.Red); addArrow(Vector3f.UNIT_Y, ColorRGBA.Green); addArrow(Vector3f.UNIT_Z, ColorRGBA.Blue); addBox(WIDTH); // wireframe box :

42. // white light aimed down in front-left quadrant DirectionalLight dl1 = new DirectionalLight(); dl1.setDirection(new Vector3f(-1, -1, 1).normalizeLocal()); dl1.setColor( ColorRGBA.White); rootNode.addLight(dl1); // white light aimed down in back-right quadrant DirectionalLight dl2 = new DirectionalLight(); dl2.setDirection(new Vector3f(1, -1, -1).normalizeLocal()); dl2.setColor( ColorRGBA.White); rootNode.addLight(dl2); } // end of addZone() y y x x z z

43. private void addArrow(Vector3f dir, ColorRGBA color) { Arrow arrow = new Arrow(dir); arrow.setLineWidth(3); // make arrow thicker addWireShape(arrow, color); } // end of addArrow() private void addBox(float size) // a wireframe box { Geometry g = addWireShape( new WireBox(size, size/2, size), ColorRGBA.Yellow); g.setLocalTranslation( new Vector3f(0, size/2, 0)); }

44. private Geometry addWireShape(Mesh shape, ColorRGBA color) // add a colored wireframe version of shape to the scene { Geometry g = new Geometry("shape", shape); Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); mat.getAdditionalRenderState().setWireframe(true); mat.setColor("Color", color); g.setMaterial(mat); rootNode.attachChild(g); return g; } // end of addWireShape()

45. Adjusting the Model • The imported shape may be too large, translated a long way from the origin, or rotated incorrectly. • In that case, add code to simpleInitApp() like: • model.scale(0.01f); // 100 times smaller • model.rotate(0, (float)Math.toRadians(90), 0); // rotate 90 degrees around the y-axis • model.setLocalTranslation( new Vector3f(-2, 0, 0)); // move 2 units left along the x-axis

46. Bus Example • The loaded bus.obj model is too large: • Spatial model = assetManager.loadModel( "models/bus.obj"); • bus.obj is in the local models/ directory • I worked out the size problem by using the camera keys and mouse to move about: • the WASDQZ keys to zoom in/out and translate left/right/up/down. • the mouse to rotate left/right/up/down

47. Original viewof the bus: • After zooming out a lot (it's a seat inside thebus):

48. bus.obj in 3DViewer (to check the model):

49. Modified jME code: Spatial model = assetManager.loadModel("models/bus.obj"); model.scale(0.005f); model.setLocalTranslation( new Vector3f(0, 0.2f, 0)); 200x smaller then moved up 0.2f units:

50. HoverTank Spatial model = assetManager.loadModel( "Models/HoverTank/Tank2.mesh.xml"); model.scale(0.1f); model.rotate(0, -(float)Math.toRadians(90), 0); 10x smaller then rotated -90 degrees around the y-axis: