fix: add VRM mode auto-detect to comparison page for blendshape support

Most free VRM models use VRM 18-dim presets (aa, ih, ou) instead of
ARKit 52 blendshapes. The guide page had auto-detection but comparison
did not, causing face animation to silently fail. Now detects VRM mode
and uses getVrmFrame() when ARKit expressions are unavailable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jcggl

examples/vanilla-comparison/index.html

@@ -351,6 +351,9 @@ <h1>Anima<span>Sync</span></h1>
 let idleActionV2 = null, speakingActionV2 = null;
 let isSpeaking = false;
 let crossFadeProgress = 0;
+let useVrmMode = false;
+
+const VRM_EXPRESSIONS = ['aa','ih','ou','ee','oh','happy','angry','sad','relaxed','surprised','neutral','blinkLeft','blinkRight','lookUp','lookDown','lookLeft','lookRight','surprised'];
 
 async function loadVRMAFromBytes(bytes) {
   const blob = new Blob([bytes], { type: 'application/octet-stream' });
@@ -381,6 +384,17 @@ <h1>Anima<span>Sync</span></h1>
     }
   } catch (e) { console.warn('VRMA skip:', e.message); }
 
+  // Auto-detect VRM expression mode (first load only)
+  if (!useVrmMode && vrm.expressionManager) {
+    const exprNames = Object.keys(vrm.expressionManager.expressionMap || {});
+    const arkitNames = ['jawOpen','mouthFunnel','mouthPucker','eyeBlinkLeft','eyeBlinkRight'];
+    const hasArkit = arkitNames.filter(n => exprNames.includes(n)).length >= 3;
+    const vrmPresetNames = ['aa','ih','ou','ee','oh','happy','angry','sad','relaxed','surprised'];
+    const hasVrmPreset = vrmPresetNames.filter(n => exprNames.includes(n)).length >= 3;
+    if (!hasArkit && hasVrmPreset) useVrmMode = true;
+    console.log(`[VRM] Mode: ${useVrmMode ? 'VRM 18-dim' : 'ARKit 52-dim'} (arkit=${hasArkit}, vrm=${hasVrmPreset})`);
+  }
+
   return { vrm, mixer, idleAction: idleAct, speakingAction: speakAct };
 }
 
@@ -403,7 +417,8 @@ <h1>Anima<span>Sync</span></h1>
 
 function resetVRM(vrm) {
   if (!vrm?.expressionManager) return;
-  for (const name of ARKIT_52) vrm.expressionManager.setValue(name, 0);
+  const names = useVrmMode ? VRM_EXPRESSIONS : ARKIT_52;
+  for (const name of names) vrm.expressionManager.setValue(name, 0);
 }
 
 // VRM drop handler (drops onto either pane, loads into both)
@@ -522,10 +537,10 @@ <h1>Anima<span>Sync</span></h1>
     document.getElementById('s-v2-wasm').textContent = (e2/1000).toFixed(2)+'s';
     document.getElementById('s-v2-rtf').textContent = (e2/1000/dur2).toFixed(2)+'x';
 
-    // Queue frames
+    // Queue frames (arkit + vrm for each)
     queueV1.length = 0; queueV2.length = 0;
-    for (let i = 0; i < r1.frame_count; i++) queueV1.push(lsV1.getFrame(r1, i));
-    for (let i = 0; i < r2.frame_count; i++) queueV2.push(lsV2.getFrame(r2, i));
+    for (let i = 0; i < r1.frame_count; i++) queueV1.push({ arkit: lsV1.getFrame(r1, i), vrm: lsV1.getVrmFrame?.(r1, i) });
+    for (let i = 0; i < r2.frame_count; i++) queueV2.push({ arkit: lsV2.getFrame(r2, i), vrm: lsV2.getVrmFrame?.(r2, i) });
 
     transitionToSpeaking();
 
@@ -596,8 +611,8 @@ <h1>Anima<span>Sync</span></h1>
       lsV1.processAudioChunk(chunk),
       lsV2.processAudioChunk(chunk),
     ]);
-    if (r1) for (let i = 0; i < r1.frame_count; i++) queueV1.push(lsV1.getFrame(r1, i));
-    if (r2) for (let i = 0; i < r2.frame_count; i++) queueV2.push(lsV2.getFrame(r2, i));
+    if (r1) for (let i = 0; i < r1.frame_count; i++) queueV1.push({ arkit: lsV1.getFrame(r1, i), vrm: lsV1.getVrmFrame?.(r1, i) });
+    if (r2) for (let i = 0; i < r2.frame_count; i++) queueV2.push({ arkit: lsV2.getFrame(r2, i), vrm: lsV2.getVrmFrame?.(r2, i) });
   };
 
   micActive = true;
@@ -608,10 +623,16 @@ <h1>Anima<span>Sync</span></h1>
 // ================================================================
 // Apply blendshapes
 // ================================================================
-function applyToVRM(vrm, frame) {
+function applyToVRM(vrm, frameData) {
   if (!vrm?.expressionManager) return;
-  for (let i = 0; i < Math.min(frame.length, ARKIT_52.length); i++) {
-    vrm.expressionManager.setValue(ARKIT_52[i], frame[i]);
+  if (useVrmMode && frameData.vrm) {
+    for (let i = 0; i < VRM_EXPRESSIONS.length; i++) {
+      vrm.expressionManager.setValue(VRM_EXPRESSIONS[i], frameData.vrm[i] || 0);
+    }
+  } else {
+    for (let i = 0; i < Math.min(frameData.arkit.length, ARKIT_52.length); i++) {
+      vrm.expressionManager.setValue(ARKIT_52[i], frameData.arkit[i]);
+    }
   }
 }
 
@@ -628,8 +649,8 @@ <h1>Anima<span>Sync</span></h1>
   ft += dt;
 
   if (ft >= FI) {
-    if (queueV1.length > 0) { const f = queueV1.shift(); applyToVRM(vrmV1, f); updateBars(barsV1, f); }
-    if (queueV2.length > 0) { const f = queueV2.shift(); applyToVRM(vrmV2, f); updateBars(barsV2, f); }
+    if (queueV1.length > 0) { const f = queueV1.shift(); applyToVRM(vrmV1, f); updateBars(barsV1, f.arkit); }
+    if (queueV2.length > 0) { const f = queueV2.shift(); applyToVRM(vrmV2, f); updateBars(barsV2, f.arkit); }
     ft = 0;
   }