Identifying sluggish GPU performance on a mobile device using three.js: A guide for developers

My game runs extremely slow on older mobile devices like the Samsung Galaxy S4 and iPhone 5 when shadows are enabled. However, when shadows are turned off, performance improves significantly.

Is there a way to detect a slow GPU in order to disable shadows completely on slower devices? Or is there a way to enhance shadow performance?

I have tried adjusting the shadow.mapSize on lights and the shadowMap.type on the renderer, but it did not boost performance.

Some additional details:

I am using a PerspectiveCamera and WebGLRenderer with a render size of 1700x667.
Lights used: 

new THREE.AmbientLight(0xffffff, 0.7)
and 
new THREE.SpotLight(0xffffff, 0.4, 4000, 100)

Materials used: MeshPhongMaterial

javascriptperformancethree.jswebglgpu

Answer №1

Here are some suggestions

  1. Consider conducting a benchmark test, as Andrey recommended.

  2. Experiment with setting 

    failIfMajorPerformanceCaveat: true
    when initializing the WebGL context.

  3. Generate a fingerprint by collecting various statistics using gl.getParameter and observe if certain fingerprints correlate with slower performance.

  4. Utilize the WEBGL_debug_renderer_info extension to access unmasked renderer/vendor strings for more data on point #3.

  5. Include an options menu in your game that allows users to customize their graphics settings, similar to most PC games.

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

Safari IOS experiencing issue with element disappearing unexpectedly when input is focused

I am facing a situation similar to the one discussed in the question (iOS 8.3 fixed HTML element disappears on input focus), but my problem differs slightly. My chatbox iframe is embedded within a scrollable parent, and when the iframe is activated, it exp ...

javascriptioscssmobile-safari

When trying to access a property in Typescript that may not exist on the object

Imagine having some data in JS like this example const obj = { // 'c' property should never be present a: 1, b: 2, } const keys = ['a', 'b', 'c'] // always contains 'a', 'b', or 'c' ...

javascriptreactjstypescript

The text entered in the textbox vanishes after I press the submit button

When a user selects a value in a textbox and clicks the submit button, the selected value disappears. <div class="panel-body" ng-repeat="patient in $ctrl.patient | filter:$ctrl.mrd"> <form> <div class="form-group"> ...

javascriptjqueryhtml

injecting javascript dynamically using jquery

I am attempting to conditionally load a script in the case that the browser being used is IE8. To achieve this, I have employed jQuery's .getScript function as it allows me to execute certain actions after the script has been loaded. The issue lies in ...

javascriptjquery

Adjust the Bootstrap date-time-picker to accommodate various languages, while ensuring that the selected date and time are displayed in English

As I work on my app, I've implemented localization support for multiple languages. When initializing the datetimepicker in the app, I provide the current language like this: datetimepicker({ locale: languageObj.language, format: 'DD MMM ...

javascriptjqueryajaxbootstrap-4

Find the sum and subtotals for two different categories in a JavaScript array

Currently, I'm in the process of aggregating three totals: totalPoints, monthlyTotals, and monthlyByType by utilizing Array.prototype.reduce. So far, I've managed to successfully calculate totalPoints and monthlyTotals, but I'm encountering ...

javascriptarraysecmascript-6javascript-objects

Quantities with decimal points and units can be either negative or positive

I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...

javascripthtmlarraysvalidationvue.js

Dynamic filtering with Javascript

I am searching for inspiration on how to create a filter in the left sidebar that dynamically updates the page content when clicked, and if there are subcategories, displays them below the selected filter in the sidebar. I've discovered that AJAX is ...

javascriptmysqljsonajax

Babelify is having trouble transpiling JSX code within the node_modules directory

I have successfully set up Babelify to transpile jsx code to js, and I've created node_modules before, allowing me to link them without a specific file path, just the package name. However, when I add jsx code within my node_module code, babelify flag ...

javascriptreactjsnpmnode-modulesjsx

Sometimes, it feels like TypeScript's async await does not actually wait for the task to complete before moving on

Recently, I have been transitioning to using the async await pattern more frequently instead of the traditional Promise syntax because it can help in keeping the code structure cleaner. After some experimentation, I felt like I had a good grasp on how to u ...

javascriptangulartypescriptasync-await

Submitting content to numerous webpages

I'm looking to submit form data on multiple pages, while keeping the main action as "". After clicking, I want the page to refresh but also send the POST data to another .php file. This is necessary because the other .php file generates a graph that ...

phpjavascriptjqueryajax

Establish individual states for every dynamically created component using the same handler function

I have a component in React built with Material UI, where the child component (Paper) is dynamically generated depending on the number of items in an array. The challenge I'm facing is changing the elevation property of the Paper component when it&ap ...

javascriptreactjsmaterial-uireact-hooks

tracking scroll position within div on main page

I have a div tag enclosed within a content tag due to the implementation of a masterpage containing the forms and body tags. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> <div id="xxx" style="overflow:s ...

c#javascriptasp.netgridviewhtml

Unlock the potential of Stripe's confirmCardSetup method when working with multiple elements in Laravel Cashier integrated with a Vue application. Master

Is it possible to send inputs separately from Stripe using the confirmCardSetup method, even though the documentation only mentions one cardElement element? https://stripe.com/docs/js/setup_intents/confirm_card_setup -> check the official documentation ...

javascriptlaravelvue.jsstripe-paymentslaravel-cashier

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml

Unable to make a successful POST request using the JQuery $.ajax() function

I am currently working with the following HTML code: <select id="options" title="prd_name1" name="options" onblur="getpricefromselect(this);" onchange="getpricefromselect(this);"></select> along with an: <input type="text" id="prd_price" ...

javascriptphpjquerymysqlajax

Displaying Various Items Based on the Language Selected in the Google Translate Widget

Currently, I am in the process of developing a website complete with a shopping cart that will feature different products based on the country of the customer. The client has requested the use of Google Translate to allow for language changes. To accommod ...

javascriptphpgoogle-translate

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

Can regular JavaScript objects contain jQuery objects?

Lately, I've been working on optimizing the code for a carousel I built. One idea I'm toying with is organizing all my variables and functions into a JavaScript object to keep them separate from the rest of the code in the file (which happens to ...

javascriptjqueryobject

How to divide a string by space after a specific character count using Javascript

I've been working on a tool that can divide input text into chunks based on a specific character count without breaking words in the process. Currently, I have set it to split the text after 155 characters. Even after conducting extensive research, ...

javascripthtml