PDA

View Full Version : WebGL Drawing failure.



Cold.
10-20-2011, 05:37 AM
Hey,

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);
m_gl.disable(m_gl.DEPTH_TEST);

// in loop

m_gl.clear(m_gl.COLOR_BUFFER_BIT);
m_gl.viewport(0, 0, m_width, m_heigth);
m_gl.disable(m_gl.DEPTH_TEST);

// Somewhere later.

var DDraw2dQuad = [];

var Draw2dQuad = function(x, y, width, hight, color)
{
/*m_gl.useProgram(DDraw2dQuad.program);*/

m_gl.bindBuffer(gl.ARRAY_BUFFER, DDraw2dQuad.buffer_vertex);
m_gl.vertexAttribPointer(DDraw2dQuad.attrib_vertex position, 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");
m_gl.useProgram(DDraw2dQuad.program);

DDraw2dQuad.attrib_vertexposition = m_gl.getAttribLocation(DDraw2dQuad.program, "aVertexPosition");
m_gl.enableVertexAttribArray(DDraw2dQuad.attrib_ve rtexposition);

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);
}

Shaders:

vertex


attribute vec2 aVertexPosition;

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


fragment


#ifdef GL_ES
precision highp float;
#endif

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

marshats
10-20-2011, 10:34 PM
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 :-(");
}

Cold.
10-21-2011, 02:07 PM
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.