How to include shaders?

ATM in the html page Im going

<script id=“Myshader-vs” type=“x-shader/x-vertex”>

But I’ld like to have a separate file/s with the shaders, + then in the html go

<script type=“x-shader/x-vertex” src=“Myshader-vs”></script>

but this doesnt work.

Any ideas of a better method than what Im currently using

cheers Zed

You can write it in a js-String in your JS-file.

var vertexShaderSourceString = '  ...   // shadercode goes here \
                            // escape newlines with a backslash \

Personally I prefer the html-variant, because the newline escaping disturbs me. If you switch mode for example in emacs from html to c you get some syntax highlighting.


yes thats a method of doing it, but thats even worse than what Im doing at the moment
but cheers anyways

You can load external text file with shader using XMLHttpRequest object.

var getSourceSynch = function(url) {
  var req = new XMLHttpRequest();"GET", url, false);
  return (req.status == 200) ? req.responseText : null;

so then you can pass it as a paramater to the shaderSource function, f.e.:

var shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, getSourceSynch("shaders/vertex.shdr"));

Note that if you test on your local machine using file protocol instead of http then req.status should be compared to 0 and on chrome/chromium you must have –allow-file-access-from-files parameter added
More here (in polish with example): … anslation/

Cheers wglb, yes that should work. Ill give it a go later on

I’m also struggling with this. Here’s the story:

I am helping with an OpenGL/Computer Graphics course, and would like to allow use WebGL as one of three implementation languages: OpenGL, OpenGL-ES, and WebGL.

One issue is that we would like the shaders be independent files, so we can use them in all three languages. This prompts us to use XMLHttpRequests (AJAX), but we would like to avoid exposing the class to the sophistication of async i/o. Instead, we’d prefer a simple loadfile(filename) procedure, like wglb suggests, that returns when the file is loaded.

So: what do you suggest? We do have a perfectly usable loadfile(filename) solution, but it is not async and I’m told this is Not Done! I.e. it freezes the browser during the sync request.

Is there a way loadfile() could be async yet still retain a simple programming model? Or is sync really OK, not to worry? Or some other great solution I haven’t thought about!

I do it synchronously - and while doing synchronous I/O is generally a bad idea, in this case, the shader files are so tiny that it hardly matters.

Hello and my apologies for replying to an old thread.

Is there a simple example of “including” shader source? I’ve tried the technique described above with no luck.

I’m a relative newbie to HTML5 and WebGL … many years experience with GL, GLSL, etc.

Any help is greatly appreciated.


Here you have working loading shader sources from external file: … anslation/ (Search for getSourceSynch function)