缓冲区数据更新
二百个顶点连成一条波浪线，每帧重算纵坐标并整体写入缓冲区。 这是动态数据最基本的形态：几何不变，位置在变。
说明
顶点沿 X 轴均匀排开，Y 由正弦函数决定，X 越靠边振幅越小，形成两端收窄的波浪。
每帧把 count × 3 个浮点数写回同一块 CPU 数组，再调用
buffer.write(data) 上传。缓冲区在创建时就声明了
VERTEX | COPY_DST，允许反复写入。
图元类型是 line-strip，顶点按顺序连成一条折线，首尾不闭合。
换成 line-list 会变成每两个点一段的断线，视觉上完全不同。
| 配置 | 取值 | 说明 |
|---|---|---|
| 顶点数 | 200 | 每帧上传 2400 字节 |
| 图元 | line-strip | 相邻顶点依次相连 |
| 用途 | VERTEX | COPY_DST | 声明为可写，WebGPU 迁移时同样成立 |
| 更新方式 | 整段覆盖 | 点数固定时最简单可靠 |
| 振幅 | 0.1 – 0.6 | 滑杆实时改参数，下一帧生效 |
| 频率 | 2 – 12 | 控制波峰数量 |
为什么不用每帧新建缓冲区
每帧 createBuffer 会不断申请显存、产生新的资源对象，旧的还要手动销毁。
正确做法是复用同一块缓冲，只更新内容。顶点数固定时，整段覆盖是最省心的方案；
顶点数会变化时，才需要重建缓冲区或使用可扩容的动态缓冲。
整段覆盖的代价
200 个顶点只有 2.4 KB，整段上传的开销可以忽略。
数据量到几十万个顶点时，每帧全量上传会占用大量带宽。
这时应当只更新变化区间，使用 write(data, byteOffset)
指定偏移，或改用支持分段更新的动态缓冲。
暂停与恢复
「暂停」只是停止重算与上传，渲染循环仍在运行，最后一帧的画面保持在画布上。 如果连渲染也想省掉，可以在暂停时跳过整个渲染通道； 但画布内容在部分浏览器上可能被清空，需要保留最后一帧的纹理作为兜底。
先声明用途，再写入。只在 WebGL 上开发时，漏写 COPY_DST
通常也能跑；迁移到 WebGPU 后，写入会被拒绝。用途标志从一开始就写全，后续不用返工。