Troubleshooting AngularJS ng-route and Three.js crashes and glitches: A comprehensive guide

I am currently working on a website that utilizes angularjs along with the ng-route directive for navigation between different views. The site also incorporates Three.js for WebGL rendering on canvas. However, I am encountering difficulties as the application keeps crashing consistently on Chrome for Android and IE11.

Identifying the exact issue has proven to be challenging, making it hard for me to provide a concise error case that can be reproduced. This is where I need assistance - pinpointing the root cause of the problem.

After some investigation, I have narrowed down the potential culprit to the ng-route view switching combined with frequent re-initialization of Three.js renderers and scenes. I suspect that the problem may be related to an error code (887a0005) I received while testing on IE11, indicating "the gpu device instance has been suspended." Unfortunately, this error message does not offer much insight into resolving the issue.

The 887a005 error seems to occur when adjusting the size of the WebGlRenderer within the Three.js library, specifically at line 18317 in revision 71:

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

The application functions smoothly unless there is excessive navigation activity, leading to crashes on Chrome for Android after a certain number of view-switches.

Where should I begin looking for the underlying cause? Could this possibly be a memory-related issue? How can I further narrow down my investigation?

It's worth noting that I am not using angularjs to manage object lifecycle for creating threejs views. Could this decision be contributing to the problem?

Any guidance would be greatly appreciated, and please let me know if this query is suitable for stackoverflow or requires more specific details!

javascriptangularjsthree.jswebgl

Answer №1

Here are the steps I took to solve this issue:

  • I removed the renderers associated with each individual element
  • I developed a single renderer for the entire application
  • Scenes were created and populated at the start of the application within an angular.run block
  • The appropriate scene was then assigned to the renderer for a specific view, with renderer.domElement appended in the angular directive

Implementing these changes significantly increased the speed of the application and greatly improved responsiveness when interacting with links and buttons.

While creating and populating scenes in angular.run may not be the most performance-efficient method, it served our purpose well. If you find this approach too labor-intensive for your application, consider setting up scenes only when necessary (such as when navigating to a particular view) and/or cleaning up scenes after use to prevent memory leaks and slowdowns caused by multiple scene and render creations.

Special thanks to @pietro909 for suggesting keeping track of contexts (or renderers). This could serve as a more optimal solution when unable to create multiple scenes upon application load.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending SQL information to an Angular interface using NodeJS

I'm struggling to figure out how to display data from a MySQL server using Node. Although I can successfully retrieve the data and log it in the CLI when running "node server.js", I am unsure of how to send this data to my Angular view. Console loggin ...

angularjsnode.js

Activate a jQuery collapsible feature through an external hyperlink

Can we enable the expansion of a jQuery collapse by clicking on an external link? For instance, let's say we have a link on the home page that leads to another page. When the user clicks on this link from the home page, we want it to redirect to the i ...

javascriptjquery

Is it considered poor form for an Angular controller to invoke a function on a directive?

My custom Angular directive functions as a unique combobox, where clicking on the input control reveals a div below it with a list of items from a model object. The user can type text into the input control to filter the displayed list. In addition to the ...

javascriptangularjsmodel-view-controllercontrollerangularjs-directive

Is Sending an Object to a Function in the Same Scope Inefficient?

Is there a noticeable delay when passing around an object within the same scope? Let's explore Option 1 and Option 2. In Option 1, we work directly with the object, while in Option 2 we follow better encapsulation practices. However, if we were to sti ...

javascriptangularjs

Navigating through a complex JavaScript project and feeling a bit disoriented

I recently joined a JavaScript project that was being worked on by a single programmer for the past 6 months. However, this programmer left without providing much explanation. The project is built using Ionic, which I have discovered is primarily used for ...

javascriptandroidangularjsnode.jscordova

Utilize the JavaScript .send function to pass an array

