Cocoon.js和Three.js:提高性能

Question

我开发了一个基本的3D游戏,使用box2Dweb进行物理,使用three.js进行渲染.这是一个基本的侧卷轴.我想在iOS上运行它.我决定使用cocoon.js打包游戏,因为它允许在iOS上使用WEBGL

我遇到的问题是表现.在台式机上,游戏以每秒50帧的速度运行.在iPhone 5上,它以每秒3帧的速度运行.

我试图剥离游戏,移除所有纹理,移除着色器,移除天空盒,渲染较少的级别(仅在摄像机视图中有什么,后面和前面有点).这确实让我的性能提高了25%.所以它现在以4FPS运行

我已经看过iOS启动器应用程序附带的演示,它们都运行得非常顺利.

我认为要提高性能的另一件事就是缩小JS,我认为这不会给性能提升太多.

我在启动器应用程序中使用Accelerated Canvas/WebGL.我也尝试使用canvas +选项进行编译,同样的问题.我正在使用three.js版本67.我在three.js中使用webGL渲染器:

this.renderer = new THREE.WebGLRenderer

有关如何使用cocoon.js提高three.js性能的任何建议？

Answer 1

我已经设法提高帧速率,最高可达25 fps左右,因此有了很大的改进.

首先,我删除了所有阴影,不仅包括投射阴影的对象,还包括所有光源和渲染器:

object3d.castShadow = false;

light.castShadow = false;

renderer.shadowMapEnabled = false;

我也在使用多个光源.这是最大的罪魁祸首.我只保留了一个光源,它大大提高了帧速率

接下来,我移除了雾,这给了我额外的几个fps

我还缩小了JavaScript,这似乎也略微改善了性能