4

我开发了一个基本的 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 的性能的任何建议？

4

2 回答 2

5

我已经设法将帧速率提高到 25 fps 左右，这是一个巨大的进步。

首先，我移除了所有阴影，不仅是来自投射阴影的对象，还来自所有光源和渲染器：

object3d.castShadow = false;

light.castShadow = false;

renderer.shadowMapEnabled = false;

我还使用了多个光源。这是最大的罪魁祸首。我只保留了一个光源，这大大提高了帧速率

接下来，我移除了雾，这给了我额外的几帧

我还缩小了 JavaScript，这似乎也略微提高了性能

于 2014-05-05T09:20:01.367 回答
3

很高兴看到你解决了你的问题。

您可能没有注意到“背面剔除”，主要用于提高游戏性能。

（任何不可见的多边形都不会被渲染）这个 wiki 链接更好地解释了它 http://en.wikipedia.org/wiki/Back-face_culling

我还建议参加这个很棒的 3D 图形课程，它基于 Three.js https://www.udacity.com/course/cs291

于 2014-09-14T13:19:39.597 回答