javascript - 如何调试 Angularjs ng-route 和 Threejs 崩溃/问题？

Question

我有一个网站，它使用 angularjs 和 ng-route 指令来让用户在 View 之间导航。该应用程序使用 Three.js 进行 Canvas WebGL 渲染。我遇到一个问题，应用程序在 Android 版 Chrome 和 IE11 上反复崩溃。

我很难找到确切的问题，所以我目前无法提供一个小的、可重现的错误案例。这就是我主要需要帮助的地方 - 去哪里寻找。

到目前为止，我已将范围缩小到 ng-route View 切换以及反复重新初始化 Threejs 渲染器和场景。我相信我可以使用 IE11 重现该问题，它会给出错误代码 887a0005，它只是说 gpu 设备实例已暂停，因此我不太可能跟踪我的问题从那里开始。

当 Three.js 执行以下行(Three.js 修订版中的 18317)时，设置 WebGlRenderer 的大小时会发生 887a005 错误71):

_gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );

如果我没有长时间导航，该应用程序将运行良好，但在 Android 版 Chrome 上导航时，经过 3 到 10 次 View 切换后，该应用程序会崩溃。

去哪里查找原因？这可能是内存问题吗？我该如何缩小范围？

就其值(value)而言，我没有使用 AngularJS 来管理创建 ThreeJS View 的对象的生命周期。这可能是问题所在吗？

感谢您的帮助，如果问题不适合 stackoverflow 或者太窄/太宽泛，请告诉我!

Answer 1

我最终使用以下步骤解决了这个问题:

• 我删除了与我的各个元素关联的渲染器
• 我创建了一个将用于整个应用程序的渲染器
• 我在应用程序启动时在 angular.run block 中创建并填充了场景一次。
• 然后，我使用适当的场景并将其提供给给定 View 的渲染器，并在我的 Angular Directive(指令)中附加 renderer.domElement

这大大加快了应用程序的速度，并对单击链接或使用按钮时的响应速度产生了巨大影响。

在 angular.run 上创建和填充场景并不是真正的性能最佳，但对于我们的用例来说效果很好。如果您认为这对于您的应用程序来说是太多的初始工作，我建议仅在需要时设置场景(例如导航到给定 View 时)和/或在您之后清理场景(我相信多个场景和渲染创作一起导致我遇到的内存泄漏和速度变慢。

附注我想说感谢 @pietro909 跟踪上下文(或创建这些上下文时的渲染器)的建议。我相信，当您无法在应用程序加载时创建多个场景时，这可能是更“最佳”的解决方案。