我开发了一个基本的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性能的任何建议?
答案 0 :(得分:5)
我已经设法提高帧速率,最高可达25 fps左右,因此有了很大的改进。
首先,我删除了所有阴影,不仅包括投射阴影的对象,还包括所有光源和渲染器:
object3d.castShadow = false;
light.castShadow = false;
renderer.shadowMapEnabled = false;
我也在使用多个光源。这是最大的罪魁祸首。我只保留了一个光源,它大大提高了帧速率
接下来,我删除了雾,这给了我额外的几个fps
我还缩小了JavaScript,这似乎也提高了性能
答案 1 :(得分:3)
很高兴看到你解决了问题。
你可能会忘记"背面剔除",主要用于改善游戏的性能。
(任何不可见的多边形都不会被渲染) 这个wiki链接更好地解释了它 http://en.wikipedia.org/wiki/Back-face_culling
我还建议参加这个基于Three.js的3D图形课程 https://www.udacity.com/course/cs291