WebGL从零开始（二）——面
浮华与是非 3/10/2026 WebGL
# 前言
上一篇，绘制了点、线，还差一个面，就构成基础绘制了，那么这次就看看WebGL中面是如何绘制的吧。
# 一、面
在WebGL中，所有的面都是由三角形组成的，一个三角形就是最基础的面。
# 1. 绘制方向——面的正反
面向我们的面，如果是正面，则绘制顺序是逆时针。
面向我们的面, 如果是反面, 则绘制顺序是顺时针。
# 2. 面的类型
有三种：
- 独立的三角面：
gl.TRIANGLES - 三角带：
gl.TRIANGLE_STRIP - 三角扇：
gl.TRIANGLE_FAN
# 2.1 三角面
Three.js 中面就是用的独立三角面来绘制的。
// 创建canvas、webgl、初始化省略
// 缓冲区 及绑定
const pointBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer)
const points = new Float32Array([
0.2,0.2,
-0.2,0,
0,0.2,
0.2,0,
0,-0.2,
-0.2,-0.2
])
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)
const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
// 修改顶点数据
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启对应属性
gl.enableVertexAttribArray(a_Position)
gl.clearColor(0,0,0,1)
gl.clear(gl.COLOR_BUFFER_BIT)
// 注意 count 为6 是因为 points 是6个 x,y 2个三角形
gl.drawArrays(gl.TRIANGLES, 0, 6)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
效果图：
# 2.2 三角带
绘制三角带需要注意下，是有顺序的：
第一个三角形: 以前3个点绘制, v1->v2 第一条边, v2->v3 第二条边, v3->v1 第三条边
第二个三角形: 以第一个三角形的第二条边为基础逆序绘制+第四个点, v3->v2, v2->v4, v4->v3
第三个三角形: 以上一个三角形的第三条边为基础逆序绘制+第5个点, v3->v4, v4->5, v5->v3
第偶数个三角形: 以上一个三角形的第二条边为基础逆序绘制+下一个点
第奇数个三角形: 以上一个三角形的第三条边为基础逆序绘制+下一个点
以上面独立三角形的顶点为例：
// 绘制三角带
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6)
1
2
2
效果图：
绘制顺序如图：
第一个三角形：v1->v2->v3
第二个三角形：v3->v2->v4
第三个三角形：v3->v4->v5
第四个三角形：v5->v4->v6
# 2.3 三角扇
以第一个为原点,每次取2个与之组合成三角形
// 绘制三角扇
gl.drawArrays(gl.TRIANGLE_FAN, 0, 6)
1
2
2
绘制顺序：都是以v1为起点，第一个三角形是 v1-> v2->v3
第二个三角形是 v1->v3-v4
第三个是 v1->v4->v5
第四个是 v1->v5->v6
