1. 240-571 J2ME: M3G/11 Intro to J2ME. Prog. v Objectives: –to introduce M3G; –to start talking about "M3G Chapter 2. An Animated Model" u leave the floor, penguin, and animation details until next time 240-571, Semester 2, 2006-2007 M3G. Part 1

2. 240-571 J2ME: M3G/12 1. Features v M3G: the Mobile 3D Graphics API –developed as JSR-184 –present in WTK 2.2 and later –a combination of high-level and low-level features u retained and immediate modes –combined with J2ME via the Canvas or GameCanvas classes

3. 240-571 J2ME: M3G/13 v No callbacks v No separate rendering thread –so you must code your own animation loop using a timer or a thread v Requires CLDC 1.1. for floats –make sure to select it in the WTK

4. 240-571 J2ME: M3G/14 Two Modes v Retained Mode (high-level API) –build a 3D scene by building a scene graph –the scene graph is rendered automatically –similar to Java 3D, but a much smaller API u and a few extras v Immediate Mode (low-level API) –based on OpenGL ES –no scene graph data structure

5. 240-571 J2ME: M3G/15 Scene Graph Example World Group Mesh Sprite Group CameraLight a World object is the top node

6. 240-571 J2ME: M3G/16 v Mesh: a 3D model –subclasses: morphing mesh, skinned mesh v Sprite: a 2D image v A Group is a useful way of grouping objects so they can be transformed with a single operation. v Typical transformations: –scaling, rotation, translation –animation based on key frames

7. 240-571 J2ME: M3G/17 Mesh Details VertexBuffer IndexBuffer Appearance composed of 1 or more VertexBuffer positions VertexArray normals VertexArray colours VertexArray composed of 0 or 1 tex. coords. VertexArray 0 or more Appearance Material PolygonMode CompositingMode composed of Fog Texture2D Image2D 1 or more Mesh

8. 240-571 J2ME: M3G/18 2. WTK 2.2 Examples v v Life3D – –the Game of Life in 3D v v PogoRoo – –a kangaroo bouncing on a pogo stick v v retainedmode – –animates a skateboarder model u a M3D file

9. 240-571 J2ME: M3G/19 Hello World public class Test extends MIDlet { private MyCanvas c = new MyCanvas(); protected void startApp() { Display.getDisplay(this).setCurrent(c); } protected void pauseApp() {} protected void destroyApp() {} }