Can an array be passed to a PHP page using the code below? If not, what modifications are needed in the code? function ajax_post(){ var hr = new XMLHttpRequest(); hr.open("POST", "get_numbers.php", true); hr.setRequestHeader("Content-type", "a ...

javascriptphparraysjson

After executing grunt serve, Bower issues a warning for jquery stating "not injected"

Recently, I had to clone a project and rebuild bower packages. It seems that jQuery has been updated, causing a warning to appear: Warning: Please check the "app/bower_components/jquery" folder for the necessary file and manually include it in your ...

javascriptjqueryjsonyeomanbower

What is the best way to customize the border color of a disabled Material UI TextField?

I'm struggling to override the default style for disabled Mui TextField components, particularly in changing the border color. Although I successfully altered the label color for disabled fields, I can't seem to get the border color to change. T ...

javascriptreactjsmaterial-ui

What could be causing the element.style.FontSize to not be effective on classes that have been looped through and stored in an array created with querySelectorAll beforehand?

Greetings Stackoverflow Community, Today, I'm facing an issue related to JavaScript and WordPress. I have a JavaScript script named setDynamicFontHeight.js, as well as PHP documents named header.php and navbar_mobile.php, which simply executes wp_nav_ ...

javascriptwordpressclassdomqueryselector

AngularJS directive template unable to trigger controller function

Custom template directive (items.html) <li ng-repeat="item in itemCart"> {{item.title}} <br> {{item.category}} &nbsp {{ formatCurrencyFunction({cost: item.price}) }} </li> This unique directive is utilized in PageTwo.htm ...

angularjsangularjs-directiveangularjs-scope

Guide to importing an external JSON file into a JavaScript-based quiz on an HTML webpage

I am currently diving into the world of JavaScript and trying my hand at creating a quiz. Check out my simple quiz here Here are my specific inquiries: Is there a way to save the questions and answers in an external JSON file? Can I use a different fil ...

javascripthtmljson

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

I have a web service link at www.xyz.com/abcdefg. When I visit this link, it automatically downloads a CSV file. The CSV file contains columns of data organized like this: Column A Column B Column C Column D test1 1 5 ...

javascriptphpjqueryhtmlangularjs

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

javascriptjqueryhtmlcss

Getting the date from a datetime JSON - here's how!

How can I extract the date from a JSON datetime string like 2013-11-09T00:00:00 using either Jquery or JavaScript? ...

javascriptjqueryjson

Utilizing an Angular component for multiple purposes

For my Angular app, which is component-based and uses Angular version 1.5.5 with TypeScript, I have a header component that includes a country dropdown. This header component is used across multiple pages. However, when a country is selected from the dropd ...

angularjstypescriptangularjs-scopecomponents

Angular http service set header for put request

Struggling with a temporary solution where the goal was to include a header in an http put request with the value 'username' : 'flastname'. The plan is to set this username header just before making the $http.put call within the service ...

angularjsresthttp

What is the process of integrating an ejs view engine with express on Netlify?

Need help configuring the ejs view engine with netlify I attempted to set app.set('view engine', 'ejs'), but didn't see any results. const express = require('express'); const path = require('path'); const serv ...

javascriptexpressnetlify

What is causing the search feature to malfunction on the Detail page?

In my project, I have different components for handling shows. The Shows.jsx component is responsible for rendering all the shows, while the ProductDetails component displays information about a single show. Additionally, there is a Search component which ...

javascriptreactjsredux

Exploring AngularJS: Understanding ng-bind-html and maximizing ng-repeat

I have a dilemma regarding the views I am updating once retrieved from the database for this particular template: <div class="row" ng-repeat="post in posts"> <div class="col-lg-9 col-lg-offset-2"> <!-- blog entry - ...

angularjsangularjs-scopeangularjs-ng-repeat

Having trouble accessing the loadTokenizer function in Tensorflow JS

As a beginner with Tensorflow.js concepts, I recently attempted to tokenize a sentence using the Universal Sentence Encoder in Javascript. You can explore more about it on Github Reference $ npm install @tensorflow/tfjs @tensorflow-models/universal-sentenc ...

javascriptnpmpackagetokenizetensorflow.js