我可以从外部文本文件将着色器加载到我的 JavaScript 代码中吗？

Question

我learnWebGL。我看到教程在 JavaScript 代码中包含着色器代码作为普通字符串。例如：

var VSHADER_SOURCE =
  'void main(){\n' +
  ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
  ' gl_PointSize = 10.0;\n' +
  '}\n';

我想将我的着色器代码放入外部文本文件中，并在需要时将它们加载到我的 JavaScript 代码中。我怎样才能做对？我不想在同一个源代码文件中混合 JavaScript 代码和着色器代码。

我查看了示例 LoadShaderFromFiles.html here，但它不起作用（我使用 Google Chrome 版本 40.0.2214.111 m）。我收到此样本的错误：

Answer 1

这根本不是 webgl 问题，但您可以使用 XMLHttpRequest 加载代码，但前提是您启动本地开发服务器。出于安全原因。

Python 附带一个非常易于使用的服务器。因此，如果您已经 python 安装了 cd 到您要在命令行中提供服务的目录中，只需键入

python -m SimpleHttpServer 8001

然后您可以使用浏览器导航到 localhost:8001，并且应该能够在不影响您的安全的情况下向您的本地文件发送请求。

另一个更棘手的设置解决方案是使用 es6，javascript 的新版本，带有很棒的模板字符串，非常适合在 javascript 中嵌入着色器代码。

es6 支持是浏览器仍然很低，所以你可能不得不使用转译器一段时间才能将其编译回 es5（目前广泛支持 javascript），例如 traceur.

这是你的示例使用 es6 模板字符串（以及其他非常有用的功能）的样子，它们可以跨越多行：

var VSHADER_SOURCE = `
  void main(){
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    gl_PointSize = 10.0;
  }
`;

人们使用的另一种技术是在 html 标记中添加脚本标签并加载他们的 .textContent.

html:

 <script type="glsl" id="VSHADER_SOURCE">
     void main(){
         gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
         gl_PointSize = 10.0;
     }
 </script>

js:

 var fsCode = document.getElementById("VSHADER_SOURCE").textContent;

Answer 2

这是因为您试图直接从磁盘加载文件，这是所有浏览器都禁止的跨域请求。

非常简单的方法：

var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(data) {
    console.log(data.target.response);
});
xhr.open("GET","vsshader");
xhr.send();

但是 vshader 必须是同一个域，例如，如果您运行在 http://localhost:8010 vsshader must have path http://localhost:8010/vsshader

上上网

我可以从外部文本文件将着色器加载到我的 JavaScript 代码中吗？

Can I load a shader into My JavaScript code from an external text file?

shader

webgl

vertex-shader

fragment-shader