getContext('webgl')和getContext('3d')有什么区别？

Question

getContext('webgl')和getContext('3d')有什么区别？

htmlcanvaswebgl

13

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

我开始使用<canvas>（基础），在教程中他们说：

使用getContext('2d')，如果你想用WebGL那么就把2d替换成3d

但是现在我发现一些新的教程在谈论getContext('webgl')而不是getContext('3d')。

语法改变了吗？

还有这篇文章说没有真正的3D，他们只是在使用光线投射？！

- Abdelouahab

1

MDN的参考资料列出了在某些浏览器中支持webgl和experimental-webgl。 - IMSoP

“3d”这个词已经被弃用了吗？ - Abdelouahab

1

我不知道完整的故事，所以我只是添加了一条评论，但那个页面从来没有提到过存在 '3d' 上下文。你有一个 '3d' 被推荐的例子吗？也许作者只是在猜测，因为最初只有 '2d' 是唯一的选择。 - IMSoP

“webgl”这个词会有意义，因为“webgl”不仅仅是3D。 - Abdelouahab

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ThorSummoner · Accepted Answer

Mozilla开发者网络（MDN）文档如下：

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

结果： | 上下文 | Chrome（webkit）| Firefox（gekko）| | -------------- | ------------------------ | ------------------------ | | 2d | CanvasRenderingContext2D | CanvasRenderingContext2D | | 3d | null | null | | webgl | WebGLRenderingContext | WebGLRenderingContext | | experimental-webgl | WebGLRenderingContext | null |

我建议阅读webgl维基百科：http://www.khronos.org/webgl/wiki/FAQ 以下是完整的WebGL初始化的推荐方式是什么？部分：（虽然我建议您从维基百科中直接阅读，以防它发生变化！）

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

建议您检查初始化的成功或失败。如果WebGL初始化失败，则建议您区分浏览器不支持WebGL和其他原因导致的失败。如果浏览器不支持WebGL，则向用户呈现指向“http://get.webgl.org”的链接。如果WebGL由于其他原因而失败，请向用户呈现指向“http://get.webgl.org/troubleshooting/”的链接。

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

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

如果浏览器支持WebGL且canvas.getContext("webgl")返回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的含义。这意味着有一个包装器可以为您完成所有这些操作。使用包装器的示例：

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