Separate shaders from HTML file in WebGL
        Posted  
        
            by 
                Chris Smith
            
        on Game Development
        
        See other posts from Game Development
        
            or by Chris Smith
        
        
        
        Published on 2011-02-17T03:33:40Z
        Indexed on 
            2011/02/17
            7:34 UTC
        
        
        Read the original article
        Hit count: 486
        
JavaScript
|webgl
I'm ramping up on WebGL and was wondering what is the best way to specify my vertex and fragment shaders.
Looking at some tutorials, the shaders are embedded directly in the HTML. (And referenced via an ID.) For example:
<script id="shader_1-fs" type="x-shader/x-fragment"> 
  precision highp float;
  void main(void) {
    // ... 
  }
</script> 
<script id="shader_1-vs" type="x-shader/x-vertex"> 
  attribute vec3 aVertexPosition;
  uniform mat4 uMVMatrix;
  // ...
My question is, is it possible to have my shaders referenced in a separate file? (Ideally as plain text.) I presume this is straight forward in JavaScript. Is there essentially a way to do this:
var shaderText = LoadRemoteFileOnSever('/shaders/shader_1.txt');
        © Game Development or respective owner