编程语言
首页 > 编程语言> > 使用IndexedDB缓存给WebGL三维程序加速

使用IndexedDB缓存给WebGL三维程序加速

作者:互联网

前言

使用webgl开发三维应用的时候,经常会发现三维场景加载比较慢,往往需要等待挺长时间,这样用户的体验就很不友好。 造成加载慢的原因,主要是三维应用涉及到的资源文件会特别多,这些资源文件主要是模型及其图片,往往这些模型和图片都会比较大。

为了加快三维场景的加快速度,可以使用IndexedDB在客户端进行资源缓存。IndexedDB,即客户端持久化数据库!使用本缓存技术,在初次访问后,3D场景中的文件级别数据将写入访问设备本地缓存数据库,在客户端实现永久的生命周期,清除浏览器缓存也不影响已缓存的3D模型文件。

IndexedDB介绍

IndexedDB 是一个前端数据持久化解决方案(即前端缓存),由浏览器实现。
IndexedDB又如下特点

本地浏览器拥有三种永久存储数据技术,分别为Web Storage、IndexedDB、Web SQL。IndexedDB具备查询高效、存储空间大和异步操作等技术特征,有巨大的优势。

存储空间大。IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。在HTML5本地存储中,IndexedDB存储的数据则是最多的。

查询高效。IndexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。

异步操作。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

与此同时,IndexedDB 内部采用对象仓库存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象,满足了三维场景的存储需要。

因此 使用IndexedDB缓存是一种最为优异的前端缓存方案。像Babylon.js,其引擎层面已经支持了IndexedDB缓存。可以参考如下文档:
https://doc.babylonjs.com/divingDeeper/scene/optimizeCached。

three.js使用IndexedDB的思路

有关具体如何使用IndexedDB,有很多资料进行介绍,此文不在赘述。

使用IndexedDB缓存模型资源,首先需要获取模型相关的资源,这些模型资源包括模型文件以及相关的图片文件。 比如对于GLTF模型而言,其资源包括.gltf的模型主文件,.bin格式的文件,纹理贴图文件等等。 首次加载加一个模型的时候,肯定是加载网络上的资源文件,通过threejs的LoadingMananger可以收集一个gltf模型的各种资源文件。 代码如下:

    const resourceCollector = [];
    const loadingManager = new LoadingManager();
    loadingManager.setURLModifier( (url,path) => {
      console.log(url);
      if(url.startsWith("data:") || url.startsWith("blob:")) {
        return url;
      }
      resourceCollector.push(url);
      return url;
    });

上述代码resourceCollector收集了加载模型过程中所有的模型资源的地址。 收集之后把所有资源存储到IndexedDB中:

saveGltfModel:async function(options,resourceCollector){
    const gltfUrl = options.gltfPath;
    const blobs = {};
    for(let i = 0;i < resourceCollector.length;i ++) {
      let url = resourceCollector[i];
      let blob = await loadAsBlob(url);
      blobs[url] = blob;
      await addToDatabase("model",{key:url,blob})
    }
    await addToDatabase("model_info",{key:gltfUrl,content:resourceCollector});
  },

其中loadAsBlob是把一个资源加载成为blob对象,代码如下:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.onerror = function() {reject("Network error.")};
  xhr.onload = function() {
      if (xhr.status === 200) {resolve(xhr.response)}
      else {reject("Loading error:" + xhr.statusText)}
  };
  xhr.send();

而addToDatabase方法把资源添加到IndexedDB数据库。

function addToDatabase(storename, data) {
  const promise = new Promise( (resolve,reject) => {
    let store = database.transaction(storename, 'readwrite').objectStore(storename);
    let countReq = store.count(data.key);
    countReq.onsuccess = function(event) {
      console.log("count:",event.target.result);
      let count = event.target.result;
      if(count ==  0) {
        let request = store.add(data);
        request.onerror = function (event) {
          console.error('add添加数据库中已有该数据')
          reject(event);
        };
        request.onsuccess = function (event) {
          console.log('add添加数据已存入数据库')
          resolve(event);
        };
      }
    };
  });
}

下一次获取模型的时候,可以先判断是否以及本地存储,如果已经本地存储,就可以直接从本地获取模型资源:

 if(this.indexDbCache && indexedDB) {
      if(database == null) {
        database = await initialDB();
      }
      const storeObject = await findInDatabase("model_info",key);
      if(storeObject) {
        return this.loadGltfInDb(options);
      }
    }

缓存效果测评

通过测试可以发现对于比较大的场景,模型加载的速度可以提高几倍,十几倍甚至几十倍。 由此可见,IndexedDB缓存效果很明显。

如果对可视化感兴趣,可以和我交流,微信541002349。

关注公号“ITMan彪叔” 可以及时收到更多有价值的文章。

标签:IndexedDB,缓存,url,WebGL,event,xhr,模型
来源: https://www.cnblogs.com/flyfox1982/p/15875468.html