WebGL渲染2D图形

WebGL是OpenGL ES 2.0的Web标准，它结合JavaScript在HTML5的<canvas></canvas>上渲染图形。WebGL现在已经是HTML5 Canvas的绘制上下文之一。

因此在使用上的流程和OpenGL ES存在了诸多相似之处，函数名和参数也几乎是相同的。

首先需要一个进行WebGL绘制的载体。可以在html里面直接写标签，也可以在js中创建DOM。

...
<canvas id="main-canvas"></canvas>
...
<script>
  const mainCanvas = document.querySelector("#main-canvas");
</script>

接下来主要是通过getContext()获取WebGL渲染上下文： 

function createGLContext(canvas) {
  let names = ["webgl", "experimental-webgl"];
  let context = null;
  for (let i=0; i < names.length; i++) {
    try {
      context = canvas.getContext(names[i]);
    } catch(e) {}
    if (context) {
      break;
    }
  }
  if (context) {
    context.viewportWidth = canvas.width;
    context.viewportHeight = canvas.height;
  } else {
    alert("Failed to create WebGL context!");
  }
  return context;
}

const gl = createGLContext(mainCanvas);

当然，如果是自己平时用来测试，可以写得很简单：

const gl = mainCanvas.getContext("webgl");

这样，就获取到了在canvas上渲染webgl的上下文。

接下来，在canvas上一切的渲染操作，最终都是要依靠这个gl变量来控制的。可以通过变量gl来使用WebGL API了。

着色器准备

需要先准备好着色器的源码，然后将源码编译、链接。

下面准备着色器的源码。着色器（shader）是由专门的着色器语言（Shadering Language）编写的，在OpenGL ES中，使用的是GLSL（OpenGL Shadering Language，一种类C++语言）。着色器是成对出现的，分别是顶点着色器：

<script type="notjs" id="vertex-shader-2d">
    attribute vec4 a_position;

    void main() {
        gl_Position = a_position;
    }
</script>

和片段着色器：

<script type="notjs" id="fragment-shader-2d">
    precision mediump float;

    void main() {
        gl_FragColor = vec4(1, 0.3, 0.5, 1);
    }
</script>

顶点着色器接受一些输入，输出的是裁剪平面的顶点坐标。

因为最终在canvas上渲染图形还是要使用JavaScript而不是GLSL，所以需要获取这些GLSL代码，然后编译处理成JavaScript的对象。

// 获取着色器源码
const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,
    fragment_shader_source = document.querySelector("#fragment-shader-2d").text;

先编译着色器：

// 编译
function setupShader(gl, type, source) {
    let shader = gl.createShader(type);    // 先创建空着色器对象
    gl.shaderSource(shader, source);       // 载入着色器源码
    gl.compileShader(shader);              // 编译

    let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader;
    }

    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
}

然后链接顶点着色器和片段着色器，生成一个着色器程序的js对象：

// 链接
function createProgram(gl, vertexShader, fragmentShader) {
    let program = gl.createProgram();            // 先创建一个空的着色器程序
    gl.attachShader(program, vertexShader);     // 载入编译好的顶点着色器
    gl.attachShader(program, fragmentShader);   // 载入编译好的片段着色器
    gl.linkProgram(program);                     // 链接

    let success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
        return program;
    }

    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

 然后调用该函数，program变量就是包含了这一对着色器源码的js对象：

let program = createProgram(gl, vertex_shader_source, fragment_shader_source);

因为在着色器中有一个输入值，即顶点着色器中的a_position，着色器接收输入值必须从缓冲区中获取，而获取到的值需要在着色器中的正确位置放入，所以要找到顶点着色器中a_position的位置：

let position_attribute_location = gl.getAttribLocation(program, "a_position");

缓冲区准备

着色器设置好了之后，就要开始准备数据，作为着色器的输入了。

上文说过，作为着色器的输入数据，必须是在缓冲区中的数据。而现在没有缓冲区，也没有数据，所以接下来创建这两个东西，然后把数据放入缓冲区中。

先创建缓冲区：

let position_buffer = gl.createBuffer();

