我有一个网站,它使用 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 或者太窄/太宽泛,请告诉我!
最佳答案
我最终使用以下步骤解决了这个问题:
- 我删除了与我的各个元素关联的渲染器
- 我创建了一个将用于整个应用程序的渲染器
- 我在应用程序启动时在
angular.run
block 中创建并填充了场景一次。 - 然后,我使用适当的场景并将其提供给给定 View 的渲染器,并在我的 Angular Directive(指令)中附加
renderer.domElement
这大大加快了应用程序的速度,并对单击链接或使用按钮时的响应速度产生了巨大影响。
在 angular.run
上创建和填充场景并不是真正的性能最佳,但对于我们的用例来说效果很好。如果您认为这对于您的应用程序来说是太多的初始工作,我建议仅在需要时设置场景(例如导航到给定 View 时)和/或在您之后清理场景(我相信多个场景和渲染创作一起导致我遇到的内存泄漏和速度变慢。
附注我想说感谢 @pietro909 跟踪上下文(或创建这些上下文时的渲染器)的建议。我相信,当您无法在应用程序加载时创建多个场景时,这可能是更“最佳”的解决方案。
关于javascript - 如何调试 Angularjs ng-route 和 Threejs 崩溃/问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32115769/