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

【问题标题】：How to debug Angularjs ng-route and Threejs crash/issues?如何调试 Angularjs ng-route 和 Threejs 崩溃/问题？
【发布时间】：2015-08-25 22:55:31
【问题描述】：

我有一个网站使用带有ng-route 指令的angularjs 来让用户在视图之间导航。该应用程序使用 Three.js 进行画布 WebGL 渲染。我有一个问题，应用程序在 Chrome for Android 和 IE11 上反复崩溃。

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

到目前为止，我已将其范围缩小到ng-route 视图切换以及反复重新初始化threejs 渲染器和场景。我相信我可以使用 IE11 重现该问题，它给了我错误代码 887a0005，它只是说 the gpu device instance has been suspended，所以我不太可能从那里追踪我的问题。

Three.js 执行以下行时设置WebGlRenderer 的大小时出现887a005 错误（Three.js 修订版 71 中的 18317）：

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

如果我长时间不导航，该应用程序将运行良好，但在浏览 3 到 10 次视图切换后，它会在 Android 版 Chrome 上崩溃。

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

我没有使用 angularjs 来管理创建threejs 视图的对象的生命周期。可能是这个问题吗？

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

【问题讨论】：

为了调试ng-route可以在$routeChangeStart$routeChangeSuccess$routeChangeError和$routeUpdate事件里面设置断点。
嘿@Dan，不确定这在这种情况下是否有帮助，因为我不认为 ngRoute 是问题所在。我认为根本原因是在 Three.js 中重新创建渲染器、场景或平面/网格时存在一些内存问题。无论如何感谢您的评论:)
嗨@ErikLundgren 我正在使用threejs 处理一个巨大的角度应用程序，大多数问题都与页面组合或刷新后的上下文管理有关。您是否尝试跟踪已删除画布的上下文？
嗨@pietro909，这听起来是个好主意。我设法用另一种方式解决了这个问题，所以我会为我的方式提供答案（这可能不适合其他应用程序

标签： javascript angularjs three.js webgl

【解决方案1】：

我最终通过以下步骤解决了这个问题：

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

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

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

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

【讨论】：