Analyzing the Threejs application for profiling purposes

Recently, I noticed that my webgl application developed using threejs is facing some performance issues in terms of FPS on certain machines. To diagnose the problem, I attempted profiling my application using Chrome's about:tracing feature, following guidance from this informative article: http://www.html5rocks.com/en/tutorials/games/abouttracing/‎

After analyzing the data, it became apparent that my GPU was being overloaded. Interestingly, I observed a significant drop in FPS when the entire scene was within the camera's view. The scene itself wasn't particularly heavy, consisting of 17 meshes and a single directional light source. I've witnessed more complex scenes rendering smoothly on the same GPU.

  • What adjustments can I make to the scene to reduce its load without altering it completely? Removing textures didn't seem to solve the issue. I'm open to suggestions.
  • Is there a way to determine the specific computations threejs is offloading to the GPU, or does this go against the abstraction provided by threejs?
  • Can you share any general tips for effectively profiling GPU performance in webgl-threejs applications?
javascriptthree.jsprofiling

Answer №1

There are numerous strategies to experiment with.

Do you find yourself restricted by drawing?

Try adjusting your canvas size to 1x1 pixel. Does it improve your framerate? If so, you may be drawing too many pixels or using overly complex fragment shaders.

To test if simplifying your fragment shader would help, try using a more basic shader. If you're unfamiliar with three.js, consider using the Basic Material.

Have you enabled shadows? Turning them off might increase performance. Can you use simpler shadows? For example, in this sample, the shadows are simulated with planes and circle textures.

Are you using any postprocessing effects? Keep in mind that postprocessing effects can be resource-intensive, especially on mobile GPUs.

Are you rendering a lot of opaque content? If so, try sorting your drawing order from front to back. This can optimize rendering speed, particularly if you're using the depth test to reject pixels in the back and avoid running the fragment shader unnecessarily.

Consider drawing on a smaller canvas and stretching it using CSS to conserve bandwidth. Many games utilize this technique.

Are you limited by your geometry?

You mentioned only rendering 17 meshes, but how complex are those meshes? Are they 17 simple triangle cubes or 17 highly detailed meshes?

If you're constrained by geometry, consider simplifying it. If the geometry extends into the distance, think about splitting it up and using level of detail techniques. Check out an example of LOD usage here.

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

Tips for integrating React into a jQuery-centric web application?

After diving into React, I'm eager to showcase my skills by implementing it on select pages as a proof-of-concept for my supervisor at work. Can anyone guide me on how to achieve this using traditional script tags instead of imports? So far, I'v ...

javascriptreactjs

Concealed Selenium File Upload through Drag and Drop User Interface

Struggling to insert an image into the specified input using selenium web-driver. <input type="file" multiple="multiple" class="dz-hidden-input" accept="image/gif,image/jpg,image/jpeg,image/png,application/zip" style="visibility: hidden; position: abso ...

javascriptselenium-webdriver

What is the best way to create and implement custom declaration files that are not available on @types or DefinitelyTyped?

I have encountered a situation where I am using an npm package named foo that is not available on DefinitelyTyped or may be outdated. Despite this, I still want to consume it under stricter settings like noImplicitAny, so I need to create custom definition ...

javascripttypescriptnpmdefinitelytyped

Flashing Effect of Angular Ui-Bootstrap Collapse During Page Initialization

Below is the code snippet I've implemented to use the ui-bootstrap collapse directive in my Angular application. HTML: <div ng-controller="frequencyCtrl" style="margin-top:10px"> <button class="btn btn-default" ng-click="isCollapsed = ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

What causes the tweets' IDs to be altered by axios when parsing the response from the Twitter search API?

I am currently utilizing axios to send a GET request to the Twitter search API in order to fetch recent tweets that utilize a specific hashtag. To begin with, I ran tests on the twitter search API via Postman and noticed that the id and id_str tweet statu ...

javascriptnode.jsexpresstwitteraxios

"Implementing database updates with AJAX and utilizing the PUT method: a step-by-step guide

