WebGL是OpenGL ES的JavaScript绑定，非JS库；需手动管理着色器、缓冲区和矩阵，WebGL2支持更多特性且性能更优，调试依赖底层错误检测与工具。
WebGL 不是 JavaScript 的一个库，也不是某种“3D 框架”，它是浏览器中直接调用 GPU 的底层图形 API——本质是 OpenGL ES 2.0/3.0 的 JavaScript 绑定。想靠 npm install webgl 就跑起来？不行。它需要你亲手配置着色器、管理缓冲区、处理矩阵变换。
WebGL 是什么：不是“JS 的 3D 库”，而是 GPU 的 JS 接口
WebGL 运行在 HTMLCanvasElement 上，通过 getContext('webgl') 或 getContext('webgl2') 获取上下文对象（WebGLRenderingContext）。它不提供任何场景图、相机、光照模型或模型加载逻辑——这些全得你自己写，或借助 Three.js 等库封装。
关键事实：
- WebGL 1 对应 OpenGL ES 2.0，只支持
precision限定符、固定管线替代方案（靠着色器）、无整数纹理支持 - WebGL 2 对应 OpenGL ES 3.0，支持
uniform buffer objects、texture arrays、instanced rendering、更丰富的纹理格式 - 所有顶点数据必须手动传入
ArrayBuffer+WebGLBuffer；所有渲染逻辑必须写 GLSL 代码（vertex shader和fragment shader）
第一个可运行的 WebGL 程序：绕过 Three.js 直接上手
别从“画一个旋转立方体”开始，先确保你能清空画布并画出一个带颜色的三角形——这是验证环境和着色器链路是否通畅的最小闭环。
常见卡点：
-
gl.getShaderInfoLog(shader)返回空字符串？说明编译没报错但可能链接失败，要查gl.getProgramInfoLog(program) - 三角形不显示？大概率是
gl.viewport()没设对，或gl.clearColor()后忘了gl.clear(gl.COLOR_BUFFER_BIT) - 着色器里用了
#version 300 es却用 WebGL 1 上下文？会静默失败——必须用getContext('webgl2')
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL2 not supported');
// 顶点着色器（GLSL ES 3.0）
const vsSource = `
#version 300 es
in vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;
// 片元着色器
const fsSource = `
#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
`;
// 编译着色器、链接 program、启用 attribute...
// （此处省略中间 20 行 setup 代码，重点是：漏掉 bindBuffer / vertexAttribPointer / useProgram / drawArrays 就白搭）
gl.drawArrays(gl.TRIANGLES, 0, 3);
WebGL 1 vs WebGL 2：选哪个？看你要不要省力
除非目标用户明确要求兼容 Safari 15 以下或旧 Android WebView，否则默认用 webgl2。它的改进不是“锦上添花”，而是解决实际痛点：
-
gl.bufferData()在 WebGL 1 中传ArrayBufferView有隐式复制开销；WebGL 2 支持g显式分配不可变存储，性能更可控
l.bufferStorage()
- WebGL 1 里模拟 uniform 数组要靠命名如
uLights[0].pos，WebGL 2 支持真正的uniform array和layout(std140)布局 - WebGL 2 内置
gl.drawElementsInstanced()，批量绘制相同模型（如草地、粒子）无需 JS 循环 + 多次 draw call
检测方式不是靠 UA 字符串，而是：
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
if (gl instanceof WebGL2RenderingContext) {
// 用 WebGL 2 特性
} else if (gl instanceof WebGLRenderingContext) {
// 降级到 WebGL 1 路径
}
为什么直接学 WebGL 很容易放弃？三个现实瓶颈
不是语法难，而是每一步都暴露底层细节，且错误反馈极弱：
- 矩阵搞反了（列主序 vs 行主序）、
gl.uniformMatrix4fv()忘传false（表示是否转置），结果模型缩成一个点，控制台零报错 - 纹理加载异步完成，但
gl.texImage2D()在图片未 ready 时被调用 → 黑屏，且gl.getError()返回gl.NO_ERROR - 没有自动内存管理：
gl.deleteBuffer()漏调，GPU 内存缓慢泄漏，Chrome 任务管理器里GPU memory持续上涨
真正入门的关键，不是写完多少行 shader，而是建立“调试反射弧”：看到黑屏，立刻检查 gl.getErrorCode()、console.log(gl.getParameter(gl.SHADING_LANGUAGE_VERSION))、用 Spector.js 抓帧看 draw call 是否发出、确认 gl.viewport 和 canvas CSS 尺寸是否一致。
