WebGL 百万线段高性能 Demo（批量绘制，无循环绘制）
WebGL 百万线段高性能 Demo（批量绘制，无循环绘制）
核心优化关键点（百万级必备）
- 单缓冲区存放所有线段顶点，一次上传 GPU，不频繁
bufferData - 使用
gl.LINES，每 2 个顶点一条线段，100 万条 = 200 万个顶点 - 着色器极简逻辑，CPU 只生成一次数据，渲染仅一次
drawArrays - 关闭不必要状态，降低管线开销
- 浮点数组一次性分配内存，减少 GC 卡顿
完整可运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>WebGL 100万条线段批量渲染</title> <style> canvas { border: 1px solid #333; background: #000; } </style> </head> <body> <canvas id="webglCanvas" width="1200" height="700"></canvas> <script> const canvas = document.getElementById('webglCanvas'); const gl = canvas.getContext('webgl', { antialias: false, // 关闭抗锯齿提升性能 preserveDrawingBuffer: false }); if (!gl) alert("浏览器不支持WebGL"); // ===================== 1. 着色器 ===================== const vertexShaderSource = ` attribute vec2 aPos; void main() { gl_Position = vec4(aPos, 0.0, 1.0); } `; const fragmentShaderSource = ` precision mediump float; uniform vec3 uLineColor; void main() { gl_FragColor = vec4(uLineColor, 1.0); } `; // 编译着色器工具 function createShader(type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); return shader; } function createProgram(vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); gl.useProgram(program); return program; } const vs = createShader(gl.VERTEX_SHADER, vertexShaderSource); const fs = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource); const program = createProgram(vs, fs); // 获取属性/Uniform位置 const aPosLoc = gl.getAttribLocation(program, 'aPos'); const uColorLoc = gl.getUniformLocation(program, 'uLineColor'); // ===================== 2. 生成100万条线段顶点数据 ===================== const LINE_COUNT = 1000000; // 100万条线 const VERTEX_COUNT = LINE_COUNT * 2; // 每条线2个顶点 const vertexData = new Float32Array(VERTEX_COUNT * 2); // 每个顶点 x,y // 随机生成 [-1,1] 范围内线段（模拟随机分布线条） let offset = 0; for (let i = 0; i < LINE_COUNT; i++) { // 起点 const x1 = Math.random() * 2 - 1; const y1 = Math.random() * 2 - 1; // 终点 const x2 = Math.random() * 2 - 1; const y2 = Math.random() * 2 - 1; vertexData[offset++] = x1; vertexData[offset++] = y1; vertexData[offset++] = x2; vertexData[offset++] = y2; } // ===================== 3. 创建缓冲区，一次性上传GPU ===================== const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // STATIC_DRAW：数据几乎不修改，GPU优化显存 gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW); // 绑定顶点属性 gl.vertexAttribPointer(aPosLoc, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aPosLoc); // ===================== 4. 渲染配置 ===================== gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // 设置线条白色 gl.uniform3f(uColorLoc, 1, 1, 1); // 关键：一次调用绘制全部100万条线 console.time("drawAllLines"); gl.drawArrays(gl.LINES, 0, VERTEX_COUNT); console.timeEnd("drawAllLines"); </script> </body> </html>关键流程拆解（百万线渲染标准流程）
1. 上下文创建优化
关闭抗锯齿antialias:false，百万线段开启 AA 会严重掉帧。
2. 数据存储逻辑
- 100 万条线段 = 2000000 个顶点
- 每个顶点
vec2(x,y)= 2 个浮点数 - 总浮点数量：
2000000 * 2 = 4000000 Float32Array一次性预分配内存，避免循环 push 造成频繁扩容卡顿
3. 缓冲区上传策略
只用一次gl.bufferData把全部顶点送入 GPU，绝对不要循环多次上传数据，这是大批量渲染最大性能瓶颈。
4. 绘制调用
gl.drawArrays(gl.LINES, 0, VERTEX_COUNT);gl.LINES规则：顶点 0&1 一条线、2&3 一条线…… 完美匹配我们的数据结构。 整批只执行一次绘制指令，CPU-GPU 通信开销极低。
性能说明
- 显存占用粗略计算单个 Float32 占 4 字节：4000000 × 4 = 16MB，现代显卡毫无压力。
- 浏览器限制： 部分低端笔记本 / 集成显卡渲染百万线条会帧率下降，属于显卡光栅化性能限制，代码本身无性能浪费。
- 进阶提速方案（如果需要更高帧率）
- 使用索引缓冲
ELEMENT_ARRAY_BUFFER，重复顶点复用（适合网格线） - 分批次多 Buffer 分段渲染（动态更新部分线条时用）
- 使用 WebGL2 + 实例化渲染
instanced批量生成重复线条 - 降低画布分辨率，缩小
width/height减少像素填充
常见问题
- 页面加载卡住几秒：生成 400 万浮点数需要少量 CPU 计算，属于正常现象；可把生成数据逻辑放 Web Worker 避免阻塞页面。
- 线条看不见：WebGL 坐标范围
[-1,1]，代码已全部随机在该区间内；背景黑色、线条白色对比明显。 - 线条粗细统一：原生 WebGL
gl.LINES不支持自定义线宽（多数浏览器忽略lineWidth），如需粗线条要用三角带模拟线段。