Upload index.html

index.html

@@ -1,138 +1,130 @@
 <!DOCTYPE html>
-<html lang="vi">
+<html>
 <head>
-  <meta charset="UTF-8">
-  <title>GLB Morph Target Tool</title>
-  <script type="module" src="https://cdn.skypack.dev/@gltf-transform/core@4.1.0"></script>
+  <title>GLB Morph Tool</title>
+  <script type="module" crossorigin src="https://cdn.skypack.dev/@gltf-transform/core@4.1.0"></script>
   <style>
-    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 30px auto; padding: 20px; }
-    .dropzone { border: 2px dashed #ccc; padding: 40px; text-align: center; margin: 20px 0; cursor: pointer; }
-    .dropzone.dragover { border-color: #0066cc; background: #f0f8ff; }
-    pre { background: #f5f5f5; padding: 10px; border-radius: 5px; max-height: 200px; overflow: auto; }
-    button { padding: 10px 20px; background: #0066cc; color: white; border: none; border-radius: 5px; cursor: pointer; }
+    body { font-family: sans-serif; max-width: 600px; margin: 30px auto; padding: 20px; }
+    input { margin: 10px 0; }
+    button { padding: 10px 20px; }
+    #log { background: #f5f5f5; padding: 10px; margin-top: 10px; max-height: 200px; overflow: auto; }
   </style>
 </head>
 <body>
-  <h1>🔧 GLB Morph Target Tool</h1>
-  <p>Thêm ARKit viseme morph targets vào file GLB</p>
+  <h1>🔧 Add ARKit Morph Targets to GLB</h1>
   
-  <div class="dropzone" id="dropzone">
-    📁 Drop files here hoặc click để chọn
-    <input type="file" id="files" multiple accept=".glb,.gltf" style="display:none">
-  </div>
+  <h3>Target GLB (lisamy.glb):</h3>
+  <input type="file" id="target" accept=".glb"><br>
   
-  <div id="files-list"></div>
-  <button onclick="process()" id="processBtn" style="display:none">Process & Download</button>
+  <h3>Donor GLB (vuong.glb hoặc rpm1.glb):</h3>
+  <input type="file" id="donor" accept=".glb"><br>
   
-  <pre id="log"></pre>
-  <a id="download" style="display:none; margin-top: 10px"></a>
+  <button onclick="run()">Process & Download</button>
+  
+  <div id="log"></div>
+  <a id="dl" style="display:none">📥 Download</a>
 
 <script type="module">
 import { Document, NodeIO } from 'https://cdn.skypack.dev/@gltf-transform/core@4.1.0';
 
 const io = new NodeIO();
-let files = [];
-
-document.getElementById('dropzone').addEventListener('click', () => {
-  document.getElementById('files').click();
-});
-
-document.getElementById('files').addEventListener('change', (e) => {
-  files = Array.from(e.target.files);
-  updateFilesList();
-});
 
-function updateFilesList() {
-  const list = document.getElementById('files-list');
-  list.innerHTML = '<h3>Files selected:</h3>' + files.map(f => '<div>• ' + f.name + '</div>').join('');
-  document.getElementById('processBtn').style.display = files.length === 2 ? 'inline-block' : 'none';
+function log(msg, err) {
+  document.getElementById('log').innerHTML += '<div style="color:' + (err ? 'red' : 'green') + '">' + msg + '</div>';
 }
 
-function log(msg, isError) {
-  document.getElementById('log').innerHTML += '<div style="color: ' + (isError ? 'red' : 'green') + '">' + msg + '</div>';
-}
-
-window.process = async () => {
-  if (files.length < 2) return;
-  
-  const targetFile = files[0];
-  const donorFile = files[1];
-  log('\n📝 Loading...');
+window.run = async () => {
+  const targetFile = document.getElementById('target').files[0];
+  const donorFile = document.getElementById('donor').files[0];
   
-  const [targetBuf, donorBuf] = await Promise.all([
-    targetFile.arrayBuffer(),
-    donorFile.arrayBuffer()
-  ]);
-  
-  const targetDoc = io.read(Buffer.from(targetBuf));
-  const donorDoc = io.read(Buffer.from(donorBuf));
-  
-  // Find donor with morph targets
-  let donorMesh = null, donorPrim = null;
-  for (const mesh of donorDoc.getRoot().listMeshes()) {
-    for (const prim of mesh.listPrimitives()) {
-      if (prim.listTargets().length > 0) { donorMesh = mesh; donorPrim = prim; break; }
-    }
-    if (donorPrim) break;
+  if (!targetFile || !donorFile) {
+    alert('Chọn cả 2 file!');
+    return;
   }
   
-  if (!donorPrim) { log('❌ Donor has no morph targets!', true); return; }
+  log('<br>📝 Loading files...');
   
-  const donorCount = donorPrim.getAttribute('POSITION').getCount();
-  const donorTargets = donorPrim.listTargets();
-  log('✅ Donor: ' + donorMesh.getName() + ' - ' + donorCount + ' verts, ' + donorTargets.length + ' morphs');
-  
-  // Find recipient with same topology
-  let recipientMesh = null, recipientPrim = null;
-  for (const mesh of targetDoc.getRoot().listMeshes()) {
-    for (const prim of mesh.listPrimitives()) {
-      const pos = prim.getAttribute('POSITION');
-      if (pos && pos.getCount() === donorCount) { recipientMesh = mesh; recipientPrim = prim; break; }
-    }
-    if (recipientPrim) break;
-  }
-  
-  if (recipientPrim) {
-    log('✅ SAME TOPOLOGY! Copying...');
-    for (const t of donorTargets) {
-      const newTarget = targetDoc.createPrimitiveTarget();
-      newTarget.setName(t.getName());
-      if (t.getDisplacement()) {
-        newTarget.setDisplacement(new Float32Array(t.getDisplacement().getArray()));
+  try {
+    const [targetBuf, donorBuf] = await Promise.all([
+      targetFile.arrayBuffer(),
+      donorFile.arrayBuffer()
+    ]);
+    
+    const targetDoc = io.read(Buffer.from(targetBuf));
+    const donorDoc = io.read(Buffer.from(donorBuf));
+    
+    // Find donor with morph targets
+    let donorMesh, donorPrim;
+    for (const mesh of donorDoc.getRoot().listMeshes()) {
+      for (const prim of mesh.listPrimitives()) {
+        if (prim.listTargets().length > 0) { donorMesh = mesh; donorPrim = prim; break; }
       }
-      recipientPrim.addTarget(newTarget);
+      if (donorPrim) break;
     }
-    recipientMesh.setWeights(new Array(donorTargets.length).fill(0));
-  } else {
-    log('❌ DIFFERENT TOPOLOGY - zero-displacement...');
-    let bestMesh = null, bestPrim = null, bestCount = 0;
+    
+    if (!donorPrim) { log('❌ Donor has NO morph targets!', true); return; }
+    
+    const donorCount = donorPrim.getAttribute('POSITION').getCount();
+    const donorTargets = donorPrim.listTargets();
+    log('Donor: ' + donorMesh.getName() + ' - ' + donorTargets.length + ' morph targets');
+    
+    // Find recipient with same topology
+    let recipientMesh, recipientPrim;
     for (const mesh of targetDoc.getRoot().listMeshes()) {
       for (const prim of mesh.listPrimitives()) {
         const pos = prim.getAttribute('POSITION');
-        if (pos && pos.getCount() > bestCount) {
-          bestCount = pos.getCount();
-          bestMesh = mesh;
-          bestPrim = prim;
-        }
+        if (pos && pos.getCount() === donorCount) { recipientMesh = mesh; recipientPrim = prim; break; }
       }
+      if (recipientPrim) break;
     }
-    for (const t of donorTargets) {
-      const newTarget = targetDoc.createPrimitiveTarget();
-      newTarget.setName(t.getName());
-      newTarget.setDisplacement(new Float32Array(bestCount * 3));
-      bestPrim.addTarget(newTarget);
+    
+    if (recipientPrim) {
+      log('✅ SAME VERTEX COUNT! Copying morph targets...');
+      for (const t of donorTargets) {
+        const newT = targetDoc.createPrimitiveTarget();
+        newT.setName(t.getName());
+        if (t.getDisplacement()) {
+          newT.setDisplacement(new Float32Array(t.getDisplacement().getArray()));
+        }
+        recipientPrim.addTarget(newT);
+      }
+      recipientMesh.setWeights(new Array(donorTargets.length).fill(0));
+    } else {
+      log('❌ DIFFERENT topology - adding zero-displacement morphs');
+      let bestMesh, bestPrim, bestCount = 0;
+      for (const mesh of targetDoc.getRoot().listMeshes()) {
+        for (const prim of mesh.listPrimitives()) {
+          const pos = prim.getAttribute('POSITION');
+          if (pos && pos.getCount() > bestCount) {
+            bestCount = pos.getCount();
+            bestMesh = mesh;
+            bestPrim = prim;
+          }
+        }
+      }
+      for (const t of donorTargets) {
+        const newT = targetDoc.createPrimitiveTarget();
+        newT.setName(t.getName());
+        newT.setDisplacement(new Float32Array(bestCount * 3));
+        bestPrim.addTarget(newT);
+      }
+      bestMesh.setWeights(new Array(donorTargets.length).fill(0));
     }
-    bestMesh.setWeights(new Array(donorTargets.length).fill(0));
+    
+    // Save
+    const out = io.write(targetDoc);
+    const blob = new Blob([out], { type: 'model/gltf-binary' });
+    const url = URL.createObjectURL(blob);
+    
+    document.getElementById('dl').href = url;
+    document.getElementById('dl').download = targetFile.name.replace('.glb', '-arkit.glb');
+    document.getElementById('dl').style.display = 'block';
+    log('<br>✅ Done! Click download link above.');
+    
+  } catch (e) {
+    log('Error: ' + e.message, true);
+    console.error(e);
   }
-  
-  const output = io.write(targetDoc);
-  const blob = new Blob([output], { type: 'model/gltf-binary' });
-  const url = URL.createObjectURL(blob);
-  document.getElementById('download').href = url;
-  document.getElementById('download').download = targetFile.name.replace('.glb', '-arkit.glb');
-  document.getElementById('download').style.display = 'inline-block';
-  document.getElementById('download').textContent = '📥 Download processed GLB';
-  log('✅ Done! Click download link above.');
 };
 </script>
 </body>