title: Drawing 2D polygons in openGL
body: <p>I'm using DuoCode to try and draw 2D polygons in webGL. I wrote specific shaders for this purpose that take 2D-vertices and z position as well as some other data:</p>
  
  <pre><code>&lt;!-- Fragment shader program --&gt;
  &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
      varying highp vec2 vTextureCoord;
      uniform highp vec3 uColor;
      uniform sampler2D uSampler;
      uniform int uSamplerCount;
  
      void main(void) {
      highp vec4 texColor =vec4(uColor, 1.0);
      if(uSamplerCount &gt; 0)
          texColor = texture2D(uSampler, vTextureCoord);
  
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
  &lt;/script&gt;
  
  &lt;!-- Vertex shader program --&gt;
  &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
      attribute highp vec2 aVertexPosition;
      attribute highp vec2 aTextureCoord;
  
      uniform highp vec2 uPosition;
      uniform highp float uZLayer;
  
      varying highp vec2 vTextureCoord;
  
      void main(void) {
      gl_Position = vec4(uPosition + aVertexPosition, uZLayer, 1.0);
      vTextureCoord = aTextureCoord;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>In this case I disabled textures and just try to draw a white polygon. The shaders compile without error.</p>
  
  <p>I create my vertex buffers like this:</p>
  
  <pre><code>    public void UpdateBuffers()
      {
          System.Console.WriteLine("Updating buffers");
          System.Console.Write("Vertices: ");
          for (int i = 0; i &lt; rotatedPoints.length; i++)
              System.Console.Write(rotatedPoints[i] + ", ");
          System.Console.WriteLine(" ");
          System.Console.Write("texCoords: ");
          for (int i = 0; i &lt; texCoords.length; i++)
              System.Console.Write(texCoords[i] + ", ");
          System.Console.WriteLine(" ");
          System.Console.Write("Triangles: ");
          for (int i = 0; i &lt; triangles.length; i++)
              System.Console.Write(triangles[i] + ", ");
          System.Console.WriteLine(" ");
  
          gl.bindBuffer(GL.ARRAY_BUFFER, bVertexPositions);
          gl.bufferData(GL.ARRAY_BUFFER, rotatedPoints.As&lt;ArrayBufferView&gt;(), GL.STATIC_DRAW);
  
          gl.bindBuffer(GL.ARRAY_BUFFER, bTextureCoords);
          gl.bufferData(GL.ARRAY_BUFFER, texCoords.As&lt;ArrayBufferView&gt;(), GL.STATIC_DRAW);
  
          gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, bIndices);
          gl.bufferData(GL.ELEMENT_ARRAY_BUFFER, triangles.As&lt;ArrayBufferView&gt;(), GL.STATIC_DRAW);
      }
  </code></pre>
  
  <p>which again goes without errors and gives me the following output:</p>
  
  <blockquote>
    <p>Updating buffers
    Vertices: 0, 0, 10, 0, 10, 10, 0, 10,<br>
    texCoords: 0, 1, 1, 1, 1, 0, 0, 0,<br>
    Triangles: 3, 0, 1, 3, 1, 2,  </p>
  </blockquote>
  
  <p>(Vertices are 2-component)</p>
  
  <p>I'm trying to draw a single polygon like this:</p>
  
  <pre><code>gl.viewport(0, 0, (int)canvas.width, (int)canvas.height);
  gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
  testSprite.Draw(aVertexPosition, aTextureCoord, uColor, uPosition, uZLayer, uSampler, uSamplerCount);
  </code></pre>
  
  <p>a denotes attributes, u denotes uniforms locations here.</p>
  
  <p>The drawing itself looks like this:</p>
  
  <pre><code>public void Draw(uint aVertexPosition, uint aTextureCoord,
          WebGLUniformLocation uColor, WebGLUniformLocation uPosition, WebGLUniformLocation uZLayer, WebGLUniformLocation uSampler, WebGLUniformLocation uSamplerCount)
      {
  
          //position
          gl.uniform2f(uPosition, this.position.x, this.position.y);
          gl.uniform1f(uZLayer, this.position.z);
          gl.uniform3f(uColor, 1f, 0.5f, 0.5f);
          gl.uniform1i(uSamplerCount, 0);
  
          //vertex data
          gl.bindBuffer(GL.ARRAY_BUFFER, bVertexPositions);
          gl.vertexAttribPointer(aVertexPosition, 2, GL.FLOAT, false, 0, 0);
  
          gl.bindBuffer(GL.ARRAY_BUFFER, bTextureCoords);
          gl.vertexAttribPointer(aTextureCoord, 2, GL.FLOAT, false, 0, 0);
  
          gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, bIndices);
  
          //texture
         // gl.activeTexture(GL.TEXTURE0);
         // gl.bindTexture(GL.TEXTURE_2D, texture);
         // gl.uniform1i(uSampler, 0);
  
          //draw
          gl.drawElements(GL.TRIANGLES, triangles.length, GL.UNSIGNED_SHORT, 0);
      }
  </code></pre>
  
  <p>Again no errors in the JS console.
  Unfortunately the screen just stays black. I think there error might be connected to the fact that the vertice array has 2 components, but I can't figure it out. I thought I had understood the basics of openGL but apparently I was wrong, since this should really not be that hard of a problem. Yet I can't get anything drawn. If you need it I can post the remaining code, like the buffer creation but I think my mistake must be somewhere in this code. I hope this is not too much of a "find the bug somewhere in my code" post, but I really don't know where to go from here, I just can't figure out my mistake.</p>
  
  <p>EDIT: Found my mistake, I was passing int to the element index list, but I marked them as ushort</p>