CODEWITHSUNDEEP
javascriptperformancethree.jscocoonjs
Brett Gregson
Brett Gregson

Reputation: 5913

Cocoon.js & Three.js: Improving performance

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?

Upvotes: 4

Views: 2804

Answers (2)

Jammi
Jammi

Reputation: 177

Its good to see you have solved your problem.

You may be oblivious to "back-face culling", mostly used to improve performance for Games.

(Any polygons that are not visible are not rendered) This wiki link explains it better http://en.wikipedia.org/wiki/Back-face_culling

I would also recommend taking this great 3D Graphics course, which is based on Three.js https://www.udacity.com/course/cs291

Upvotes: 3

Brett Gregson
Brett Gregson

Reputation: 5913

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

Upvotes: 5

Related Questions