預(yù)加載是在進入正式場景之前提前加載所需模型、材質(zhì)、圖片等資源的技術(shù)手段，其核心價值在于消除資源加載等待，確保場景首次渲染即可完整呈現(xiàn)，從而提供無縫、流暢的用戶體驗。在復(fù)雜的 Web 3D 可視化應(yīng)用中，資源預(yù)加載尤為重要，可有效解決首次加載時的卡頓、白屏及交互延遲等問題。

預(yù)加載實現(xiàn)方案

01 基礎(chǔ)實現(xiàn)原理

HT for Web 中所有資源的請求都會經(jīng)過 ht.Default.convertURL 方法，該方法提供了統(tǒng)一的資源請求入口：

■當(dāng)返回字符串路徑時，框架會按此路徑發(fā)起資源請求；

■當(dāng)返回 {data: content} 格式對象時，框架會直接使用 content 作為資源內(nèi)容。

基于此特性，我們可實現(xiàn)預(yù)加載機制。

// 資源緩存映射表
let sourceMap = {}; 
// 判斷是否為本地資源
functionisLocalUrl(url) {
    return url.startsWith('data:') || url.startsWith('blob:');
}
// 重寫 convertURL 方法
let oldFunc = ht.Default.convertURL;
ht.Default.convertURL = function(url) {
    if (isLocalUrl(url)) return url;
    
    let source = sourceMap[url];
    if (source) {
        return { data: source };
    }
    
    return oldFunc(url);
};

02 資源加載策略

部分資源預(yù)加載適用于資源量較大但部分關(guān)鍵資源需要優(yōu)先加載的場景。

// 關(guān)鍵資源列表
let resources = [
    "models/model.json",
    "assets/texture.png",
    "symbols/symbols.json"
]

全量資源預(yù)加載獲取所有已注冊資源進行預(yù)加載：

functiongetAllResources() {
    return [
        ...Object.keys(ht.Default.getImageMap()),
        ...Object.keys(ht.Default.getCompTypeMap()),
        ...Object.keys(ht.Default.getShape3dModelMap()),
        ...Object.keys(ht.Default.getMaterialMap()),
        ...Object.keys(ht.Default.getHdrTextureMap())
    ];
}
let allResources = getAllResources();

03 資源加載實現(xiàn)

// 資源類型判斷
const ResourceType = {
    IMAGE: /.(png|jpg|gif|jpeg|bmp|svg)$/i,
    BUFFER: /.(fbx|gltf|glb)$/i,
    HDR: /.hdr$/i,
    TGA: /.tga$/i,
    JSON: /.json$/i
};


class ResourceLoader {
constructor(resources) {
        this.resources = resources;
        this.loaded = 0;
    }
    
    load() {
        this.resources.forEach(url => {
            if (ResourceType.BUFFER.test(url)) {
                this.loadBuffer(url);
            } 
            else if (ResourceType.IMAGE.test(url)) {
                this.loadImage(url);
            }
            // 其他資源類型處理...
        });
    }
    
    loadBuffer(url) {
        ht.Default.xhrLoad(url, res => {
            this.onResourceLoaded(url, res);
        }, { responseType: 'arraybuffer' });
    }
    
    // 其他加載方法...
    
    onResourceLoaded(url, res) {
        sourceMap[url] = res;
        this.loaded++;
        this.onProgress(this.loaded, this.resources.length);
        
        if (this.loaded === this.resources.length) {
            this.onAllLoaded();
        }
    }


    // 加載進度回調(diào)
  onProgress(loaded, total) {
    console.log(`加載進度: ${loaded}/${total}`);
  };
    
    onAllLoaded() {
        console.log("所有資源預(yù)加載完成");
        // 進入主場景...
    }
}

加載頁面優(yōu)化

01 進度展示設(shè)計

class LoadingView{
    constructor() {
        this.initView();
    }


