WebGL：如何有效地获取/缓存着色器？

Question

我目前正在开发一个基于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…" }

Answer 1

您可以使用PHP JSON库。读入所有着色器文件，然后用它们创建一个关联数组，并使用json_encode函数创建一个JSON对象。

$arr = array ('vertexShaderA'=>code,'vertexShaderB'=>code);
echo json_encode($arr);

然后在JS中使用XmlHttpRequest来获取JSON对象。或者使用PHP生成一个设置全局（例如echo "Shaders =", json_encode($shaders)）的JS文件，并使用＆lt; script＆gt;包含它。标签