Update index.html

index.html

@@ -82,115 +82,293 @@
         const gridHelper = new THREE.GridHelper(100, 100, 0xcccccc, 0xcccccc);
         scene.add(gridHelper);
       
-        // --- 3. CREATE THE 3D MANNEQUIN (UPGRADED MESH) ---
+
+        // ============================================================
+        // 3. SKELETON (placed at x = +1.5, right side)
+        // ============================================================
+        const SKELETON_OFFSET_X = 1.5;
+ 
         const maxPoints = 22;
         const boneConnections = [
-            0,1,   0,2,   0,3,    
-            1,4,   2,5,   3,6,    
-            4,7,   5,8,   6,9,    
-            7,10,  8,11,  9,12,   
-            9,13,  9,14,  12,15,  
-            13,16, 14,17,         
-            16,18, 17,19,         
-            18,20, 19,21          
+            0,1,  0,2,  0,3,
+            1,4,  2,5,  3,6,
+            4,7,  5,8,  6,9,
+            7,10, 8,11, 9,12,
+            9,13, 9,14, 12,15,
+            13,16,14,17,
+            16,18,17,19,
+            18,20,19,21
         ];
-
-        // Give the mesh a sleek, modern plastic look
+ 
         const jointMaterial = new THREE.MeshStandardMaterial({ color: 0x333333, roughness: 0.2, metalness: 0.8 });
-        const boneMaterial = new THREE.MeshStandardMaterial({ color: 0xe0e0e0, roughness: 0.5, metalness: 0.1 });
-
+        const boneMaterial  = new THREE.MeshStandardMaterial({ color: 0xe0e0e0, roughness: 0.5, metalness: 0.1 });
+ 
         const jointMeshes = [];
-        // Make joints larger to look like robotic hinges
-        const sphereGeo = new THREE.SphereGeometry(0.08, 32, 32); 
         for (let i = 0; i < maxPoints; i++) {
-            const sphere = new THREE.Mesh(sphereGeo, jointMaterial);
-            sphere.castShadow = true; 
-            scene.add(sphere);
-            jointMeshes.push(sphere);
+            const s = new THREE.Mesh(new THREE.SphereGeometry(0.08, 16, 16), jointMaterial);
+            s.castShadow = true;
+            scene.add(s);
+            jointMeshes.push(s);
         }
-
+ 
         const boneMeshes = [];
-        // UPGRADE: Use CapsuleGeometry instead of thin cylinders for realistic body volume
-        // Arguments: radius, length, cap segments, radial segments
         const capsuleGeo = new THREE.CylinderGeometry(0.06, 0.06, 1, 16);
         capsuleGeo.rotateX(Math.PI / 2);
-
         for (let i = 0; i < boneConnections.length; i += 2) {
-            const boneMesh = new THREE.Mesh(capsuleGeo, boneMaterial);
-            boneMesh.castShadow = true; 
-            scene.add(boneMesh);
-            boneMeshes.push(boneMesh);
+            const b = new THREE.Mesh(capsuleGeo, boneMaterial);
+            b.castShadow = true;
+            scene.add(b);
+            boneMeshes.push(b);
         }
-      
-        // --- 4. ANIMATION & STATE LOGIC ---
-        let motionData = []; 
+ 
+        // ============================================================
+        // 4. BONE REMAPPING — GLB bone order → FloodDiffusion joint index
+        // ============================================================
+        // The SMPL Blender addon exports bones depth-first (left leg, right
+        // leg, spine, arms), but FloodDiffusion uses breadth-first SMPL-22.
+        // Confirmed from console: 25 bones (root + 22 SMPL + 2 hand bones).
+        //
+        // GLB idx : bone name   → FD joint
+        //  0: root              → FD 0  (use pelvis pos)
+        //  1: Pelvis            → FD 0
+        //  2: L_Hip             → FD 1
+        //  3: L_Knee            → FD 4
+        //  4: L_Ankle           → FD 7
+        //  5: L_Foot            → FD 10
+        //  6: R_Hip             → FD 2
+        //  7: R_Knee            → FD 5
+        //  8: R_Ankle           → FD 8
+        //  9: R_Foot            → FD 11
+        // 10: Spine1            → FD 3
+        // 11: Spine2            → FD 6
+        // 12: Spine3            → FD 9
+        // 13: Neck              → FD 12
+        // 14: Head              → FD 15
+        // 15: L_Collar          → FD 13
+        // 16: L_Shoulder        → FD 16
+        // 17: L_Elbow           → FD 18
+        // 18: L_Wrist           → FD 20
+        // 19: L_Hand            → FD 20  (no FD equivalent, reuse wrist)
+        // 20: R_Collar          → FD 14
+        // 21: R_Shoulder        → FD 17
+        // 22: R_Elbow           → FD 19
+        // 23: R_Wrist           → FD 21
+        // 24: R_Hand            → FD 21  (no FD equivalent, reuse wrist)
+        const BONE_TO_FD = [0, 0, 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12, 15, 13, 16, 18, 20, 20, 14, 17, 19, 21, 21];
+ 
+        // GLB bone parent hierarchy (depth-first, 25 bones)
+        const GLB_PARENTS = [-1, 0, 1, 2, 3, 4, 1, 6, 7, 8, 1, 10, 11, 12, 13, 12, 15, 16, 17, 18, 12, 20, 21, 22, 23];
+ 
+        // ============================================================
+        // 5. SMPL RIGGED MESH (placed at x = -1.5, left side)
+        // ============================================================
+        const SMPL_OFFSET_X = -1.5;
+ 
+        let smplSkinnedMesh = null;
+        let smplSkeleton    = null;
+        let restLocalDirs   = [];
+        let smplLoaded      = false;
+ 
+        // This matrix converts FloodDiffusion world-space joint positions
+        // into the SMPL scene's LOCAL space (fixes Blender Z-up vs Y-up mismatch)
+        let smplInvRotMatrix = new THREE.Matrix4();
+ 
+        // Reusable vectors
+        const _v1 = new THREE.Vector3();
+        const _v2 = new THREE.Vector3();
+ 
+        const gltfLoader = new THREE.GLTFLoader();
+ 
+        gltfLoader.load('smpl.glb', (gltf) => {
+ 
+            // ── Find the SkinnedMesh ──────────────────────────────────
+            gltf.scene.traverse((child) => {
+                if (child.isSkinnedMesh && !smplSkinnedMesh) {
+                    smplSkinnedMesh = child;
+                    smplSkeleton    = child.skeleton;
+                    child.material  = new THREE.MeshStandardMaterial({
+                        color: 0x88bbff, roughness: 0.5, metalness: 0.1, skinning: true
+                    });
+                    child.castShadow = true;
+                }
+            });
+ 
+            if (!smplSkinnedMesh) {
+                const el = document.getElementById('smplStatus'); if (el) el.textContent = "SMPL Mesh: ⚠️ Not rigged";
+                gltf.scene.position.set(SMPL_OFFSET_X, 0, 0);
+                scene.add(gltf.scene);
+                return;
+            }
+ 
+            // ── Place scene, then extract its rotation ────────────────
+            // Blender exports with a -90° X rotation to convert Z-up → Y-up.
+            // We need the inverse of that rotation to bring FloodDiffusion's
+            // Y-up joint positions into the bone's local coordinate space.
+            gltf.scene.position.set(SMPL_OFFSET_X, 0, 0);
+            scene.add(gltf.scene);
+            gltf.scene.updateWorldMatrix(true, true);
+ 
+            // Extract only the rotation part (no translation) of the inverse
+            const fullInv = new THREE.Matrix4().copy(gltf.scene.matrixWorld).invert();
+            smplInvRotMatrix.extractRotation(fullInv);
+ 
+            // ── Log bones to verify ordering ─────────────────────────
+            console.log("[SMPL] Bones:", smplSkeleton.bones.map((b, i) => `${i}: ${b.name}`).join(', '));
+ 
+            // ── Capture rest-pose local bone directions ───────────────
+            // IMPORTANT: read AFTER the scene is added so matrixWorld is correct
+            restLocalDirs = smplSkeleton.bones.map(bone => bone.position.clone().normalize());
+ 
+            smplLoaded = true;
+            const el = document.getElementById('smplStatus');
+            if (el) el.textContent = `SMPL Mesh: ✅ Rigged (${smplSkeleton.bones.length} bones)`;
+ 
+        }, undefined, (err) => {
+            console.error("[SMPL] Failed to load smpl.glb:", err);
+            document.getElementById('smplStatus').textContent = "SMPL Mesh: ❌ Load failed";
+        });
+ 
+        // ============================================================
+        // 6. APPLY POSE TO SMPL SKELETON FROM JOINT POSITIONS
+        //    Forward-kinematics top-down pass.
+        //    frameData shape: [22][3] — Y-up world-space joint positions.
+        //
+        //    KEY FIX: Blender exports with a -90° X rotation baked into
+        //    gltf.scene to convert its Z-up world to glTF Y-up.
+        //    All bone local positions live in Blender's Z-up space BEFORE
+        //    that scene rotation. So we must transform FloodDiffusion's
+        //    Y-up positions through smplInvRotMatrix before comparing
+        //    them to rest-pose bone directions.
+        // ============================================================
+        const _worldRots = new Array(25);
+ 
+        // Convert a FloodDiffusion Y-up world joint into SMPL scene local space
+        function toLocal(x, y, z) {
+            return new THREE.Vector3(x, y, z).applyMatrix4(smplInvRotMatrix);
+        }
+ 
+        function applyPoseToSMPL(frameData) {
+            if (!smplLoaded || !smplSkeleton) return;
+ 
+            const bones = smplSkeleton.bones;
+            const n     = bones.length; // 25
+ 
+            // Pre-convert all 22 FD joints to SMPL scene local space
+            const localJoints = frameData.map(j => toLocal(j[0], j[1], j[2]));
+ 
+            // ── ROOT BONE (no FD equivalent, park at pelvis position) ─
+            bones[0].position.copy(localJoints[0]);
+            bones[0].quaternion.identity();
+            _worldRots[0] = new THREE.Quaternion();
+ 
+            // ── CHILD BONES ──────────────────────────────────────────
+            for (let i = 1; i < n; i++) {
+                const p         = GLB_PARENTS[i];
+                const Q_parent  = _worldRots[p];
+                const restLocal = restLocalDirs[i];
+ 
+                if (restLocal.lengthSq() < 1e-6) {
+                    bones[i].quaternion.identity();
+                    _worldRots[i] = Q_parent.clone();
+                    continue;
+                }
+ 
+                // Rest direction of this bone in SMPL-local world space
+                _v1.copy(restLocal).applyQuaternion(Q_parent);
+ 
+                // Target: FD joint of this bone minus FD joint of parent
+                const myFD  = BONE_TO_FD[i];
+                const parFD = BONE_TO_FD[p];
+                _v2.copy(localJoints[myFD]).sub(localJoints[parFD]);
+ 
+                if (_v2.lengthSq() < 1e-6) {
+                    // Zero-length (e.g. hand bone shares FD index with wrist)
+                    bones[i].quaternion.identity();
+                    _worldRots[i] = Q_parent.clone();
+                    continue;
+                }
+                _v2.normalize();
+ 
+                const Q_needed = new THREE.Quaternion().setFromUnitVectors(_v1, _v2);
+                const localRot = Q_parent.clone().invert().multiply(Q_needed);
+                bones[i].quaternion.copy(localRot);
+                _worldRots[i] = Q_needed;
+            }
+ 
+            smplSkeleton.update();
+        }
+ 
+        // ============================================================
+        // 7. ANIMATION LOOP
+        // ============================================================
+        let motionData  = [];
         let currentFrame = 0;
