WebGL核心API - 技术栈

📚 WebGL核心API与全场景开发指南：从简单图形到GIS复杂可视化

WebGL的核心是通过GPU并行计算 实现高性能图形渲染，所有操作围绕「数据传入GPU→着色器处理→屏幕绘制 」的流水线展开。以下从基础类型定义 、简单图形 、光照效果 、纹理映射 到复杂GIS场景，逐步讲解核心API、开发流程与注意事项。

一、WebGL基础：类型定义与内置属性

1. GLSL着色器类型定义（GPU端）

WebGL使用GLSL（OpenGL着色器语言）编写顶点/片元着色器，核心类型如下：

类型	说明	示例
`float`	单精度浮点型	`float zoom = 10.0;`
`vec2/vec3/vec4`	2/3/4维向量，用于存储坐标、颜色等	`vec3 color = vec3(1.0,0.0,0.0);`
`mat4`	4x4矩阵，用于空间变换（投影、模型、视图矩阵）	`mat4 proj = mat4(1.0);`
`attribute`	顶点属性变量，每个顶点唯一值（如坐标、法向量），从CPU传入GPU	`attribute vec2 a_pos;`
`uniform`	全局变量，所有顶点/片元共享（如投影矩阵、光源位置）	`uniform mat4 u_matrix;`
`varying`	插值变量，从顶点着色器传递到片元着色器（如纹理坐标、法向量）	`varying vec2 v_uv;`

2. WebGL上下文内置常量（CPU端）

WebGL上下文提供大量内置常量，用于控制渲染状态：

常量分类	关键常量
图元类型	`gl.POINTS`（点）、`gl.LINES`（不连接的线段）、`gl.LINE_STRIP`（连接的线段）、`gl.LINE_LOOP`（闭合的线段环）、`gl.TRIANGLES`（不连接的三角形）、`gl.TRIANGLE_FAN`（三角形扇形）、`gl.TRIANGLE_STRIP`（三角带）
缓冲区类型	`gl.ARRAY_BUFFER`（顶点数据）、`gl.ELEMENT_ARRAY_BUFFER`（索引数据）
纹理参数	`gl.CLAMP_TO_EDGE`（纹理边缘裁剪）、`gl.LINEAR`（线性采样）、`gl.REPEAT`（纹理重复）
清除掩码	`gl.COLOR_BUFFER_BIT`（颜色缓冲区）、`gl.DEPTH_BUFFER_BIT`（深度缓冲区）

二、阶段1：简单图形绘制（点、线、面）

1. 核心API

API名称	作用
`gl.createBuffer()`	创建顶点/索引缓冲区
`gl.bindBuffer()`	绑定缓冲区到目标
`gl.bufferData()`	将CPU数据传入GPU缓冲区
`gl.getAttribLocation()`	获取着色器attribute变量位置
`gl.vertexAttribPointer()`	配置顶点数据格式
`gl.enableVertexAttribArray()`	启用顶点属性数组
`gl.drawArrays()`	绘制图元（无索引）

2. 开发流程（以绘制GIS点要素为例）

步骤1：编写着色器

glsl 复制代码

// 顶点着色器
attribute vec2 a_pos; // 墨卡托坐标
uniform mat4 u_proj;  // 投影矩阵
void main() {
  gl_Position = u_proj * vec4(a_pos, 0.0, 1.0);
  gl_PointSize = 5.0; // 点大小（仅gl.POINTS生效）
}

// 片元着色器
precision mediump float;
uniform vec3 u_color;
void main() {
  gl_FragColor = vec4(u_color, 1.0);
}

步骤2：创建缓冲区并传入数据

javascript 复制代码

// GIS点数据（墨卡托坐标）
const points = new Float32Array([
  12958389, 4853998, // 北京
  13524273, 3668448, // 上海
  11588026, 3539893  // 广州
]);

// 创建顶点缓冲区
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW); // STATIC_DRAW表示数据不常更新

// 关联着色器属性
const aPosLoc = gl.getAttribLocation(program, 'a_pos');
gl.enableVertexAttribArray(aPosLoc);
gl.vertexAttribPointer(aPosLoc, 2, gl.FLOAT, false, 0, 0); // 每个顶点2个float

步骤3：设置全局变量并绘制

javascript 复制代码

// 设置投影矩阵（墨卡托→裁剪空间）
const projMat = new Float32Array([
  2/(800*Math.pow(2,10)), 0, 0, 0,
  0, -2/(600*Math.pow(2,10)), 0, 0,
  0, 0, 1, 0,
  -1, 1, 0, 1
]);
gl.uniformMatrix4fv(gl.getUniformLocation(program, 'u_proj'), false, projMat);

// 设置点颜色
gl.uniform3f(gl.getUniformLocation(program, 'u_color'), 1.0, 0.0, 0.0);

// 绘制3个点
gl.drawArrays(gl.POINTS, 0, 3);

