使用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彪叔” 可以及时收到更多有价值的文章。