-        let isPlaying = false;
+        let isPlaying    = false;
         let lastFrameTime = 0;
-
+ 
         const pA = new THREE.Vector3();
         const pB = new THREE.Vector3();
         const cameraTarget = new THREE.Vector3(0, 1, 0);
-
+ 
         function animate(timestamp) {
             requestAnimationFrame(animate);
-
+ 
             if (isPlaying && motionData.length > 0) {
-                if (timestamp - lastFrameTime > 33) { 
-                    const frameData = motionData[currentFrame];
-
-                    // Update Spheres
+                if (timestamp - lastFrameTime > 33) {  // ~30 fps
+                    const frameData = motionData[currentFrame]; // shape [22][3]
+ 
+                    // ── Update skeleton (offset to the right) ────────
                     for (let i = 0; i < maxPoints; i++) {
-                        jointMeshes[i].position.set(frameData[i][0], frameData[i][1], frameData[i][2]);
+                        jointMeshes[i].position.set(
+                            frameData[i][0] + SKELETON_OFFSET_X,
+                            frameData[i][1],
+                            frameData[i][2]
+                        );
                     }
-
-                    // Update Cylinders
-                    let boneIndex = 0;
+ 
+                    let boneIdx = 0;
                     for (let i = 0; i < boneConnections.length; i += 2) {
-                        const idxA = boneConnections[i];
-                        const idxB = boneConnections[i+1];
-
-                        pA.set(frameData[idxA][0], frameData[idxA][1], frameData[idxA][2]);
-                        pB.set(frameData[idxB][0], frameData[idxB][1], frameData[idxB][2]);
-
-                        const distance = pA.distanceTo(pB);
-                        const midPoint = pA.clone().lerp(pB, 0.5);
-
-                        const boneMesh = boneMeshes[boneIndex];
-                        boneMesh.position.copy(midPoint); 
-                        boneMesh.scale.set(1, 1, distance); 
-                        boneMesh.lookAt(pB); 
-                        
-                        boneIndex++;
+                        const iA = boneConnections[i], iB = boneConnections[i+1];
+                        pA.set(frameData[iA][0] + SKELETON_OFFSET_X, frameData[iA][1], frameData[iA][2]);
+                        pB.set(frameData[iB][0] + SKELETON_OFFSET_X, frameData[iB][1], frameData[iB][2]);
+ 
+                        const dist = pA.distanceTo(pB);
+                        const mid  = pA.clone().lerp(pB, 0.5);
+ 
+                        boneMeshes[boneIdx].position.copy(mid);
+                        boneMeshes[boneIdx].scale.set(1, 1, dist);
+                        boneMeshes[boneIdx].lookAt(pB);
+                        boneIdx++;
                     }
-                    
-                    // SMOOTH CHASE CAMERA
-                    const rootJoint = frameData[0];
-                    // Lerp the camera target smoothly instead of snapping it
-                    cameraTarget.lerp(new THREE.Vector3(rootJoint[0], rootJoint[1], rootJoint[2]), 0.1);
+ 
+                    // ── Drive the SMPL skinned mesh ───────────────────
+                    // frameData joints are raw (skeleton origin = 0,0,0).
+                    // The gltf.scene is positioned at SMPL_OFFSET_X so
+                    // we pass raw frameData — Three.js handles the offset.
+                    applyPoseToSMPL(frameData);
+ 
+                    // ── Camera follows root joint ─────────────────────
+                    const root = frameData[0];
+                    cameraTarget.lerp(new THREE.Vector3(root[0], root[1], root[2]), 0.1);
                     controls.target.copy(cameraTarget);
-
-                    // Keep camera at a fixed offset so we can see the character move through space
-                    if (currentFrame === 0) {
-                         camera.position.set(rootJoint[0], rootJoint[1] + 1, rootJoint[2] + 4);
-                    }
-
-                    currentFrame = (currentFrame + 1) % motionData.length; 
+ 
+                    currentFrame = (currentFrame + 1) % motionData.length;
                     lastFrameTime = timestamp;
                 }
             }
-            
-            controls.update(); 
+ 
+            controls.update();
             renderer.render(scene, camera);
         }
         animate(0);
-
+ 
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
-
+ 
+        
         // --- 5. WEBSOCKET PIPELINE ---
         const socketStatus = document.getElementById('socket-status');
         const statusText = document.getElementById('status');