Results 1 to 9 of 9

Thread: How to include shaders?

  1. #1

    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

  2. #2
    Junior Member
    Join Date
    Jan 2011

    Re: How to include shaders?

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

    Code :
    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.


  3. #3

    Re: How to include shaders?

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

  4. #4
    Junior Member
    Join Date
    Aug 2010

    Re: How to include shaders?

    You can load external text file with shader using XMLHttpRequest object.
    Code :
    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.:
    Code :
    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/

  5. #5

    Re: How to include shaders?

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

  6. #6
    Junior Member
    Join Date
    Feb 2011

    Re: How to include shaders?

    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!

  7. #7
    Senior Member
    Join Date
    May 2010

    Re: How to include shaders?

    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.

  8. #8
    Junior Member
    Join Date
    Sep 2011

    Re: How to include shaders?

    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.


  9. #9
    Junior Member
    Join Date
    Sep 2011

    Re: How to include shaders?

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

Similar Threads

  1. Shaders on OpenGL SC
    By selmanduatepe in forum OpenGL SC
    Replies: 1
    Last Post: 04-05-2010, 07:17 AM
  2. Shaders activated?
    By ooohYeah in forum OpenGL ES
    Replies: 0
    Last Post: 08-07-2009, 09:48 AM
  3. Quats and Shaders
    By ffelagund in forum OpenGL ES
    Replies: 2
    Last Post: 05-19-2005, 05:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Proudly hosted by Digital Ocean