WebGL 是什么

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 元素中使用。

未命名文件 (2).png

WebGL 程序的结构

未命名文件 (3).png

WebGL 上下文

为了使用 WebGL 进行 3D 渲染，你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文 。

什么是 WebGL 上下文？

canvas 画布是一个只有背景颜色的空画布，可以在空画布上面绘图，当 getContext() 方法的参数是 “2d” 时， 可以使用 2d 绘图 API，当参数是 “webgl” 时，可以使用 WebGL API，比如 “WebGL绘制一个点” 使用的是 drawArrays 方法就是 WebGL API。

  1. <body onload="main()">
  2.   <canvas id="glcanvas" width="640" height="480">
  3.     Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
  4.   </canvas>
  5. </body>


  1. function main() {
  2.   const canvas = document.querySelector("#glcanvas");
  3.   // Initialize the GL context
  4.   const gl = canvas.getContext("webgl");
  6.   // Only continue if WebGL is available and working
  7.   if (!gl) {
  8.     alert("Unable to initialize WebGL. Your browser or machine may not support it.");
  9.     return;
  10.   }
  12.   // Set clear color to black, fully opaque
  13.   gl.clearColor(0.0, 0.0, 0.0, 1.0);
  14.   // Clear the color buffer with specified clear color
  15.   gl.clear(gl.COLOR_BUFFER_BIT);
  16. }

如果WebGL上下文成功初始化，变量 ‘gl’ 会用来引用该上下文。在这个例子里，我们将清除色设为黑色，然后用该颜色清除上下文。（用背景颜色重绘canvas）。

着色器

着色器是使用 OpenGL ES Shading Language(GLSL)编写的程序，它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据，换句话说，它负责记录着像素点的位置和颜色。

绘制WebGL时候有两种不同的着色器函数，顶点着色器和片段着色器。你需要通过用GLSL 编写这些着色器，并将代码文本传递给WebGL ， 使之在GPU执行时编译。顺便一提，顶点着色器和片段着色器的集合我们通常称之为着色器程序。