WebGL是基于OpenGL ES的底层图形API，JavaScript负责指挥渲染流程；Three.js等库封装了底层细节，使创建3D效果更简单高效。
WebGL 是浏览器中直接调用 GPU 渲染 3D 图形的技术，它本身不是 JavaScript 库，而是一套基于 OpenGL ES 的底层图形 API。JavaScript 负责设置上下文、准备数据、编写着色器、管理渲染流程——换句话说，JS 是 WebGL 的“指挥员”，不是“画笔”本身。
WebGL 的核心工作流
要让 3D 效果跑起来，必须走完这几个关键环节：
- 获取 canvas 元素并创建 WebGL 渲染上下文（
gl = canvas.getContext('webgl')） - 编写顶点着色器（vertex shader）和片元着色器（fragment shader），用 GLSL 语言写，编译链接成着色程序（program）
- 准备几何数据（如顶点位置、法线、纹理坐标），存入缓冲区（Buffer）并绑定到着色器属性（attribute）
- 设置视图投影矩阵（通常用
mat4类库计算），传给着色器的 uniform 变量 - 清空画布、启用深度测试、调用
gl.drawArrays()或gl.drawElements()开始绘制
不手写 WebGL：Three.js 是更实用的选择
原生 WebGL 代码量大、易出错、兼容性需手动处理。实际项目中，绝大多数人用 Three.js 这类封装库来创建 3D 效果：
- 场景（
Scene）放物体、灯光、相机 - 相机（
PerspectiveCamera）决定观察角度 - 渲染器（
WebGLRenderer）自动处理上下文、着色器、缓冲区等底层细节 - 网格（
Mesh）= 几何体（BoxGeometry） + 材质（MeshBasicMaterial） - 一两行就能旋转立方体：
mesh.rotation.x += 0.01;，再配合requestAnimationFrame循环渲染
简单动效的关键其实是“持续更新”
3D 效果动起来，靠的不是单次绘制，而是每秒约 60 次的重复计算与重绘：
立即学习“Java免费学习笔记（深入）”；
- 在动画循环里更新物体位置、旋转、缩放或材质参数（比如颜色、透明度）
- 修改后无需重新上传顶点数据，只要下次
render()就会反映新状态 - 复杂动画可结合
gsap或three.js内置的Tween控制时间曲线 - 注意性能：避免每帧创建新对象、频繁读取
gl.readPixels、过度使用透明混合
基本上就这些。WebGL 提供能力，JavaScript 组织逻辑，而真正降低门槛的是像 Three.js 这样的抽象层——先跑通一个旋转立方体，后面就容易了。