3. 注意事项

点大小限制 ：gl_PointSize在WebGL 1.0中最大为64，WebGL 2.0无限制，移动端可能更小
线宽限制 ：gl.lineWidth()仅支持1.0（多数浏览器），复杂线样式需用三角形模拟
矩形绘制 ：WebGL无原生矩形图元，需用2个三角形（gl.TRIANGLES）或三角带（gl.TRIANGLE_STRIP）绘制
性能优化 ：大量点使用实例化渲染 （gl.drawArraysInstanced）减少绘制调用

三、阶段2：光照效果实现（环境光→漫反射→镜面反射）

1. 核心API

API名称	作用
`gl.uniform3f()`	传递3维向量（如光源位置、法向量）
`gl.uniformMatrix4fv()`	传递4x4矩阵（如模型矩阵、法向量矩阵）
`gl.enable(gl.DEPTH_TEST)`	启用深度测试，避免遮挡错误

2. 开发流程（以漫反射光照为例）

步骤1：编写带光照的着色器

glsl 复制代码

// 顶点着色器
attribute vec3 a_pos; // 三维坐标
attribute vec3 a_normal; // 法向量
uniform mat4 u_model; // 模型矩阵
uniform mat4 u_proj;  // 投影矩阵
uniform vec3 u_lightPos; // 光源位置
varying vec3 v_normal;
varying vec3 v_fragPos;

void main() {
  v_fragPos = vec3(u_model * vec4(a_pos, 1.0));
  v_normal = mat3(transpose(inverse(u_model))) * a_normal; // 法向量矩阵变换
  gl_Position = u_proj * u_model * vec4(a_pos, 1.0);
}

// 片元着色器
precision mediump float;
varying vec3 v_normal;
varying vec3 v_fragPos;
uniform vec3 u_lightPos;
uniform vec3 u_lightColor;
uniform vec3 u_objColor;

void main() {
  // 环境光
  float ambientStrength = 0.1;
  vec3 ambient = ambientStrength * u_lightColor;

  // 漫反射
  vec3 norm = normalize(v_normal);
  vec3 lightDir = normalize(u_lightPos - v_fragPos);
  float diff = max(dot(norm, lightDir), 0.0);
  vec3 diffuse = diff * u_lightColor;

  // 最终颜色
  vec3 result = (ambient + diffuse) * u_objColor;
  gl_FragColor = vec4(result, 1.0);
}

步骤2：传入法向量数据并启用深度测试

javascript 复制代码

// 立方体顶点与法向量数据
const vertices = new Float32Array([
  // 顶点坐标          法向量
  -0.5, -0.5, -0.5,  0.0,  0.0, -1.0,
  0.5, -0.5, -0.5,  0.0,  0.0, -1.0,
  // ... 省略其他顶点
]);

// 创建缓冲区并关联属性
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 关联法向量属性
const aNormalLoc = gl.getAttribLocation(program, 'a_normal');
gl.enableVertexAttribArray(aNormalLoc);
gl.vertexAttribPointer(aNormalLoc, 3, gl.FLOAT, false, 6*4, 3*4); // 步长6个float，偏移3个float

// 启用深度测试
gl.enable(gl.DEPTH_TEST);

3. 注意事项

法向量归一化 ：在片元着色器中必须对法向量归一化（normalize(v_normal)），避免插值后长度变化
法向量矩阵 ：模型矩阵缩放时，法向量需用逆转置矩阵变换，避免法向量方向错误
性能优化：静态模型预计算法向量，动态模型在CPU计算法向量后传入GPU
移动端适配：关闭镜面反射，仅保留环境光+漫反射，减少计算量

四、阶段3：纹理映射（图片、DEM高度图）

1. 核心API

API名称	作用
`gl.createTexture()`	创建纹理对象
`gl.bindTexture()`	绑定纹理到目标
`gl.texParameteri()`	设置纹理参数（如边缘处理、过滤方式）
`gl.texImage2D()`	将图片数据传入GPU纹理
`gl.uniform1i()`	传递纹理单元索引
`gl.activeTexture()`	激活纹理单元

2. 开发流程（以GIS卫星影像纹理为例）

步骤1：编写带纹理的着色器

glsl 复制代码

// 顶点着色器
attribute vec2 a_pos;
attribute vec2 a_uv; // 纹理坐标
uniform mat4 u_proj;
varying vec2 v_uv;

void main() {
  v_uv = a_uv;
  gl_Position = u_proj * vec4(a_pos, 0.0, 1.0);
}

// 片元着色器
precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_texture; // 纹理采样器

void main() {
  gl_FragColor = texture2D(u_texture, v_uv);
}

步骤2：加载并创建纹理

javascript 复制代码

// 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置纹理参数（解决图片翻转、边缘问题）
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// 加载卫星影像（处理跨域）
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  // 生成Mipmap（可选，提升缩放清晰度）
  gl.generateMipmap(gl.TEXTURE_2D);
};
img.src = 'https://example.com/satellite-tile.png';

