Webgl是什么？
Webgl是一种基于web的3d绘图协议，使得我们可以是现在浏览器中实现3d交互，就如flash是2d交互，现在webgl实现了浏览器中的3d交互
webgl 使得在支持HTML 的
canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于
OpenGL ES 2.0 的 API 在 canvas 中进行3D渲染。
WebGL程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的着色代码（GLSL，注：GLSL为OpenGL着色语言）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。
本文将向您介绍 WebGL 的基础使用。此处假定您对三维图形方面的数学知识已经有一定的理解，本文也不会试图向您教授 3D图像概念本身。在我们的学习空间 Learn WebGL for 2D and 3D graphics有一个面向初学者的指南、以及完整的代码例子。
准备3D渲染
为了使用 WebGL 进行 3D 渲染，你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。
Your browser doesn't appear to support the HTML5 <canvas> element.
准备 WebGL 上下文
我们的 JavaScript 代码中的 main() 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。
//
// start here
//
function main() {
const canvas = document.querySelector("#glcanvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (!gl) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}
我们所要做的第一件事就是是获取 canvas 的引用，把它保存在 ‘canvas’ 变量里。
当我们获取到 canvas之后，我们会试着通过调用一个getContext 的函数并传递给它一个"webgl"字符串来获取WebGLRenderingContext。如果浏览器不支持webgl,getContext将会返回null，我们就可以显示一条消息给用户然后退出。
如果WebGL上下文成功初始化，变量 ‘gl’ 会用来引用该上下文。在这个例子里，我们将清除色设为黑色，然后用该颜色清除上下文。（用背景颜色重绘canvas）。
以上这篇文章说明WebGL是什么， 解释了WebGL是如何工作的 (介绍了渲染管线的概念)，并且介绍了一些WebGL库。如果想实现在浏览器中进行3D交互，那么现在webgl标准是唯一可以采用的。
2020-01-16 05:58:20
477分享
：13840251110
在线咨询