I am attempting to update a database property named "Estado" using ajax. Here is the code I am using: function updateDatabaseProperty(idMarker, newState) { $.ajax ({ url: `/api/IgnicoesAPI/${idMarker}`, type: 'PUT ...

javascriptc#asp.net-coreput

What are the steps to resolve the TypeError related to reading 'split' on mongoose when properties are undefined?

Just successfully connected mongoDB with mongoose, but encountered an error stating TypeError: Cannot read properties of undefined (reading 'split'). How can I resolve this issue? Below is the code snippet: export const dbConnect = async () => ...

javascriptmongodbmongoosenext.js

Tips on how to patiently wait until the database connection is established and all queries are successfully executed for every database specified in an array

A file containing JSON data with database details needs to execute a series of queries for each database connection. The map function is currently waiting for the database connection. Below is the start function function start() { console.log('func ...

javascriptnode.jses6-promise

How can I change the transparency of a CSS background color using JavaScript?

I have a question about CSS: .class1 { background: #fff } Now, I need to achieve the following: .class2 { background: rgba(255,0,0,0.5) }; Is there a way to use JavaScript only to change the background property of .class1 and give it an opacity of 0.5? ...

javascriptcss

Implementing a dynamic tab change functionality with props in Material UI tabs

Observing the following example: Link to Material UI Tabs Suppose I have these tab components within a widget, and I wish to include an image or icon. How can I link the icon or image so that when clicked, it changes to a specific tab without using react- ...

javascriptreactjsmaterial-ui

Making changes to an AngularJS property updates the value of an HTML attribute

One of my pages, base.html, contains the following code: <html lang="en" data-ng-app="MyApp" data-ng-controller="MyController"> <body style="background-color: [[ BackgroundPrimaryColor ]]"> . . . {{ block ...

javascripthtmlcssangularjs

Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?

I am currently working on a visual builder that utilizes different views for each component. Each view is defined as shown below: $(function() { var parallaxView = new Backbone.view.extend({ .... }); var parallaxView = new Backbone.view.e ...

javascriptbackbone.jsconstructorbackbone-views

What is the syntax for requesting a JSONArray in an Ajax call using jQuery?

After browsing through numerous resources like this, this, and this, I finally landed on this. The main objective is to iterate over the JSON data returned from an Ajax call, which is encoded using json_encode in PHP. When I inspect the object using cons ...

javascriptphpjqueryjsonajax

A guide to setting defaultValue dynamically in React Hook Form

Presently, I am facing an issue with editing the Product page. The props values are fetched through an API and sent from the parent component. However, I am struggling to set this value to my Datepicker input. This is because the defaultValue function from ...

javascriptreactjsreact-hook-form

Implementing Partial Login and Registration Views using AngularJS in conjunction with MVC5 and ASP.NET Identity

Embarking on the journey of creating a Single Page Application with log-in/register functionality using MVC5, ASP.NET Identity, and Angular feels like diving into a vast ocean of web development technologies. Despite being new to this realm, I delved into ...

javascriptangularjsknockout.jsasp.net-mvc-5asp.net-identity

There was an issue when trying to process the Javascript data structure with JSON.parse

Currently, I have the following data stored in a JavaScript variable: "{'Headings': [{'name': 'Behavior', 'majorTopic': 'N', 'vote': {'down': 1, 'up': 1}}, {'na ...

javascriptjqueryjsondictionary

JavaScript object conversion to Java Model is proving to be a challenge

When looking at my Spring controller and client-side Javascript code, I noticed that the Javascript object is having trouble reaching the Spring controller in Object form. Here is a snippet of my Controller code: @RequestMapping(value = "/addRating", meth ...

javascriptjavaajaxspring

Maintain GoogleMaps map object across different views in AngularJS

I have made the decision to utilize the AngularUI Map plugin for displaying Google Maps within a specific view. Here is how the template is structured: <div id="map"> <div ui-map="map" ui-options="mapOptions" id="map-canvas" ui-event="{&apo ...

javascriptgoogle-mapsangularjsangularjs-directiveangular-ui

How to dynamically display a div in Vue.js depending on the attributes of another element

I have a dilemma with my text container. My goal is to collapse the div if the text length exceeds a certain limit, and then display a button that says "...show more". When this button is clicked, the div should expand. Clicking it again should collapse th ...

javascripthtmlcssvue.js

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

In my HTML, I have an ng-repeat loop where a variable is displayed in table rows. I want the user to be able to click on a value and pass it to a JavaScript function for further action. The code snippet below showcases my earlier version which successful ...

javascriptangularjs