Home/ Questions/Q 7093831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T08:29:18+00:00

I have this very simple (yet big) code that doesn’t work. The triangle doesn’t

  • 0

I have this very simple (yet big) code that doesn’t work. The triangle doesn’t show.
It just pass 3 vertexes already multiplied by a ortho-matrix. Do nothing in vertex shader, and paint white in fragment shader.

<head>
    <script type="text/javascript">
        var gl;
        _main_web = function() {
            gl = document.getElementById("canvas").getContext("experimental-webgl");
            gl.clearColor(1,0,0,1);
            gl.enable(gl.DEPTH_TEST);
            gl.viewport(0, 0, 640, 480);
            gl.clearDepth(1);

            buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array([[-1, -1, -0.12000000476837158, 1, 
0, 1, -0.12000000476837158, 1, 
1, -1, -0.12000000476837158, 1]]),
            gl.STATIC_DRAW);

            vert_shader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vert_shader,"attribute vec4 vertex;void main(void) {gl_Position = vertex;}\n");
            gl.compileShader(vert_shader);
            if( !gl.getShaderParameter(vert_shader,gl.COMPILE_STATUS ) ) {
                throw 0;
            }

            frag_shader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(frag_shader,"void main(void) { gl_FragColor = vec4(1.0,1.0,1.0,1.0); } \n");
            gl.compileShader(frag_shader);
            if( !gl.getShaderParameter(frag_shader,gl.COMPILE_STATUS) ) {
                throw 1;
            }

            program = gl.createProgram();
            gl.attachShader(program,vert_shader);
            gl.attachShader(program,frag_shader);
            gl.linkProgram(program);
            if( !gl.getProgramParameter(program,gl.LINK_STATUS) ) {
                throw 2;
            }

            vertexLocation = gl.getAttribLocation(program,"vertex");

            gl.deleteShader(frag_shader);
            gl.deleteShader(vert_shader);
            gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );

            gl.useProgram(program);
            gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
            gl.enableVertexAttribArray(vertexLocation);
            gl.vertexAttribPointer(vertexLocation,4,gl.FLOAT,false,0,0);

            gl.drawArrays(gl.TRIANGLES,0,3);
        }
    </script>
    <style>
        body {
            margin:0px;
        }
    </style>
</head>
<body onload="_main_web()">
    <canvas id="canvas" width=640 height=480>

    </canvas>
</body>

I am debugging the whole afternoon and couldn’t find the error. getError always return 0. Is there anything I am missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    gl.drawArrays(4,3,0);

    This looks weird. Should look like:

    gl.drawArrays(
    /* mode */ gl.TRIANGLES,
    /* first vertex */ 0,
    /* num vertices */ 3
);

    Also (unimportant):

    gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);

    The last bindBuffer isn’t important at this moment. You need it when you set an attribute location with gl.vertexAttribPointer, but once it’s set you can change the ARRAY_BUFFER binding to anything.

    You would need to do this if several attributes were located in different VBOs.

    (Note: This is not the case for ELEMENT_ARRAY_BUFFER bindings, which must be set if you do drawElements or something.)

    • 0