WebGL下LoadSceneAsync进度不更新？

Question

在使用 WebGL 构建的 3D 应用中，调用 `LoadSceneAsync` 加载大型场景时，常出现加载进度不更新的问题。该问题主要表现为：虽然资源正在后台加载，但 `onProgress` 回调未被触发或进度值停滞不变，导致 UI 进度条无法实时反映真实加载状态。此现象多见于资源合并打包（如 glb/glb 嵌入纹理）或使用 AssetBundle 的 WebGL 构建中，根源在于浏览器同源策略与 Unity Web Request 在 WebGL 平台的限制，以及主线程阻塞导致回调延迟。如何实现可靠的加载进度反馈，成为 WebGL 场景优化的关键难点之一。

Answer 1

WebGL 3D应用中LoadSceneAsync加载进度不更新问题深度解析

1. 问题现象与初步定位

在使用 WebGL 构建的 3D 应用中，调用 LoadSceneAsync 加载大型场景时，开发者常遇到加载进度条停滞的问题。尽管资源正在后台下载，但 onProgress 回调未被触发或返回的进度值长时间不变。

• UI 层无法获取实时加载状态
• 用户感知体验差，误以为卡死或加载失败
• 问题多出现在 glb/gltf 嵌入纹理或 AssetBundle 打包后的资源中

2. 根本原因分析：从平台限制到线程模型

该问题并非单一因素导致，而是多个技术瓶颈叠加的结果：

因素类别	具体表现	影响层级
浏览器同源策略	CORS 阻止跨域资源请求，导致部分资源加载失败或延迟	网络层
UnityWebRequest 在 WebGL 的限制	无法精确获取流式传输的字节进度（尤其对 .data 文件）	引擎层
主线程阻塞	解码大量嵌入纹理或解析 JSON 导致 JS 主线程卡顿	执行层
AssetBundle 加载机制	WebGL 下通过 HTTP 分块加载，但 Unity 不暴露中间状态	构建层

3. 技术路径拆解：从异步流程到事件驱动

为实现可靠进度反馈，需重构传统加载逻辑，引入分阶段监控机制：

1. 预计算资源总大小（通过 manifest 文件或服务端接口）
2. 拦截 UnityWebRequest 请求，注入自定义 XHR 进度监听
3. 将大文件拆分为可追踪的子资源单元（如 texture、mesh 分离）
4. 使用 Web Worker 解码关键资产以避免主线程阻塞
5. 建立本地进度聚合器，合并各资源加载状态
6. 通过 postMessage 向主线程同步进度数据
7. UI 层采用平滑插值动画缓解突变感
8. 设置超时重试与降级策略应对网络异常

4. 实现方案示例：基于 Custom WWW Handler 的进度增强

以下代码展示如何通过覆盖默认加载行为来捕获真实网络进度：

function createProgressXHR(url, onProgress, onComplete) {
    const xhr = new XMLHttpRequest();
    let total = 0;
    let loaded = 0;

    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';

    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            loaded = event.loaded;
            total = event.total;
            const progress = loaded / total;
            onProgress && onProgress(progress);
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            onComplete(xhr.response);
        }
    };

    xhr.send();
}

// 注入至 UnityLoader 资源预加载流程
UnityLoader.Instantiate('gameContainer', {
    onBeforeInit: function(unityInstance) {
        // 拦截特定资源请求
        const originalFetch = window.fetch;
        window.fetch = function(input, init) {
            if (input.includes('.assetbundle')) {
                return new Promise((resolve, reject) => {
                    createProgressXHR(
                        input,
                        (p) => updateGlobalProgress(p),
                        (data) => resolve(new Response(data))
                    );
                });
            }
            return originalFetch(input, init);
        };
    }
});
    

5. 架构优化建议：微前端式资源调度

针对大型场景，推荐采用模块化加载架构，结合如下 Mermaid 流程图所示的控制流：

graph TD
    A[启动加载器] --> B{是否启用分块加载?}
    B -- 是 --> C[请求 manifest.json]
    C --> D[解析资源依赖树]
    D --> E[并行请求各 Chunk]
    E --> F[监听每个 XHR 进度]
    F --> G[聚合总进度 = Σ(loaded_i)/Σ(total_i)]
    G --> H[更新 UI 进度条]
    H --> I[所有完成?]
    I -- 否 --> E
    I -- 是 --> J[触发场景初始化]
    B -- 否 --> K[回退标准 LoadSceneAsync]
    K --> L[依赖内置 onProgress]

6. 高级技巧：利用 Service Worker 缓存与预热

为进一步提升加载可预测性，可在构建阶段生成资源指纹，并通过 Service Worker 实现：

• 提前缓存静态资源（glb、texture 等）
• 在用户进入前预加载下一级场景
• 通过 Cache API 提供“伪进度”保障最低体验
• 结合 IndexedDB 存储已下载片段，支持断点续传语义

此方法尤其适用于 PWA 架构下的 WebGL 应用部署。

7. 监控与诊断工具链建设

建立完整的加载性能监控体系是长期维护的关键。建议集成以下能力：

监控项	采集方式	告警阈值
首字节时间 (TTFB)	Performance API 记录 fetch 开始到 first byte	> 1s
进度回调频率	统计 onProgress 调用间隔	> 500ms 无更新
主线程阻塞时长	Long Task API 检测 JS 执行耗时	> 100ms
资源实际大小偏差	对比 manifest 声明 size 与 XHR 实际接收 size	差异 > 10%