WebGL 不工作

WebGL isn't working

以下是我从教程中得到的代码:

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

应该会出现一个黑框,但我只看到一个普通的白色屏幕。警报确实出现了。我正在使用 firefox 并且 webgl-force:enabled 在 about:config 中设置为 true。为什么黑框不显示?

你不见了

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

在你的 gl 调用结束时

(source)