我在three.js中开发raymarched项目已经一年多了，随着复杂性的增加，初始化时间也增加了。现在，在浏览器中加载项目可能需要40多秒，但一旦加载，则会以+60fps的速度运行。我已经通过性能测试找到了罪魁祸首函数，它似乎被三个库中的InitMaterial函数挂断了。有人知道是什么原因导致了这次故障吗？就我个人而言，我认为这可能是由于我们在着色器中使用的制服数量太多，因为有相当多的制服。
你可以在这里找到有问题的代码。请注意，globalsinclude.glsl是制服列表所在的位置。
这是Windows上DirectX的常见问题。我怀疑，如果你在Linux或Mac上尝试相同的页面，或者在Windows上用--use-angle=gl启动Chrome，你会看到时间下降。
举个例子，你可以试试这个荒谬的着色器。在OpenGL上编译大约需要3秒，但在DirectX中，浏览器可能会认为它花费的时间太长，并重置GPU进程。
浏览器对这个问题无能为力，因为它主要是在微软的法庭上。微软为本机游戏设计了DirectX。本机游戏可以离线编译着色器。Web无法做到这一点，因为它们是传递给驱动程序的不透明二进制文件，可能充满漏洞。
有人讨论过在WebGL中添加异步着色器编译函数。着色器仍然需要40秒才能编译，只是不会阻塞页面。不过，目前这种情况不太可能发生。
我唯一能建议的就是简化着色器。如果你有循环，也许可以打开它们，看看这是否有帮助。