WebGL Drawing failure.


I have some experience with openGl
Recently i dicided it would be fun to move over to Javascript+WebGL.

But for some reason i cant get anything to display on my screen.
I simplified my code to a 2d triangle but i still cant seem to get it to work.

i have been staring at this code for to long now and i hoped somebody
else might know what i am doing wrong.

// init canvas
m_gl.clearColor(0.1, 0.8, 0.1, 1.0);

// in loop

m_gl.viewport(0, 0, m_width, m_heigth);

// Somewhere later.

var DDraw2dQuad = [];
var Draw2dQuad = function(x, y, width, hight, color)
	m_gl.bindBuffer(gl.ARRAY_BUFFER, DDraw2dQuad.buffer_vertex);
	m_gl.vertexAttribPointer(DDraw2dQuad.attrib_vertexposition, 2, m_gl.FLOAT, false, 0, 0);
	m_gl.drawArrays(m_gl.TRIANGLE, 0, 3);
this.Draw2dQuad = Draw2dQuad;
Draw2dQuad.Init = function()
	DDraw2dQuad.program = m_sm.GetProgram("2DCOLOR");
	DDraw2dQuad.attrib_vertexposition = m_gl.getAttribLocation(DDraw2dQuad.program, "aVertexPosition");
	DDraw2dQuad.buffer_vertex = m_gl.createBuffer();
	m_gl.bindBuffer(m_gl.ARRAY_BUFFER, DDraw2dQuad.buffer_vertex);

	var vertices = [
		0.0,  1.0,
		-1.0, -1.0,
		1.0, -1.0
	]; // Temponary
	m_gl.bufferData(m_gl.ARRAY_BUFFER, new Float32Array(vertices), m_gl.STATIC_DRAW);



attribute vec2 aVertexPosition;

void main(void) {
	gl_Position = vec4(aVertexPosition, 1.0, 1.0);


#ifdef GL_ES
precision highp float;

void main(void) {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

A complete version of my code can be found here http://cold.netburst.co.uk/webgl

With inspect element (right mouse click and select “inspect element”) in chrome pointed to your web link I see it complaining about m_gl not being defined in CWebGL.js (line 18)

this.StartFrame = function()
        m_gl.clear(m_gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT);
CWebGL.js:18Uncaught ReferenceError: m_gl is not defined
        m_gl.viewport(0, 0, m_width, m_heigth);

Do you have any idea where m_gl is defined? This needs to be tracked down before you can expect any openGL commands to work!
I would expect effectively somewhere in your code something like the following to occur

        var canvas = document.getElementById("rendering-canvas");
        try {
            m_gl = canvas.getContext("experimental-webgl");
            m_gl.viewportWidth = canvas.width;
            m_gl.viewportHeight = canvas.height;
        } catch (e) {
        if (!m_gl) {
            alert("Could not initialise WebGL, sorry :-(");

Thanks for your reply

It doesn’t give any errors inside chrome for me.

m_gl was a member of each class, making copies of the gl structure for each class probably wasn’t the smartest idea. I now replaced all the separate m_gl variables with 1 global gl.

It looks like somehow some versions got mixed up.

I have uploaded the lastest version and made some minor changes. cleaned up some code.