Custom Shader Material Taking Forever To Initialize?

I've been working on a raymarched project in three.js for a little over a year now and as the complexity has increased so has the initialization time. It can now take over 40 secon

Solution 1:

This is a problem in general with DirectX on Windows. I suspect if you try the same page on Linux or Mac or start Chrome with --use-angle=gl on Windows you'll see the time drop.

As an example you can try this ridiculous shader. It takes about 3 seconds to compile on OpenGL but in DirectX the browser will likely decide it's taking too long and reset the GPU process.

There isn't much a browser can do about that issue as it's mostly in Microsoft's court. Microsoft designed DirectX for native games. Native games can compile shaders offline. The Web can't do that because they are opaque binaries passed to the driver and could be full of exploits.

There's been talk about adding asynchronous shader compilation functions to WebGL. The shader would still take 40 seconds to compile it just wouldn't block the page. At this point though that's unlikely to happen.

The only thing I can suggest is simplify your shaders. If you have loops maybe unwrap them and see if that helps.