WebGL缓冲区使用与多点绘制实战
一、前言
1.1 适用人群
本教程适合已经了解基础的HTML/CSS/JavaScript，对WebGL有基本概念（知道着色器、绘制流程），但希望深入理解其核心性能机制——缓冲区（Buffer） 的开发者。我们将聚焦于“如何使用缓冲区高效地管理和绘制大量顶点数据”，解决“如何绘制成千上万个点而不卡顿”的核心痛点。
效果如图：
1.2 核心目标
- 理解本质：掌握WebGL缓冲区（Buffer）的作用，它如何与GPU通信，以及为何它是高性能绘制的基石。
- 掌握方法：学会创建、绑定、配置和数据填充缓冲区，实现单次绘制调用（draw call）渲染多个点。
- 实战应用：通过完整代码示例，从绘制单个点进阶到动态绘制成百上千个随机点，并理解其性能优势。
二、基础知识：什么是WebGL缓冲区（Buffer）？
功能说明
在WebGL中，缓冲区是GPU上的一块内存区域，用于存储顶点数据（如位置、颜色、法线等）。你可以把缓冲区想象成一个 “快递包裹” ，将JavaScript中定义的一大包数据（例如数万个点的坐标），一次性批量发送给GPU。GPU可以直接从这个“包裹”中快速读取数据进行渲染，避免了逐个发送数据的巨大开销。
核心思想：一次发送，多次使用
流程如下：
1. 在JS中创建数据数组（如顶点位置）
const positions = [x1, y1, z1, x2, y2, z2, ...];
2. 创建WebGL缓冲区
const buffer = gl.createBuffer();
3. 绑定缓冲区并填充数据
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
4. 在着色器中配置如何读取这些数据
为什么需要缓冲区？
如果不使用缓冲区，绘制N个点可能需要N次绘制调用和N次数据传递。而使用缓冲区，无论点有多少（几千甚至几万），都只需要一次绘制调用。这正是WebGL能够处理复杂3D场景的根本原因。
三、实战准备：HTML结构与环境
代码示例：基础HTML模板
首先，我们需要一个承载WebGL画布的HTML文件和一个基础的渲染上下文。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
