Spaces:
Running
Running
Darren Zhang commited on
Commit ·
1b4bc33
1
Parent(s): 9c299e7
Motion Sample: load the full-res mesh directly, drop progressive LOD
Browse filesThe low-poly first paint was visibly under-tessellated for the first few seconds, which
looked worse than simply waiting. meshes_lo.pack is gone; meshes.pack (698k tris, 4.44 MB
gzip) loads with a byte-progress readout instead.
- motionSample/index.html +7 -24
- motionSample/meshes_lo.pack +0 -3
motionSample/index.html
CHANGED
|
@@ -122,10 +122,10 @@ const fail=m=>{const e=document.getElementById('err');e.style.display='grid';e.t
|
|
| 122 |
(async function(){
|
| 123 |
try{
|
| 124 |
const scene_=await (await fetch('scene.json')).json();
|
| 125 |
-
// 网格是最大的一块
|
| 126 |
-
//
|
| 127 |
-
//
|
| 128 |
-
//
|
| 129 |
async function getPack(url, onProgress){
|
| 130 |
const r=await fetch(url);
|
| 131 |
if(!r.ok) throw new Error(url+' '+r.status);
|
|
@@ -145,8 +145,8 @@ try{
|
|
| 145 |
const w=ds.writable.getWriter(); w.write(buf); w.close();
|
| 146 |
return new Response(ds.readable).arrayBuffer();
|
| 147 |
}
|
| 148 |
-
const mbuf=await getPack('
|
| 149 |
-
load(`Loading… ${(g/1048576).toFixed(1)}${t?' / '+(t/1048576).toFixed(1):''} MB`));
|
| 150 |
load('Building geometry…');
|
| 151 |
const abuf=await (await fetch('motion.bin')).arrayBuffer();
|
| 152 |
const Q=32767;
|
|
@@ -185,7 +185,7 @@ try{
|
|
| 185 |
}
|
| 186 |
return out;
|
| 187 |
}
|
| 188 |
-
const meshGeo=buildGeo(mbuf, scene_.
|
| 189 |
const meshGroup=new THREE.Group(); scene.add(meshGroup);
|
| 190 |
|
| 191 |
const objs={}, jointNodes={}, axesList=[], axesByJoint={};
|
|
@@ -219,7 +219,6 @@ try{
|
|
| 219 |
new THREE.MeshStandardMaterial({
|
| 220 |
color:new THREE.Color(rgba[0],rgba[1],rgba[2]),
|
| 221 |
metalness:.25,roughness:.6}));
|
| 222 |
-
me.userData.mesh=m.mesh;
|
| 223 |
me.position.set(...m.xyz); me.rotation.set(m.rpy[0],m.rpy[1],m.rpy[2],'XYZ');
|
| 224 |
if(m.scale)me.scale.set(...m.scale);
|
| 225 |
o.add(me);
|
|
@@ -454,22 +453,6 @@ try{
|
|
| 454 |
document.getElementById('load').remove();
|
| 455 |
window.__ready=true;
|
| 456 |
|
| 457 |
-
// ── 渐进升级: 首屏用低模(1.0MB), 之后后台换全精度(4.4MB) ─────────────
|
| 458 |
-
// 实测把最终面数降到 320k/180k 躯干会出现裂面, 所以质量不能省, 只能把等待挪到后台。
|
| 459 |
-
if(scene_.meshes_lo) (async()=>{
|
| 460 |
-
const tip=document.getElementById('tip'), base=tip?tip.textContent:'';
|
| 461 |
-
try{
|
| 462 |
-
const buf=await getPack('meshes.pack',(g,t)=>{
|
| 463 |
-
if(tip&&t)tip.textContent=base+` · full-res mesh ${Math.round(g/t*100)}%`;});
|
| 464 |
-
const hi=buildGeo(buf, scene_.meshes);
|
| 465 |
-
meshGroup.traverse(o=>{
|
| 466 |
-
const n=o.userData&&o.userData.mesh;
|
| 467 |
-
if(n&&hi[n]){const old=o.geometry; o.geometry=hi[n]; if(old&&old.dispose)old.dispose();}
|
| 468 |
-
});
|
| 469 |
-
window.__hires=true;
|
| 470 |
-
}catch(e){ console.warn('full-res mesh upgrade failed:',e); }
|
| 471 |
-
if(tip)tip.textContent=base;
|
| 472 |
-
})();
|
| 473 |
}catch(e){fail('load failed: '+(e&&e.stack||e));}
|
| 474 |
})();
|
| 475 |
</script>
|
|
|
|
| 122 |
(async function(){
|
| 123 |
try{
|
| 124 |
const scene_=await (await fetch('scene.json')).json();
|
| 125 |
+
// 网格是最大的一块(未压缩 12.6MB), gzip 预压缩后 4.4MB —— HF static Space 不给二进制
|
| 126 |
+
// 自动 gzip, 所以自己压。扩展名不用 .gz: 那样有些服务器会加 Content-Encoding: gzip,
|
| 127 |
+
// 浏览器已经解过一遍, 这里再解就双重解压; 所以还按 gzip magic (1f 8b) 兜底判断。
|
| 128 |
+
// 曾经做过"先低模再后台换高模"的渐进加载, 但开头那几秒面数明显不足很难看, 已去掉。
|
| 129 |
async function getPack(url, onProgress){
|
| 130 |
const r=await fetch(url);
|
| 131 |
if(!r.ok) throw new Error(url+' '+r.status);
|
|
|
|
| 145 |
const w=ds.writable.getWriter(); w.write(buf); w.close();
|
| 146 |
return new Response(ds.readable).arrayBuffer();
|
| 147 |
}
|
| 148 |
+
const mbuf=await getPack('meshes.pack',(g,t)=>
|
| 149 |
+
load(`Loading mesh… ${(g/1048576).toFixed(1)}${t?' / '+(t/1048576).toFixed(1):''} MB`));
|
| 150 |
load('Building geometry…');
|
| 151 |
const abuf=await (await fetch('motion.bin')).arrayBuffer();
|
| 152 |
const Q=32767;
|
|
|
|
| 185 |
}
|
| 186 |
return out;
|
| 187 |
}
|
| 188 |
+
const meshGeo=buildGeo(mbuf, scene_.meshes);
|
| 189 |
const meshGroup=new THREE.Group(); scene.add(meshGroup);
|
| 190 |
|
| 191 |
const objs={}, jointNodes={}, axesList=[], axesByJoint={};
|
|
|
|
| 219 |
new THREE.MeshStandardMaterial({
|
| 220 |
color:new THREE.Color(rgba[0],rgba[1],rgba[2]),
|
| 221 |
metalness:.25,roughness:.6}));
|
|
|
|
| 222 |
me.position.set(...m.xyz); me.rotation.set(m.rpy[0],m.rpy[1],m.rpy[2],'XYZ');
|
| 223 |
if(m.scale)me.scale.set(...m.scale);
|
| 224 |
o.add(me);
|
|
|
|
| 453 |
document.getElementById('load').remove();
|
| 454 |
window.__ready=true;
|
| 455 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 456 |
}catch(e){fail('load failed: '+(e&&e.stack||e));}
|
| 457 |
})();
|
| 458 |
</script>
|
motionSample/meshes_lo.pack
DELETED
|
@@ -1,3 +0,0 @@
|
|
| 1 |
-
version https://git-lfs.github.com/spec/v1
|
| 2 |
-
oid sha256:861f4738f7ed599dc0876dc7cea5cf285e467b12dde077965c7ce24380570c72
|
| 3 |
-
size 1038163
|
|
|
|
|
|
|
|
|
|
|
|