Recently, I created a simple 3D game using box2Dweb to handle physics and three.js for rendering. It's a basic side-scrolling game and now I'm looking to get it running smoothly on iOS. To achieve this, I've opted to package the game using cocoon.js, which supports WEBGL on iOS devices.
The main issue I'm facing is performance. While the game runs at a decent 50 frames per second on a desktop, it crawls at a mere 3 frames per second on an iPhone 5.
In an attempt to boost performance, I stripped down the game by removing textures, shaders, skybox, and rendering only parts of the level visible to the camera. This helped achieve a 25% increase in performance, bringing it up to 4FPS.
I took a look at the demos available in the iOS launcher app, and they all run smoothly without any hiccups.
At this point, the only other optimization idea I have is to minify the JS code, but I doubt it will significantly improve performance.
In my current setup, I'm using the Accelerated Canvas/WebGL feature in the launcher app and have also experimented with the canvas+ option, but the issue persists. My three.js version is revision 67, and I'm utilizing the webGL renderer as follows:
this.renderer = new THREE.WebGLRenderer
If anyone has suggestions on how to enhance the performance of three.js with cocoon.js, I would greatly appreciate it!