Learning Three.js

or WebGL for Dummies

Let’s Make a 3D Game: Supporting Mobile

This post is about supporting mobile. We will try to port marblesoccer on mobile. When doing a boilerplate for three.js, mobile had to be supported for compatibility. So it gave me the idea of this post. What about porting our game on mobile ? Porting a 3D web game to mobile ? crazy :)

The desktop version looks kindof ok. What would be the result of this experiment ? Is that even possible ? What about usable ? This is the purpose of this experiment to find out.

Mobile isn’t desktop

Indeed… desktop and mobile are quite different plateforms. Which differences are relevant to us ? First, mobile network is bad, especially latency. So avoid download of long files, such as texture or sound. Here is a good talk on Mobile Web Performance. Another thing, mobile got no keyboard, no mouse, but a touch screen We need to get a game controller for this environement. We use virtualjoystick.js. See details in our previous post.

One big thing is that currently, on mobile, WebGL hasnt reached mainstream to say the least. No major vendor is shipping phone with webgl, so nobody or close get webgl on phone. So for our little experiment, we will display in Canvas 2D with THREE.CanvasRenderer.

Porting to canvas 2D

So what need to be done ? First step is to use the proper renderer when suitable. Second is fixing material and geometry to fit canvas2D renderer capability. Last step is to look for room of optimisations. Ok now let’s intanciate the renderer. If webgl is available, use THREE.WebGLRenderer else use THREE.CanvasRenderer. Not too hard hey ? We already did that in the boilerplate for three.js

We simplify geometry to reduce the number of polygon. For marble geometry, the sphere got 512 faces on webgl, and only 9 on canvas2d. Drastic :) What about material ? For webgl, we used phong for fancy lightings, We used textures for realistic effects. But with canvas2D, those technics cant be used. They are way too slow.

This is enougth to get it working. It display something reasonable on the screen at least. We sacrifice a lot tho, no more texture not fancy lighting. And now the bad new, it results in 3fps on my ipad2 ios4… ouch.

More measures

How come performances are so bad ? So i did more measures. I disabled the display of map and marbles to see how they impact performance. If we display the map and the marbles, we got 3fps on my ipad2. If we display only marbles, no more maps, we got 23fps, much better. but still not great… Considere that we are only displaying marbles and they are real simple.

If we display no marble, and no map. we got only 30fps. So all the rest, all the non display part is already using a big part of time ? what are we doing ? not much… Still we run realistic 3D physics and ipad2 cpu isnt as fast as usual desktop ones.

Time to optimize

Ok it is slow but this is a first try. I admit the code isnt not too optimized. cpu / gpu performance are so good on desktop, i may have been sloppy here and there :) There are areas of optimisations. We need to draw less polygons.

First we need to reduce the geometry of the map. We can do that by clustering voxels: if 2 voxels got the same color and touch each other, display one large box, instead of 2 small boxes. We did it to optimize our physics. See details in microphysics post. Additionnaly we could use marblesoccer’s map editor to redesign a map with a simpler geometry.

Another low-hanging fruit is to remove faces which are never seen, like in minecraft example from three.js. We could try to 2D sprites instead of 3D spheres for marble. We wont use THREE.Sprite. It isnt supported THREE.CanvasRenderer. But dont worry, it is possible with the particle system. See how THREE.Particle is used in canvas_particles_sprites.html example.


And after all that, what can you expect ? Will that run at 60fps ? 30fps ? Not likely or it will require a lot of effort. So animations arent smooth, what about the look? Watch what you got on the screen… On the right, a canvas version. live here. On the left you can see a webgl version. live here. Lets face it… canvas version is ugly.

After a significant work, you get poor performance and crappy look. Not many players would accept that… currently canvas performance doesnt seems suitable to display 3D on mobile. It is a good way to monitor performances and see how they evolve with time.