在Web端渲染大型三维场景时，模型体积往往是体验杀手。一个建筑信息模型可能包含数百万个三角面，附带几张八千乘八千的纹理，整体二进制超过一百兆。如果采用传统整文件下载再解析的方式，用户必须等待全部数据到达并反序列化完成后才能看到任何画面。流式传输与渐进式加载正是为了解决这种等待而诞生的两套互补方案，它们分别从网络分发和视觉呈现两个维度压缩感知延迟。
流式传输的底层机制与实现方式
流式传输的核心思想是把三维模型的二进制按照空间或数据结构切分为多个块，客户端在收到第一个块时就可以开始解析并创建部分几何对象，后续块到达后增量合并进场景图。这与视频的边下边播类似，只不过播放的是顶点缓冲和索引缓冲。常见的做法是在服务端将glTF拆成JSON描述加多个bin资源，利用HTTP范围请求或WebSocket推送分片，前端通过fetch可读流逐步读取并写入ArrayBuffer。
在WebGL环境中，我们可以借助GLB的chunk结构做分块。下面示例展示如何用流式读取一个被切分的模型头部，并提前构建包围盒用于占位：
async function streamModel(url) {
const res = await fetch(url);
const reader = res.body.getReader();
let received = 0;
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
received += value.length;
// 每收到超过100KB就更新一次加载进度
console.log('已接收字节:' + received);
}
// 合并后交给解析器
const total = new Uint8Array(received);
let offset = 0;
for (const c of chunks) {
total.set(c, offset);
offset += c.length;
}
return total;
}
这种方式的优势是首屏时间大幅缩短，因为不需要等待尾部纹理。但难点在于模型本身的拓扑必须支持增量构建，如果网格索引互相依赖，分块就可能失效。实践中多用八叉树或空间网格预切分，保证每个块内的顶点局部独立。网络层建议开启压缩，如Brotli，能再降三分之一体积。
渐进式加载的层级细节策略
渐进式加载更关注“先看什么后看什么”。它通常预先生成一个低模版本，比如将原模型简化到五千面以内，立刻渲染出大致形状，随后在后台拉取中模、高模以及法线贴图、 albedo贴图，动态替换材质与几何。该技术依赖LOD（Level of Detail）层级定义，每一级对应不同精度的资源包。
一个典型的渐进式替换流程是：场景先放入Mesh占位，监听高清资源加载完成后，在requestAnimationFrame里静默交换geometry和material，避免画面跳动。以下代码说明如何用低模过渡到高模：
const lowMesh = new THREE.Mesh(lowGeo, lowMat);
scene.add(lowMesh);
loader.load('high_model.glb', (gltf) => {
const highMesh = gltf.scene.children[0];
// 保持原有世界坐标
highMesh.position.copy(lowMesh.position);
scene.remove(lowMesh);
scene.add(highMesh);
lowGeo.dispose();
lowMat.dispose();
});
渐进式加载对带宽波动容忍度高，即便高清部分一直没下完，用户也能操作低模。缺点是如果层级划分不合理，会出现明显“变清晰”的突变感。好的做法是配合mipmap式纹理和几何蒙皮，让过渡更平滑。在电商三维商品页中，这种方法能让用户秒开旋转视图，再慢慢看清缝线细节。
两者结合的系统架构与性能对比
将流式传输作为管道、渐进式加载作为消费侧策略，是目前大型Web3D应用的标配。服务端按视锥裁剪动态推送可见块，客户端用低模占坑并流式补齐高精度块。这样即使用户快速转动镜头，也不会因为请求了不可见数据而浪费带宽。
从性能数据看，纯整包加载在50兆模型下首屏约4.2秒，单纯流式可降至1.1秒，而流式加渐进式低模首屏仅0.3秒，后续高清在三秒内无声补齐。下表列出三种方案差异：
| 方案 | 首屏时间 | 弱网容忍 | 实现复杂度 |
|---|---|---|---|
| 整包加载 | 4.2秒 | 差 | 低 |
| 仅流式 | 1.1秒 | 中 | 中 |
| 流式加渐进 | 0.3秒 | 优 | 高 |
在架构落地时，建议用Service Worker缓存已流式子块，配合IndexedDB存LOD资源，二次访问几乎零等待。同时要注意在WebGL上下文丢失时，增量缓冲需支持重建，否则会出现黑屏。只有把传输与呈现当作一个整体设计，才能真正解决三维内容在普通网络下的交付难题。
3D_model_streamingprogressive_loadingwebgl修改时间：2026-08-19 04:34:31