webgl 绘图基础流程

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

创建 webgl 上下文

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

创建 webgl 程序

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 对象

1
2
3
4
5
6
7
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 程序中

1
2
3
4
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

最后,启用该 program 对象

1
gl.useProgram(program);

数据存入缓冲区

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

1
2
3
4
5
6
7
8
9
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 变量

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

GPU 执行 webgl 程序

清空画布,执行绘制方法

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

示例

使用 varying 变量传值

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