javascript - WebGL:如何有效地获取/缓存着色器？

我目前正在开发一个基于 WebGL 的应用程序，我在着色器存储方面遇到了一些麻烦......

我在大多数示例中看到，着色器是在 xHTML 文件本身中以明文形式编写的。但是，这会使文件困惑并且不允许缓存。此外，编辑和重用它们也不方便。每个着色器一个文件最适合组织。我仍然可以使用 PHP 在生成的输出中插入它们，但它会增加页面的大小并且无法有效地缓存。

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

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

但是怎么办？我一直在考虑使用 XML 或 JSON 将 header 存储在大文件中，我希望获得有关提取它们的 Javascript 代码的帮助。谢谢!

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

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

或者:

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

最佳答案

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

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

然后在JS中使用XmlHttpRequest获取JSON对象。或者使用 PHP 生成一个设置全局变量的 JS 文件(例如 echo "Shaders =", json_encode($shaders))并使用 <script> 标签包含它。

关于javascript - WebGL:如何有效地获取/缓存着色器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5947418/