如何在JavaScript中加载外部着色器？答案

【问题标题】：How to load external shader in javascript?如何在JavaScript中加载外部着色器？
【发布时间】：2012-01-18 12:30:15
【问题描述】：

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

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);

【问题讨论】：

并非所有浏览器都会在<script> 元素上触发“加载”事件。
更好用 XmlHttpRequest，更精简更快。
好的，但是如何使用 XmlHttpRequest 加载着色器？
你在用learningwebgl.com的教程吗？

标签： javascript html5-canvas webgl

【解决方案1】：

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

XHR 可能是最简单的下拉方法。

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

【讨论】：