Results 1 to 3 of 3
  1. #1
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750

    Script tag is not including src, need help! (working with WebGL shader files)

    I started working with WebGL today and in the sample code I find things like this in the header of the HTML file:

    Code:
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec4 aVertexColor;
    
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
    
        varying vec4 vColor;
    
        void main(void) {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vColor = aVertexColor;
        }
    </script>
    When the page is loaded a javaScript function is called to get the shader code like this:
    Code:
            var shaderScript = document.getElementById('shader-vs');
    
    	var str = "";
    	var k = shaderScript.firstChild;
    	while (k) {
    		if (k.nodeType == 3) {
    			str += k.textContent;
    		}
    		k = k.nextSibling;
    	}
    
    	var shader = gl.createShader(gl.VERTEX_SHADER);
    	gl.shaderSource(shader, str);
    I would like to separate the shader code from the HTML file and place it into it's own file ... lets call it default.vert. How can I do this?

    I tried this:
    Code:
    <script id="shader-vs" type="x-shader/x-vertex" src="shader/default.vert"></script>
    When the javaScript runs, shaderScript.firstChild ends up being null. For some reason the source code is not placed between the Script tags in the HTML file... which is weird because in Firefox when I use firebug to view the HTML it looks fine to me... the code is actual in place between the script tags.

    So I've resorted to doing this right now:
    Code:
    <script id="shader-vs" type="x-shader/x-vertex">
    	<?php require( "shader/01-default.vert" ); ?>
    </script>
    This seems to work just fine. I was wondering if there is a better/different way of handling this? Any suggestions?
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

  2. #2
    Join Date
    Feb 2007
    Location
    Atlanta, GA
    Posts
    79
    My first guess is that you are not using a relative path.

    instead of

    Code:
    src="shader/default.vert"
    I think this would solve it

    Code:
    src="/shader/default.vert"

  3. #3
    Join Date
    Mar 2005
    Location
    Ontario, Canada
    Posts
    1,750
    I added the forward slash as you suggested but I still get the same error. When I debug the javaScript I see the following happen:

    I can get my DOM element by calling:
    var shaderScript = document.getElementById('shader-vs');

    however when I look at what is contained inside this node, it is blank! Therefore, var str = "" and the following while loop does nothing!
    Code:
    	var k = shaderScript.firstChild;
    	while (k) {
    		if (k.nodeType == 3) {
    			str += k.textContent;
    		}
    		k = k.nextSibling;
    	}
    C++, 3D OpenGL and Game Programming video tutorials:
    www.MarekKnows.com
    Play my free games: Ghost Toast, Zing, Jewel Thief

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •