如何在JavaScript中加载外部着色器？ [英] How to load external shader in javascript?

问题描述

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

I want to load the fragment shader from an external file, but it dont works. (after the shader is loaded, the alertbox don't appear.)

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

推荐答案

在脚本标记中存储着色器只是一种约定几个WebGL教程选择了为着色器提供一个生活的简单位置。它不必放在脚本标签中工作。

Storing a shader in a script tag is simply a convention that several WebGL tutorials picked up to give the shader a simple place to "live". It doesn't have to be put in a script tag to work.

XHR可能是最简单的方法。

XHR is probably the easiest way to pull one down.

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

这篇关于如何在JavaScript中加载外部着色器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！