getcontext('webgl') 返回 null 的主因是 canvas 未激活：display: none、visibility: hidden、父容器 height: 0 或缺失 width/height 属性；需检查 dom 状态、浏览器 webgl 支持及启动参数，禁用 experimental-webgl。
Canvas 元素本身不会自动渲染 3D 图形，getContext('webgl') 返回 null 是最常卡住的第一步——不是代码写错了，而是 canvas 没“活”起来。
getContext('webgl') 返回 null 怎么办
这不是浏览器不支持 WebGL，而是 canvas 当前状态不满足 GPU 初始化条件：
-
display: none、visibility: hidden或父容器height: 0时，getContext('webgl')会静默返回null - HTML 的
<canvas></canvas>标签没写width和height属性（仅靠 CSS 设置尺寸不行） - Chrome/Edge 在虚拟机或老旧集显上默认禁用 WebGL，开发时可临时加启动参数：
--enable-webgl --ignore-gpu-blacklist - 别用
experimental-webgl——它已废弃多年，现代浏览器只认webgl或webgl2
着色器编译失败但控制台没报错
GLSL 错误不会抛 JS 异常，gl.compileShader() 总是返回，必须手动查：
- 编译后立刻调
gl.getShaderParameter(shader, gl.COMPILE_STATUS)，返回false就挂了 - 紧接着必须调
gl.getShaderInfoLog(shader)，否则控制台空空如也 - 常见语法坑：
attribute/varying是 WebGL 1（GLSL ES 1.0）用的；如果用了in/out却没启用 WebGL 2，直接 syntax error - 别把着色器写成 JS 模板字符串——缩进换行会被当真实字符传入；建议从
<script type="x-shader/x-vertex"></script>标签里用textContent读取
三角形画不出来，只看到黑屏或背景色
清屏成功 ≠ 渲染成功。黑屏往往卡在数据流向 GPU 的中间环节：
-
gl.drawArrays()前没调gl.useProgram(program)，GPU 根本不知道该跑哪个着色器 - 顶点属性没启用：
gl.enableVertexAttribArray(location)必须在gl.vertexAttribPointer()后调用 - 缓冲区绑定错目标：传坐标得用
gl.ARRAY_BUFFER，传索引才用gl.ELEMENT_ARRAY_BUFFER - 顶点着色器里漏写
gl_Position =—— 这是强制要求，不赋值就等于没输出，GPU 直接丢弃该顶点
矩阵传进去了，模型还是不动 / 缩成一个点
WebGL 不管你怎么想，它只认你传进去的 16 个浮点数：
-
gl.uniformMatrix4fv()传的是纯数字数组，不是对象；传mat4.create()出来的对象会出错，得用mat4.toArray()或直接传Float32Array - 投影 × 视图 × 模型 的乘法顺序不能颠倒，写成
model × view × projection就会坐标系全乱 -
gl-matrix的mat4.lookAt()第二个参数是“目标点”，不是方向向量；第三个参数是“上方向”，不能设成[0,0,0] - 别在每一帧重复创建新矩阵对象（如
new Float32Array(16)），复用已有数组 +mat4.identity()重置更省 GC 压力
真正难的不是写完第一帧，而是改错时能快速定位到是 canvas 状态、着色器语法、属性绑定，还是矩阵顺序的问题——这些环节彼此不报错，却层层依赖，漏掉一个，画面就永远黑着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
