webgl 绘制图形的基本流程： 创建 webgl 上下文 -> 创建 webgl 程序 -> 数据存入缓冲区 -> 将缓冲区数据读取到 GPU -> GPU 执行 webgl 程序

创建 webgl 上下文

const canvas = document.querySelector('canvas')
const gl = canvas.getContext('webgl');

创建 webgl 程序

webgl 绘图过程需要两个着色器：顶点着色器和片元着色器，分别处理图形的顶点信息和像素信息

const vertex = `
  attribute vec2 position;

  void main() {
    gl_PointSize = 1.0;
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;

const fragment = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
`;

接下来使用上面创建好的着色器创建 shader 对象

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);

接下来将 shader 关联到 webgl 程序中

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

最后，启用该 program 对象

gl.useProgram(program);

数据存入缓冲区

使用 Float32Array 定义三角形的节点信息，并将定义好的数据写入到 webgl 的缓冲区中

const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);

const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

将缓冲区数据读取到 GPU

将 buffer 中的数据绑定给顶点着色器的 position 变量

const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

GPU 执行 webgl 程序

清空画布，执行绘制方法

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

示例

import React, { useEffect, useRef } from "react";

function Example() {
  const canvasEl = useRef(null);
  useEffect(() => {
    const gl = canvasEl.current.getContext("webgl");

    const vertex = `
      attribute vec2 position;

      void main() {
        gl_PointSize = 1.0;
        gl_Position = vec4(position, 1.0, 1.0);
      }
    `;

    const fragment = `
      precision mediump float;

      void main() {
        gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
      }
    `;

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertex);
    gl.compileShader(vertexShader);

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragment);
    gl.compileShader(fragmentShader);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    gl.useProgram(program);

    const points = new Float32Array([-1, -1, 0, 1, 1, -1]);

    const bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const vPosition = gl.getAttribLocation(program, "position");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
  }, []);

  return <canvas ref={canvasEl} />;
}

export { Example };

使用 varying 变量传值

顶点着色器的数据可以通过 varying 变量传递给片元着色器

import React, { useEffect, useRef } from "react";

function Varying() {
  const canvasEl = useRef(null);
  useEffect(() => {
    const gl = canvasEl.current.getContext("webgl");

    const vertex = `
      attribute vec2 position;
      varying vec3 color;

      void main() {
        gl_PointSize = 1.0;
        color = vec3(0.5 + position * 0.5, 0.0);
        gl_Position = vec4(position * 0.5, 1.0, 1.0);
      }
    `;

    const fragment = `
      precision mediump float;
      varying vec3 color;

      void main() {
        gl_FragColor = vec4(color, 1.0);
      }
    `;

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertex);
    gl.compileShader(vertexShader);

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragment);
    gl.compileShader(fragmentShader);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    gl.useProgram(program);

    const points = new Float32Array([
      -1, -1,
      0, 1,
      1, -1,
    ]);

    const bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

    const vPosition = gl.getAttribLocation(program, 'position');
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);
  }, []);

  return <canvas ref={canvasEl} />;
}

export { Varying };