WebGL 大规模点云渲染：Instanced 与 GPU 管线的性能突破
一、百万级点云每帧 draw call，帧率跌到 3
某地理信息团队去年做城市建筑三维扫描，点云数据单帧 150 万个点。第一版 demo 跑起来帧率只有 3 帧/秒，肉眼可见的幻灯片感。复盘时把 Chrome 性能面板打开，主线程被 drawArrays 调度压得死满，每帧要发 150 万次绘制调用。这事我见过太多团队栽进去。
更糟的是，团队起初的解决方案是"减少点数"。把点云降到 30 万，视觉上密度一下稀了一半，建筑轮廓都看不清了。问题不在数据量，而在"逐点提交"这件事本身。
WebGL 给出的解法是批处理：把重复结构合并成一次绘制。本文聚焦 Instanced Rendering（实例化渲染）与 GPU 端数据组织，拆解百万点云如何稳定跑满 60 帧。
二、点云渲染的 GPU 数据管线
实例化渲染的基本思路是：一份几何体描述（顶点模板）+ 一份每实例的差异属性（位置、颜色、尺寸），由 GPU 在单次绘制中复制出 N 份。顶点着色器通过 gl_InstanceID 或实例属性，定位到当前实例的坐标，从而把百万次调用压缩成一次。
flowchart LR
A[点云数据:位置/颜色] –> B[上传至VBO/实例缓冲]
B –> C[顶点着色器:取实例偏移]
C –> D[应用MVP矩阵投影]
D –> E[光栅化点精灵]
E –> F[片元着色:圆点/光照]
F –> G[帧缓冲合成]
G –> H[屏幕输出]
数据组织同样关键。点云通常存为 Float32Array，位置三个分量、颜色三个分量连续排列。上传后由 vertexAttribDivisor 标记"每实例步进"，告知 GPU 这份属性随实例而非随顶点变化。这一步配置错了，所有点会重叠在同一个坐标。某团队曾因 divisor 漏写一栏，200 万点全部塌缩在原点，整屏一个像素。
三、生产级 Instanced 点云封装
下面给出基于原生 WebGL2 的实例化点云渲染骨架。重点在于：用 gl.drawArraysInstanced 一次绘制全部；用 vertexAttribDivisor 区分顶点与实例属性；用 OES_vertex_array_object 缓存 VAO 减少状态切换；并在上下文丢失时注册恢复回调，保证生产环境稳定性。
// 实例化点云渲染器：一次 draw 绘制百万点
// 为什么实例化：百万次 draw call 会让 CPU 调度直接崩盘
export class PointCloudRenderer {
private gl: WebGL2RenderingContext;
private vao!: WebGLVertexArrayObject;
private count = 0;
constructor(private canvas: HTMLCanvasElement) {
const gl = canvas.getContext('webgl2', { antialias: false });
if (!gl) throw new Error('当前环境不支持 WebGL2，需降级方案');
this.gl = gl;
// 上下文丢失时阻止默认行为，等待 restore 再重建
canvas.addEventListener('webglcontextlost', (e) => e.preventDefault());
canvas.addEventListener('webglcontextrestored', () => this.build());
}
// 上传点云数据并构建 VAO
build(positions: Float32Array, colors: Float32Array): void {
const gl = this.gl;
this.count = positions.length / 3;
this.vao = gl.createVertexArray()!;
gl.bindVertexArray(this.vao);
// 顶点模板：一个单位方块，作为点精灵基底
const quad = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
const tpl = gl.createBuffer()!;
gl.bindBuffer(gl.ARRAY_BUFFER, tpl);
gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
// 实例属性：每个点的世界坐标，divisor=1 表示随实例变化
const posBuf = gl.createBuffer()!;
gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribDivisor(1, 1); // 关键：标记实例级属性
const colBuf = gl.createBuffer()!;
gl.bindBuffer(gl.ARRAY_BUFFER, colBuf);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
gl.enableVertexAttribArray(2);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribDivisor(2, 1);
gl.bindVertexArray(null);
}
render(viewProj: Float32Array): void {
const gl = this.gl;
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(this.program);
gl.uniformMatrix4fv(this.uMVP, false, viewProj);
gl.bindVertexArray(this.vao);
// 一次调用画出全部实例，CPU 开销从百万次降到一次
gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, this.count);
gl.bindVertexArray(null);
}
dispose(): void {
const ext = this.gl.getExtension('WEBGL_lose_context');
ext?.loseContext(); // 主动释放 GPU 资源，避免泄漏
}
}
对于超大规模（千万级以上）点云，还需引入层次细节（LOD）与视锥剔除：只提交相机可见范围内的点，离得远的点用更低密度采样。某自动驾驶团队做过测算：开启 LOD 后，远景点云密度降到 1/8，帧率从 22 帧稳到 58 帧，视觉差异肉眼几乎看不出。这块逻辑通常放在计算着色器或预处理阶段，前端负责加载分块数据并动态切换。
一个易被忽视的细节是 instance buffer 的更新策略。整批重建上传很慢，建议用 bufferSubData 增量更新可见区域。某次现场救火，就是因为全量重建导致加载新一帧要 200ms，整车扫描体验像在打嗝。改为增量后掉到 12ms，问题消失。
四、吞吐、显存与兼容性的三角权衡
实例化把绘制调用压到极致，却对显存提出更高要求：所有点属性必须常驻 GPU 缓冲。百万点 × 6 浮点 × 4 字节约 24MB，尚可控；若叠加法线、强度等多维属性，轻松突破百兆，低端设备会显存不足而崩溃。
其次是 WebGL2 的兼容性。实例化是 WebGL2 原生能力，但在极少数老旧环境（如部分嵌入式 WebView）只支持 WebGL1，需借助 ANGLE_instanced_arrays 扩展补齐，代码分支随之变复杂。
最后是精度取舍。点坐标用 Float32 在超大场景下会出现抖动（z-fighting），必要时改用半精度或分块局部坐标，增加坐标变换复杂度。
graph TD
S[点云规模] –>|百万级| A[单次实例化绘制]
S –>|千万级| B[LOD+视锥剔除分块]
B –> C{显存是否充足?}
C — 否 –> D[降维属性/压缩]
C — 是 –> E[全属性常驻]
A –> F[WebGL2原生]
适用边界：三维扫描、GIS、科学可视化等百万级以上点场景必须上实例化；而千级装饰性粒子，普通 POINTS 绘制反而更简单。
五、总结
大规模点云渲染的突破点，在于用实例化绘制把百万次 draw call 压缩成一次。核心手段是实例属性 + vertexAttribDivisor + drawArraysInstanced。数据应预组织为 Float32Array 并常驻 GPU 缓冲，配合 VAO 减少状态切换。生产环境必须处理 WebGL 上下文丢失与资源释放。超大规模还需引入 LOD 与视锥剔除控制显存与带宽。权衡上需正视显存占用、WebGL2 兼容性分支与浮点精度抖动。对于百万级三维点场景，实例化是必选方案；小规模装饰粒子则用普通绘制更轻量。这条路在 60 帧的硬指标下能跑通，回报是值得的。