10. 240-571 J2ME: M3G/110 public class MyCanvas extends Canvas { private Graphics3D iG3D; // for rendering private World scene; // for the scene graph public MyCanvas() { iG3D = Graphics3D.create(); scene = (World) Loader.load(”/w.m3d”)[0]; } protected void paint(Graphics g) { iG3D.bindTarget(g); iG3D.render( scene ); iG3D.releaseTarget(); // flush }

11. 240-571 J2ME: M3G/111 Animated World public class Test extends MIDlet { MyCanvas c = new MyCanvas(); MyTimer updater = new MyTimer();... private class MyTimer extends TimerTask { public MyTimer() { new Timer().schedule(this,0,40); } // 40ms public void run() { c.repaint(); } }

12. 240-571 J2ME: M3G/112 public class MyCanvas extends Canvas { int time = 0;... protected void paint(Graphics g) { iG3D.bindTarget(g); scene.animate(time += 40); // 25 fps iG3D.render( scene ); iG3D.releaseTarget(); }

13. 240-571 J2ME: M3G/113 3. M3G Chapter 2. An Animated Model v Make a penguin walk in circles http://fivedots.coe.psu.ac.th/~ad/jg/m3g2/

14. 240-571 J2ME: M3G/114 3.1. Features v Uses retained mode. v The scene includes a single directional light, a textured floor, a light blue background –or an image background v Mixes M3G rendering and MIDP's drawString() v Penguin model is an animated Mesh –it translates and rotates

15. 240-571 J2ME: M3G/115 AnimM3G Class Diagrams MIDlet Canvas CommandListener TimerTask

16. 240-571 J2ME: M3G/116 Scene Graph World scene LightBackgroundCamera Mesh floorMesh Group built by the Floor class Mesh model transRotGroup animated built by the AnimModel class scene graph children

17. 240-571 J2ME: M3G/117 3.2. AnimCanvas Constructor private World scene; // global variable public AnimCanvas(...) { //... other code scene = new World(); buildScene(); //... other code }

18. 240-571 J2ME: M3G/118 private void buildScene() // add nodes to the scene graph { addCamera(); addLight(); addBackground(); animModel = new AnimModel(); scene.addChild( animModel.getModelGroup() ); // add the model addFloor(); } // end of buildScene()

19. 240-571 J2ME: M3G/119 3.3. Adding the Camera private void addCamera() { Camera cam = new Camera(); float aspectRatio = ((float) getWidth()) / ((float) getHeight()); cam.setPerspective(70.0f, aspectRatio, 0.1f, 50.0f); cam.setTranslation(0.0f, 0.5f, 2.0f); // up and back // cam.setOrientation(-10.0f, 1.0f, 0, 0); // angle downwards slightly scene.addChild(cam); scene.setActiveCamera(cam); }

20. 240-571 J2ME: M3G/120 AnimM3G Viewed from Above cam.setTranslation(0.0f, 5.0f, 0.0f); cam.setOrientation(-90.0f, 1.0f, 0, 0);

21. 240-571 J2ME: M3G/121 3.4. Adding a Light private void addLight() { Light light = new Light(); // default white, directional light light.setIntensity(1.25f); // make it a bit brighter light.setOrientation(-45.0f, 1.0f, 0, 0); // down and into scene scene.addChild(light); }

22. 240-571 J2ME: M3G/122 3.5. Adding a Background private void addBackground() { Background backGnd = new Background(); backGnd.setColor(0x00bffe); // a light blue background scene.setBackground(backGnd); }

23. 240-571 J2ME: M3G/123 Clouds in the BackGround

24. 240-571 J2ME: M3G/124 A Background Image private void addBackground() { Background backGnd = new Background(); Image2D backIm = loadImage("/clouds.gif"); // cloudy blue sky if (backIm != null) { backGnd.setImage(backIm); backGnd.setImageMode(Background.REPEAT, Background.REPEAT); } else backGnd.setColor(0x00bffe); // a light blue background scene.setBackground(backGnd); }

25. 240-571 J2ME: M3G/125 private Image2D loadImage(String fn) { Image2D im = null; try { im = (Image2D) Loader.load(fn)[0]; } catch (Exception e) { System.out.println( "Cannot make image from " + fn); } return im; } // end of loadImage()

26. 240-571 J2ME: M3G/126 3.6. Adding the Floor private void addFloor() { Image2D floorIm = loadImage("/bigGrid.gif"); // large, so slow to load Floor f = new Floor( floorIm, 8); //8 by 8 sz // Image2D floorIm = loadImage("/grass.gif"); // or try "/floor.png" // Floor f = new Floor( floorIm, 6);// 6 by 6 scene.addChild( f.getFloorMesh() ); }

27. 240-571 J2ME: M3G/127 The Floor Grid Image

28. 240-571 J2ME: M3G/128 3.7. Adding the Penguin // global for translating and rotating the model private Group transRotGroup; public AnimModel() { // other code... Mesh model = makeModel(); // reposition the model's start position and size model.setTranslation(0.25f, 0.25f, 0.25f); // so at center model.scale(0.5f, 0.5f, 0.5f); // translation/rotation group for the model transRotGroup = new Group(); transRotGroup.addChild(model); // other code... }

29. 240-571 J2ME: M3G/129 Changing the Penguin's Position Mesh model = makeModel(); // reposition the model's start position and size model.setTranslation(0.25f, 0.25f, 0.25f); // so at center model.scale(0.5f, 0.5f, 0.5f);

30. 240-571 J2ME: M3G/130 3.8. Updating the Application timer run() { animCanvas.update(); } AnimTimer (in AnimM3G) update() { // increment world time // call animate() on world // call repaint() } AnimCanvas paint() { // render the 3D scene // draw 2D info. string } AnimCanvas call run() every PERIOD ms update the canvas KVM repaint request

31. 240-571 J2ME: M3G/131 AnimCanvas // global timing information private int appTime = 0; private int nextTimeToAnimate; public AnimCanvas(AnimM3G top) { // other code... // start the animation nextTimeToAnimate = scene.animate(appTime); } public void update() // called by TimerTask every PERIOD (50) ms { appTime++; if (appTime >= nextTimeToAnimate) { nextTimeToAnimate = scene.animate(appTime) + appTime; repaint(); } }

32. 240-571 J2ME: M3G/132 Rendering the Scene private Graphics3D iG3D; // global public AnimCanvas(AnimM3G top) { // other code... iG3D = Graphics3D.getInstance(); } protected void paint(Graphics g) { iG3D.bindTarget(g); try { iG3D.render(scene); } catch(Exception e) { e.printStackTrace(); } finally { iG3D.releaseTarget(); } // show the model's coordinates in MIDP g.drawString( animModel.getPosition(), 5,5, Graphics.TOP|Graphics.LEFT); } safer coding style