最近在尝试了新的传输方式。不过对QModel而言,影响不是很大,因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。
首先,把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包,现在改为在服务端拆解为N份,根据构件数量每500个压缩为一个包,同时把数据转换为utf8array.然后生成一个索引文件A。
前端首先请求索引文件A。得到数据包的数量,然后进入本文重点。
主线程根据解析索引文件,知道了一共有N个数据包,然后开始启用worker下载。如下
主线程代码:
var worker = new Worker("worker.js");
worker.postMessage({m: 模型N}); //向worker发送数据
worker.onmessage = function(evt) { //接收worker传过来的数据函数
var resulti = JSON.parse(evt.data);
//开始解析resulti
}
然后创建一个worker.js,多线程进行传输并解压。
onmessage = function(evt) {
JSZipUtils.getBinaryContent( "数据包N.zip", {
callback: function(err, data) {
var zipdata = new JSZip(data);
var filei = zipdata.file("数据包N.json");
postMessage(filei.asText());
}
});
}
实际效果如下图
总结:
1、由于个人服务器原因,带宽就那么大,一个线程跑满和10个线程同时下载,完全没有效率的差异。所以下载起来是一样的。需要硬件支持才体现出传输的优化。
2、数据解析放到线程里面,确实会提升一些效率。
3、下一步优化,可以考虑在worker里面直接把数据转换成Utf8Array或者ArrayBuffer,PostMessage是可以移交这一类对象的控制权的。
自研引擎产品试用,demo下载: