如何调试 Angularjs ng-route 和 Threejs crash/issues?
How to debug Angularjs ng-route and Threejs crash/issues?
我有一个网站使用 angularjs 和 ng-route
指令让用户在视图之间导航。该应用程序使用 Three.js 进行 canvas WebGL 渲染。我遇到一个问题,即应用程序在 Chrome 和 Android 上以及在 IE11 上反复崩溃。
我很难找到确切的问题,所以我目前无法提供一个小的、可重现的错误案例。这是我主要需要帮助的地方 - 在哪里看。
到目前为止,我已将其缩小到 ng-route
视图切换以及反复重新初始化 threejs 渲染器和场景。我相信我可以使用 IE11 重现该问题,它给我错误代码 887a0005
,它只是说 the gpu device instance has been suspended
,所以我不太可能从那里追踪我的问题。
当Three.js
执行以下行(18317 in Three.js revision 71)时设置WebGlRenderer
的大小时发生887a005
错误:
_gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );
如果我长时间不四处导航,该应用程序会 运行 正常,但在浏览 3 到 10 次后,它在 Chrome for Android 上崩溃-开关。
我应该在哪里寻找原因?这可能是内存问题吗?我将如何缩小范围?
为了它的价值,我没有使用 angularjs 来管理创建 threejs 视图的对象的生命周期。这可能是问题所在?
感谢您的帮助,如果问题不适合 Whosebug 或太 narrow/broad,请告诉我!
我最终使用以下步骤解决了这个问题:
- 我删除了与我的各个元素关联的渲染器
- 我创建了一个将用于整个应用程序的渲染器
- 我在应用程序启动时在
angular.run
块中创建并填充了一次场景。
- 然后我使用适当的场景并将其提供给给定视图的渲染器,在我的 angular 指令中附加
renderer.domElement
这大大加快了应用程序的速度,并对单击链接或使用按钮时的响应速度产生了巨大影响。
在 angular.run
上创建和填充场景并不是真正的最佳性能,但对于我们的用例来说效果很好。如果您认为这对您的应用来说是太多的初始工作,我建议要么只在需要时设置场景(例如导航到给定视图时)and/or 在您之后清理场景(我相信多个场景和渲染创作一起导致了我遇到的内存泄漏和速度减慢。
P.S。我想感谢 @pietro909 关于跟踪上下文(或渲染器创建上下文)的建议。我相信当您无法在应用程序加载时创建多个场景时,这可能是一个更 "optimal" 的解决方案。
我有一个网站使用 angularjs 和 ng-route
指令让用户在视图之间导航。该应用程序使用 Three.js 进行 canvas WebGL 渲染。我遇到一个问题,即应用程序在 Chrome 和 Android 上以及在 IE11 上反复崩溃。
我很难找到确切的问题,所以我目前无法提供一个小的、可重现的错误案例。这是我主要需要帮助的地方 - 在哪里看。
到目前为止,我已将其缩小到 ng-route
视图切换以及反复重新初始化 threejs 渲染器和场景。我相信我可以使用 IE11 重现该问题,它给我错误代码 887a0005
,它只是说 the gpu device instance has been suspended
,所以我不太可能从那里追踪我的问题。
当Three.js
执行以下行(18317 in Three.js revision 71)时设置WebGlRenderer
的大小时发生887a005
错误:
_gl.viewport( _viewportX, _viewportY, _viewportWidth, _viewportHeight );
如果我长时间不四处导航,该应用程序会 运行 正常,但在浏览 3 到 10 次后,它在 Chrome for Android 上崩溃-开关。
我应该在哪里寻找原因?这可能是内存问题吗?我将如何缩小范围?
为了它的价值,我没有使用 angularjs 来管理创建 threejs 视图的对象的生命周期。这可能是问题所在?
感谢您的帮助,如果问题不适合 Whosebug 或太 narrow/broad,请告诉我!
我最终使用以下步骤解决了这个问题:
- 我删除了与我的各个元素关联的渲染器
- 我创建了一个将用于整个应用程序的渲染器
- 我在应用程序启动时在
angular.run
块中创建并填充了一次场景。 - 然后我使用适当的场景并将其提供给给定视图的渲染器,在我的 angular 指令中附加
renderer.domElement
这大大加快了应用程序的速度,并对单击链接或使用按钮时的响应速度产生了巨大影响。
在 angular.run
上创建和填充场景并不是真正的最佳性能,但对于我们的用例来说效果很好。如果您认为这对您的应用来说是太多的初始工作,我建议要么只在需要时设置场景(例如导航到给定视图时)and/or 在您之后清理场景(我相信多个场景和渲染创作一起导致了我遇到的内存泄漏和速度减慢。
P.S。我想感谢 @pietro909 关于跟踪上下文(或渲染器创建上下文)的建议。我相信当您无法在应用程序加载时创建多个场景时,这可能是一个更 "optimal" 的解决方案。