Menu
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 put3dinstead of2d
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 ?!
484
The getContext() function is the function that you use to get access to the canvas tags 2D drawing functions. As of April 2014, there are two types of context that are available to you: 2d and webgl . These provide you with the API that you use to draw on the canvas.
getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.
The "getContext is not a function" error occurs when the getContext() method is called on a value that is not a canvas DOM element. To solve the error, make sure to only call the getContext method on canvas elements.
As stated, you cannot do this. However you can put one canvas on top of another and draw to them separately.
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!)
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>
answered Sep 24 '22 20:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With