0

I've just broken the ice on WebGL, and I'm trying to make an extremely basic program. All I want is a canvas with half of it colored, diagonally. So far, I got this code to try and draw the triangle:

 var triangle_vertex=[
        -1,-1,
        1,-1,
        1,1,
        ];

        var TRIANGLE_VERTEX= GL.createBuffer ();
        GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);
        GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(triangle_vertex), GL.STATIC_DRAW);

        var triangle_faces = [0,1,2];
        var TRIANGLE_FACES = GL.createBuffer ();
        GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);
        GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(triangle_faces), GL.STATIC_DRAW);

        GL.clearColor(0.0, 0.0, 0.0, 0.0);
        function animate() 
        {
            GL.viewport(0.0, 0.0, canvas.width, canvas.height);
            GL.clear(GL.COLOR_BUFFER_BIT);
            GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);

            GL.vertexAttribPointer(_position, 2, GL.FLOAT, false,4*2,0);

            GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, TRIANGLE_FACES);
            GL.drawElements(GL.TRIANGLES, 3, GL.UNSIGNED_SHORT, 0);
            GL.flush();
            window.requestAnimationFrame(animate);
        }
    animate();

It's not drawing it though. It's just drawing a red canvas like I told it to in the HTML file. I am using c9.io to run the preview of the game, is that the problem? If not, where would my error be? I can provide plenty more code if necessary. Thank you.

Taylor Brown
  • 89
  • 1
  • 1
  • 9
  • Unfortunately, getting that first triangle to render is basically the hardest part in modern GL / WebGL :-). The problem could very well be in the shader code / parameter binding/ etc. Consider using webgl-debug.js (https://www.khronos.org/webgl/wiki/Debugging) to check your results. Also consider putting your current code into a JSFiddle (or as runnable javascript right here in your question), so we can help debug the code. – Paul-Jan Mar 17 '16 at 21:43
  • Will do, thanks for the response! – Taylor Brown Mar 17 '16 at 21:55
  • You need to post more code. Where are your shaders? You might find [these articles helpful](http://webglfundamentals.org) – gman Mar 19 '16 at 06:26

0 Answers0