这篇文章需要文法复核。如何帮忙。
WebGL 使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。WebGL程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码（shader code，渲染代码）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。
本文将向您介绍 WebGL 的基础使用。此处假定您对三维图形方面的数学知识已经有一定的理解，本文也不会试图向您教授 OpenGL 本身。
本文的代码也可以在这里下载 webgl-examples GitHub repository 。
准备 3D 渲染
为了使用 WebGL 进行 3D 渲染，你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
</body>
准备 WebGL 上下文
我们的 JavaScript 代码中的 start() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。
var gl; // WebGL的全局变量
function start() {
var canvas = document.getElementById("glcanvas");
// 初始化 WebGL 上下文
gl = initWebGL(canvas);
// 只有在 WebGL 可用的时候才继续
if (gl) {
// 设置清除颜色为黑色，不透明
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 开启“深度测试”, Z-缓存
gl.enable(gl.DEPTH_TEST);
// 设置深度测试，近的物体遮挡远的物体
gl.depthFunc(gl.LEQUAL);
// 清除颜色和深度缓存
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
}
}
我们所要做的第一件事就是是获取 canvas 的引用，把它保存在 ‘canvas’ 变量里。很显然，如果你不需要重复引用 canvas，你应该避免将它保存为全局变量，而是将它保存为局部变量或者一个对象成员变量。
当我们获取到 canvas之后，我们调用了一个叫做 initWebGL() 的函数。我们将马上介绍这个函数，它的作用是初始化WebGL上下文。
如果WebGL上下文创建成功，变量 ‘gl’ 会用来保存它的引用。在这个例子里，我们将清除色设为黑色，然后用该颜色清除上下文。接下来，用指定的参数设置上下文。在这里，我们开启“深度测试”，使得近的物体遮挡远的物体。
通过以上代码，我们已经完成初始化。我们将在后面开始真正做一些东西。
创建 WebGL 上下文
initWebGL() 函数代码实现如下：
function initWebGL(canvas) {
// 创建全局变量
window.gl = null;
try {
// 尝试获取标准上下文，如果失败，回退到试验性上下文
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// 如果没有GL上下文，马上放弃
if (!gl) {
alert("WebGL初始化失败，可能是因为您的浏览器不支持。");
gl = null;
}
return gl;
}
为了获取 canvas 的 WebGL 上下文，我们请求来自 canvas 的名为 "webgl" 的上下文。如果失败，我们尝试请求 "experimental-webgl"（试验性的webgl）。如果同样失败，我们将显示一个警告来告诉用户，浏览器不支持WebGL。这是创建 WebGL 上下文的所有步骤。现在，‘gl’ 可能为null（浏览器不支持 WebGL ），或者是我们即将用于渲染的 WebGL 上下文的引用。
现在，你已经完成 “WebGL” 初始化的代码，下一步你应该会看到一个大大的黑色盒子，它已经准备好接受内容。
如果你正在使用一个支持WebGL的浏览器，可以点击查看这个例子
调整 WebGL 上下文尺寸
一个新的 WebGL 上下文，会在它被获得时设置它自己的视窗分辨率为 canvas 元素的高度和宽度，而不是根据其 CSS 样式。修改 canvas 元素的样式将改变它的显示大小，但不会改变它的渲染分辨率。在上下文创建后，修改 canvas 元素的宽度和高度，也不会改变上下文绘画的像素数量。要改变 WebGL 渲染的分辨率，例如当用户重新调整一个完全由 canvas 元素覆盖的窗口的大小，又或者你希望嵌入到App中的页面能够自适应，你就需要调用 WebGL 上下文的 viewport() 函数来调整设置。
使用上面例子中用到的 ‘gl’ 和 ‘canvas’ 修改 WebGL 的渲染分辨率：
gl.viewport(0, 0, canvas.width, canvas.height);
当 canvas 在渲染与它所设定的 CSS 显示不同的分辨率，它会经过缩放处理。CSS 缩放在大部分情况下，能够为渲染低分辨情景节省资源，并提升浏览器的效率。缩小尺寸可能会产生 超级采样抗锯齿(Super Sampling Anti Aliasing) 的效果（尽管会有原生本地应用的效果，但是会占用极高的性能花费）。最好采用多重采样反锯齿（Multi-Sample Anti-Aliasing）和用户浏览器实现的纹理过滤器，如果可用的话，相对于强制缩放，使用浏览器图像规约算法（browser's image reduction algorithm）会有一个更好的效果。