javascript - 如何在javascript中加载外部着色器？

Question

我想从外部文件加载片段着色器，但它不起作用。 (加载着色器后，不会出现警告框。)

var fs = document.createElement('script');
fs.setAttribute("type","x-shader/x-fragment");
fs.setAttribute("src", "shader.fs");

fs.onload = function() {alert('done');}
document.getElementsByTagName("head")[0].appendChild(fs);

Answer 1

在脚本标签中存储着色器只是一个约定，几个 WebGL 教程采用了这种约定，为着色器提供了一个简单的“生存”位置。它不必放在脚本标签中即可工作。

XHR 可能是降低一个的最简单方法。

var shaderXhr = new XMLHttpRequest();
shaderXhr.open("GET", "shader.fs", true);
shaderXhr.onload = function() {
    yourShaderParsingRoutine(this.responseText);
};
shaderXhr.send(null);