WebGL 是浏览器原生支持的底层 3D 图形 API，需手动管理着色器、缓冲区和矩阵变换；其核心流程包括获取上下文、编译着色器、绑定数据、设置状态及调用绘制；推荐优先使用 WebGL 2 并配合 gl-matrix 与 SpectorJS 提升开发效率。
在 JavaScript 中操作 3D 图形，最直接的方式是使用 WebGL —— 它是浏览器原生支持的、基于 OpenGL ES 的底层图形 API。WebGL 本身不提供场景、相机、光照等高级抽象，需要手动管理顶点数据、着色器、缓冲区和渲染管线。不过，掌握其基本用法是理解现代 Web 3D 开发（如 Three.js 底层）的关键。
WebGL 的核心工作流程
WebGL 渲染一个 3D 物体不是“创建模型→设置材质→调用渲染”，而是一系列明确的步骤：
- 获取 canvas 元素并初始化 WebGL 上下文（
gl = canvas.getContext('webgl')或'webgl2'） - 编写并编译顶点着色器（处理顶点位置、法线、纹理坐标等）和片元着色器（决定每个像素颜色）
- 链接着色器程序（
gl.createProgram()+gl.linkProgram()） - 准备顶点数据（如三角形的 x/y/z 坐标），写入缓冲区（
gl.createBuffer(),gl.bufferData()） - 将缓冲区绑定到着色器中的属性变量（通过
gl.getAttribLocation()和gl.vertexAttribPointer()） - 设置清屏颜色、启用深度测试等状态（
gl.clearColor(),gl.enable(gl.DEPTH_TEST)） - 调用
gl.drawArrays()或gl.drawElements()启动 GPU 绘制
着色器：GLSL 是必须写的代码
WebGL 使用 GLSL（OpenGL Shading Language）编写着色器，它运行在 GPU 上，语法类似 C，但有专用类型（如 vec3, mat4）和内置变量（如 gl_Position, gl_FragColor）。
例如，一个最简顶点着色器：
立即学习“Java免费学习笔记（深入）”；
attribute vec3 a_position;
void main() {
gl_Position = vec4(a_position, 1.0);
}
对应片元着色器：
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}
注意：precision 在 WebGL 1 中必须声明；a_position 是 JavaScript 中通过 gl.getAttribLocation() 获取并启用的属性名。
矩阵变换：靠 JavaScript 手动计算
WebGL 不提供内置的 model/view/projection 变换函数。你需要用 JavaScript（或轻量数学库如 gl-matrix）构造变换矩阵，并传给着色器。
- 定义
uniform mat4 u_matrix;在顶点着色器中接收变换矩阵 - 在 JS 中用
gl.getUniformLocation()获取该 uniform 的位置 - 用
gl.uniformMatrix4fv()把 JS 计算好的Float32Array矩阵传过去 - 常见操作包括平移（
mat4.translate()）、旋转（mat4.rotateX()）、透视投影（mat4.perspective()）
实用建议：从 WebGL 2 开始，避开兼容性陷阱
WebGL 2 基于 OpenGL ES 3.0，支持更多特性且接口更简洁：
- 默认支持整数纹理、多重采样、uniform buffer objects（UBO）
- 着色器中可直接用
in/out替代attribute/varying -
gl.drawArraysInstanced()等批量绘制更高效 - 检查支持时优先用
getContext('webgl2')，降级到 WebGL 1 需额外处理（如不支持texture2D改用texture）
初学者可先用 gl-matrix 处理矩阵，避免手写错误；调试推荐 SpectorJS 插件，实时查看帧、着色器、缓冲区内容。
