Hi,

can anybody have a look and tell me whats wrong with this code?
Whenever I render a single frame (no renderloop) everything looks fine. Then on the second frame (if activated) the index buffer is coruppted and isnt't drawing what I expect.
But when I do call gl.bufferData(...) on the index buffer inside the renderloop it does work.

This seems to be suboptimal, since I dont want to transfer the indices on every frame into the GPU.

(The included class.js and math.js are just for vertex/matrix operations...)
Code :
<html>
<body>
  <canvas id="test" width="500" height="500" />
  <script type="text/javascript" src="../core/class.js"></script>
  <script type="text/javascript" src="../core/math.js"></script>
  <script type="text/javascript">
  var canvas = document.getElementById('test');
  var gl = canvas.getContext('experimental-webgl');
  gl.clearColor(0, 0, 0, 1);
  gl.clearDepth(1);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
 
  gl.viewport(0, 0, 500, 500);
  var pMatrix = d3.Math.Matrix4.create();
  d3.Math.Matrix4.perspective(45, 500 / 500, 0.1, 10000.0, pMatrix);
  var mvMatrix = d3.Math.Matrix4.create();
 
  var vshader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vshader, 'attribute vec3 aVertexPosition;uniform mat4 uMVMatrix;uniform mat4 uPMatrix;void main(void) {gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);}');
  gl.compileShader(vshader);
  if (!gl.getShaderParameter(vshader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(vshader));
  }
  var fshader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fshader, 'void main(void) {gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}');
  gl.compileShader(fshader);
  if (!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(fshader));
  }
  var program = gl.createProgram();
  gl.attachShader(program, vshader);
  gl.attachShader(program, fshader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
    throw new Error('Failed to link shader program');
  }
 
  var vertarray = gl.getAttribLocation(program, 'aVertexPosition');
  gl.enableVertexAttribArray(vertarray);
  var umvmat = gl.getUniformLocation(program, 'uMVMatrix');
  var upmat = gl.getUniformLocation(program, 'uPMatrix');
 
  var vertices = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertices);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
      [
       -1,  1, 0,
       -1, -1, 0,
        1,  1, 0,
        1, -1, 0
      ]
      ), gl.STATIC_DRAW);
  var indices = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
      [
       0, 1, 2, 
       1, 3, 2
      ]
      ), gl.STATIC_DRAW);
 
  var tick = function() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    d3.Math.Matrix4.identity(mvMatrix);
    d3.Math.Matrix4.translate(mvMatrix, [0, 0, -7]);
 
    gl.useProgram(program);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertices);
    gl.vertexAttribPointer(vertarray, 3, gl.FLOAT, false, 12, 0);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
 
    gl.uniformMatrix4fv(umvmat, false, mvMatrix);
    gl.uniformMatrix4fv(upmat, false, pMatrix);
 
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
    setTimeout(tick, 1000);
  }
  setTimeout(tick, 0);
  </script>
</body>
</html>