getContext('webgl') 返回 null 主因是 canvas 状态异常或环境限制；着色器需手动检查编译状态与日志；drawArrays 前须启用程序、顶点属性及正确绑定缓冲区；矩阵须以 Float32Array 传入且乘法顺序不可颠倒。
getContext('webgl') 返回 null 是最常见拦路虎，不是代码写错了，而是环境没配好——先解决这个，再谈渲染。
canvas 元素为什么拿不到 WebGL 上下文
浏览器返回 null 不代表不支持 WebGL，大概率是 canvas 自身状态异常：
-
display: none、visibility: hidden或父容器折叠时，getContext('webgl')会静默失败 - 宽高为
0（哪怕 CSS 设了尺寸，但 HTMLwidth/height属性没写）也会触发失败 - 部分 Chrome/Edge 在虚拟机或老旧集显上默认禁用 WebGL，可临时加启动参数
--enable-webgl --ignore-gpu-blacklist调试 - 生产环境别依赖
experimental-webgl，它已废弃多年，现代浏览器只认webgl
着色器编译失败却看不到报错
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 的中间环节：
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
-
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就会坐标系全乱 -
mat4.lookAt()第二个参数是「看向的点」，不是方向向量；第三个参数是「上方向」，设成[0,0,0]会导致矩阵奇异，结果不可预测 - 每帧都
new Float32Array(16)创建新矩阵？GC 压力大且慢，复用一个数组 +mat4.identity(dest)重置更稳
真正卡住人的从来不是某一行代码，而是上下文之间那几处隐性依赖：canvas 状态、着色器编译链、属性启用开关、矩阵乘法顺序——它们不报错，但一漏就白忙活半天。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
