Why is this WebGL shader type invalid?

Question

Disclaimer: I just started using WebGL today.

I am attempting to draw some basic things on an HTML5 canvas using WebGL context in lieu of the "standard" 2d context.

I am using the developer.Mozilla.org WebGL documentation as reference, and have begun messing around with some code.

I have figured out that a vertex shader is necessary for rendering "clipspace" coordinates, and a fragment shader is necessary for rendering color for pixels being rendered. Per the WebGL wikipedia page, it seems shaders are coded directly in GLSL, which is a high-level dialect of C. On the Mozilla documentation, these code is stringified in JavaScript, but there are many ways to do it...

Here is the code I have so far, but the error I am running into has to do with the VERTEX_SHADER enum of the canvas' WebGL context is not recognized, and seeing that the context's documentation and prototype have such an enum, I want to know what is causing this error or why I am seeing this error.

The code is below, and thanks for any help.

<html>
<head>
    <title>webgl try</title>
</head>
<body>
<canvas width="600" height="400" id="canvas" style="border: 1px dotted;"> </canvas>

<script>
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("webgl");

    function createShader (gl, sourceCode, type) {
      var shader = gl.createShader(type);
      gl.shaderSource(shader, sourceCode);
      gl.compileShader(shader);

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        var info = gl.getShaderInfoLog(shader);
        throw "could not compile web gl shader. \n\n" + info;
      }
    }

    var vertexShaderSource =
      "attribute vec4 position;\n"
      "void main() {\n"+
      "  gl_Position = position;\n"+
      "}\n";

    var fragmentShaderSource =
      "void main() {\n"+
      "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
      "}\n";

    /*
     * create program
     */

    var program = gl.createProgram();

    // ERROR COMES ON THIS LINE WHEN ATTEMPTING TO ACCESS THE VERTEX_SHADER ENUM: WebGL: 
    // **INVALID_ENUM: createShader: invalid shader type**
    var vertexShader = gl.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
    var fragmentShader = gl.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

    // Attach pre-existing shaders
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    gl.linkProgram(program);

    if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
       var info = gl.getProgramInfoLog(program);
       throw "Could not compile WebGL program. \n\n" + info;
    }
</script>
</body>
</html>

score 2 · Accepted Answer · answered Jun 14 '16 at 16:11

Your code contains semantic errors.

It should be

var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

Because you are calling the createShader function above and not a method of webgl-context.

Your createShader should return the shader it created:

function createShader (gl, sourceCode, type) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, sourceCode);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        var info = gl.getShaderInfoLog(shader);
        throw "could not compile web gl shader. \n\n" + info;
    }

    return shader;
}

You also missed a + in vertexShaderSrc.

Thanks! I seem to mess up semantically when working with api's, I don't know why. I think it's because I feel like I just putting pieces of a puzzle together instead of coding something, and I generally don't like to inspect other people's code. — pward, Jun 14 '16 at 16:15

Why is this WebGL shader type invalid?

1 Answers1