Darren Zhang commited on
Commit
1b4bc33
·
1 Parent(s): 9c299e7

Motion Sample: load the full-res mesh directly, drop progressive LOD

Browse files

The 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 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
- // 网格是最大的一块。渐进加载: 先取 meshes_lo.pack(1.0MB) 出画面, 首帧之后再后台
126
- // 取 meshes.pack(4.4MB) 热替换。二者都是 gzip 预压缩 —— HF static Space 不给二进制
127
- // 自动 gzip。扩展名不用 .gz: 那样有些服务器会加 Content-Encoding: gzip, 浏览器已经
128
- // 解过一遍, 这里再解就双重解压; 所以还按 gzip magic (1f 8b) 兜底判断。
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('meshes_lo.pack',(g,t)=>
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_.meshes_lo||scene_.meshes);
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