user6609337 user6609337 - 4 months ago 5
HTML Question

WebGL isn't working

The following is code I got from a tutorial:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/JavaScript">
var canvas;
var gl;
function start() {
canvas = document.getElementById("glcanvas");
initWebGL(canvas); // Initialize the GL context
// Only continue if WebGL is available and working
if (gl) {
alert("works");
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
}
}
function initWebGL() {
gl = null;
try {
gl = canvas.getContext("experimental-webgl");
}
catch(e) {
}
// If we don't have a GL context, give up now
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
}
}
</script>


<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element.
</canvas>


A black box should show up, but I just get a plain white screen. The alert does show up. I am using firefox and webgl-force:enabled is set to true in about:config. Why won't the black box show up?

Answer

You're missing

// Clear the color as well as the depth buffer.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

at the end of your gl calls

(source)