I simple can’t see what I’m doing wrong. Could anyone please help?
I’ll keep it as simple as I can.
I’m working with WebGL.
I am rendering 1 triangle. When I use drawArrays it all works fine.
I have an initialise buffers method and a Draw method as follows:
function InitialiseBuffers()
{
m_triangleVertexPositionBuffer = m_WebGLContext.createBuffer();
m_WebGLContext.bindBuffer(m_WebGLContext.ARRAY_BUFFER, m_triangleVertexPositionBuffer);
var vertices = [0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0];
m_WebGLContext.bufferData(m_WebGLContext.ARRAY_BUFFER, new Float32Array(vertices), m_WebGLContext.STATIC_DRAW);
m_triangleVertexPositionBuffer.itemSize = 3;
m_triangleVertexPositionBuffer.numItems = 3;
}
AND
function DrawGLScene()
{
m_WebGLContext.viewport(0, 0, m_WebGLContext.viewportWidth, m_WebGLContext.viewportHeight);
m_WebGLContext.clear(m_WebGLContext.COLOR_BUFFER_BIT | m_WebGLContext.DEPTH_BUFFER_BIT);
mat4.perspective(45, m_WebGLContext.viewportWidth / m_WebGLContext.viewportHeight, 0.1, 100.0, m_pMatrix);
mat4.identity(m_mvMatrix);
mat4.translate(m_mvMatrix, [0.0, 0.0, -7.0]);
m_WebGLContext.vertexAttribPointer(m_shaderProgram.vertexPositionAttribute, m_triangleVertexPositionBuffer.itemSize, m_WebGLContext.FLOAT, false, 0, 0);
m_WebGLContext.bindBuffer(m_WebGLContext.ARRAY_BUFFER, m_triangleVertexPositionBuffer);
SetMatrixUniforms();
m_WebGLContext.drawArrays(m_WebGLContext.TRIANGLES, 0, m_triangleVertexPositionBuffer.numItems);
}
THIS ALL WORKS FINE.
I just want to replace the drawArrays call with a drawElements call. SO now my initialise method is:
function InitialiseBuffers()
{
m_triangleVertexPositionBuffer = m_WebGLContext.createBuffer();
m_WebGLContext.bindBuffer(m_WebGLContext.ARRAY_BUFFER, m_triangleVertexPositionBuffer);
var vertices = [0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0];
m_WebGLContext.bufferData(m_WebGLContext.ARRAY_BUFFER, new Float32Array(vertices), m_WebGLContext.STATIC_DRAW);
m_triangleVertexPositionBuffer.itemSize = 3;
m_triangleVertexPositionBuffer.numItems = 3;
m_triangleVertexIndicesBuffer = m_WebGLContext.createBuffer();
m_WebGLContext.bindBuffer(m_WebGLContext.ELEMENT_ARRAY_BUFFER, m_triangleVertexIndicesBuffer);
var indices = [0, 1, 2];
m_WebGLContext.bufferData(m_WebGLContext.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), m_WebGLContext.STATIC_DRAW);
}
and my draw method is:
function DrawGLScene()
{
m_WebGLContext.viewport(0, 0, m_WebGLContext.viewportWidth, m_WebGLContext.viewportHeight);
m_WebGLContext.clear(m_WebGLContext.COLOR_BUFFER_BIT | m_WebGLContext.DEPTH_BUFFER_BIT);
mat4.perspective(45, m_WebGLContext.viewportWidth / m_WebGLContext.viewportHeight, 0.1, 100.0, m_pMatrix);
mat4.identity(m_mvMatrix);
mat4.translate(m_mvMatrix, [0.0, 0.0, -7.0]);
m_WebGLContext.vertexAttribPointer(m_shaderProgram.vertexPositionAttribute, m_triangleVertexPositionBuffer.itemSize, m_WebGLContext.FLOAT, false, 0, 0);
m_WebGLContext.bindBuffer(m_WebGLContext.ARRAY_BUFFER, m_triangleVertexPositionBuffer);
m_WebGLContext.bindBuffer(m_WebGLContext.ELEMENT_ARRAY_BUFFER, m_triangleVertexIndicesBuffer)
SetMatrixUniforms();
m_WebGLContext.drawElements(m_WebGLContext.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
}
And I see nothing
Can anyone suggest what I may be doing wrong?
Thanks.