WebGL是浏览器内置的底层图形API，需手动编写着色器、管理缓冲区和渲染管线；Three.js是其高级封装库，提供Scene、Mesh等语义化对象。纯WebGL灵活轻量但门槛高，Three.js开发快但掩盖细节。
JavaScript WebGL 是浏览器内置的底层图形 API，不是库也不是框架，它让你直接调用 GPU 渲染 3D（和 2D）内容——但你得自己写顶点着色器、片段着色器、管理缓冲区、设置管线状态，没有默认相机、没有模型加载器、没有光照系统。
WebGL 和 Three.js 有什么区别？
WebGL 是浏览器暴露的一套 C 风格接口（通过 JavaScript 绑定），比如 gl.createBuffer()、gl.drawArrays()；Three.js 是基于 WebGL 封装的高级库，提供 Mesh、Scene、WebGLRenderer 这类语义化对象。直接用 WebGL 更灵活、更轻量、更适合学习图形学原理；用 Three.js 更快上线、更少出错、但容易掩盖底层细节。
- 想控制每个顶点变换过程、调试着色器逻辑、做定制化渲染效果 → 选 WebGL
- 想快速展示 OBJ 模型、加阴影、接动画、做产品预览 → 选 Three.js
- 很多“WebGL 教程”实际混用了 Three.js 代码，看到
new THREE.Mesh()就说明不是纯 WebGL
怎样从零启动一个纯 WebGL 渲染循环？
核心就三步：获取上下文、编译着色器、提交绘制。缺一不可，顺序不能乱。
- 用
canvas.getContext('webgl')获取上下文，注意要检查返回值是否为null（比如用户禁用硬件加速或浏览器不支持） - 着色器源码是字符串，必须手动拼接或 fetch 加载，然后调用
gl.compileShader()，失败时查gl.getShaderInfoLog()—— 大多数黑屏问题都卡在这一步 - 每次绘制前要绑定
gl.ARRAY_BUFFER、启用gl.VERTEX_ATTRIB_ARRAY、设置gl.vertexAttribPointer()，漏掉任一调用，gl.drawArrays()就不会画出东西
最小可运行示例（只画一个红三角）：
立即学习“Java免费学习笔记（深入）”；
const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl');
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, `attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`);
gl.compileShader(vs);
// …（省略片段着色器和链接程序）
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]), gl.STATIC_DRAW);
gl.drawArrays(gl.TRIANGLES, 0, 3);
常见黑屏/白屏原因有哪些？
90% 的初学者问题不是代码逻辑错，而是状态没对齐或默认值被忽略。
-
gl.clearColor()默认是 (0,0,0,0)，即完全透明黑色，如果没调gl.clear()或清的是透明色，就会看不见内容 - 顶点坐标必须在 [-1, 1] 范围内，超出即裁剪 —— 传
[100, 200]这种绝对像素值进去，肯定不显示 - 忘记调
gl.useProgram()，即使着色器已编译链接，不激活就无效 - Canvas 宽高用 CSS 设置（如
style="width:400px;height:300px"），但实际绘图区域仍是默认 300×150 像素，导致拉伸或内容缩成一点
WebGL 真正难的不是语法，而是状态机思维：每一步操作都可能改变全局上下文，而错误往往不报异常，只静默失效。调试时优先确认着色器编译日志、检查缓冲区数据长度、用 gl.getError() 插桩定位调用失败点——这些比重写逻辑更有效。
