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

有帮助吗?

解决方案

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>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top