我用 WebGL 从「画个点」一路画到「贪吃蛇」

目录

1. 第 步：画出人生第一个点
2. 第 步：把点连成线
3. 第 步：让图形动起来
4. 第 步：换矩阵来做变换
5. 第 步：综合实战——贪吃蛇
6. 至于附录。踩坑清单

第 步：画出人生第一个点

拿到 WebGL 上下文

一切从 开始：

const canvas = document.getElementById as HTMLCanvasElement
const gl = canvas.getContext
if throw new Error

拿到的是一个状态机：你绑什么缓冲、用什么着色器、设什么颜色，它都记着。后面几乎所有操作都是在「改状态 → 下指令」。

痛点一：忘记获取上下文导致后续所有调用报错。

再看画布尺寸。新手第一坑

痛点二：CSS 写 width:800px 只影响显示大小，但实际渲染分辨率还是默认很小。

canvas.width = canvas.clientWidth canvas.height = canvas.clientHeight gl.viewport

• canvas.width/height: 绘图缓冲分辨率。
• viewport: 告诉 GPU 「裁剪空间 映射到哪块矩形」。

痛点三：No viewport → 黑屏或位置错乱。

什么是着色器？为什么要两个，

痛点四："你只想绘制圆，却发现必须写顶点与片元两段 GLSL"

• 顶点着色器: 每个顶点跑一遍。算出最终位置 .
• 片元着色器: 每个像素跑一遍，算出颜色 .

可以粗暴理解成顶点决定“在哪”，片元决定“涂啥”。顶点着色器示例：

// 顶层属性
attribute vec2 a_position;说起来，// 每个顶点自己的数据
uniform mat4 u_matrix;其实，// 投影矩阵
void main { // 必须输出裁剪空间
gl_Position = u_matrix * vec4;gl_PointSize = 10.0;// 点大小，仅 POINTS 时有效