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

Question

我learn WebGL。我看到教程将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，但它不起作用（我使用谷歌浏览器版本40.0.2214.111米）。我得到这个样本的错误：

Answer 1

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

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

即可

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必须具有路径http://localhost:8010/vsshader