初始化WebGL的推荐方法是什么？

Question

我开始学习WebGL，因为我找到了一些旧的教程，我不知道2014年的正确方法是什么？

我开始了<canvas>（基本），在教程中他们说了类似的内容：

使用getContext('2d')如果你想使用WebGL，那么就放3d代替2d

但是现在我正在学习，我发现教程正在谈论getContext('webgl')而不是getContext('3d')。

语法是否已更改？

有this文章说没有真正的3D，但他们只使用Ray Casting？！

Answer 1

Mozilla Developer Netowrk（MDN）文档说：

getContext（在DOMString contextId中）RenderingContext返回画布上的绘图上下文，如果不支持上下文ID，则返回null。绘图上下文允许您在画布上绘图。使用＆＃34; 2d ＆＃34;调用getContext返回 CanvasRenderingContext2D 对象，而使用＆＃34; experimental-webgl ＆＃34; （或＆＃34; webgl ＆＃34;）返回 WebGLRenderingContext 对象。此上下文仅适用于实现WebGL的浏览器。

结果： | Context | Chrome (webkit) | Firefox (gekko) | | ------------------ | ------------------------ | ------------------------ | | 2d | CanvasRenderingContext2D | CanvasRenderingContext2D | | 3d | null | null | | webgl | WebGLRenderingContext | WebGLRenderingContext | | experimental-webgl | WebGLRenderingContext | null |

我建议您阅读webgl wiki：http://www.khronos.org/webgl/wiki/FAQ

以下是完整的What is the recommended way to initialize WebGL?部分：（虽然我建议您直接从wiki阅读，以防它发生变化！）

初始化WebGL的推荐方法是什么？

建议您检查初始化是成功还是失败。如果WebGL无法初始化，建议您区分失败，因为浏览器不支持WebGL，并且由于某些其他原因而失败。如果浏览器不支持WebGL，则向用户显示指向＆＃34; http://get.webgl.org＆＃34;的链接。如果WebGL因其他原因失败，则会向用户显示指向＆＃34; http://get.webgl.org/troubleshooting/＆＃34;

的链接

您可以通过检查WebGLRenderingContext是否存在来确定浏览器是否支持WebGL。

if (window.WebGLRenderingContext) {
  // browser supports WebGL
}

如果浏览器支持WebGL并且canvas.getContext（＆＃34; webgl＆＃34;）返回null，则WebGL因用户浏览器以外的某些原因而失败（没有GPU，内存不足等... ）

  if (!window.WebGLRenderingContext) {
    // the browser doesn't even know what WebGL is
    window.location = "http://get.webgl.org";
  } else {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("webgl");
    if (!ctx) {
      // browser supports WebGL but initialization failed.
      window.location = "http://get.webgl.org/troubleshooting";
    }
  }

注意：您必须检查浏览器是否支持WebGL以了解从canvas.getContext（）获取null意味着 There is a wrapper that will do all of this for you here.

使用包装器的示例

<html>
<body>
<script type="text/javascript" src="localpath/webgl-utils.js"></script>
<script>
  function init() {
    canvas = document.getElementById("c");
    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) {
      return;
    }
    ...
  }

  window.onload = init;
</script>
<canvas id="c"></canvas>
</body>
</html>

getContext（＆＃39; webgl＆＃39;）与getContext（＆＃39; 3d＆＃39;）有什么区别？

1 个答案:

初始化WebGL的推荐方法是什么？