drawElements

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 :frowning:

Can anyone suggest what I may be doing wrong?

Thanks.

No worries guys,

I’ve solved it.

gnits.