然后使用ARRAY_BUFFER绑定点，绑定到这个position_buffer（使用ARRAY_BUFFER说明要用顶点数组方式绘图）：

gl.bindBuffer(gl.ARRAY_BUFFER, position_buffer);

 缓冲区准备好了，接下来准备数据：

let positions = [
    0, 0,
    0, 0.2,
    0.7, 0,
    -0.5, -0.5,
    -0.4, -0.2,
    -0.7, 0,
];

然后通过ARRAY_BUFFER绑定点，将数据放到缓冲区中：

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

准备画布

由于WebGL的裁剪空间是一个横纵坐标都是在[-1, 1]范围内的矩形，而我们的画布的尺寸一般不是这个，所以需要作一下尺寸上的映射：

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

 然后清空一下画布：

gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

渲染

要开始渲染了。首先我们要指定着色器程序：

gl.useProgram(program);

然后启用a_position这个输入值（属性）：

gl.enableVertexAttribArray(position_attribute_location);

 之后准备将缓冲区的数据输送到着色器：

var size = 2;
var type = gl.FLOAT;
var normalize = false;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(position_attribute_location, size, type, normalize, stride, offset);

对这里参数的说明：

• size=2表示每次迭代读取两个数据，即x和y。由于顶点着色器中gl_Position的类型是vec4，包含x,y,z,w四个数据，而这里只需要前两个x和y。
• type=gl_FLOAT表示使用的是32为浮点类型的数据。
• normalize=false表示不需要归一化数据。
• offset=0表示从缓冲区的开始位置读取数据。

最后设置图元类型、通过drawArrays()，使用顶点数组中的顶点数据绘制：

var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);

结果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>GLSL-test</title>
  </head>

  <body>
    <canvas id="main-canvas"></canvas>

    <!-- 顶点着色器 -->
    <script type="notjs" id="vertex-shader-2d">
      attribute vec4 a_position;

      void main() {
          gl_Position = a_position;
      }
    </script>

    <!-- 片段着色器 -->
    <script type="notjs" id="fragment-shader-2d">
      precision mediump float;

      void main() {
          gl_FragColor = vec4(1, 0.3, 0.5, 1);
      }
    </script>

    <script>
      // 全局变量
      let gl;

      // 准备WebGL上下文
      function prepareContext() {
        // 使用Canvas
        let main_canvas = document.querySelector("#main-canvas");
        main_canvas.setAttribute("width", "640");
        main_canvas.setAttribute("height", "640");
        gl = main_canvas.getContext("webgl");
        if (!gl) {
          alert("无法使用WebGL！");
        } else {
          console.log(gl);
        }
      }

      // 编译
      function setupShader(gl, type, source) {
        let shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
          return shader;
        }

        console.log(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
      }

      // 链接
      function linkShader(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (success) {
          return program;
        }

        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
      }

      // 创建缓冲区，并填入顶点数据
      function createBuffer(data) {
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
      }

      (function main() {
        // 环境上下文准备
        prepareContext();

        // 着色器准备
        const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,
          fragment_shader_source = document.querySelector("#fragment-shader-2d").text;

        // 编译
        let vertex_shader = setupShader(gl, gl.VERTEX_SHADER, vertex_shader_source),
          fragment_shader = setupShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);

        // 链接
        let shaderProgram = linkShader(gl, vertex_shader, fragment_shader);
        let position_attribute_location = gl.getAttribLocation(shaderProgram, "a_position");

        // 准备输入数据
        createBuffer([0, 0, -0.3, 0.2, 0.2, 0.5, -0.5, -0.5, -0.4, -0.2, -0.7, 0]);

        // 准备画布
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        gl.clearColor(0, 0, 0, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 加载着色器，准备读取缓冲区的数据
        gl.useProgram(shaderProgram);
        gl.enableVertexAttribArray(position_attribute_location);
        gl.vertexAttribPointer(position_attribute_location, 2, gl.FLOAT, false, 0, 0);

        // 执行绘制
        gl.drawArrays(gl.TRIANGLES, 0, 6);
      })();
    </script>
  </body>
</html>

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

https://webglfundamentals.org/webgl/lessons/zh_cn/

https://thebookofshaders.com/?lan=ch