问WebGL:如何高效地获取/缓存着色器？

EN

我目前正在开发一个基于WebGL的应用程序，我在使用着色器存储…时遇到了一些问题。

我在大多数示例中看到，着色器是在xHTML文件本身中以明文编写的。但是，这会使文件变得混乱，并且不允许缓存。此外，编辑和重用它们也不方便。对于组织来说，每个着色器具有一个文件是最好的。我仍然可以使用PHP将它们插入到生成的输出中，但这会增加页面的大小，并且不能有效地缓存。

另一种解决方案是使用XmlHttpRequest获取每个着色器，但我担心加载新页面的HTTP请求的数量(特别是当您有几十个着色器时！)可能很快就会成为性能问题。

最后，我一直在考虑动态地将所有着色器放在一个文件中，然后用XmtHttpRequest加载它。这只是一个请求，对于一个可以被浏览器本地缓存的文件。然而，我的JS不是那么好，我不知道我应该怎么做。我会在PHP中从着色器中构建文件，并在Javascript中提取它们。

但是怎么做呢？我一直在考虑使用XML或JSON在大文件中存储头文件，我需要有关提取它们的Javascript代码的帮助。谢谢!

我的PHP生成的着色器文件将如下所示：

<vertex-shader id="shaderA">
    …shader code…
</vertex-shader>
<fragment-shader id="shaderB">
    …etc…
</fragment-shader>

或者：

{ "vertexshaderA": "…shader code…",
  "fragmentshaderA": "…etc…" }