WebGL是基于OpenGL ES 2.0的浏览器GPU渲染API，需手动管理上下文、缓冲、着色器与绘制管线；Three.js等库封装了底层细节提升开发效率，而原生WebGL适用于性能优化、特殊图像处理或教学场景。
WebGL 是浏览器中运行的 JavaScript API，用于在网页上直接调用 GPU 渲染高性能 3D（和 2D）图形，无需插件。它基于 OpenGL ES 2.0 规范，通过 JavaScript 操作底层着色器（Vertex Shader 和 Fragment Shader），实现硬件加速的图形渲染。
WebGL 的核心组成与工作流程
WebGL 不是“画图库”，而是一套底层绘图接口。要让它工作，必须手动搭建几个关键环节：
-
获取 WebGL 上下文：从 <canvas> 元素中调用
getContext('webgl')或getContext('webgl2') -
准备缓冲区（Buffer）：把顶点坐标、颜色、纹理坐标等数据上传到 GPU 内存（如使用
bindBuffer+bufferData） -
编写并编译着色器：用 GLSL ES 语言写顶点着色器（控制位置）和片元着色器（控制颜色），再链接成可执行的着色程序（
program） -
设置管线状态并绘制：激活 program、绑定缓冲、设置 attribute/uniform 变量、调用
drawArrays或drawElements
为什么建议用 Three.js 等封装库？
原生 WebGL 代码冗长且易错（例如矩阵计算、事件响应、动画循环都要手写）。Three.js 抽象了大部分底层细节，提供场景（Scene）、相机（Camera）、网格（Mesh）、材质（Material）、光源（Light）等面向对象模型。
比如创建一个旋转立方体：
立即学习“Java免费学习笔记（深入）”；
- 初始化
Scene、PerspectiveCamera、WebGLRenderer - 创建几何体（
BoxGeometry）、材质（MeshBasicMaterial）、网格（Mesh）并加入场景 - 在
requestAnimationFrame循环中更新旋转角度并渲染
几行代码就能跑起来，开发效率大幅提升，适合大多数 3D 展示、产品配置器、数据可视化等场景。
何时需要写原生 WebGL？
当项目有特殊需求，比如：
- 极致性能优化（自定义渲染管线、延迟渲染、GPU 计算）
- 特定图像处理（实时滤镜、粒子系统、流体模拟）
- 教学或底层原理理解（如自己实现 Phong 着色、阴影映射）
- 嵌入已有 C/C++ 图形引擎（通过 WebAssembly + WebGL 交互）
此时需熟练掌握 GLSL、矩阵变换、帧缓冲（FBO）、纹理格式、深度测试等概念，并注意不同设备驱动兼容性问题（如某些 Android GPU 对浮点精度敏感）。
开发 3D 网页应用的实用建议
起步阶段推荐组合：Three.js + glTF 模型 + OrbitControls + GSAP（动画）+ 响应式 canvas 设置。
- 模型优先用
.gltf格式（轻量、支持 PBR 材质、动画、压缩纹理），用GLTFLoader加载 - 用
OrbitControls提供鼠标/触控旋转缩放，比手写更稳定 - canvas 宽高务必用 CSS +
renderer.setSize()同步，避免拉伸或模糊 - 性能敏感时启用
renderer.setPixelRatio(window.devicePixelRatio)并限制帧率（如setTimeout替代 requestAnimationFrame） - 上线前用
WebGL Inspector（浏览器插件）或three.js devtools检查内存泄漏与 draw call
