getContext（'webgl'）vs getContext（'3d'）有什么区别？ [英] What is the difference between getContext('webgl') vs getContext('3d')?
问题描述
我开始学习WebGL，因为我发现了一些旧的教程，我不知道什么是正确的方式在2014年？
I start learning WebGL, and because i have found some old tutorials, i dont know what is the right way in 2014?
我开始了< canvas> （基本），在教程中他们会说：
I started the <canvas> (basic), and in tutorials they say something like:
use
getContext（'2d'）如果你想使用WebGL，那么你把3d而不是2d
use
getContext('2d')and if you want to use WebGL then you put3dinstead of2d
但现在我正在学习，我发现教程谈论 getContext 'webgl'），而不是 getContext（'3d'）。
But now that i am learning, i found tutorials talking about getContext('webgl') and not getContext('3d') .
语法已更改？
还有这篇文章说，没有真正的3D，但他们只使用Ray Casting？！
And there is this article saying that there is no real 3D, but they only using Ray Casting ?!
推荐答案
Mozilla Developer Netowrk（MDN）Docs说：
Mozilla Developer Netowrk (MDN) Docs says this:
getContext（在DOMString contextId中）RenderingContext上下文，如果不支持上下文ID则为null。绘制上下文允许您在画布上绘制。使用 2d 调用getContext会返回 CanvasRenderingContext2D 对象，而使用 experimental-webgl （或 strong>）返回 WebGLRenderingContext 对象。此上下文仅适用于实施WebGL的浏览器。
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.
结果：
|上下文| 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
I recommend reading up on the webgl wiki: http://www.khronos.org/webgl/wiki/FAQ
这是完整的建议的初始化WebGL的方法是什么？ 部分：
（虽然我建议您直接从 wiki
建议您检查是否成功或无法初始化。如果WebGL无法初始化，建议您区分失败，因为浏览器不支持WebGL和失败的一些其他原因。如果浏览器不支持WebGL，则向用户提供指向 http://get.webgl.org 的链接。如果WebGL由于其他原因失败，则会向用户显示指向 http://get.webgl.org/troubleshooting/ 的链接
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/"
您可以通过检查是否存在WebGLRenderingContext来确定浏览器是否支持WebGL。
You can determine if the browser supports WebGL by checking for the existence of WebGLRenderingContext.
if (window.WebGLRenderingContext) {
// browser supports WebGL
}
b $ b
如果浏览器支持WebGL，并且canvas.getContext（webgl）返回null，那么WebGL因为用户的浏览器之外的原因（没有GPU，内存不足等）而失败。
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";
}
}
注意：您必须检查浏览器是否支持WebGL知道从canvas.getContext（）获取null是指
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.
使用包装器的示例
<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（'webgl'）vs getContext（'3d'）有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
