WebGL是OpenGL ES 2.0在浏览器中的JavaScript绑定，需手动搭建渲染管线、传数据、写GLSL着色器；常见黑屏源于着色器编译失败、viewport未设或帧缓冲不完整。
WebGL 不是新语言，而是浏览器里直接调用 GPU 的底层接口；想“入门”，重点不是学 WebGL 本身，而是理解怎么用 JavaScript 搭起渲染管线、传数据、写着色器——而且得绕开一堆默认不报错但画面全黑的坑。
WebGL 是什么：不是 Canvas2D，也不是 Three.js
WebGL 是 OpenGL ES 2.0 在浏览器中的 JavaScript 绑定，它不提供任何场景图、相机或模型加载功能。你拿到的是一个极简的、状态机式的绘图 API：gl.drawArrays() 之前必须手动绑定缓冲区、启用顶点属性、设置着色器程序、传 uniform 变量——漏一步，屏幕就是纯黑，还不会抛错。
常见误解：
- 误以为
canvas.getContext('webgl')成功就等于能画东西（其实只是上下文创建成功，后续每步都可能静默失败） - 把 WebGL 当作 Canvas2D 的升级版（二者范式完全不同：Canvas2D 是命令式绘图，WebGL 是声明式管线）
- 跳过 GLSL 着色器直接套用 Three.js 示例（结果改个颜色都找不到在哪设）
最简可运行 WebGL 示例（5 行核心逻辑）
以下不是“Hello World”玩具，而是真正能跑通、能调试、能改参数的最小闭环：
立即学习“Java免费学习笔记（深入）”；
const gl = canvas.getContext('webgl');
const program = createProgram(gl, vsSource, fsSource); // 自定义函数，编译链接着色器
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(posLoc);
gl.drawArrays(gl.TRIANGLES, 0, 3); // 这行执行完，三角形才真出现在屏幕上
关键点：
-
createProgram必须检查gl.getProgramParameter(program, gl.LINK_STATUS)，否则着色器编译失败时gl.useProgram()会静默失效 -
vertexAttribPointer前必须调用gl.enableVertexAttribArray()，否则顶点数据被忽略 -
gl.drawArrays的第三个参数是顶点数，不是字节数，新手常填成buffer.byteLength
为什么你的 WebGL 页面总是黑屏？查这三处
90% 的初学者黑屏问题集中在这三个地方，顺序排查比重写代码快得多：
- 检查着色器编译日志：
gl.getShaderInfoLog(shader)和gl.getProgramInfoLog(program)—— 即使只少一个分号，也会编译失败且不报错 - 确认
gl.viewport()是否调用，且宽高与 canvas DOM 尺寸一致（CSS 缩放 canvas 会导致gl.viewport和实际像素不匹配） - 验证帧缓冲是否完整：
gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE（尤其在使用 FBO 时）
一个小技巧：先用固定色输出测试片元着色器，比如 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);，确认管线能走通再接入 varyings 和纹理。
下一步该做什么：别急着画模型
入门阶段真正的分水岭，不是能不能画出旋转立方体，而是能不能独立修改以下任意一项并立刻看到效果：
- 改变顶点坐标数组，观察三角形形变
- 在顶点着色器里加
gl_Position.x *= 0.5;，看横向压缩 - 把 uniform
u_color从 JS 传入，并在 JS 里用requestAnimationFrame动态更新
这些操作背后涉及缓冲区更新机制、uniform 生命周期、GPU 同步时机——踩过这些坑，才算真正“摸到” WebGL 的边界。之后再学矩阵变换、纹理采样、深度测试，才有上下文可依附。
