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

I

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

，但它不起作用（我使用的是谷歌Chrome版本40.0.2214.111 m）。我获取此示例的错误：

---

这根本不是一个webgl问题，但您可以使用

XMLHttpRequest

加载代码，但前提是启动本地开发服务器。出于安全原因

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

python -m SimpleHttpServer 8001

然后，您可以使用浏览器导航到

localhost:8001

，并且应该能够向本地文件发送请求，而不会影响您的安全性

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

例如，es6对浏览器的支持仍然很低，因此您可能需要使用transpiler将其编译回es5（目前广泛支持的javascript）

以下是es6模板字符串（以及其他非常有用的功能）的示例，这些字符串可以跨越多行：

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

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

.textContent

html:

---

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

非常简单的方法：

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

---

但vshader必须是同一个域，例如，若您在vshader上运行web，则必须具有路径

我并没有pithon。那本书的作者也使用了

XMLHttpRequest

（查看错误消息），我发现了这个问题：（@Bush这实际上是一个非常常见的问题，如果其他问题中流行的答案几乎不总是“禁用浏览器安全性”，我会将它标记为一个重复的问题）：

var fsCode=document.getElementById（“VSHADER_SOURCE”）.innerText

这种方式适用于Google Chrome 40.0.2214和Opera 27.0。但它不适用于IE 11和Firefox 35.0.1（如我所见）。@Bush Oh yeah right

。textContent

是正确的属性。接得好：）谢谢。现在。。。我尝试将着色器的代码定位到外部js文件中，并在js代码中以字符串形式获取其内容：

。我的js代码：

var fsh_source=document.getElementById（'FSHADER_source'）.textContent。但它不起作用。不可能吗（我如何“运行web”？通常我会从windows资源管理器手动打开html文件。我知道，您必须运行虚拟服务器。例如，如果您有windows，您可以尝试安装。这是我以前使用的。它内部有apache，这正是您想要的。谢谢。我将尝试立即安装它，然后再次尝试打开LoadShaderFromFiles.html文件。可能的原因是：皱褶
 var fsCode = document.getElementById("VSHADER_SOURCE").textContent;

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