Cocoon.js & Three.js: Improving performance

Question

I have developed a rudimentary 3D game using box2Dweb for physics and three.js for rendering. It's a basic side scroller. I would like to get it up and running on iOS. I have decided to use cocoon.js for packaging the game as it allows for WEBGL usage on iOS

The problem I am having is performance. On a desktop machine, the game runs at around 50 frames per second. On an iPhone 5 it is running at a blistering 3 frames per second.

I tried stripping the game down, removed all textures, removed the shaders, removed the skybox, rendered less of the level (only what is in the cameras view and a little behind and in front). This did give me a 25% increase in performance. So it is now running at 4FPS

I have had a look at the demos that come with the iOS launcher app and they all run really smoothly.

The only other thing I can think to do to increase performance is minify the JS, which I don't think will give much of a performance boost.

I am using the Accelerated Canvas/WebGL in the launcher app. I have also tried compiling with the canvas+ option, same issue. I am using three.js revision 67. I am using the webGL renderer in three.js:

this.renderer = new THREE.WebGLRenderer

Any suggestions on how to improve performance of three.js with cocoon.js?

Answer 1

I have managed to improve the frame rate, up to around 25 fps, so a huge improvement.

First I removed all the shadows, not only from the objects that were casting shadows, but also from all the light sources, and the renderer:

object3d.castShadow = false;

light.castShadow = false;

renderer.shadowMapEnabled = false;

I was also using multiple light sources. This was the biggest culprit. I kept only one light source which made a massive improvement to the frame rate

Next, I removed the fog, which gave me an extra couple of fps

I also minified the JavaScript, which seemed to give a slight improvement in performance as well