WebGL 百万线段高性能 Demo（批量绘制，无循环绘制）

WebGL 百万线段高性能 Demo批量绘制无循环绘制核心优化关键点百万级必备单缓冲区存放所有线段顶点一次上传 GPU不频繁bufferData使用gl.LINES每 2 个顶点一条线段100 万条 200 万个顶点着色器极简逻辑CPU 只生成一次数据渲染仅一次drawArrays关闭不必要状态降低管线开销浮点数组一次性分配内存减少 GC 卡顿完整可运行代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleWebGL 100万条线段批量渲染/title style canvas { border: 1px solid #333; background: #000; } /style /head body canvas idwebglCanvas width1200 height700/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 4000000Float32Array一次性预分配内存避免循环 push 造成频繁扩容卡顿3. 缓冲区上传策略只用一次gl.bufferData把全部顶点送入 GPU绝对不要循环多次上传数据这是大批量渲染最大性能瓶颈。4. 绘制调用gl.drawArrays(gl.LINES, 0, VERTEX_COUNT);gl.LINES规则顶点 01 一条线、23 一条线…… 完美匹配我们的数据结构。 整批只执行一次绘制指令CPU-GPU 通信开销极低。性能说明显存占用粗略计算单个 Float32 占 4 字节4000000 × 4 16MB现代显卡毫无压力。浏览器限制 部分低端笔记本 / 集成显卡渲染百万线条会帧率下降属于显卡光栅化性能限制代码本身无性能浪费。进阶提速方案如果需要更高帧率使用索引缓冲ELEMENT_ARRAY_BUFFER重复顶点复用适合网格线分批次多 Buffer 分段渲染动态更新部分线条时用使用 WebGL2 实例化渲染instanced批量生成重复线条降低画布分辨率缩小width/height减少像素填充常见问题页面加载卡住几秒生成 400 万浮点数需要少量 CPU 计算属于正常现象可把生成数据逻辑放 Web Worker 避免阻塞页面。线条看不见WebGL 坐标范围[-1,1]代码已全部随机在该区间内背景黑色、线条白色对比明显。线条粗细统一原生 WebGLgl.LINES不支持自定义线宽多数浏览器忽略lineWidth如需粗线条要用三角带模拟线段。