什么是WebGL？

WebGL（Web图形库）是Web上3D图形的新标准，它旨在渲染2D图形和交互式3D图形。它来源于OpenGL的ES 2.0库，它是用于手机和其他移动设备的低级3D API。WebGL提供了类似的ES 2.0（嵌入式系统）功能，并且在现代3D图形硬件上表现良好。

它是可以与HTML5一起使用的JavaScript API。HTML5具有支持2D画布，WebGL，SVG，3D CSS变换和SMIL等3D图形的多项功能。

WebGL代码写在HTML5 的 canvas 标签中。这是一个允许Internet浏览器访问使用它们的计算机上的图形处理单元（GPU）的规范。

最短的webGL程序：清空绘图区

<canvas id="glcanvas" width="640" height="480"></canvas>

function main() {
    // 1.获取canvas元素
    const canvas = document.getElementById('glcanvas')

    // 2.获取webgl绘图上下文
    const gl = canvas.getContext('webgl')

    if (!gl) {
      alert('不支持webgl')
      return
    }

    // 3.设置背景色（指定清空canvas的颜色）
    gl.clearColor(0.0, 1.0, 0.0, 1.0)

    // 4.清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT)
}

main()

分析

WebGLRenderingContext

WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML <canvas> 元素内绘图。

要获得这个接口的对象，可以通过在 <canvas> 元素上调用 getContext() 函数，调用时传入 “webgl” 参数：

const canvas = document.getElementById('glcanvas')
const gl = canvas.getContext('webgl')
// 当你获取到 canvas 元素的 WebGL 绘图上下文后，你便可以调用绘图API。

gl.clearColor()

WebGLRenderingContext.clearColor() 方法用于设置清空颜色缓冲时的颜色值。这指定调用 clear() 方法时使用的颜色值。

  /**
   * @param {Number} red 一个 GLclampf 类型的值，指定清除缓冲时的红色值(0.0-1.0)。默认值：0.0
   * @param {Number} green 一个 GLclampf 类型的值，指定清除缓冲时的绿色值(0.0-1.0)。默认值：0.0
   * @param {Number} blue 一个 GLclampf 类型的值，指定清除缓冲时的蓝色值(0.0-1.0)。默认值：0.0
   * @param {Number} alpha 一个 GLclampf 类型的值，指定清除缓冲时的不透明度(0.0-1.0)。默认值：0.0
   */
  void gl.clearColor(red, green, blue, alpha);

gl.clear()

WebGLRenderingContext.clear() 方法使用预设值来清空缓冲。

  /**
   * @param mask 一个用于指定需要清除的缓冲区的 GLbitfield 。可能的值有：
   * gl.COLOR_BUFFER_BIT   //颜色缓冲区
   * gl.DEPTH_BUFFER_BIT   //深度缓冲区
   * gl.STENCIL_BUFFER_BIT  //模板缓冲区
   */
  void gl.clear(mask);