如何調試Angularjs ng-route和Threejs崩潰/問題？

Question

我有一個使用ng-route指令使用angularjs的網站，以允許用戶在視圖之間導航。 該應用程序使用Three.js進行畫布WebGL渲染。 我遇到一個問題，其中應用程序在Android版Chrome和IE11上反復崩潰。

我很難找到確切的問題，因此目前無法提供一個小的可重現的錯誤案例。 這是我主要需要的幫助-在哪里尋找。

到目前為止，我已將其范圍縮小到ng-route視圖切換，並反復重復初始化threejs渲染器和場景。 我相信我可以使用IE11重現該問題，該錯誤代碼為887a0005 ，該錯誤代碼僅表示the gpu device instance has been suspended因此不太可能從那里跟蹤我的問題。

所述887a005設定的大小時，會發生錯誤WebGlRenderer時Three.js執行（在three.js所修訂71 18317）以下行：

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

如果我不長時間瀏覽該應用程序，則該應用程序將運行良好，但是在瀏覽3至10次后，該應用程序在Android版Chrome瀏覽器上崩潰。

我在哪里尋找原因？ 這可能是內存問題嗎？ 我如何縮小范圍？

值得的是，我沒有使用angularjs來管理創建Threejs視圖的對象的生命周期。 那可能是問題嗎？

感謝您的幫助，如果問題不適合stackoverflow或范圍太窄/太寬，請通知我！

Answer 1

我最終通過以下步驟解決了這個問題：

• 我刪除了與我的各個元素關聯的渲染器
• 我創建了一個渲染器，該渲染器將用於整個應用程序
• 我在應用程序啟動時一次在angular.run塊中創建並填充了場景。
• 然后，我使用適當的場景並將其提供給給定視圖的renderer.domElement在我的angular指令中追加了renderer.domElement

這大大加快了該應用的速度，並在單擊鏈接或使用按鈕時對響應速度產生了巨大影響。

在angular.run上創建和填充場景並不是性能最佳，但對於我們的用例來說效果很好。 如果您認為這對您的應用程序來說過多的初期工作，建議您僅在需要時設置場景（例如，導航到給定視圖時）和/或在您之后清理場景（我相信多個場景和渲染創建在一起我遇到的內存泄漏和速度變慢。

PS：我要感謝@ pietro909的建議來跟蹤上下文（或渲染器在創建上下文時）。 我認為，當您無法在應用程序負載上創建多個場景時，這可能是一個更為“最佳”的解決方案。