WebGL是基于OpenGL ES的JavaScript API，通过HTML5调用GPU实现3D渲染；它提供低阶接口需手动管理着色器、缓冲区等，而Three.js等库在其上封装以提升开发效率。
WebGL 是一种在网页浏览器中直接渲染 3D 图形的 JavaScript API，它基于 OpenGL ES（嵌入式系统版本），无需插件即可通过 HTML5 元素调用 GPU 进行高性能图形计算。JavaScript 本身不“内置”3D绘图能力，而是通过 WebGL 提供的一组底层接口，控制顶点着色器、片元着色器、缓冲区、纹理等，从而构建和渲染 3D 场景。
WebGL 的核心工作方式
WebGL 不是高级图形库（如 Three.js），而是一套低阶接口，需要开发者手动管理：
- 获取
的 WebGL 渲染上下文（gl = canvas.getContext('webgl')） - 编写并编译 GLSL 着色器代码（顶点着色器定义位置，片元着色器定义颜色）
- 创建缓冲区（如顶点坐标、法线、纹理坐标），将数据传入 GPU
- 设置渲染状态（启用深度测试、清除颜色/深度缓冲等）
- 调用
gl.drawArrays()或gl.drawElements()启动绘制
一个最简 WebGL 绘制三角形的步骤
这是理解 WebGL 流程的关键起点：
- 准备 HTML：
- 获取上下文：
const gl = document.getElementById('gl-canvas').getContext('webgl'); - 写两个着色器字符串（顶点着色器 + 片元着色器），用
gl.createShader编译链接成程序 - 创建缓冲区，填入 3 个顶点（如
[-0.5,-0.5,0], [0.5,-0.5,0], [0,0.5,0]），绑定到gl.ARRAY_BUFFER - 启用顶点属性，指定如何读取缓冲数据（如每顶点 3 个浮点数）
- 清屏（
gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT);），再执行gl.drawArrays(gl.TRIANGLES, 0, 3)
为什么通常不直接写原生 WebGL？
原生 WebGL 需要处理大量细节：矩阵变换、相机投影、光照模型、帧缓冲管理、资源加载、错误检查等。稍有疏漏就可能黑屏或报错，开发效率低。因此实际项目中普遍使用封装库：
- Three.js：最流行的高级库，用几行代码就能创建场景、相机、光源和网格
- Babylon.js：面向游戏与交互体验，内置物理、粒子、VR 支持
- PlayCanvas：基于 Web Editor 的实时协作引擎
这些库底层仍调用 WebGL（或 WebGPU），但把数学、内存、渲染管线等封装成直观对象（如 Mesh、Camera、Renderer）。
WebGL 和 JavaScript 的关系本质
JavaScript 是胶水语言和控制层，WebG
L 是浏览器暴露的图形硬件接口。JS 负责：
- 组织逻辑（动画循环、用户交互、资源调度）
- 构造和上传数据（顶点数组、纹理图像）
- 调用 WebGL 方法（
gl.uniformMatrix4fv传 MVP 矩阵，gl.texImage2D传贴图） - 响应 WebGL 错误（如着色器编译失败、上下文丢失）
它不参与图形计算本身——所有顶点变换和像素着色都在 GPU 上由 GLSL 执行。
