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…)
<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>