How to load external shader in javascript?

Question

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

Not all browsers trigger a "load" event on <script> elements. — Pointy
– Pointy, Commented Dec 12, 2011 at 14:15

Toji · Accepted Answer · 2011-12-12 16:18:57Z

4

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

answered Dec 12, 2011 at 16:18

Toji

34.6k22 gold badges109 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load external shader in javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related