初识 webgl（一）

前言

最近打算整理一下 webgl 相关的基础知识；方便自己复习查看。
首先 webgl 是一种在 web 端进行三维相关开发的技术；引一段 mdn 上的介绍：

WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在HTML5 <canvas> 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。

了解了他是什么，那么我们如何利用 web 技术进行 webgl 的开发呢，主要是通过 HTML 的 canvas、JavaScript 以及着色器语言 GLSL ES，也就是说 webgl 页面包含这三种语言；

WebGL 入门

WebGL 渲染流程

首先我们先说一下 webgl 程序渲染的一个整体的流程；如下图：

图片出自 https://coding.imooc.com/class/chapter/432.html#Anchor

首先通过 JavaScript 将坐标点数据通过顶点着色器传入到 webgl 系统，然后进行图元的装配，也就是说根据传入的点进行组装图形；组装完毕之后进行将装备好的图片变成像素的形式，也就是图形的光栅化过程。栅格化之后该片元着色器上场，对每个片元进行着色；片元着色器是对每一个像素点进行渲染。最后渲染进去到帧缓冲区存储到内存中，通过 GPU 进行渲染。

对于 canvas 元素，我这里就不详细描述，可以通过 mdn 查看对应用法。

HelloWorld 程序

首先先来一段最简单的 HelloWorld 程序：设置绘图区颜色：
代码如下：

import React, { useRef, useEffect } from 'react'


const HelloWorld = () => {
  const canvasDom = useRef<HTMLCanvasElement | null>(null)

  const main = () => {
    if (!canvasDom.current) return
    const gl = canvasDom.current.getContext('webgl')
    if (!gl) {
      console.log('Failed to get the rendering context for WebGL')
      return
    }
    // 指定清空 canavs 的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0)

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

  useEffect(() => {
    main()
  }, [])

  return (
    <canvas ref={canvasDom} style={{
      width: '500px',
      height: '500px'
    }}></canvas>
  )
}

export default HelloWorld

例子是基于 react 写的，其他的没关系，只需要看 main 函数即可，

程序解析

getContext()

首先是通过 getContext 函数获取绘图的上下文；这里需要注意的是 canvas 支持二三维绘图，但是它不提供绘图方法，而是由一种上下文的机制进行绘图canvas.getContext(），函数参数指定类型。有关传入的参数，可以查看该api，这里也就不展开讲述 webgl1.0 与 webgl2.0。有兴趣的可以去自行学习。

gl.clearColor()、gl.clear()

有了 webgl 绘图上下文之后，就可以用它来设置背景色，然后用背景色清空绘图区域。gl.clearColor()、gl.clear() 两个方法就是用来设置背景色以及通过设置的背景色清空绘图区域。

至于为什么要使用颜色清空背景色，因为一旦指定了颜色，颜色就会贮存在WebGL中，在下一次调用 gl.clearColor() 方法前不会改变。为了不影响下一次的使用，所以要清除颜色，gl.clear 可以传入一下几个类型：

参数	名称
gl.COLOR_BUFFER_BIT	颜色缓冲区
gl.DEPTH_BUFFER_BIT	深度缓冲区
gl.STENCIL_BUFFER_BIT	模板缓冲区

至此，最简单的 webgl 程序已经完成。