Is your custom shader material experiencing a lengthy initialization process?

After spending more than a year working on a raymarched project in three.js, I've noticed that as the complexity of the project has increased, so has the initialization time. It now takes over 40 seconds to load the project in the browser, but once loaded, it runs smoothly at +60fps. Through performance tests, I have identified the InitMaterial function within three's library as the culprit for this delay. Could anyone shed some light on what might be causing this issue? My hunch is that it could be related to the numerous uniforms we use in the shader.

You can access the relevant code here. Please note that the globalsinclude.glsl file contains the list of uniforms being used.

Answer №1

One common issue with DirectX on Windows is performance. You may find better results if you try loading the same page on Linux or Mac, or running Chrome with --use-angle=gl on a Windows machine.

For example, you can experiment with this complex shader. It compiles in just 3 seconds on OpenGL, but might cause the browser to reset the GPU process when using DirectX.

This problem largely falls under Microsoft's responsibility since they designed DirectX for native games that compile shaders offline. However, the web environment cannot afford this luxury due to security risks associated with opaque binaries passed to drivers.

Although there have been talks about implementing asynchronous shader compilation functions into WebGL to prevent blocking pages, it seems unlikely to happen any time soon. In the meantime, simplifying your shaders by unwrapping loops could potentially improve performance.

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

karma is failing to run the test scenario

I am just starting out with karma and I'm having trouble running test cases. Below is my setup: karma.config.js module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) base ...

There is no need for blank space when using the JSF inputtext component

When using a jsf form with required inputs, checking for empty spaces can be important. Utilizing the required="true" attribute helps, but it's also necessary to prevent users from submitting forms with just empty space characters entered. One approac ...

Execute AJAX function following the completion of table loading from PHP in Ajax

I'm currently working on a shopping cart feature that involves calculating certain figures based on table values. The process involves loading the table using AJAX and PHP, which is functioning properly. However, I'm facing an issue where I nee ...

What is the best way to send two mongoose find queries to the correct GET route?

I am facing an issue with my app where I have two separate routes using app.get to render "/" and fetch data from two different MongoDB collections using mongoose find{} methods. I also have corresponding post routes that redirect the data entered in forms ...

What is the best way to deploy a REST API utilizing an imported array of JavaScript objects?

I have been using the instructions from this helpful article to deploy a Node REST API on AWS, but I've encountered a problem. In my serverless.yml file, I have set up the configuration for the AWS REST API and DynamoDB table. plugins: - serverless ...

The execution of async.each does not complete successfully

I'm facing an issue with a simple function that retrieves the word count from a URL. The script runs smoothly with a low number of URLs, limiting the async to 4 at a time. I keep an eye on my RAM and CPU usage, but they never come close to maxing out. ...

Utilizing LocalStorage in conjunction with the redux state management

Currently, I am working on a single-page application using React and Redux. I have encountered the need to store certain data locally and ensure that it remains synchronized with the appState in local storage, even after a page refresh. Despite being new ...

How come I'm facing difficulties when trying to send a post request to my WebApi using AngularJS's POST method?

I've uploaded "mytest.html" to the IIS server, and this project consists of WebApi and AngularJS. However, I am unable to make a correct request to my WebApi. I'm not sure why? 【HTML Code Snippets】 <!DOCTYPE html> <html> ...

How to retrieve an anchor element from a list using JavaScript

My current code loops through each <li> within a <td> cell and adds a class to the <li>. I have now inserted <a> tags between each <li> and am facing challenges in accessing the <a> tags. What I actually want is to assig ...

Tips for incorporating a title and script into a Vue template using Nuxt.js

Looking to enhance your website's SEO by adding title, description, and other HTML meta tags? Wondering how to achieve this in a Vue template? For instance, let's say you want to include the meta tags in your template.vue file. Additionally, y ...

Conceal the information beneath a see-through fixed navigation bar when scrolling downward

the issue: I am facing a challenge with my transparent fixed navbar that has a margin-top gap. The content below the navbar needs to be positioned under it while scrolling down, but the background of the page is a dynamic slideshow of various images. This ...

Tips for setting elevation breakpoints for Paper components in MUI

I'm currently utilizing the MUI5 framework for my Project and I must say it's been great so far. I recently created a login page where I incorporated the Paper Component. Within the Paper Component, I wanted to specify an Elevation level. This i ...

Tips for transferring client-side data to the server-side in Angular, Node.js, and Express

Seeking a straightforward solution to a seemingly basic question. I am utilizing Angular's $http method with a GET request for a promise from a specific URL (URL_OF_INTEREST). My server runs an express script server.js capable of handling GET reques ...

Unexpected identifier error encountered while working with XMPP in Node.js

Error: Unexpected identifier XMPP with Node.js Recently delving into the world of Node.js and XMPP, I encountered a syntax error while trying to read the chat stanza using ltx. The specific error message was: const logEntry = 'Received message from ...

Struggling to troubleshoot issues with asynchronous tasks in Angular? Encountering timeouts while waiting for elements on an Angular page? Learn

Edit: I have identified the source of my issue with guidance from @ernst-zwingli. If you are facing a similar error, one of his suggested solutions might be beneficial to you. My problem stems from a known Protractor issue itself. For those who suspect the ...

Bring in all SCSS styles from a single file and apply them to a React component

I am attempting to incorporate the entire SCSS file into a React component. I attempted to use the styleName props but was unsuccessful import React from 'react' import Calendar from 'calendar' import { calendarStyles } from './ ...

Can the CSS property of a class be altered in real-time with jQuery?

I am working on a project where I have a predefined CSS style in one class. I am currently attempting to load that page as an IFRAME on another website. My goal is to modify the CSS property of that specific class from the loaded site using jQuery. Unfor ...

Calculate the sum of floating point or decimal numbers from a textarea using JavaScript

I'm trying to work with a text area that contains decimal/float numbers. However, the code I found online seems to be ignoring commas and periods when summing up the values. Is there a way to handle decimal/float numbers correctly in this scenario? ...

The straightforward splitting of a string is yielding an object rather than an array

Attempting a simple string split in NodeJS is resulting in an unexpected outcome where it returns an object instead of an array. var mytext = "a,b,c,d,e,f,g,h,i,j,k"; var arr = mytext.split(","); console.log(typeof mytext); <======= output string conso ...

What is preventing jQuery UI from detecting jQuery?

I have successfully created a JavaScript widget that is capable of being embedded on any third-party website, in any environment. The widget relies on jQuery and jQuery UI for its functionality. After following the guidelines outlined in How to embed Javas ...