    initView(){
        this.dm = new ht.DataModel();
        this.view = new ht.graph.GraphView(this.dm);
        
        let style = this.view.getView().style;
        style.left = "0";
        style.right = "0";
        style.top = "0";
        style.bottom = "0";
        document.body.appendChild(this.view.getView());
    }
    
    // 更新進度
    updateProgress(percent) {
        
    }
    
    // 移除加載頁面
    remove() {
        setTimeout(() => {
            this.view.getView().remove();
            this.enterMainScene();
        }, 1);
    }
    
    // 進入主場景
    enterMainScene(){


    }
}

02視覺優(yōu)化建議

■進度條設(shè)計：使用圖標實現(xiàn)平滑動畫。

■背景動畫：添加輕量級背景動畫提升等待體驗。

■分段進度：將加載過程分為資源加載、場景初始化等階段。

■預(yù)估時間：基于已加載時間預(yù)測剩余時間。

性能優(yōu)化方案

01 Service Worker 離線緩存

// sw.js
let CACHE_NAME = 'ht-resources-v1';


self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request).then(function (response) {
        if (response !== undefined) {
            return response;
        } else {
            return fetch(event.request).then(function (response) {
                if (event.request.url.indexOf('storage') != -1) {
                    let responseClone = response.clone();
                    caches.open(CACHE_NAME).then(function (cache) {
                        cache.put(event.request, responseClone);
                    });
                }
                return response;
            }).catch(function () {
                return caches.match('./');
            });
        }
    }));
});


self.addEventListener('activate', function (event) {
    event.waitUntil(clients.claim());
    event.waitUntil(
        caches.keys().then(function (keyList) {
            returnPromise.all(keyList.map(function (key) {
                if (key !== CACHE_NAME) {
                    // 刪除舊緩存
                    return caches.delete(key);
                }
            }));
        })
    );
});

02 資源壓縮策略

■模型優(yōu)化：輕量化模型，對模型進行減面。

■圖片優(yōu)化：圖片資源壓縮。

效果對比與總結(jié)

01 加載效果對比

預(yù)加載方案雖然初始顯示時間較長，但提供了更優(yōu)的整體用戶體驗：

■完整的場景一次性呈現(xiàn)，避免零碎加載造成的視覺割裂。

■無卡頓的交互體驗，所有資源已就緒。

■可控的等待預(yù)期，進度反饋降低用戶焦慮。

■更穩(wěn)定的性能表現(xiàn)，避免運行時資源加載導(dǎo)致的卡頓。

預(yù)加載效果

常規(guī)加載效果

02 適用場景

■大型 3D 場景：包含復(fù)雜模型和紋理的場景。

■儀表盤應(yīng)用：需要快速響應(yīng)的監(jiān)控系統(tǒng)。

■移動端應(yīng)用：網(wǎng)絡(luò)條件不穩(wěn)定的環(huán)境。

■演示系統(tǒng)：需要流暢演示效果的場合。

03 實施建議

■分階段實施：先對關(guān)鍵資源預(yù)加載，再逐步擴展。

■性能監(jiān)控：添加加載時間統(tǒng)計和分析。

■A/B 測試：對比不同策略的實際效果。

綜上所述，本預(yù)加載方案能顯著提升 HT for Web 應(yīng)用的加載性能和用戶體驗，特別適合對流暢性要求高的可視化應(yīng)用場景。在實際項目中，應(yīng)根據(jù)資源規(guī)模和用戶場景靈活調(diào)整預(yù)加載策略，平衡加載時間和用戶體驗。

圖撲軟件 (Hightopo) 長期專注于 Web 可視化領(lǐng)域，自主研發(fā) HT for Web 2D 和 3D 圖形渲染引擎、低代碼數(shù)字孿生組態(tài)平臺及相關(guān)工具。目前產(chǎn)品已廣泛應(yīng)用于工業(yè)組態(tài)、電力能源、孿生工廠、電信機房、智慧交通、智慧城市、園區(qū)樓宇、智慧水務(wù)、航天軍工等行業(yè)領(lǐng)域，為客戶提供可靠的一站式數(shù)字孿生解決方案。

審核編輯 黃宇