What is the difference between getContext('web

2020-05-27 03:56发布

站内问答 / 后端开发
1703 1 4

I start learning WebGL, and because i have found some old tutorials, i dont know what is the right way in 2014?

I started the <canvas> (basic), and in tutorials they say something like:

use getContext('2d') and if you want to use WebGL then you put 3d instead of 2d

But now that i am learning, i found tutorials talking about getContext('webgl') and not getContext('3d') .

Have the syntaxe changed?

And there is this article saying that there is no real 3D, but they only using Ray Casting ?!

1条回答
贪生不怕死
2楼-- · 2020-05-27 04:16

Mozilla Developer Netowrk (MDN) Docs says this:

getContext(in DOMString contextId) RenderingContext Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with "2d" returns a CanvasRenderingContext2D object, whereas calling it with "experimental-webgl" (or "webgl") returns a WebGLRenderingContext object. This context is only available on browsers that implement WebGL.

Results: | Context | Chrome (webkit) | Firefox (gekko) | | ------------------ | ------------------------ | ------------------------ | | 2d | CanvasRenderingContext2D | CanvasRenderingContext2D | | 3d | null | null | | webgl | WebGLRenderingContext | WebGLRenderingContext | | experimental-webgl | WebGLRenderingContext | null |

I recommend reading up on the webgl wiki: http://www.khronos.org/webgl/wiki/FAQ

Here is the full What is the recommended way to initialize WebGL? section: (Though I suggest you read it right from the wiki in case it changes!)

What is the recommended way to initialize WebGL?

It is recommended that you check for success or failure to initialize. If WebGL fails to initialize it is recommended you distinguish between failure because the browser doesn't support WebGL and failure for some other reason. If the browser does not support WebGL then present the user with a link to "http://get.webgl.org". If WebGL failed for some other reason present the user with a link to "http://get.webgl.org/troubleshooting/"

You can determine if the browser supports WebGL by checking for the existence of WebGLRenderingContext.

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

If the browser supports WebGL and canvas.getContext("webgl") returns null then WebGL failed for some reason other than user's browser (no GPU, out of memory, etc...)

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

Note: You MUST check that the browser supports WebGL to know that getting null from canvas.getContext() means There is a wrapper that will do all of this for you here.

Example using the wrapper

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)