步骤3：关联纹理坐标并绘制

javascript 复制代码

// 顶点坐标+纹理坐标
const data = new Float32Array([
  // 顶点坐标    纹理坐标
  -1.0, -1.0,  0.0, 0.0,
  1.0, -1.0,   1.0, 0.0,
  1.0,  1.0,   1.0, 1.0,
  -1.0, 1.0,   0.0, 1.0
]);

// 关联纹理坐标属性
const aUvLoc = gl.getAttribLocation(program, 'a_uv');
gl.enableVertexAttribArray(aUvLoc);
gl.vertexAttribPointer(aUvLoc, 2, gl.FLOAT, false, 4*4, 2*4); // 步长4个float，偏移2个float

// 传递纹理单元
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0);

// 绘制矩形（三角带）
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

3. 注意事项

纹理Y轴翻转 ：WebGL纹理坐标Y轴向下，GIS数据Y轴向上，需在着色器中处理v_uv.y = 1.0 - v_uv.y
跨域问题 ：图片需设置crossOrigin = 'anonymous'，且服务器需配置CORS
纹理格式 ：优先使用gl.RGBA，移动端支持gl.RGB减少内存占用
DEM地形应用：将DEM数据作为纹理传入，顶点着色器采样高度值修改Z坐标实现地形起伏

五、阶段4：复杂图形与GIS场景（三维模型、大规模要素）

1. 核心API

API名称	作用
`gl.ELEMENT_ARRAY_BUFFER`	索引缓冲区类型，共享顶点减少数据量
`gl.drawElements()`	使用索引绘制图元
`gl.drawArraysInstanced()`	实例化渲染，批量绘制重复要素（如POI点）
`gl.getExtension('OES_vertex_array_object')`	VAO扩展，缓存顶点属性配置

2. 开发流程（以GIS多边形索引绘制为例）

步骤1：使用索引缓冲区减少数据量

javascript 复制代码

// 多边形顶点坐标（4个顶点）
const vertices = new Float32Array([
  0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0
]);

// 索引数据（2个三角形，共享顶点）
const indices = new Uint16Array([0,1,2, 0,2,3]);

// 创建顶点缓冲区
const vertexBuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuf);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 创建索引缓冲区
const indexBuf = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

// 绘制6个索引（2个三角形）
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

步骤2：实例化渲染绘制1000个POI点

javascript 复制代码

// 单个点的顶点数据（1个顶点）
const pointVertex = new Float32Array([0.0, 0.0]);

// 实例化偏移数据（1000个点的位置偏移）
const offsets = new Float32Array(2000);
for(let i=0; i<1000; i++) {
  offsets[2*i] = Math.random()*2-1; // X偏移
  offsets[2*i+1] = Math.random()*2-1; // Y偏移
}

// 创建实例化缓冲区
const offsetBuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, offsetBuf);
gl.bufferData(gl.ARRAY_BUFFER, offsets, gl.STATIC_DRAW);

// 配置实例化属性（每个实例更新一次）
const aOffsetLoc = gl.getAttribLocation(program, 'a_offset');
gl.enableVertexAttribArray(aOffsetLoc);
gl.vertexAttribPointer(aOffsetLoc, 2, gl.FLOAT, false, 0, 0);
gl.vertexAttribDivisor(aOffsetLoc, 1); // 每个实例更新一次

// 绘制1000个实例
gl.drawArraysInstanced(gl.POINTS, 0, 1, 1000);

3. 注意事项

索引缓冲区优势：多边形/模型共享顶点，数据量减少50%以上
VAO优化 ：使用VAO缓存顶点属性配置，避免每次渲染重复调用vertexAttribPointer
大规模数据分块：GIS矢量瓦片分块加载，每块用单独缓冲区绘制，避免一次性传入过多数据
空间索引：使用四叉树/八叉树查询视口内要素，仅绘制可见要素，提升性能
内存管理：及时删除不再使用的缓冲区/纹理，避免内存泄漏

🎯 全流程总结与避坑指南

开发流程通用模板 ：

复制代码

1. 获取WebGL上下文 → 2. 编写并编译着色器 → 3. 创建缓冲区传入数据 → 4. 关联着色器属性 → 5. 设置全局变量 → 6. 绘制 → 7. 清理资源

常见错误排查 ：
- 忘记enableVertexAttribArray()：顶点数据无法传入GPU
- 着色器编译错误：用gl.getShaderInfoLog()查看错误信息
- 纹理跨域：图片未设置crossOrigin或服务器未配置CORS
- 深度测试未启用：模型遮挡错误
GIS专属优化 ：
- 矢量瓦片用索引缓冲区减少数据量
- DEM地形用纹理采样高度值
- 大规模POI用实例化渲染
- 投影转换在顶点着色器中完成，利用GPU并行计算