PDA

View Full Version : drawElements



gnitsuk
03-14-2014, 05:38 AM
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_BUF FER, 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_BUF FER, 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_B IT | 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_BUF FER, 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_BUF FER, 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_BUF FER, 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_A RRAY_BUFFER, m_triangleVertexIndicesBuffer);

var indices = [0, 1, 2];

m_WebGLContext.bufferData(m_WebGLContext.ELEMENT_A RRAY_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_B IT | 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_BUF FER, m_triangleVertexPositionBuffer);

m_WebGLContext.bindBuffer(m_WebGLContext.ELEMENT_A RRAY_BUFFER, m_triangleVertexIndicesBuffer)

SetMatrixUniforms();

m_WebGLContext.drawElements(m_WebGLContext.TRIANGL ES, 3, gl.UNSIGNED_SHORT, 0);

}

And I see nothing :(

Can anyone suggest what I may be doing wrong?

Thanks.

gnitsuk
03-14-2014, 08:30 AM
No worries guys,

I've solved it.

gnits.