When I changed the encoding of a live texture to sRGB in Three.js, the frame rate dropped by fifty percent

I am currently working on a threejs application that requires updating a texture in each frame. The output encoding of the THREE.WebGLRenderer is set to sRGB.

Upon setting the texture encoding to sRGB, I observed that the rendering result is accurate. However, the frames per second (fps) decreased to about 26-29 on Mac Chrome and 30-40 on HUAWEI Meta40. Conversely, leaving the texture encoding unset resulted in incorrect rendering, but consistently high fps of 60 on both Mac Chrome and HUAWEI Meta40.

I am curious to understand why setting the texture encoding to sRGB caused a drop in fps. Is there any possibility to optimize the fps while maintaining the correct rendering result?

Below is a snippet of the demo code:

<html lang="en">
...

UPDATE:

Further investigation revealed that the render function itself executes quickly (around 1ms), but the requestAnimationFrame calling interval significantly increases when using sRGB texture encoding. This indicates that the GPU might be performing tasks that delay the browser from updating the next frame.

javascriptbrowserthree.jswebgl

Answer №1

Upon further investigation, I discovered a problem with this particular issue: https://github.com/mrdoob/three.js/issues/26183

To resolve the issue, I utilized manual transcoding of the texture from sRGB to Linear within the shader.

Answer №2

Implementing a workaround using Material.onBeforeCompile() significantly boosted my performance compared to adjusting texture encoding to sRGB.

Check out the code snippet here

material.onBeforeCompile = function ( shader ) {

                    shader.fragmentShader = shader.fragmentShader.replace(
                        '#include <map_fragment>',
                            `
              #ifdef USE_MAP
              
                 vec4 sampledDiffuseColor = texture2D( map, vMapUv );
              
                 // inline sRGB decode
                 sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.a );

                diffuseColor *= sampledDiffuseColor;

              #endif

                            `
                    );

                };

Source: Read more on this discussion here

The comments in the linked source mention that the performance issue is specific to Chrome and does not occur on browsers like Firefox.

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

Vue not displaying local images

I'm having trouble creating an image gallery with Vue.js because local images are not loading. I have the src attributes set in the data attribute and can only load images from external sources. For example: data() { return { imag ...

javascriptvue.js

Ember 2: Display a loading message only if the IDs were part of the initial response

I frequently use the following code snippet in my projects: {{#each model.posts as |post|}} <div>post.title</div> {{else}} <div>Loading the posts...</div> {{/each}} However, I sometimes face uncertainty regarding whether t ...

javascriptperformanceember.jshandlebars.jsember-data

"Utilizing a JavaScript array to track the start of the week and

I am encountering a logic problem with determining the start of the week. Below is a snippet of the code: WeekStarts(WeekN) { let WeekBD = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sa ...

javascriptarrayslogic

What is the best way to define a function that declares and returns an array for global use

I'm attempting to globally declare an array from a function so that it can be accessed by other functions as well. However, I'm unsure how to do this because the code involves a csvtojson converter which complicates things. I'm wondering if ...

javascriptarraysnode.js

Implement multiple selection of parameters in React Material UI version 1.0 and handle the onChange

Currently, I am working on implementing React Material UI 1.0.0-beta.34 and encountering an issue with the Select component. My challenge lies in trying to include an extra parameter in the onChange event handler, yet it seems that only the event parameter ...

javascriptreactjsreduxmaterial-ui

Improve the efficiency of the function for retrieving data from a lengthy string and organizing it into key-value pairs within an object

I am dealing with a string extracted from a text file, which is structured in the following way on each line. 1=abc|2=TsMarketDataCache|3=1|4=141061|6=2023-02-27T05:04:50.472|36=F|7=1584A Format: key1=value1|key2=value2|key3=value3|key4=value4...|keyN=va ...

javascriptnode.jsalgorithmbig-o

Utilizing Javascript for logging into Facebook

Feeling frustrated! I've been struggling to implement the Facebook Login pop-up on my website using the Facebook JavaScript API. Despite following tutorials, I can't seem to make the login pop-up appear. Instead, when I go through the login pro ...

javascriptphpfacebookfacebook-graph-apiauthentication

Tips for retrieving information from a highstock chart

Imagine I have a sample highstock chart on my website, similar to the one at this link. Is there a way to extract the data from the chart itself, even if the data used for creating the chart is not accessible to others? <img src="http://www.highchart ...

javascriptjsonhighcharts

Is there something I'm overlooking when it comes to vue router transitions?

I am attempting to implement a smooth transition between my Vue components with the following code: <template> <div id="app"> <router-link to="/">Go to home</router-link> <router-link to="Register">Go to register< ...

javascriptvue.jsvuejs2vue-componentvue-router

Initiate an AJAX call and in the event that a particular object is found in the JSON response, proceed to send a subsequent request targeting

My objective is to make an AJAX request to a URL and expect a JSON response consisting of two objects: group_id and next_page. If the next_page object is set, I want to send another AJAX request using the value of next_page as the URL. If there is no next_ ...

javascriptjqueryjsonajax

Interactive Range Slider for Scrolling Through Div Content

I am currently facing an issue where I want to implement a HTML range slider for controlling the horizontal scrolling of a div located below. This functionality is similar to that of a scroll bar, but it will be positioned away from the scrollable content ...

javascriptjquery

Top method for integrating configuration into a module

I'm trying to create a module called something.js that depends on a configuration, but I don't want the module itself to explicitly require the config. Additionally, I need my code editor to be able to analyze the module and provide autocomplete ...

javascriptnode.jsmodulerequire

Using cascading style sheets to switch a page into editing mode

Is it possible to change the view of a page after clicking a button without using javascript, and instead relying solely on CSS? I want to display a page with information where users can click an edit button and make changes within the same view rather th ...

javascriptjqueryhtmlcss

Utilizing jQuery to implement a function on every individual row within a table

I have a collection of objects that requires applying a function to each item, along with logging the corresponding name and id. Below is the snippet of my code: var userJson = [ { id: 1, name: "Jon", age: 20 }, { ...

javascriptjquery

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

Exploring the methods for retrieving and setting values with app.set() and app.get()

As I am granting access to pages using tools like connect-roles and loopback, a question arises regarding how I can retrieve the customer's role, read the session, and manage routes through connect-roles. For instance, when a client logs in, I retrie ...

javascriptexpressaclloopback

How to redirect to a different page within the same route using Node.js

When attempting to access the redirect on the login route using the same route, I first call the homeCtrl function. After this function successfully renders, I want to execute res.redirect('/login'). However, an error occurs: Error: Can't ...

javascriptnode.jsexpresshttp-redirectrender

How can I access the variable that evaluated as true in an if statement?

I'm facing a bit of a challenge with testing 2 variables for the same value. Is there a way to achieve this? var x = 'abc'; var y = 'def'; if (x=='abc' || y=='abc'){ z = 'result&a ...

javascriptnode.js

Executing a query with a `has many` relationship in MongoDB: Step-by-step guide

In my setup with Node, Express, and backbone, I am successfully retrieving records from MongoDB collections using simple queries. However, I am struggling to understand how to query more complex data, such as the one below: db.employees.aggregate( [ ...

javascriptnode.jsmongodbexpressbackbone.js