Init

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

README.md

@@ -4,7 +4,7 @@ emoji: 🏃‍♂️
 colorFrom: blue
 colorTo: purple
 sdk: gradio
-sdk_version: 5.0.0
+sdk_version: 5.1.0
 app_file: app.py
 pinned: false
 license: cc-by-nc-4.0

app.py

@@ -1,19 +1,8 @@
-import huggingface_hub
-
-if not hasattr(huggingface_hub, "HfFolder"):
-    class HfFolder:
-        @staticmethod
-        def save_token(token):
-            pass
-        @staticmethod
-        def get_token():
-            return os.environ.get("HF_TOKEN")
-
-    huggingface_hub.HfFolder = HfFolder
-
 import gradio as gr
-import spaces
 import os
+import time
+import requests
+import spaces
 import sys
 import shutil
 import tempfile
@@ -22,525 +11,476 @@ import cv2
 import subprocess
 import numpy as np
 import trimesh
+import open3d as o3d
 from huggingface_hub import hf_hub_download
+import html
+import base64
+import inspect
 
-# --- Patch SAM 2 Installation ---
-# Since we can't use Docker, we run the patch logic at runtime before imports that might need it.
-# However, for a persistent install, we usually need to do this at build time.
-# In Hugging Face Spaces (Gradio SDK), we can use a pre-start script or run it here if it's not too late.
-# But `requirements.txt` is installed BEFORE app.py runs.
-#
-# Strategy:
-# 1. We removed sam-2 from requirements.txt to pass the build.
-# 2. We install it manually here on first run.
+# ==========================================
+# 1. 核心路径与环境配置
+# ==========================================
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+EXAMPLES_DIR = os.path.join(BASE_DIR, "examples")
 
+# ==========================================
+# 2. 静态资源准备
+# ==========================================
+def prepare_local_assets():
+    os.makedirs(STATIC_DIR, exist_ok=True)
+    base_url = "https://registry.npmmirror.com/three/0.160.0/files"
+    assets = {
+        "three.module.js": f"{base_url}/build/three.module.js",
+        "OrbitControls.js": f"{base_url}/examples/jsm/controls/OrbitControls.js",
+        "GLTFLoader.js": f"{base_url}/examples/jsm/loaders/GLTFLoader.js",
+        "BufferGeometryUtils.js": f"{base_url}/examples/jsm/utils/BufferGeometryUtils.js"
+    }
+    
+    for name, url in assets.items():
+        path = os.path.join(STATIC_DIR, name)
+        if not os.path.exists(path):
+            try:
+                r = requests.get(url, verify=False, timeout=10)
+                if r.status_code == 200:
+                    with open(path, "wb") as f:
+                        f.write(r.content)
+            except Exception as e:
+                print(f"Error downloading {name}: {e}")
+
+prepare_local_assets()
+
+# ==========================================
+# 3. 环境 Patch (SAM 2)
+# ==========================================
 def install_sam2():
     try:
         import sam2
-        print("SAM 2 already installed.")
     except ImportError:
         print("Installing SAM 2 with patch...")
-        # Clone, Patch, Install
         subprocess.run(["git", "clone", "https://github.com/facebookresearch/segment-anything-2.git", "_tmp_sam2"], check=True)
-        
         setup_path = "_tmp_sam2/setup.py"
         with open(setup_path, "r") as f:
             content = f.read()
-        
-        # Patch the requirement
         content = content.replace("torch>=2.5.1", "torch>=2.4.1")
-        
         with open(setup_path, "w") as f:
             f.write(content)
-            
-        subprocess.run(["pip", "install", "--no-build-isolation", "-v", "."], cwd="_tmp_sam2", check=True)
-        # Cleanup
+        subprocess.run(["pip", "install", "--no-build-isolation", "--no-deps", "-v", "."], cwd="_tmp_sam2", check=True)
         shutil.rmtree("_tmp_sam2")
-        print("SAM 2 installed successfully.")
 
-# Execute installation
 install_sam2()
-# --------------------------------
 
-# Add current directory to path
-sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+sys.path.append(BASE_DIR)
 
+# 引入核心模型代码
 from unish.utils.inference_utils import (
-    load_model,
-    process_video,
-    run_inference,
+    load_model, process_video, run_inference,
     generate_mixed_geometries_in_memory,
-    save_smpl_meshes_per_frame,
-    save_scene_only_point_clouds,
-    save_human_point_clouds,
-    save_camera_parameters_per_frame
+    save_smpl_meshes_per_frame
 )
 
 MODEL = None
 BODY_MODELS_PATH = "body_models/"
 
+# ==========================================
+# 4. 辅助函数
+# ==========================================
 def download_smpl_assets(body_models_path):
-    """
-    Download SMPL models from private repository if they don't exist.
-    The path logic mimics SMPLWrapper's expectation:
-    1. SMPLWrapper appends 'smpl' if not present in body_models_path.
-    2. smplx library expects another 'smpl' folder inside that (or appends it).
-    Based on existing structure 'body_models/smpl/smpl/SMPL_*.pkl', the target dir is constructed below.
-    """
     if 'smpl' not in body_models_path:
         model_path = os.path.join(body_models_path, 'smpl')
     else:
         model_path = body_models_path
-        
-    # smplx looks for a 'smpl' folder inside the given model_path
     target_dir = os.path.join(model_path, 'smpl')
-    
     os.makedirs(target_dir, exist_ok=True)
-    
     files = ["SMPL_NEUTRAL.pkl", "SMPL_MALE.pkl", "SMPL_FEMALE.pkl"]
     token = os.environ.get("SMPL_DOWNLOAD_TOKEN")
     
-    if not token:
-        # Check if files exist locally (e.g. uploaded in repo)
-        missing = [f for f in files if not os.path.exists(os.path.join(target_dir, f))]
-        if missing:
-            print(f"Warning: SMPL models missing: {missing} and SMPL_DOWNLOAD_TOKEN not set.")
-        return
+    if not token: return
 
     repo_id = "erik0/SMPL_Body_Models"
-    
     for filename in files:
         file_path = os.path.join(target_dir, filename)
         if not os.path.exists(file_path):
             try:
-                print(f"Downloading {filename}...")
-                downloaded_path = hf_hub_download(
-                    repo_id=repo_id,
-                    filename=f"smpl/{filename}",
-                    token=token,
-                    local_dir=target_dir,
-                    local_dir_use_symlinks=False
-                )
-                # Move if structure is slightly off (hf_hub_download maintains path in repo)
-                # The repo structure is likely smpl/SMPL_*.pkl, so local_dir/smpl/SMPL_*.pkl
-                # We want it exactly at target_dir/SMPL_*.pkl
-                # Adjusting based on actual download behavior
-                
-            except Exception as e:
-                print(f"Failed to download {filename}: {e}")
+                hf_hub_download(repo_id=repo_id, filename=f"smpl/{filename}", token=token, local_dir=target_dir, local_dir_use_symlinks=False)
+            except Exception:
+                pass
 
 def pack_sequence_to_glb(base_dir, output_path, start_frame, end_frame, scene_rate=1.0):
-    """
-    Pack a sequence of meshes/pointclouds into a single GLB file for visualization.
-    Uses a specific naming convention 'frame_{i}' for each mesh to allow 
-    'stop motion' style visualization in the frontend.
-    """
-    # Create a scene
     scene = trimesh.Scene()
     
-    # 1. Add Accumulated Scene Point Cloud (Static Background)
-    # The frontend looks for 'scene' in the name to adjust point size.
-    scene_ply = os.path.join(os.path.dirname(output_path), f"{os.path.basename(base_dir)}_scene.ply")
-    if os.path.exists(scene_ply):
-        scene_pc = trimesh.load(scene_ply)
-        # Add to scene
-        scene.add_geometry(scene_pc, node_name='scene_cloud', geom_name='scene_cloud')
-
-    # 2. Iterate over frames and add Human Meshes
-    # The frontend looks for 'frame_{i}' to toggle visibility.
+    scene_cloud_dir = os.path.join(base_dir, "scene_clouds_per_frame")
+    smpl_mesh_dir = os.path.join(base_dir, "smpl_meshes_per_frame")
+    
+    # 60,000 点/帧
+    MAX_POINTS_PER_FRAME = 60000 
+
     for i in range(start_frame, end_frame):
-        human_mesh_path = os.path.join(base_dir, f"smpl_{i:06d}.ply")
-        if os.path.exists(human_mesh_path):
-            human_mesh = trimesh.load(human_mesh_path)
+        candidates = [
+            os.path.join(smpl_mesh_dir, f"combined_smpl_mesh_frame_{i:04d}.ply"),
+            os.path.join(smpl_mesh_dir, f"smpl_mesh_frame_{i:04d}.ply")
+        ]
+        target_human_path = None
+        for p in candidates:
+            if os.path.exists(p):
+                target_human_path = p
+                break
             
-            # Color it if needed (default logic seemed to want colors)
-            # But usually ply has colors. If not, maybe set a default.
-            # user previous logic: human_mesh.visual.vertex_colors = [200, 100, 100, 255]
-            
-            # Naming is CRITICAL for the frontend logic
-            node_name = f"frame_{i}"
-            scene.add_geometry(human_mesh, node_name=node_name, geom_name=node_name)
+        if target_human_path:
+            try:
+                human_mesh = trimesh.load(target_human_path)
+                node_name = f"frame_{i}_human"
+                scene.add_geometry(human_mesh, node_name=node_name, geom_name=node_name)
+            except Exception:
+                pass
+
+        scene_pcd_path = os.path.join(scene_cloud_dir, f"scene_frame_{i:04d}.ply")
+        if os.path.exists(scene_pcd_path):
+            try:
+                scene_pc = trimesh.load(scene_pcd_path)
+                if hasattr(scene_pc, 'vertices') and len(scene_pc.vertices) > 0:
+                    num_points = len(scene_pc.vertices)
+                    if num_points > MAX_POINTS_PER_FRAME:
+                        choice = np.random.choice(num_points, MAX_POINTS_PER_FRAME, replace=False)
+                        scene_pc.vertices = scene_pc.vertices[choice]
+                        if hasattr(scene_pc, 'colors') and len(scene_pc.colors) > 0:
+                            scene_pc.colors = scene_pc.colors[choice]
+                    node_name = f"frame_{i}_scene"
+                    scene.add_geometry(scene_pc, node_name=node_name, geom_name=node_name)
+            except Exception:
+                pass
+
+    if len(scene.geometry) == 0:
+        dummy = trimesh.creation.box(extents=[0.01, 0.01, 0.01])
+        scene.add_geometry(dummy, node_name='dummy')
 
     scene.export(output_path)
+    if not os.path.exists(output_path):
+         raise FileNotFoundError(f"Export failed: {output_path}")
 
+def get_video_duration(video_path):
+    if not video_path: return 10.0
+    try:
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened(): return 10.0
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        frame_count = cap.get(cv2.CAP_PROP_FRAME_COUNT)
+        duration = frame_count / fps if fps > 0 else 10.0
+        cap.release()
+        return duration
+    except:
+        return 10.0
 
-def get_player_html(glb_path):
-    """
-    Generate HTML to display the GLB file using Three.js with 'Stop Motion' logic.
-    Extracts logic from index.html provided by user.
+# ==========================================
+# 5. 前端逻辑: Player & Loading HTML
+# ==========================================
+
+def get_loading_html(message="Processing..."):
+    return f"""
+    <div style="height: 600px; width: 100%; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: sans-serif; color: #4b5563;">
+        <div class="loader-ring"></div>
+        <p style="margin-top: 20px; font-weight: 500; font-size: 1.1em; animation: pulse 2s infinite;">{message}</p>
+        <style>
+            .loader-ring {{ display: inline-block; width: 64px; height: 64px; }}
+            .loader-ring:after {{ content: " "; display: block; width: 46px; height: 46px; margin: 8px; border-radius: 50%; border: 5px solid #4f46e5; border-color: #4f46e5 transparent #4f46e5 transparent; animation: ring-spin 1.2s linear infinite; }}
+            @keyframes ring-spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}
+            @keyframes pulse {{ 0% {{ opacity: 0.6; }} 50% {{ opacity: 1; }} 100% {{ opacity: 0.6; }} }}
+        </style>
+    </div>
     """
-    import base64
-    with open(glb_path, "rb") as f:
-        data = f.read()
-        b64_data = base64.b64encode(data).decode('utf-8')
-        
-    html = f"""
+
+def get_player_html(abs_glb_path):
+    def read_and_patch(filename):
+        path = os.path.join(STATIC_DIR, filename)
+        if not os.path.exists(path): return ""
+        with open(path, "r", encoding="utf-8") as f: content = f.read()
+        content = content.replace('../utils/BufferGeometryUtils.js', 'BufferGeometryUtils')
+        content = content.replace('./BufferGeometryUtils.js', 'BufferGeometryUtils')
+        content = content.replace('../../build/three.module.js', 'three')
+        content = content.replace('../build/three.module.js', 'three')
+        return content
+
+    js_three = read_and_patch("three.module.js")
+    js_orbit = read_and_patch("OrbitControls.js")
+    js_loader = read_and_patch("GLTFLoader.js")
+    js_buffer = read_and_patch("BufferGeometryUtils.js")
+
+    def to_data_url(content, mime="text/javascript"):
+        b64 = base64.b64encode(content.encode('utf-8')).decode('utf-8')
+        return f"data:{mime};base64,{b64}"
+
+    blob_three = to_data_url(js_three)
+    blob_orbit = to_data_url(js_orbit)
+    blob_loader = to_data_url(js_loader)
+    blob_buffer = to_data_url(js_buffer)
+    
+    if not os.path.exists(abs_glb_path): return '<div style="color:red; padding:20px;">Error: Output file not found.</div>'
+    with open(abs_glb_path, "rb") as f: glb_data = f.read()
+    model_data_url = f"data:model/gltf-binary;base64,{base64.b64encode(glb_data).decode('utf-8')}"
+
+    raw_html = f"""
     <!DOCTYPE html>
     <html>
     <head>
       <meta charset="utf-8">
       <style>
-        #canvas-container {{
-          width: 100%;
-          height: 600px; /* Increased height */
-          background: #f5f5f5;
-          border-radius: 8px;
-          position: relative;
-          overflow: hidden;
-          box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
-        }}
-
-        #loading-overlay {{
-          position: absolute; top:0; left:0; width:100%; height:100%; 
-          background: rgba(0,0,0,0.7); color: white; 
-          display: flex; flex-direction: column; justify-content: center; align-items: center; 
-          z-index: 10;
-        }}
-
-        .player-controls {{
-          margin-top: 10px; 
-          padding: 10px; 
-          background: #fff; 
-          border-radius: 8px; 
-          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-          display: flex;
-          align-items: center;
-          gap: 15px;
-        }}
-
-        .button {{
-          padding: 8px 16px;
-          border: none;
-          border-radius: 4px;
-          background: #363636;
-          color: white;
-          cursor: pointer;
-          font-weight: bold;
-        }}
-        .button:hover {{ background: #4a4a4a; }}
-
-        input[type=range] {{
-          flex-grow: 1;
-          cursor: pointer;
-        }}
-        
-        .tag {{
-          background: #f5f5f5;
-          padding: 5px 10px;
-          border-radius: 4px;
-          font-family: monospace;
-          white-space: nowrap;
-        }}
+        body {{ margin: 0; background: transparent; height: 100vh; overflow: hidden; font-family: sans-serif; }}
+        #container {{ width: 100%; height: 100%; }}
+        .controls {{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; padding: 12px 20px; background: rgba(255, 255, 255, 0.9); border-radius: 30px; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.15); backdrop-filter: blur(5px); align-items: center; }}
+        button {{ padding: 8px 20px; cursor: pointer; background: #4f46e5; color: white; border: none; border-radius: 20px; font-weight: 600; font-size: 14px; transition: background 0.2s; }}
+        button:hover {{ background: #4338ca; }}
+        input[type=range] {{ width: 200px; cursor: pointer; accent-color: #4f46e5; }}
       </style>
-      
-      <!-- Import Map for Three.js -->
       <script type="importmap">
-      {{
-        "imports": {{
-          "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
-          "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
-        }}
-      }}
+      {{ "imports": {{ "three": "{blob_three}", "three/addons/controls/OrbitControls.js": "{blob_orbit}", "three/addons/loaders/GLTFLoader.js": "{blob_loader}", "BufferGeometryUtils": "{blob_buffer}" }} }}
       </script>
     </head>
     <body>
-      <div id="player-wrapper">
-        <div id="canvas-container">
-          <div id="loading-overlay">
-            <p>Loading 3D Sequence...</p>
-          </div>
-        </div>
-
-        <div class="player-controls">
-          <button id="play-btn" class="button">Play</button>
-          <input id="frame-slider" type="range" min="0" max="0" value="0" step="1">
-          <span id="frame-count" class="tag">Frame: 0</span>
-        </div>
-      </div>
-
+      <div id="container"></div>
+      <div class="controls"><button id="btn-play">Play</button><input type="range" id="slider" min="0" max="0" value="0" step="1"></div>
       <script type="module">
         import * as THREE from 'three';
         import {{ OrbitControls }} from 'three/addons/controls/OrbitControls.js';
         import {{ GLTFLoader }} from 'three/addons/loaders/GLTFLoader.js';
-      
-        // Config
-        const MODEL_DATA = "data:model/gltf-binary;base64,{b64_data}";
-        const FPS = 10; 
-      
-        let scene, camera, renderer, controls;
-        let frames = []; 
-        let currentFrame = 0;
-        let isPlaying = false;
-        let intervalId = null;
-      
-        const container = document.getElementById('canvas-container');
-        const slider = document.getElementById('frame-slider');
-        const playBtn = document.getElementById('play-btn');
-        const frameLabel = document.getElementById('frame-count');
-        const loadingOverlay = document.getElementById('loading-overlay');
-      
-        init();
-      
-        function init() {{
-          scene = new THREE.Scene();
-          scene.background = new THREE.Color(0xf5f5f5);
-      
-          // Setup Camera
-          camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
-          // Initial position - will be roughly looking at origin
-          camera.position.set(0, 0, 5); 
-      
-          renderer = new THREE.WebGLRenderer({{ antialias: true, alpha: true }});
-          renderer.setSize(container.clientWidth, container.clientHeight);
-          renderer.setPixelRatio(window.devicePixelRatio);
-          renderer.useLegacyLights = false; 
-      
-          container.appendChild(renderer.domElement);
-      
-          // Lights
-          const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3.0);
-          scene.add(hemiLight);
-          
-          const dirLight = new THREE.DirectionalLight(0xffffff, 3.0);
-          dirLight.position.set(5, 10, 7);
-          scene.add(dirLight);
-      
-          const frontLight = new THREE.DirectionalLight(0xffffff, 2.0);
-          frontLight.position.set(0, 0, 5); 
-          scene.add(frontLight);
-      
-          // Controls
-          controls = new OrbitControls(camera, renderer.domElement);
-          controls.enableDamping = true;
-          controls.dampingFactor = 0.05;
-          controls.target.set(0, 0, 0);
-      
-          // Load GLB
-          const loader = new GLTFLoader();
-          
-          loader.load(MODEL_DATA, function (gltf) {{
-            const root = gltf.scene;
-            scene.add(root);
-      
-            frames = [];
-            
-            // Traverse to find frames and fix materials
-            root.traverse((node) => {{
-              
-              // Material adjustments for visual appeal
-              if (node.isMesh) {{
-                  node.geometry.computeVertexNormals();
-                  // Reset colors if needed to avoid black meshes
-                  if (node.geometry.attributes.color) {{
-                      // Optionally keep vertex colors if they are good
-                      // node.geometry.deleteAttribute('color'); 
-                  }}
-                  
-                  // Simple material override for consistency
-                  node.material = new THREE.MeshStandardMaterial({{
-                      color: 0xff9966,
-                      roughness: 0.4,
-                      metalness: 0.0,
-                      side: THREE.DoubleSide
-                  }});
-              }}
-      
-              // Point cloud adjustments
-              if (node.isPoints) {{
-                  if (node.name && node.name.toLowerCase().includes('scene')) {{
-                      node.material.size = 0.05; 
-                      node.material.sizeAttenuation = true; 
-                  }}
-                  if (node.name && node.name.toLowerCase().includes('human')) {{
-                      node.material.size = 0.005; 
-                  }}
-              }}
-      
-              // Collect Frames based on naming convention
-              if (node.name && node.name.startsWith('frame_')) {{
-                  const parts = node.name.split('_');
-                  // Expect frame_0, frame_1, etc.
-                  if (parts.length >= 2 && !isNaN(parseInt(parts[1]))) {{
-                      const idx = parseInt(parts[1]);
-                      frames[idx] = node;
-                      node.visible = false;
-                  }}
-              }}
+        const container = document.getElementById('container');
+        const scene = new THREE.Scene(); scene.background = new THREE.Color(0xf9fafb);
+        
+        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); 
+        camera.position.set(0, 1.5, 4); 
+        
+        const renderer = new THREE.WebGLRenderer({{ antialias: true, alpha: true }}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement);
+        const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true;
+        scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.2); dirLight.position.set(5, 10, 7); scene.add(dirLight);
+        let frames = []; let currentFrame = 0; let isPlaying = false; let timer = null;
+        new GLTFLoader().load("{model_data_url}", (gltf) => {{
+            gltf.scene.rotation.x = Math.PI; scene.add(gltf.scene);
+            gltf.scene.traverse(n => {{
+                if(n.name && n.name.startsWith('frame_')) {{
+                    let parts = n.name.split('_'); let idx = parseInt(parts[1]);
+                    if(!isNaN(idx)) {{ if(!frames[idx]) frames[idx] = []; frames[idx].push(n); n.visible = false; }}
+                }}
+                if(n.isMesh) {{ n.geometry.computeVertexNormals(); n.material = new THREE.MeshStandardMaterial({{ color: 0x6366f1, roughness: 0.4, metalness: 0.1 }}); }}
+                if(n.isPoints) {{ 
+                    let size = n.name.includes('scene') ? 0.05 : 0.005; 
+                    n.material.size = size; 
+                }}
             }});
-            
-            // Filter out undefined slots in case of non-sequential or gaps (though logic should be sequential)
-            // Note: If using frames[idx], gaps might leave undefined. 
-            // Better to compact if we just want a sequence, but index matching is good.
-            // Let's rely on filter to clean up.
-            frames = frames.filter(n => n !== undefined);
-            
-            console.log(`Loaded ${{frames.length}} frames.`);
-      
-            if (frames.length > 0) {{
-              slider.max = frames.length - 1;
-              loadingOverlay.style.display = 'none';
-              showFrame(0);
-              
-              // Auto-center camera on the first frame if possible
-              // const box = new THREE.Box3().setFromObject(frames[0]);
-              // const center = box.getCenter(new THREE.Vector3());
-              // controls.target.copy(center);
-              // camera.position.add(center); // Adjust relative to new center
-              
-            }} else {{
-              loadingOverlay.innerHTML = "<p>No frames found (looking for nodes named 'frame_N').</p>";
-            }}
-      
-          }}, undefined, function (error) {{
-            console.error(error);
-            loadingOverlay.innerHTML = "<p>Error loading model.</p>";
-          }});
-      
-          window.addEventListener('resize', onWindowResize);
-          animate();
-        }}
-      
+            if(frames.length > 0) {{ document.getElementById('slider').max = frames.length - 1; showFrame(0); animate(); }}
+        }}, undefined, (e) => console.error(e));
         function showFrame(idx) {{
-          if (!frames[idx]) return;
-          if (frames[currentFrame]) frames[currentFrame].visible = false;
-          frames[idx].visible = true;
-          currentFrame = idx;
-          slider.value = idx;
-          frameLabel.innerText = `Frame: ${{idx}}`;
-        }}
-      
-        function togglePlay() {{
-          if (frames.length === 0) return;
-          isPlaying = !isPlaying;
-          
-          playBtn.innerText = isPlaying ? "Pause" : "Play";
-          
-          if (isPlaying) {{
-            intervalId = setInterval(() => {{
-              let next = currentFrame + 1;
-              if (next >= frames.length) next = 0;
-              showFrame(next);
-            }}, 1000 / FPS);
-          }} else {{
-            clearInterval(intervalId);
-          }}
-        }}
-      
-        slider.addEventListener('input', (e) => {{
-          if (isPlaying) togglePlay();
-          showFrame(parseInt(e.target.value));
-        }});
-        
-        playBtn.addEventListener('click', togglePlay);
-      
-        function onWindowResize() {{
-          camera.aspect = container.clientWidth / container.clientHeight;
-          camera.updateProjectionMatrix();
-          renderer.setSize(container.clientWidth, container.clientHeight);
-        }}
-      
-        function animate() {{
-          requestAnimationFrame(animate);
-          controls.update();
-          renderer.render(scene, camera);
+            if(frames[currentFrame]) frames[currentFrame].forEach(o => o.visible = false);
+            if(frames[idx]) frames[idx].forEach(o => o.visible = true);
+            currentFrame = idx;
+            const slider = document.getElementById('slider');
+            if(slider) slider.value = idx;
         }}
+        function animate() {{ requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }}
+        document.getElementById('btn-play').onclick = () => {{
+            isPlaying = !isPlaying; const btn = document.getElementById('btn-play');
+            if(isPlaying) {{
+                btn.innerText = "Pause"; btn.style.background = "#ef4444";
+                timer = setInterval(() => {{ if(frames.length > 0) {{ let next = (currentFrame + 1) % frames.length; showFrame(next); }} }}, 166);
+            }} else {{ clearInterval(timer); btn.innerText = "Play"; btn.style.background = "#4f46e5"; }}
+        }};
+        document.getElementById('slider').oninput = (e) => {{ if(isPlaying) document.getElementById('btn-play').click(); showFrame(parseInt(e.target.value)); }};
+        window.onresize = () => {{ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }};
       </script>
     </body>
     </html>
     """
-    return html
+    return f'<iframe srcdoc="{html.escape(raw_html)}" width="100%" height="600px" style="border:none; border-radius: 12px;"></iframe>'
 
-@spaces.GPU(duration=120)
-def predict(video_path, duration):
-    # Create a temporary directory for outputs
-    output_dir = tempfile.mkdtemp()
+# ==========================================
+# 6. 推理逻辑封装
+# ==========================================
+if os.environ.get("SPACE_ID"):
+    from spaces import GPU
+    gpu_decorator = GPU(duration=120)
+else:
+    def gpu_decorator(func):
+        def wrapper(*args, **kwargs):
+            if inspect.isgeneratorfunction(func):
+                yield from func(*args, **kwargs)
+            else:
+                return func(*args, **kwargs)
+        return wrapper
+
+@gpu_decorator
+def predict(video_path, start_time, end_time):
+    # 1. 时长限制检测
+    duration_input = end_time - start_time
+    if duration_input > 10.0:
+        raise gr.Error(f"Video limit exceeded ({duration_input:.1f}s). Please keep it under 10 seconds.")
+
+    if start_time >= end_time:
+        raise gr.Error("Error: End time must be greater than Start time.")
+    
+    # 2. 正常流程
+    yield get_loading_html("Processing...")
     
-    # 1. Preprocess Video (Trim)
-    # Trim to specified duration
+    output_dir = tempfile.mkdtemp()
     trimmed_video_path = os.path.join(output_dir, "input_trim.mp4")
+    duration = end_time - start_time
     
-    # Use ffmpeg to trim
-    cmd = [
-        "ffmpeg", "-y",
-        "-i", video_path,
-        "-t", str(duration),
-        "-c:v", "libx264", "-c:a", "aac",
-        trimmed_video_path
-    ]
+    cmd = ["ffmpeg", "-y", "-ss", str(start_time), "-i", video_path, "-t", str(duration), "-c:v", "libx264", "-c:a", "aac", trimmed_video_path]
     subprocess.run(cmd, check=True)
     
-    # 2. Load Model
     global MODEL
-    if MODEL is None:
-        MODEL = load_model()
-    
+    if MODEL is None: MODEL = load_model()
     device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
     MODEL.to(device)
     MODEL.eval()
     
-    # 3. Process Video
-    fps = 6.0
-    target_size = 518
-    human_idx = 0
-    bbox_scale = 1.0
-    
-    # Check and download SMPL assets
     download_smpl_assets(BODY_MODELS_PATH)
     
-    data_dict = process_video(
-        trimmed_video_path, fps, human_idx, target_size,
-        bbox_scale=bbox_scale
-    )
-    
-    # 4. Run Inference
-    results = run_inference(MODEL, data_dict, device, chunk_size=30)
+    data_dict = process_video(trimmed_video_path, 6.0, 0, 518, bbox_scale=1.0)
+    results = run_inference(MODEL, data_dict, device, chunk_size=300)
     
-    # 5. Generate Geometries & Save
     seq_name = results['seq_name']
-    
-    viz_scene_point_clouds, viz_smpl_meshes, viz_scene_only_point_clouds, smpl_points_for_camera = generate_mixed_geometries_in_memory(
-        results, BODY_MODELS_PATH, fps=fps, conf_thres=0.1
+    viz_scene, viz_smpl, viz_scene_only, _ = generate_mixed_geometries_in_memory(
+        results, BODY_MODELS_PATH, fps=6.0, conf_thres=0.1
     )
     
-    # Save to disk
     save_smpl_meshes_per_frame(results, output_dir, BODY_MODELS_PATH)
-    save_scene_only_point_clouds(viz_scene_only_point_clouds, output_dir, seq_name)
-    save_human_point_clouds(viz_scene_point_clouds, viz_scene_only_point_clouds, output_dir, seq_name, results)
     
-    # 6. Pack to GLB
     base_dir = os.path.join(output_dir, seq_name)
-    output_glb_path = os.path.join(output_dir, "output.glb")
+    scene_cloud_dir = os.path.join(base_dir, "scene_clouds_per_frame")
+    os.makedirs(scene_cloud_dir, exist_ok=True)
+    for i, pcd in enumerate(viz_scene_only):
+        if len(pcd.points) > 0:
+            o3d.io.write_point_cloud(os.path.join(scene_cloud_dir, f"scene_frame_{i:04d}.ply"), pcd)
     
-    num_frames = len(viz_scene_point_clouds)
-    
-    pack_sequence_to_glb(
-        base_dir, 
-        output_glb_path, 
-        start_frame=0, 
-        end_frame=num_frames, 
-        scene_rate=0.5
-    )
-    
-    return get_player_html(output_glb_path)
+    tmp_glb_path = os.path.join(output_dir, "output.glb")
+    pack_sequence_to_glb(base_dir, tmp_glb_path, 0, len(viz_scene), 0.5)
+        
+    yield get_player_html(tmp_glb_path)
+
+# ==========================================
+# 7. UI 构建
+# ==========================================
+
+examples_list = []
+if os.path.exists(EXAMPLES_DIR):
+    examples_list = [[os.path.join("examples", f)] for f in os.listdir(EXAMPLES_DIR) if f.endswith(".mp4")]
 
-with gr.Blocks() as demo:
-    gr.Markdown("# UniSH Demo")
-    gr.Markdown("Upload a video to reconstruct scene and human in 3D.")
+js_scrub = """(val) => {
+    var video = document.querySelector('#input-video video');
+    if (video) {
+        video.currentTime = val;
+    }
+    return val;
+}"""
+
+js_reset_video = """() => {
+    setTimeout(() => {
+        var video = document.querySelector('#input-video video');
+        if (video) {
+            video.currentTime = 0;
+            video.pause();
+        }
+    }, 200); 
+}"""
+
+custom_css = """
+footer {visibility: hidden}
+h1.header-title { text-align: center; font-family: 'Segoe UI', sans-serif; font-weight: 700; color: #1f2937; margin-bottom: 2rem; }
+.alert-box { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.5; }
+.info-box { background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
+.warning-box { background-color: #fefce8; border-left: 4px solid #eab308; color: #854d0e; }
+.tip-box { background-color: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d; }
+.viewer-container { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #f9fafb; }
+#run-btn { background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); border: none; color: white; font-weight: bold; transition: all 0.2s; }
+#run-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4); }
+
+#input-video { margin-bottom: 15px !important; }
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", radius_size="md"), css=custom_css, title="UniSH Demo") as demo:
     
-    with gr.Row():
-        with gr.Column():
-            input_video = gr.Video(label="Input Video")
-            duration_slider = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="Duration to Process (seconds)")
-            submit_btn = gr.Button("Run Inference", variant="primary")
+    with gr.Column(elem_classes=["header-container"]):
+        gr.Markdown("# UniSH: Unifying Scene and Human Reconstruction in a Feed-Forward Pass", elem_classes=["header-title"])
+
+    with gr.Row(equal_height=False):
         
-        with gr.Column():
-            output_html = gr.HTML(label="3D Result", min_height=600)
+        with gr.Column(scale=3, variant="panel"):
+            gr.Markdown("### 🛠️ Configuration")
+            
+            with gr.Group():
+                input_video = gr.Video(label="Upload Video", format="mp4", height=260, interactive=True, elem_id="input-video")
+                
+                with gr.Row():
+                    start_time = gr.Slider(minimum=0, maximum=10, value=0, step=0.01, label="Start Time (s)")
+                    end_time = gr.Slider(minimum=0, maximum=10, value=3, step=0.01, label="End Time (s)")
+            
+            # --- Grid Layout 还原完整文案 ---
+            gr.HTML("""
+            <div class="alert-box tip-box">
+                <strong>💡 Use Tips:</strong>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: 0.85em; line-height: 1.4;">
+                    <div>1. Contain only a <strong>single person</strong>.</div>
+                    <div>2. <strong>No occlusion</strong> (self-occlusion is fine).</div>
+                    <div>3. Keep the <strong>full body</strong> mostly visible.</div>
+                    <div>4. Subject should <strong>not be too small</strong>.</div>
+                </div>
+            </div>
+            """)
+            
+            submit_btn = gr.Button("🚀 Start Reconstruction", variant="primary", elem_id="run-btn", size="lg")
+            
+            if examples_list:
+                gr.Markdown("### 🎥 Examples")
+                gr.Examples(
+                    examples=examples_list,
+                    inputs=[input_video], 
+                    label="Click to try:",
+                    cache_examples=False
+                )
+
+        with gr.Column(scale=7):
+            gr.Markdown("### ▶️ Interactive Results")
+            with gr.Group(elem_classes=["viewer-container"]):
+                output_html = gr.HTML(
+                    label="3D Viewer", 
+                    min_height=600,
+                    value='<div style="height:600px; display:flex; align-items:center; justify-content:center; color:#aaa; font-family:sans-serif; background:#f9fafb;">Upload a video and click Start to view result.</div>'
+                )
             
+            gr.HTML("""
+            <div class="alert-box warning-box">
+                <strong>⚡ Performance Note:</strong><br>
+                Inference (feed-forward) is very fast, but generating visualization assets takes up most of the processing time.
+            </div>
+            <div class="alert-box info-box">
+                <strong>👁️ Visual Quality:</strong><br>
+                The displayed results are downsampled for better web rendering performance.
+            </div>
+            """)
+
+    def update_slider_range(video_path):
+        if not video_path:
+            return gr.update(value=0), gr.update(value=0)
+        dur = get_video_duration(video_path)
+        dur = round(dur, 2)
+        return gr.update(maximum=dur, value=0), gr.update(maximum=dur, value=dur)
+
+    input_video.change(fn=update_slider_range, inputs=[input_video], outputs=[start_time, end_time])
+    input_video.upload(fn=update_slider_range, inputs=[input_video], outputs=[start_time, end_time])
+    
+    input_video.change(fn=None, inputs=[], outputs=[], js=js_reset_video)
+    input_video.upload(fn=None, inputs=[], outputs=[], js=js_reset_video)
+
+    start_time.change(fn=None, inputs=[start_time], outputs=None, js=js_scrub)
+    end_time.change(fn=None, inputs=[end_time], outputs=None, js=js_scrub)
+
     submit_btn.click(
-        predict, 
-        inputs=[input_video, duration_slider], 
+        fn=predict, 
+        inputs=[input_video, start_time, end_time], 
         outputs=[output_html]
     )
 
 demo.queue()
-demo.launch()
+demo.launch(
+    server_name="0.0.0.0", 
+    server_port=7860, 
+    allowed_paths=[BASE_DIR, "/tmp", EXAMPLES_DIR]
+)

examples/example1.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd43192864836407058a17231def0945f428e24b4d8991e388abaa65513da9bd
+size 15514979

examples/example2.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:785dbf176d123c971509d3d438d8f66ec3f4715c6277c81c6712a5cd91a28a7e
+size 6870101

examples/example3.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f1f781527cc026d6da5a6194516ee7ef11bb14976669b97f5eb660c7bedeec8
+size 22927428

examples/example4.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:339a923007e20e2e6a6f0893fdd1f9a75b98f614f1c556c4f4aaae7939c81661
+size 13952778

index.html

@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="UniSH: Unifying Scene and Human Reconstruction in a Feed-Forward Pass">
+  <meta name="keywords" content="UniSH, Scene Reconstruction, Human Mesh Recovery, NeRF">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>UniSH: Unifying Scene and Human Reconstruction in a Feed-Forward Pass</title>
+
+  <link rel="stylesheet" href="./static/css/bulma.min.css">
+  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
+  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
+  <link rel="stylesheet" href="./static/css/index.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
+
+  <style>
+    /* 1. 轮播图容器样式 */
+    .carousel .item {
+      position: relative;
+      border-radius: 12px;
+      overflow: hidden;
+      margin: 10px 5px;
+      border: 1px solid rgba(0,0,0,0.08);
+      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+      background: #000;
+      transform: translateZ(0);
+    }
+    .carousel .item video {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    
+    /* 2. 悬浮计数胶囊样式 */
+    .video-overlay-label {
+      position: absolute;
+      bottom: 15px;
+      left: 15px;
+      background-color: rgba(0, 0, 0, 0.6);
+      color: white;
+      padding: 5px 12px;
+      border-radius: 20px;
+      font-size: 0.8rem;
+      font-family: 'Consolas', 'Courier New', monospace;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      pointer-events: none;
+      backdrop-filter: blur(5px);
+      border: 1px solid rgba(255,255,255,0.1);
+      z-index: 10;
+    }
+
+    /* 3. Player 样式 */
+    #canvas-container {
+      width: 100%;
+      height: 500px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+      box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
+    }
+
+    /* 4. Teaser 媒体容器样式 */
+    .teaser-video-wrapper {
+      position: relative;
+      border-radius: 8px; 
+      overflow: hidden; 
+      border: 1px solid rgba(0,0,0,0.08); 
+      box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+      background: #000;
+      width: 100%;
+      margin-bottom: 20px; /* 视频和图片之间的间距 */
+    }
+    
+    .teaser-video-wrapper video {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    /* 作者名字样式 */
+    .author-block {
+      margin-right: 10px;
+      white-space: nowrap; 
+    }
+    
+    /* 自定义 Slider */
+    input[type=range].custom-slider {
+      -webkit-appearance: none;
+      width: 100%;
+      background: transparent;
+    }
+    input[type=range].custom-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background: #363636;
+      cursor: pointer;
+      margin-top: -6px; 
+    }
+    input[type=range].custom-slider::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 4px;
+      cursor: pointer;
+      background: #dbdbdb;
+      border-radius: 2px;
+    }
+  </style>
+
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
+      "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
+    }
+  }
+  </script>
+</head>
+<body>
+
+<section class="hero">
+  <div class="hero-body" style="padding-bottom: 0;">
+    <div class="container is-max-desktop">
+      <div class="columns is-centered">
+        <div class="column has-text-centered">
+          <h1 class="title is-1 publication-title">UniSH: Unifying Scene and Human Reconstruction in a Feed-Forward Pass</h1>
+          
+          <div class="is-size-5 publication-authors">
+            <span class="author-block">Mengfei Li<sup>1</sup>,</span>
+            <span class="author-block">Peng Li<sup>1</sup>,</span>
+            <span class="author-block">Zheng Zhang<sup>2</sup>,</span>
+            <span class="author-block">Jiahao Lu<sup>1</sup>,</span>
+            <span class="author-block">Chengfeng Zhao<sup>1</sup>,</span>
+            <span class="author-block">Wei Xue<sup>1</sup>,</span>
+            <br>
+            <span class="author-block">Qifeng Liu<sup>1</sup>,</span>
+            <span class="author-block">Sida Peng<sup>3</sup>,</span>
+            <span class="author-block">Wenxiao Zhang<sup>1</sup>,</span>
+            <span class="author-block">Wenhan Luo<sup>1</sup>,</span>
+            <span class="author-block">Yuan Liu<sup>1&#8224;</sup>,</span>
+            <span class="author-block">Yike Guo<sup>1&#8224;</sup></span>
+          </div>
+
+          <div class="is-size-5 publication-authors">
+            <span class="author-block"><sup>1</sup>The Hong Kong University of Science and Technology</span>
+            <br>
+            <span class="author-block"><sup>2</sup>Beijing University of Posts and Telecommunications,</span>
+            <span class="author-block"><sup>3</sup>Zhejiang University</span>
+          </div>
+
+          <div class="is-size-6 publication-authors">
+            <span class="author-block"><sup>&#8224;</sup>Corresponding authors.</span>
+          </div>
+
+          <div class="column has-text-centered">
+            <div class="publication-links">
+              <span class="link-block">
+                <a href="https://arxiv.org/abs/2601.01222" class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon"><i class="fas fa-file-pdf"></i></span>
+                  <span>arXiv</span>
+                </a>
+              </span>
+              
+              <span class="link-block">
+                <a href="https://github.com/murphylmf/UniSH" class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon"><i class="fab fa-github"></i></span>
+                  <span>Code</span>
+                  </a>
+              </span>
+
+              <span class="link-block">
+                <a href="#BibTeX" class="external-link button is-normal is-rounded is-dark">
+                  <span class="icon"><i class="fas fa-book"></i></span>
+                  <span>BibTeX</span>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section" style="padding-top: 20px; padding-bottom: 0;">
+  <div class="container is-max-desktop">
+    <div class="hero-body has-text-centered" style="padding-top: 0;">
+      
+      <div class="teaser-video-wrapper">
+        <video id="teaser-video" autoplay muted loop playsinline controls style="width: 100%; height: auto;">
+          <source src="./static/videos/teaser_video_final.mp4" type="video/mp4">
+        </video>
+      </div>
+
+      <div class="teaser-video-wrapper" style="background: #fff;">
+        <img src="./static/images/teaser.svg" alt="UniSH Teaser" style="width: 100%; display: block;">
+      </div>
+
+      <div class="content has-text-centered is-size-6" style="margin-top: 20px;">
+        Given a monocular video as input, our UniSH is capable of jointly reconstructing scene and human in a single forward pass, enabling effective estimation of scene geometry, camera parameters and SMPL parameters.
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section" style="padding-top: 20px;">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Abstract</h2>
+        <div class="content has-text-justified">
+          <p>
+            We present UniSH, a unified, feed-forward framework for joint metric-scale 3D scene and human reconstruction. A key challenge in this domain is the scarcity of large-scale, annotated real-world data, forcing a reliance on synthetic datasets. This reliance introduces a significant sim-to-real domain gap, leading to poor generalization, low-fidelity human geometry, and poor alignment on in-the-wild videos.
+          </p>
+          <p>
+            To address this, we propose an innovative training paradigm that effectively leverages unlabeled in-the-wild data. Our framework bridges strong, disparate priors from scene reconstruction and HMR, and is trained with two core components: (1) a robust distillation strategy to refine human surface details by distilling high-frequency details from an expert depth model, and (2) a two-stage supervision scheme, which first learns coarse localization on synthetic data, then fine-tunes on real data by directly optimizing the geometric correspondence between the SMPL mesh and the human point cloud. This approach enables our feed-forward model to jointly recover high-fidelity scene geometry, human point clouds, camera parameters, and coherent, metric-scale SMPL bodies, all in a single forward pass. Extensive experiments demonstrate that our model achieves state-of-the-art performance on human-centric scene reconstruction and delivers highly competitive results on global human motion estimation, comparing favorably against both optimization-based frameworks and HMR-only methods.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container is-max-desktop">
+    <div class="columns is-centered has-text-centered">
+      <div class="column is-full-width">
+        <h2 class="title is-3">Method</h2>
+        <div class="content">
+            <img src="./static/images/framework.svg" alt="UniSH Framework" style="width: 100%; max-width: 1000px; margin-bottom: 10px;">
+            <p class="has-text-justified is-size-6">
+              <strong>The network architecture of UniSH.</strong> 
+              UniSH takes a monocular video as input. The video frames are processed by the <strong>Reconstruction Branch</strong> to predict per-frame camera extrinsics <em>E</em>, confidence maps <em>C</em>, and pointmaps <em>P</em>. Camera intrinsics <em>K</em> are derived from the pointmaps. Human crops from the video are fed into the <strong>Human Body Branch</strong> along with <em>K</em> to estimate global SMPL shape parameters <em>&beta;</em> and per-frame pose parameters <em>&theta;<sub>i</sub></em>. Features from both branches are processed by <strong>AlignNet</strong> to predict the global scene scale <em>s</em> and per-frame SMPL translations <em>t<sub>i</sub></em> for coherent scene and human alignment. The indices (e.g., in <em>&theta;<sub>1</sub>, &theta;<sub>2</sub>, &theta;<sub>3</sub></em> and <em>t<sub>1</sub>, t<sub>2</sub>, t<sub>3</sub></em>) denote frame-specific parameters.
+            </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container is-max-desktop">
+    <h2 class="title is-3 has-text-centered">Interactive Visualization</h2>
+    <div class="content has-text-centered">
+      <p>
+        Interactive 4D Player. <br>
+        <strong>Left Click</strong> to Rotate, <strong>Right Click</strong> to Pan, <strong>Scroll</strong> to Zoom. <br>
+        <span class="is-size-7" style="color: #666;">* Scene point clouds are downsampled for smoother web performance.</span>
+      </p>
+    </div>
+
+    <div class="columns is-centered">
+      <div class="column is-full-width">
+        <div class="box" style="padding: 10px; background: #f5f5f5;">
+          <div id="canvas-container">
+            <div id="loading-overlay" style="position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10;">
+              <span class="icon is-large"><i class="fas fa-spinner fa-pulse"></i></span>
+              <p style="margin-top: 10px;">Loading 3D Sequence...</p>
+            </div>
+          </div>
+
+          <div class="columns is-vcentered is-mobile" style="margin-top: 10px; padding: 0 10px;">
+            <div class="column is-narrow">
+              <button id="play-btn" class="button is-dark is-rounded is-small">
+                <span class="icon is-small"><i class="fas fa-play"></i></span>
+              </button>
+            </div>
+            <div class="column">
+              <input id="frame-slider" class="slider is-fullwidth is-circle is-dark" step="1" min="0" max="0" value="0" type="range">
+            </div>
+            <div class="column is-narrow">
+              <span id="frame-count" class="tag is-light" style="width: 80px;">Frame: 0</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+    <div class="container is-max-desktop">
+      <h2 class="title is-3 has-text-centered">More Visualization Results</h2>
+      
+      <div id="results-carousel" class="carousel results-carousel">
+        <div class="item item-video1">
+          <video poster="" id="video1" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_1.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 01 / 12</div>
+        </div>
+        <div class="item item-video2">
+          <video poster="" id="video2" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_2.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 02 / 12</div>
+        </div>
+        <div class="item item-video3">
+          <video poster="" id="video3" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_4.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 03 / 12</div>
+        </div>
+        <div class="item item-video4">
+          <video poster="" id="video4" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_11.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 04 / 12</div>
+        </div>
+        <div class="item item-video5">
+          <video poster="" id="video5" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_3.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 05 / 12</div>
+        </div>
+        <div class="item item-video6">
+          <video poster="" id="video6" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_6.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 06 / 12</div>
+        </div>
+        <div class="item item-video7">
+          <video poster="" id="video7" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_7.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 07 / 12</div>
+        </div>
+        <div class="item item-video8">
+          <video poster="" id="video8" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_8.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 08 / 12</div>
+        </div>
+        <div class="item item-video9">
+          <video poster="" id="video9" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_9.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 09 / 12</div>
+        </div>
+        <div class="item item-video10">
+          <video poster="" id="video10" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_10.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 10 / 12</div>
+        </div>
+        <div class="item item-video11">
+          <video poster="" id="video11" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_5.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 11 / 12</div>
+        </div>
+        <div class="item item-video12">
+          <video poster="" id="video12" autoplay controls muted loop playsinline height="100%">
+            <source src="./static/videos/case_12.mp4" type="video/mp4">
+          </video>
+          <div class="video-overlay-label">SEQ 12 / 12</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+<section class="section" id="BibTeX">
+  <div class="container is-max-desktop content">
+    <h2 class="title">BibTeX</h2>
+    <pre><code>@misc{li2026unishunifyingscenehuman,
+      title={UniSH: Unifying Scene and Human Reconstruction in a Feed-Forward Pass}, 
+      author={Mengfei Li and Peng Li and Zheng Zhang and Jiahao Lu and Chengfeng Zhao and Wei Xue and Qifeng Liu and Sida Peng and Wenxiao Zhang and Wenhan Luo and Yuan Liu and Yike Guo},
+      year={2026},
+      eprint={2601.01222},
+      archivePrefix={arXiv},
+      primaryClass={cs.CV},
+      url={https://arxiv.org/abs/2601.01222}, 
+}</code></pre>
+  </div>
+</section>
+
+<footer class="footer">
+  <div class="container">
+    <div class="columns is-centered">
+      <div class="column is-8">
+        <div class="content">
+          <p>
+            This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
+            Template borrowed from <a href="https://github.com/nerfies/nerfies.github.io">Nerfies</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<script src="./static/js/fontawesome.all.min.js"></script>
+<script src="./static/js/bulma-carousel.min.js"></script>
+<script src="./static/js/bulma-slider.min.js"></script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    var options = {
+      slidesToScroll: 1,
+      slidesToShow: 1,
+      loop: true,
+      infinite: true,
+      autoplay: false,
+      pagination: false,
+    };
+    var carousels = bulmaCarousel.attach('.carousel', options);
+  });
+</script>
+
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+  
+    // 配置
+    const MODEL_PATH = './static/models/sequence.glb';
+    const FPS = 10; 
+  
+    let scene, camera, renderer, controls;
+    let frames = []; 
+    let currentFrame = 0;
+    let isPlaying = false;
+    let intervalId = null;
+  
+    const container = document.getElementById('canvas-container');
+    const slider = document.getElementById('frame-slider');
+    const playBtn = document.getElementById('play-btn');
+    const frameLabel = document.getElementById('frame-count');
+    const loadingOverlay = document.getElementById('loading-overlay');
+  
+    init();
+  
+    function init() {
+      scene = new THREE.Scene();
+      scene.background = new THREE.Color(0xf5f5f5);
+  
+      camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
+      camera.position.set(-0.000, -4.272, 0.000);
+  
+      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      renderer.setSize(container.clientWidth, container.clientHeight);
+      renderer.setPixelRatio(window.devicePixelRatio);
+      
+      renderer.shadowMap.enabled = false; 
+      renderer.useLegacyLights = false; 
+  
+      container.appendChild(renderer.domElement);
+  
+      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 3.0);
+      scene.add(hemiLight);
+      
+      const dirLight = new THREE.DirectionalLight(0xffffff, 3.0);
+      dirLight.position.set(5, 10, 7);
+      scene.add(dirLight);
+  
+      const frontLight = new THREE.DirectionalLight(0xffffff, 2.0);
+      frontLight.position.set(0, 0, 5); 
+      scene.add(frontLight);
+  
+      controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+      controls.dampingFactor = 0.05;
+      
+      controls.target.set(0.000, 0.000, 0.000);
+  
+      const loader = new GLTFLoader();
+      console.log("Loading:", MODEL_PATH);
+      
+      loader.load(MODEL_PATH, function (gltf) {
+        const root = gltf.scene;
+        scene.add(root);
+  
+        frames = [];
+        root.traverse((node) => {
+          
+          if (node.isMesh) {
+              node.geometry.computeVertexNormals();
+              if (node.geometry.attributes.color) {
+                  node.geometry.deleteAttribute('color');
+              }
+              node.material = new THREE.MeshStandardMaterial({
+                  color: 0xff9966,
+                  roughness: 0.4,
+                  metalness: 0.0,
+                  side: THREE.DoubleSide
+              });
+              node.material.vertexColors = false; 
+          }
+  
+          if (node.isPoints) {
+              if (node.name.toLowerCase().includes('scene')) {
+                  node.material.size = 0.05; 
+                  node.material.sizeAttenuation = true; 
+              }
+              if (node.name.toLowerCase().includes('human')) {
+                  node.material.size = 0.005; 
+              }
+          }
+  
+          if (node.name && node.name.startsWith('frame_')) {
+              const parts = node.name.split('_');
+              if (parts.length === 2 && !isNaN(parseInt(parts[1]))) {
+                  const idx = parseInt(parts[1]);
+                  frames[idx] = node;
+                  node.visible = false;
+              }
+          }
+        });
+        
+        frames = frames.filter(n => n !== undefined);
+        console.log(`Loaded ${frames.length} frames.`);
+  
+        if (frames.length > 0) {
+          slider.max = frames.length - 1;
+          loadingOverlay.style.display = 'none';
+          showFrame(0);
+        } else {
+          loadingOverlay.innerHTML = "<p>No frames found.</p>";
+        }
+  
+      }, undefined, function (error) {
+        console.error(error);
+        loadingOverlay.innerHTML = "<p>Error loading model.</p>";
+      });
+  
+      window.addEventListener('resize', onWindowResize);
+      animate();
+    }
+  
+    function showFrame(idx) {
+      if (!frames[idx]) return;
+      if (frames[currentFrame]) frames[currentFrame].visible = false;
+      frames[idx].visible = true;
+      currentFrame = idx;
+      slider.value = idx;
+      frameLabel.innerText = `Frame: ${idx}`;
+    }
+  
+    function togglePlay() {
+      if (frames.length === 0) return;
+      isPlaying = !isPlaying;
+      
+      const icon = playBtn.querySelector('.fa-play, .fa-pause');
+      
+      if (isPlaying) {
+        if(icon) { icon.classList.remove('fa-play'); icon.classList.add('fa-pause'); }
+        intervalId = setInterval(() => {
+          let next = currentFrame + 1;
+          if (next >= frames.length) next = 0;
+          showFrame(next);
+        }, 1000 / FPS);
+      } else {
+        if(icon) { icon.classList.remove('fa-pause'); icon.classList.add('fa-play'); }
+        clearInterval(intervalId);
+      }
+    }
+  
+    slider.addEventListener('input', (e) => {
+      if (isPlaying) togglePlay();
+      showFrame(parseInt(e.target.value));
+    });
+    playBtn.addEventListener('click', togglePlay);
+  
+    function onWindowResize() {
+      camera.aspect = container.clientWidth / container.clientHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(container.clientWidth, container.clientHeight);
+    }
+  
+    function animate() {
+      requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    }
+  </script>
+
+</body>
+</html>

requirements.txt

@@ -1,21 +1,25 @@
 torch==2.4.1
 torchvision==0.19.1
-numpy
+numpy<1.24
 scipy
+gradio>=5.1.0
+fastapi>=0.112.0
+pydantic>=2.0.0
+huggingface_hub>=0.25.0
+spaces
 trimesh
 plyfile
-open3d==0.19.0
 opencv-python-headless
+open3d==0.19.0
 pillow
 einops
 safetensors
-spaces
-huggingface_hub==0.23.0
 tqdm
-ninja
-ultralytics==8.3.227
+ultralytics==8.3.27
 timm==1.0.24
+ninja
 git+https://github.com/EasternJournalist/utils3d.git@3fab839f0be9931dac7c8488eb0e1600c236e183
 mmcv==2.2.0 --find-links https://download.openmmlab.com/mmcv/dist/cu121/torch2.4/index.html
 pytorch3d @ https://dl.fbaipublicfiles.com/pytorch3d/packaging/wheels/py310_cu121_pyt241/pytorch3d-0.7.8-cp310-cp310-linux_x86_64.whl
 smplx
+hydra-core

static/BufferGeometryUtils.js

@@ -0,0 +1,1375 @@
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Float32BufferAttribute,
+	InstancedBufferAttribute,
+	InterleavedBuffer,
+	InterleavedBufferAttribute,
+	TriangleFanDrawMode,
+	TriangleStripDrawMode,
+	TrianglesDrawMode,
+	Vector3,
+} from 'three';
+
+function computeMikkTSpaceTangents( geometry, MikkTSpace, negateSign = true ) {
+
+	if ( ! MikkTSpace || ! MikkTSpace.isReady ) {
+
+		throw new Error( 'BufferGeometryUtils: Initialized MikkTSpace library required.' );
+
+	}
+
+	if ( ! geometry.hasAttribute( 'position' ) || ! geometry.hasAttribute( 'normal' ) || ! geometry.hasAttribute( 'uv' ) ) {
+
+		throw new Error( 'BufferGeometryUtils: Tangents require "position", "normal", and "uv" attributes.' );
+
+	}
+
+	function getAttributeArray( attribute ) {
+
+		if ( attribute.normalized || attribute.isInterleavedBufferAttribute ) {
+
+			const dstArray = new Float32Array( attribute.count * attribute.itemSize );
+
+			for ( let i = 0, j = 0; i < attribute.count; i ++ ) {
+
+				dstArray[ j ++ ] = attribute.getX( i );
+				dstArray[ j ++ ] = attribute.getY( i );
+
+				if ( attribute.itemSize > 2 ) {
+
+					dstArray[ j ++ ] = attribute.getZ( i );
+
+				}
+
+			}
+
+			return dstArray;
+
+		}
+
+		if ( attribute.array instanceof Float32Array ) {
+
+			return attribute.array;
+
+		}
+
+		return new Float32Array( attribute.array );
+
+	}
+
+	// MikkTSpace algorithm requires non-indexed input.
+
+	const _geometry = geometry.index ? geometry.toNonIndexed() : geometry;
+
+	// Compute vertex tangents.
+
+	const tangents = MikkTSpace.generateTangents(
+
+		getAttributeArray( _geometry.attributes.position ),
+		getAttributeArray( _geometry.attributes.normal ),
+		getAttributeArray( _geometry.attributes.uv )
+
+	);
+
+	// Texture coordinate convention of glTF differs from the apparent
+	// default of the MikkTSpace library; .w component must be flipped.
+
+	if ( negateSign ) {
+
+		for ( let i = 3; i < tangents.length; i += 4 ) {
+
+			tangents[ i ] *= - 1;
+
+		}
+
+	}
+
+	//
+
+	_geometry.setAttribute( 'tangent', new BufferAttribute( tangents, 4 ) );
+
+	if ( geometry !== _geometry ) {
+
+		geometry.copy( _geometry );
+
+	}
+
+	return geometry;
+
+}
+
+/**
+ * @param  {Array<BufferGeometry>} geometries
+ * @param  {Boolean} useGroups
+ * @return {BufferGeometry}
+ */
+function mergeGeometries( geometries, useGroups = false ) {
+
+	const isIndexed = geometries[ 0 ].index !== null;
+
+	const attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
+	const morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+
+	const attributes = {};
+	const morphAttributes = {};
+
+	const morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;
+
+	const mergedGeometry = new BufferGeometry();
+
+	let offset = 0;
+
+	for ( let i = 0; i < geometries.length; ++ i ) {
+
+		const geometry = geometries[ i ];
+		let attributesCount = 0;
+
+		// ensure that all geometries are indexed, or none
+
+		if ( isIndexed !== ( geometry.index !== null ) ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );
+			return null;
+
+		}
+
+		// gather attributes, exit early if they're different
+
+		for ( const name in geometry.attributes ) {
+
+			if ( ! attributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );
+				return null;
+
+			}
+
+			if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+
+			attributes[ name ].push( geometry.attributes[ name ] );
+
+			attributesCount ++;
+
+		}
+
+		// ensure geometries have the same number of attributes
+
+		if ( attributesCount !== attributesUsed.size ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );
+			return null;
+
+		}
+
+		// gather morph attributes, exit early if they're different
+
+		if ( morphTargetsRelative !== geometry.morphTargetsRelative ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );
+			return null;
+
+		}
+
+		for ( const name in geometry.morphAttributes ) {
+
+			if ( ! morphAttributesUsed.has( name ) ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );
+				return null;
+
+			}
+
+			if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
+
+			morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
+
+		}
+
+		if ( useGroups ) {
+
+			let count;
+
+			if ( isIndexed ) {
+
+				count = geometry.index.count;
+
+			} else if ( geometry.attributes.position !== undefined ) {
+
+				count = geometry.attributes.position.count;
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );
+				return null;
+
+			}
+
+			mergedGeometry.addGroup( offset, count, i );
+
+			offset += count;
+
+		}
+
+	}
+
+	// merge indices
+
+	if ( isIndexed ) {
+
+		let indexOffset = 0;
+		const mergedIndex = [];
+
+		for ( let i = 0; i < geometries.length; ++ i ) {
+
+			const index = geometries[ i ].index;
+
+			for ( let j = 0; j < index.count; ++ j ) {
+
+				mergedIndex.push( index.getX( j ) + indexOffset );
+
+			}
+
+			indexOffset += geometries[ i ].attributes.position.count;
+
+		}
+
+		mergedGeometry.setIndex( mergedIndex );
+
+	}
+
+	// merge attributes
+
+	for ( const name in attributes ) {
+
+		const mergedAttribute = mergeAttributes( attributes[ name ] );
+
+		if ( ! mergedAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the ' + name + ' attribute.' );
+			return null;
+
+		}
+
+		mergedGeometry.setAttribute( name, mergedAttribute );
+
+	}
+
+	// merge morph attributes
+
+	for ( const name in morphAttributes ) {
+
+		const numMorphTargets = morphAttributes[ name ][ 0 ].length;
+
+		if ( numMorphTargets === 0 ) break;
+
+		mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
+		mergedGeometry.morphAttributes[ name ] = [];
+
+		for ( let i = 0; i < numMorphTargets; ++ i ) {
+
+			const morphAttributesToMerge = [];
+
+			for ( let j = 0; j < morphAttributes[ name ].length; ++ j ) {
+
+				morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+
+			}
+
+			const mergedMorphAttribute = mergeAttributes( morphAttributesToMerge );
+
+			if ( ! mergedMorphAttribute ) {
+
+				console.error( 'THREE.BufferGeometryUtils: .mergeGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );
+				return null;
+
+			}
+
+			mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+
+		}
+
+	}
+
+	return mergedGeometry;
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {BufferAttribute}
+ */
+function mergeAttributes( attributes ) {
+
+	let TypedArray;
+	let itemSize;
+	let normalized;
+	let gpuType = - 1;
+	let arrayLength = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( attribute.isInterleavedBufferAttribute ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. InterleavedBufferAttributes are not supported.' );
+			return null;
+
+		}
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.array must be of consistent array types across matching attributes.' );
+			return null;
+
+		}
+
+		if ( itemSize === undefined ) itemSize = attribute.itemSize;
+		if ( itemSize !== attribute.itemSize ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.itemSize must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		if ( normalized === undefined ) normalized = attribute.normalized;
+		if ( normalized !== attribute.normalized ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.normalized must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		if ( gpuType === - 1 ) gpuType = attribute.gpuType;
+		if ( gpuType !== attribute.gpuType ) {
+
+			console.error( 'THREE.BufferGeometryUtils: .mergeAttributes() failed. BufferAttribute.gpuType must be consistent across matching attributes.' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+
+	}
+
+	const array = new TypedArray( arrayLength );
+	let offset = 0;
+
+	for ( let i = 0; i < attributes.length; ++ i ) {
+
+		array.set( attributes[ i ].array, offset );
+
+		offset += attributes[ i ].array.length;
+
+	}
+
+	const result = new BufferAttribute( array, itemSize, normalized );
+	if ( gpuType !== undefined ) {
+
+		result.gpuType = gpuType;
+
+	}
+
+	return result;
+
+}
+
+/**
+ * @param {BufferAttribute}
+ * @return {BufferAttribute}
+ */
+export function deepCloneAttribute( attribute ) {
+
+	if ( attribute.isInstancedInterleavedBufferAttribute || attribute.isInterleavedBufferAttribute ) {
+
+		return deinterleaveAttribute( attribute );
+
+	}
+
+	if ( attribute.isInstancedBufferAttribute ) {
+
+		return new InstancedBufferAttribute().copy( attribute );
+
+	}
+
+	return new BufferAttribute().copy( attribute );
+
+}
+
+/**
+ * @param {Array<BufferAttribute>} attributes
+ * @return {Array<InterleavedBufferAttribute>}
+ */
+function interleaveAttributes( attributes ) {
+
+	// Interleaves the provided attributes into an InterleavedBuffer and returns
+	// a set of InterleavedBufferAttributes for each attribute
+	let TypedArray;
+	let arrayLength = 0;
+	let stride = 0;
+
+	// calculate the length and type of the interleavedBuffer
+	for ( let i = 0, l = attributes.length; i < l; ++ i ) {
+
+		const attribute = attributes[ i ];
+
+		if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+		if ( TypedArray !== attribute.array.constructor ) {
+
+			console.error( 'AttributeBuffers of different types cannot be interleaved' );
+			return null;
+
+		}
+
+		arrayLength += attribute.array.length;
+		stride += attribute.itemSize;
+
+	}
+
+	// Create the set of buffer attributes
+	const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
+	let offset = 0;
+	const res = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	for ( let j = 0, l = attributes.length; j < l; j ++ ) {
+
+		const attribute = attributes[ j ];
+		const itemSize = attribute.itemSize;
+		const count = attribute.count;
+		const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
+		res.push( iba );
+
+		offset += itemSize;
+
+		// Move the data for each attribute into the new interleavedBuffer
+		// at the appropriate offset
+		for ( let c = 0; c < count; c ++ ) {
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				iba[ setters[ k ] ]( c, attribute[ getters[ k ] ]( c ) );
+
+			}
+
+		}
+
+	}
+
+	return res;
+
+}
+
+// returns a new, non-interleaved version of the provided attribute
+export function deinterleaveAttribute( attribute ) {
+
+	const cons = attribute.data.array.constructor;
+	const count = attribute.count;
+	const itemSize = attribute.itemSize;
+	const normalized = attribute.normalized;
+
+	const array = new cons( count * itemSize );
+	let newAttribute;
+	if ( attribute.isInstancedInterleavedBufferAttribute ) {
+
+		newAttribute = new InstancedBufferAttribute( array, itemSize, normalized, attribute.meshPerAttribute );
+
+	} else {
+
+		newAttribute = new BufferAttribute( array, itemSize, normalized );
+
+	}
+
+	for ( let i = 0; i < count; i ++ ) {
+
+		newAttribute.setX( i, attribute.getX( i ) );
+
+		if ( itemSize >= 2 ) {
+
+			newAttribute.setY( i, attribute.getY( i ) );
+
+		}
+
+		if ( itemSize >= 3 ) {
+
+			newAttribute.setZ( i, attribute.getZ( i ) );
+
+		}
+
+		if ( itemSize >= 4 ) {
+
+			newAttribute.setW( i, attribute.getW( i ) );
+
+		}
+
+	}
+
+	return newAttribute;
+
+}
+
+// deinterleaves all attributes on the geometry
+export function deinterleaveGeometry( geometry ) {
+
+	const attributes = geometry.attributes;
+	const morphTargets = geometry.morphTargets;
+	const attrMap = new Map();
+
+	for ( const key in attributes ) {
+
+		const attr = attributes[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			attributes[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+	for ( const key in morphTargets ) {
+
+		const attr = morphTargets[ key ];
+		if ( attr.isInterleavedBufferAttribute ) {
+
+			if ( ! attrMap.has( attr ) ) {
+
+				attrMap.set( attr, deinterleaveAttribute( attr ) );
+
+			}
+
+			morphTargets[ key ] = attrMap.get( attr );
+
+		}
+
+	}
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @return {number}
+ */
+function estimateBytesUsed( geometry ) {
+
+	// Return the estimated memory used by this geometry in bytes
+	// Calculate using itemSize, count, and BYTES_PER_ELEMENT to account
+	// for InterleavedBufferAttributes.
+	let mem = 0;
+	for ( const name in geometry.attributes ) {
+
+		const attr = geometry.getAttribute( name );
+		mem += attr.count * attr.itemSize * attr.array.BYTES_PER_ELEMENT;
+
+	}
+
+	const indices = geometry.getIndex();
+	mem += indices ? indices.count * indices.itemSize * indices.array.BYTES_PER_ELEMENT : 0;
+	return mem;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} tolerance
+ * @return {BufferGeometry}
+ */
+function mergeVertices( geometry, tolerance = 1e-4 ) {
+
+	tolerance = Math.max( tolerance, Number.EPSILON );
+
+	// Generate an index buffer if the geometry doesn't have one, or optimize it
+	// if it's already available.
+	const hashToIndex = {};
+	const indices = geometry.getIndex();
+	const positions = geometry.getAttribute( 'position' );
+	const vertexCount = indices ? indices.count : positions.count;
+
+	// next value for triangle indices
+	let nextIndex = 0;
+
+	// attributes and new attribute arrays
+	const attributeNames = Object.keys( geometry.attributes );
+	const tmpAttributes = {};
+	const tmpMorphAttributes = {};
+	const newIndices = [];
+	const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
+	const setters = [ 'setX', 'setY', 'setZ', 'setW' ];
+
+	// Initialize the arrays, allocating space conservatively. Extra
+	// space will be trimmed in the last step.
+	for ( let i = 0, l = attributeNames.length; i < l; i ++ ) {
+
+		const name = attributeNames[ i ];
+		const attr = geometry.attributes[ name ];
+
+		tmpAttributes[ name ] = new BufferAttribute(
+			new attr.array.constructor( attr.count * attr.itemSize ),
+			attr.itemSize,
+			attr.normalized
+		);
+
+		const morphAttr = geometry.morphAttributes[ name ];
+		if ( morphAttr ) {
+
+			tmpMorphAttributes[ name ] = new BufferAttribute(
+				new morphAttr.array.constructor( morphAttr.count * morphAttr.itemSize ),
+				morphAttr.itemSize,
+				morphAttr.normalized
+			);
+
+		}
+
+	}
+
+	// convert the error tolerance to an amount of decimal places to truncate to
+	const halfTolerance = tolerance * 0.5;
+	const exponent = Math.log10( 1 / tolerance );
+	const hashMultiplier = Math.pow( 10, exponent );
+	const hashAdditive = halfTolerance * hashMultiplier;
+	for ( let i = 0; i < vertexCount; i ++ ) {
+
+		const index = indices ? indices.getX( i ) : i;
+
+		// Generate a hash for the vertex attributes at the current index 'i'
+		let hash = '';
+		for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+			const name = attributeNames[ j ];
+			const attribute = geometry.getAttribute( name );
+			const itemSize = attribute.itemSize;
+
+			for ( let k = 0; k < itemSize; k ++ ) {
+
+				// double tilde truncates the decimal value
+				hash += `${ ~ ~ ( attribute[ getters[ k ] ]( index ) * hashMultiplier + hashAdditive ) },`;
+
+			}
+
+		}
+
+		// Add another reference to the vertex if it's already
+		// used by another index
+		if ( hash in hashToIndex ) {
+
+			newIndices.push( hashToIndex[ hash ] );
+
+		} else {
+
+			// copy data to the new index in the temporary attributes
+			for ( let j = 0, l = attributeNames.length; j < l; j ++ ) {
+
+				const name = attributeNames[ j ];
+				const attribute = geometry.getAttribute( name );
+				const morphAttr = geometry.morphAttributes[ name ];
+				const itemSize = attribute.itemSize;
+				const newarray = tmpAttributes[ name ];
+				const newMorphArrays = tmpMorphAttributes[ name ];
+
+				for ( let k = 0; k < itemSize; k ++ ) {
+
+					const getterFunc = getters[ k ];
+					const setterFunc = setters[ k ];
+					newarray[ setterFunc ]( nextIndex, attribute[ getterFunc ]( index ) );
+
+					if ( morphAttr ) {
+
+						for ( let m = 0, ml = morphAttr.length; m < ml; m ++ ) {
+
+							newMorphArrays[ m ][ setterFunc ]( nextIndex, morphAttr[ m ][ getterFunc ]( index ) );
+
+						}
+
+					}
+
+				}
+
+			}
+
+			hashToIndex[ hash ] = nextIndex;
+			newIndices.push( nextIndex );
+			nextIndex ++;
+
+		}
+
+	}
+
+	// generate result BufferGeometry
+	const result = geometry.clone();
+	for ( const name in geometry.attributes ) {
+
+		const tmpAttribute = tmpAttributes[ name ];
+
+		result.setAttribute( name, new BufferAttribute(
+			tmpAttribute.array.slice( 0, nextIndex * tmpAttribute.itemSize ),
+			tmpAttribute.itemSize,
+			tmpAttribute.normalized,
+		) );
+
+		if ( ! ( name in tmpMorphAttributes ) ) continue;
+
+		for ( let j = 0; j < tmpMorphAttributes[ name ].length; j ++ ) {
+
+			const tmpMorphAttribute = tmpMorphAttributes[ name ][ j ];
+
+			result.morphAttributes[ name ][ j ] = new BufferAttribute(
+				tmpMorphAttribute.array.slice( 0, nextIndex * tmpMorphAttribute.itemSize ),
+				tmpMorphAttribute.itemSize,
+				tmpMorphAttribute.normalized,
+			);
+
+		}
+
+	}
+
+	// indices
+
+	result.setIndex( newIndices );
+
+	return result;
+
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @param {number} drawMode
+ * @return {BufferGeometry}
+ */
+function toTrianglesDrawMode( geometry, drawMode ) {
+
+	if ( drawMode === TrianglesDrawMode ) {
+
+		console.warn( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Geometry already defined as triangles.' );
+		return geometry;
+
+	}
+
+	if ( drawMode === TriangleFanDrawMode || drawMode === TriangleStripDrawMode ) {
+
+		let index = geometry.getIndex();
+
+		// generate index if not present
+
+		if ( index === null ) {
+
+			const indices = [];
+
+			const position = geometry.getAttribute( 'position' );
+
+			if ( position !== undefined ) {
+
+				for ( let i = 0; i < position.count; i ++ ) {
+
+					indices.push( i );
+
+				}
+
+				geometry.setIndex( indices );
+				index = geometry.getIndex();
+
+			} else {
+
+				console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );
+				return geometry;
+
+			}
+
+		}
+
+		//
+
+		const numberOfTriangles = index.count - 2;
+		const newIndices = [];
+
+		if ( drawMode === TriangleFanDrawMode ) {
+
+			// gl.TRIANGLE_FAN
+
+			for ( let i = 1; i <= numberOfTriangles; i ++ ) {
+
+				newIndices.push( index.getX( 0 ) );
+				newIndices.push( index.getX( i ) );
+				newIndices.push( index.getX( i + 1 ) );
+
+			}
+
+		} else {
+
+			// gl.TRIANGLE_STRIP
+
+			for ( let i = 0; i < numberOfTriangles; i ++ ) {
+
+				if ( i % 2 === 0 ) {
+
+					newIndices.push( index.getX( i ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i + 2 ) );
+
+				} else {
+
+					newIndices.push( index.getX( i + 2 ) );
+					newIndices.push( index.getX( i + 1 ) );
+					newIndices.push( index.getX( i ) );
+
+				}
+
+			}
+
+		}
+
+		if ( ( newIndices.length / 3 ) !== numberOfTriangles ) {
+
+			console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );
+
+		}
+
+		// build final geometry
+
+		const newGeometry = geometry.clone();
+		newGeometry.setIndex( newIndices );
+		newGeometry.clearGroups();
+
+		return newGeometry;
+
+	} else {
+
+		console.error( 'THREE.BufferGeometryUtils.toTrianglesDrawMode(): Unknown draw mode:', drawMode );
+		return geometry;
+
+	}
+
+}
+
+/**
+ * Calculates the morphed attributes of a morphed/skinned BufferGeometry.
+ * Helpful for Raytracing or Decals.
+ * @param {Mesh | Line | Points} object An instance of Mesh, Line or Points.
+ * @return {Object} An Object with original position/normal attributes and morphed ones.
+ */
+function computeMorphedAttributes( object ) {
+
+	const _vA = new Vector3();
+	const _vB = new Vector3();
+	const _vC = new Vector3();
+
+	const _tempA = new Vector3();
+	const _tempB = new Vector3();
+	const _tempC = new Vector3();
+
+	const _morphA = new Vector3();
+	const _morphB = new Vector3();
+	const _morphC = new Vector3();
+
+	function _calculateMorphedAttributeData(
+		object,
+		attribute,
+		morphAttribute,
+		morphTargetsRelative,
+		a,
+		b,
+		c,
+		modifiedAttributeArray
+	) {
+
+		_vA.fromBufferAttribute( attribute, a );
+		_vB.fromBufferAttribute( attribute, b );
+		_vC.fromBufferAttribute( attribute, c );
+
+		const morphInfluences = object.morphTargetInfluences;
+
+		if ( morphAttribute && morphInfluences ) {
+
+			_morphA.set( 0, 0, 0 );
+			_morphB.set( 0, 0, 0 );
+			_morphC.set( 0, 0, 0 );
+
+			for ( let i = 0, il = morphAttribute.length; i < il; i ++ ) {
+
+				const influence = morphInfluences[ i ];
+				const morph = morphAttribute[ i ];
+
+				if ( influence === 0 ) continue;
+
+				_tempA.fromBufferAttribute( morph, a );
+				_tempB.fromBufferAttribute( morph, b );
+				_tempC.fromBufferAttribute( morph, c );
+
+				if ( morphTargetsRelative ) {
+
+					_morphA.addScaledVector( _tempA, influence );
+					_morphB.addScaledVector( _tempB, influence );
+					_morphC.addScaledVector( _tempC, influence );
+
+				} else {
+
+					_morphA.addScaledVector( _tempA.sub( _vA ), influence );
+					_morphB.addScaledVector( _tempB.sub( _vB ), influence );
+					_morphC.addScaledVector( _tempC.sub( _vC ), influence );
+
+				}
+
+			}
+
+			_vA.add( _morphA );
+			_vB.add( _morphB );
+			_vC.add( _morphC );
+
+		}
+
+		if ( object.isSkinnedMesh ) {
+
+			object.applyBoneTransform( a, _vA );
+			object.applyBoneTransform( b, _vB );
+			object.applyBoneTransform( c, _vC );
+
+		}
+
+		modifiedAttributeArray[ a * 3 + 0 ] = _vA.x;
+		modifiedAttributeArray[ a * 3 + 1 ] = _vA.y;
+		modifiedAttributeArray[ a * 3 + 2 ] = _vA.z;
+		modifiedAttributeArray[ b * 3 + 0 ] = _vB.x;
+		modifiedAttributeArray[ b * 3 + 1 ] = _vB.y;
+		modifiedAttributeArray[ b * 3 + 2 ] = _vB.z;
+		modifiedAttributeArray[ c * 3 + 0 ] = _vC.x;
+		modifiedAttributeArray[ c * 3 + 1 ] = _vC.y;
+		modifiedAttributeArray[ c * 3 + 2 ] = _vC.z;
+
+	}
+
+	const geometry = object.geometry;
+	const material = object.material;
+
+	let a, b, c;
+	const index = geometry.index;
+	const positionAttribute = geometry.attributes.position;
+	const morphPosition = geometry.morphAttributes.position;
+	const morphTargetsRelative = geometry.morphTargetsRelative;
+	const normalAttribute = geometry.attributes.normal;
+	const morphNormal = geometry.morphAttributes.position;
+
+	const groups = geometry.groups;
+	const drawRange = geometry.drawRange;
+	let i, j, il, jl;
+	let group;
+	let start, end;
+
+	const modifiedPosition = new Float32Array( positionAttribute.count * positionAttribute.itemSize );
+	const modifiedNormal = new Float32Array( normalAttribute.count * normalAttribute.itemSize );
+
+	if ( index !== null ) {
+
+		// indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = index.getX( j );
+					b = index.getX( j + 1 );
+					c = index.getX( j + 2 );
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = index.getX( i );
+				b = index.getX( i + 1 );
+				c = index.getX( i + 2 );
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
+
+			}
+
+		}
+
+	} else {
+
+		// non-indexed buffer geometry
+
+		if ( Array.isArray( material ) ) {
+
+			for ( i = 0, il = groups.length; i < il; i ++ ) {
+
+				group = groups[ i ];
+
+				start = Math.max( group.start, drawRange.start );
+				end = Math.min( ( group.start + group.count ), ( drawRange.start + drawRange.count ) );
+
+				for ( j = start, jl = end; j < jl; j += 3 ) {
+
+					a = j;
+					b = j + 1;
+					c = j + 2;
+
+					_calculateMorphedAttributeData(
+						object,
+						positionAttribute,
+						morphPosition,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedPosition
+					);
+
+					_calculateMorphedAttributeData(
+						object,
+						normalAttribute,
+						morphNormal,
+						morphTargetsRelative,
+						a, b, c,
+						modifiedNormal
+					);
+
+				}
+
+			}
+
+		} else {
+
+			start = Math.max( 0, drawRange.start );
+			end = Math.min( positionAttribute.count, ( drawRange.start + drawRange.count ) );
+
+			for ( i = start, il = end; i < il; i += 3 ) {
+
+				a = i;
+				b = i + 1;
+				c = i + 2;
+
+				_calculateMorphedAttributeData(
+					object,
+					positionAttribute,
+					morphPosition,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedPosition
+				);
+
+				_calculateMorphedAttributeData(
+					object,
+					normalAttribute,
+					morphNormal,
+					morphTargetsRelative,
+					a, b, c,
+					modifiedNormal
+				);
+
+			}
+
+		}
+
+	}
+
+	const morphedPositionAttribute = new Float32BufferAttribute( modifiedPosition, 3 );
+	const morphedNormalAttribute = new Float32BufferAttribute( modifiedNormal, 3 );
+
+	return {
+
+		positionAttribute: positionAttribute,
+		normalAttribute: normalAttribute,
+		morphedPositionAttribute: morphedPositionAttribute,
+		morphedNormalAttribute: morphedNormalAttribute
+
+	};
+
+}
+
+function mergeGroups( geometry ) {
+
+	if ( geometry.groups.length === 0 ) {
+
+		console.warn( 'THREE.BufferGeometryUtils.mergeGroups(): No groups are defined. Nothing to merge.' );
+		return geometry;
+
+	}
+
+	let groups = geometry.groups;
+
+	// sort groups by material index
+
+	groups = groups.sort( ( a, b ) => {
+
+		if ( a.materialIndex !== b.materialIndex ) return a.materialIndex - b.materialIndex;
+
+		return a.start - b.start;
+
+	} );
+
+	// create index for non-indexed geometries
+
+	if ( geometry.getIndex() === null ) {
+
+		const positionAttribute = geometry.getAttribute( 'position' );
+		const indices = [];
+
+		for ( let i = 0; i < positionAttribute.count; i += 3 ) {
+
+			indices.push( i, i + 1, i + 2 );
+
+		}
+
+		geometry.setIndex( indices );
+
+	}
+
+	// sort index
+
+	const index = geometry.getIndex();
+
+	const newIndices = [];
+
+	for ( let i = 0; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		const groupStart = group.start;
+		const groupLength = groupStart + group.count;
+
+		for ( let j = groupStart; j < groupLength; j ++ ) {
+
+			newIndices.push( index.getX( j ) );
+
+		}
+
+	}
+
+	geometry.dispose(); // Required to force buffer recreation
+	geometry.setIndex( newIndices );
+
+	// update groups indices
+
+	let start = 0;
+
+	for ( let i = 0; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		group.start = start;
+		start += group.count;
+
+	}
+
+	// merge groups
+
+	let currentGroup = groups[ 0 ];
+
+	geometry.groups = [ currentGroup ];
+
+	for ( let i = 1; i < groups.length; i ++ ) {
+
+		const group = groups[ i ];
+
+		if ( currentGroup.materialIndex === group.materialIndex ) {
+
+			currentGroup.count += group.count;
+
+		} else {
+
+			currentGroup = group;
+			geometry.groups.push( currentGroup );
+
+		}
+
+	}
+
+	return geometry;
+
+}
+
+
+/**
+ * Modifies the supplied geometry if it is non-indexed, otherwise creates a new,
+ * non-indexed geometry. Returns the geometry with smooth normals everywhere except
+ * faces that meet at an angle greater than the crease angle.
+ *
+ * @param {BufferGeometry} geometry
+ * @param {number} [creaseAngle]
+ * @return {BufferGeometry}
+ */
+function toCreasedNormals( geometry, creaseAngle = Math.PI / 3 /* 60 degrees */ ) {
+
+	const creaseDot = Math.cos( creaseAngle );
+	const hashMultiplier = ( 1 + 1e-10 ) * 1e2;
+
+	// reusable vectors
+	const verts = [ new Vector3(), new Vector3(), new Vector3() ];
+	const tempVec1 = new Vector3();
+	const tempVec2 = new Vector3();
+	const tempNorm = new Vector3();
+	const tempNorm2 = new Vector3();
+
+	// hashes a vector
+	function hashVertex( v ) {
+
+		const x = ~ ~ ( v.x * hashMultiplier );
+		const y = ~ ~ ( v.y * hashMultiplier );
+		const z = ~ ~ ( v.z * hashMultiplier );
+		return `${x},${y},${z}`;
+
+	}
+
+	// BufferGeometry.toNonIndexed() warns if the geometry is non-indexed
+	// and returns the original geometry
+	const resultGeometry = geometry.index ? geometry.toNonIndexed() : geometry;
+	const posAttr = resultGeometry.attributes.position;
+	const vertexMap = {};
+
+	// find all the normals shared by commonly located vertices
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		// add the normal to the map for all vertices
+		const normal = new Vector3().crossVectors( tempVec1, tempVec2 ).normalize();
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			if ( ! ( hash in vertexMap ) ) {
+
+				vertexMap[ hash ] = [];
+
+			}
+
+			vertexMap[ hash ].push( normal );
+
+		}
+
+	}
+
+	// average normals from all vertices that share a common location if they are within the
+	// provided crease threshold
+	const normalArray = new Float32Array( posAttr.count * 3 );
+	const normAttr = new BufferAttribute( normalArray, 3, false );
+	for ( let i = 0, l = posAttr.count / 3; i < l; i ++ ) {
+
+		// get the face normal for this vertex
+		const i3 = 3 * i;
+		const a = verts[ 0 ].fromBufferAttribute( posAttr, i3 + 0 );
+		const b = verts[ 1 ].fromBufferAttribute( posAttr, i3 + 1 );
+		const c = verts[ 2 ].fromBufferAttribute( posAttr, i3 + 2 );
+
+		tempVec1.subVectors( c, b );
+		tempVec2.subVectors( a, b );
+
+		tempNorm.crossVectors( tempVec1, tempVec2 ).normalize();
+
+		// average all normals that meet the threshold and set the normal value
+		for ( let n = 0; n < 3; n ++ ) {
+
+			const vert = verts[ n ];
+			const hash = hashVertex( vert );
+			const otherNormals = vertexMap[ hash ];
+			tempNorm2.set( 0, 0, 0 );
+
+			for ( let k = 0, lk = otherNormals.length; k < lk; k ++ ) {
+
+				const otherNorm = otherNormals[ k ];
+				if ( tempNorm.dot( otherNorm ) > creaseDot ) {
+
+					tempNorm2.add( otherNorm );
+
+				}
+
+			}
+
+			tempNorm2.normalize();
+			normAttr.setXYZ( i3 + n, tempNorm2.x, tempNorm2.y, tempNorm2.z );
+
+		}
+
+	}
+
+	resultGeometry.setAttribute( 'normal', normAttr );
+	return resultGeometry;
+
+}
+
+function mergeBufferGeometries( geometries, useGroups = false ) {
+
+	console.warn( 'THREE.BufferGeometryUtils: mergeBufferGeometries() has been renamed to mergeGeometries().' ); // @deprecated, r151
+	return mergeGeometries( geometries, useGroups );
+
+}
+
+function mergeBufferAttributes( attributes ) {
+
+	console.warn( 'THREE.BufferGeometryUtils: mergeBufferAttributes() has been renamed to mergeAttributes().' ); // @deprecated, r151
+	return mergeAttributes( attributes );
+
+}
+
+export {
+	computeMikkTSpaceTangents,
+	mergeGeometries,
+	mergeBufferGeometries,
+	mergeAttributes,
+	mergeBufferAttributes,
+	interleaveAttributes,
+	estimateBytesUsed,
+	mergeVertices,
+	toTrianglesDrawMode,
+	computeMorphedAttributes,
+	mergeGroups,
+	toCreasedNormals
+};

static/OrbitControls.js

@@ -0,0 +1,1407 @@
+import {
+	EventDispatcher,
+	MOUSE,
+	Quaternion,
+	Spherical,
+	TOUCH,
+	Vector2,
+	Vector3,
+	Plane,
+	Ray,
+	MathUtils
+} from 'three';
+
+// OrbitControls performs orbiting, dollying (zooming), and panning.
+// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
+//
+//    Orbit - left mouse / touch: one-finger move
+//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
+//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
+
+const _changeEvent = { type: 'change' };
+const _startEvent = { type: 'start' };
+const _endEvent = { type: 'end' };
+const _ray = new Ray();
+const _plane = new Plane();
+const TILT_LIMIT = Math.cos( 70 * MathUtils.DEG2RAD );
+
+class OrbitControls extends EventDispatcher {
+
+	constructor( object, domElement ) {
+
+		super();
+
+		this.object = object;
+		this.domElement = domElement;
+		this.domElement.style.touchAction = 'none'; // disable touch scroll
+
+		// Set to false to disable this control
+		this.enabled = true;
+
+		// "target" sets the location of focus, where the object orbits around
+		this.target = new Vector3();
+
+		// Sets the 3D cursor (similar to Blender), from which the maxTargetRadius takes effect
+		this.cursor = new Vector3();
+
+		// How far you can dolly in and out ( PerspectiveCamera only )
+		this.minDistance = 0;
+		this.maxDistance = Infinity;
+
+		// How far you can zoom in and out ( OrthographicCamera only )
+		this.minZoom = 0;
+		this.maxZoom = Infinity;
+
+		// Limit camera target within a spherical area around the cursor
+		this.minTargetRadius = 0;
+		this.maxTargetRadius = Infinity;
+
+		// How far you can orbit vertically, upper and lower limits.
+		// Range is 0 to Math.PI radians.
+		this.minPolarAngle = 0; // radians
+		this.maxPolarAngle = Math.PI; // radians
+
+		// How far you can orbit horizontally, upper and lower limits.
+		// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
+		this.minAzimuthAngle = - Infinity; // radians
+		this.maxAzimuthAngle = Infinity; // radians
+
+		// Set to true to enable damping (inertia)
+		// If damping is enabled, you must call controls.update() in your animation loop
+		this.enableDamping = false;
+		this.dampingFactor = 0.05;
+
+		// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
+		// Set to false to disable zooming
+		this.enableZoom = true;
+		this.zoomSpeed = 1.0;
+
+		// Set to false to disable rotating
+		this.enableRotate = true;
+		this.rotateSpeed = 1.0;
+
+		// Set to false to disable panning
+		this.enablePan = true;
+		this.panSpeed = 1.0;
+		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
+		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+		this.zoomToCursor = false;
+
+		// Set to true to automatically rotate around the target
+		// If auto-rotate is enabled, you must call controls.update() in your animation loop
+		this.autoRotate = false;
+		this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
+
+		// The four arrow keys
+		this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
+
+		// Mouse buttons
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
+
+		// Touch fingers
+		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
+
+		// for reset
+		this.target0 = this.target.clone();
+		this.position0 = this.object.position.clone();
+		this.zoom0 = this.object.zoom;
+
+		// the target DOM element for key events
+		this._domElementKeyEvents = null;
+
+		//
+		// public methods
+		//
+
+		this.getPolarAngle = function () {
+
+			return spherical.phi;
+
+		};
+
+		this.getAzimuthalAngle = function () {
+
+			return spherical.theta;
+
+		};
+
+		this.getDistance = function () {
+
+			return this.object.position.distanceTo( this.target );
+
+		};
+
+		this.listenToKeyEvents = function ( domElement ) {
+
+			domElement.addEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = domElement;
+
+		};
+
+		this.stopListenToKeyEvents = function () {
+
+			this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+			this._domElementKeyEvents = null;
+
+		};
+
+		this.saveState = function () {
+
+			scope.target0.copy( scope.target );
+			scope.position0.copy( scope.object.position );
+			scope.zoom0 = scope.object.zoom;
+
+		};
+
+		this.reset = function () {
+
+			scope.target.copy( scope.target0 );
+			scope.object.position.copy( scope.position0 );
+			scope.object.zoom = scope.zoom0;
+
+			scope.object.updateProjectionMatrix();
+			scope.dispatchEvent( _changeEvent );
+
+			scope.update();
+
+			state = STATE.NONE;
+
+		};
+
+		// this method is exposed, but perhaps it would be better if we can make it private...
+		this.update = function () {
+
+			const offset = new Vector3();
+
+			// so camera.up is the orbit axis
+			const quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
+			const quatInverse = quat.clone().invert();
+
+			const lastPosition = new Vector3();
+			const lastQuaternion = new Quaternion();
+			const lastTargetPosition = new Vector3();
+
+			const twoPI = 2 * Math.PI;
+
+			return function update( deltaTime = null ) {
+
+				const position = scope.object.position;
+
+				offset.copy( position ).sub( scope.target );
+
+				// rotate offset to "y-axis-is-up" space
+				offset.applyQuaternion( quat );
+
+				// angle from z-axis around y-axis
+				spherical.setFromVector3( offset );
+
+				if ( scope.autoRotate && state === STATE.NONE ) {
+
+					rotateLeft( getAutoRotationAngle( deltaTime ) );
+
+				}
+
+				if ( scope.enableDamping ) {
+
+					spherical.theta += sphericalDelta.theta * scope.dampingFactor;
+					spherical.phi += sphericalDelta.phi * scope.dampingFactor;
+
+				} else {
+
+					spherical.theta += sphericalDelta.theta;
+					spherical.phi += sphericalDelta.phi;
+
+				}
+
+				// restrict theta to be between desired limits
+
+				let min = scope.minAzimuthAngle;
+				let max = scope.maxAzimuthAngle;
+
+				if ( isFinite( min ) && isFinite( max ) ) {
+
+					if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
+
+					if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
+
+					if ( min <= max ) {
+
+						spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
+
+					} else {
+
+						spherical.theta = ( spherical.theta > ( min + max ) / 2 ) ?
+							Math.max( min, spherical.theta ) :
+							Math.min( max, spherical.theta );
+
+					}
+
+				}
+
+				// restrict phi to be between desired limits
+				spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
+
+				spherical.makeSafe();
+
+
+				// move target to panned location
+
+				if ( scope.enableDamping === true ) {
+
+					scope.target.addScaledVector( panOffset, scope.dampingFactor );
+
+				} else {
+
+					scope.target.add( panOffset );
+
+				}
+
+				// Limit the target distance from the cursor to create a sphere around the center of interest
+				scope.target.sub( scope.cursor );
+				scope.target.clampLength( scope.minTargetRadius, scope.maxTargetRadius );
+				scope.target.add( scope.cursor );
+
+				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
+				// we adjust zoom later in these cases
+				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
+
+					spherical.radius = clampDistance( spherical.radius );
+
+				} else {
+
+					spherical.radius = clampDistance( spherical.radius * scale );
+
+				}
+
+				offset.setFromSpherical( spherical );
+
+				// rotate offset back to "camera-up-vector-is-up" space
+				offset.applyQuaternion( quatInverse );
+
+				position.copy( scope.target ).add( offset );
+
+				scope.object.lookAt( scope.target );
+
+				if ( scope.enableDamping === true ) {
+
+					sphericalDelta.theta *= ( 1 - scope.dampingFactor );
+					sphericalDelta.phi *= ( 1 - scope.dampingFactor );
+
+					panOffset.multiplyScalar( 1 - scope.dampingFactor );
+
+				} else {
+
+					sphericalDelta.set( 0, 0, 0 );
+
+					panOffset.set( 0, 0, 0 );
+
+				}
+
+				// adjust camera position
+				let zoomChanged = false;
+				if ( scope.zoomToCursor && performCursorZoom ) {
+
+					let newRadius = null;
+					if ( scope.object.isPerspectiveCamera ) {
+
+						// move the camera down the pointer ray
+						// this method avoids floating point error
+						const prevRadius = offset.length();
+						newRadius = clampDistance( prevRadius * scale );
+
+						const radiusDelta = prevRadius - newRadius;
+						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
+						scope.object.updateMatrixWorld();
+
+					} else if ( scope.object.isOrthographicCamera ) {
+
+						// adjust the ortho camera position based on zoom changes
+						const mouseBefore = new Vector3( mouse.x, mouse.y, 0 );
+						mouseBefore.unproject( scope.object );
+
+						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+						scope.object.updateProjectionMatrix();
+						zoomChanged = true;
+
+						const mouseAfter = new Vector3( mouse.x, mouse.y, 0 );
+						mouseAfter.unproject( scope.object );
+
+						scope.object.position.sub( mouseAfter ).add( mouseBefore );
+						scope.object.updateMatrixWorld();
+
+						newRadius = offset.length();
+
+					} else {
+
+						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
+						scope.zoomToCursor = false;
+
+					}
+
+					// handle the placement of the target
+					if ( newRadius !== null ) {
+
+						if ( this.screenSpacePanning ) {
+
+							// position the orbit target in front of the new camera position
+							scope.target.set( 0, 0, - 1 )
+								.transformDirection( scope.object.matrix )
+								.multiplyScalar( newRadius )
+								.add( scope.object.position );
+
+						} else {
+
+							// get the ray and translation plane to compute target
+							_ray.origin.copy( scope.object.position );
+							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
+							// extremely large values
+							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
+
+								object.lookAt( scope.target );
+
+							} else {
+
+								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+								_ray.intersectPlane( _plane, scope.target );
+
+							}
+
+						}
+
+					}
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+					scope.object.updateProjectionMatrix();
+					zoomChanged = true;
+
+				}
+
+				scale = 1;
+				performCursorZoom = false;
+
+				// update condition is:
+				// min(camera displacement, camera rotation in radians)^2 > EPS
+				// using small-angle approximation cos(x/2) = 1 - x^2 / 8
+
+				if ( zoomChanged ||
+					lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+					8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ||
+					lastTargetPosition.distanceToSquared( scope.target ) > 0 ) {
+
+					scope.dispatchEvent( _changeEvent );
+
+					lastPosition.copy( scope.object.position );
+					lastQuaternion.copy( scope.object.quaternion );
+					lastTargetPosition.copy( scope.target );
+
+					zoomChanged = false;
+
+					return true;
+
+				}
+
+				return false;
+
+			};
+
+		}();
+
+		this.dispose = function () {
+
+			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
+
+			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+			scope.domElement.removeEventListener( 'pointercancel', onPointerUp );
+			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
+
+			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+
+			if ( scope._domElementKeyEvents !== null ) {
+
+				scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
+				scope._domElementKeyEvents = null;
+
+			}
+
+			//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
+
+		};
+
+		//
+		// internals
+		//
+
+		const scope = this;
+
+		const STATE = {
+			NONE: - 1,
+			ROTATE: 0,
+			DOLLY: 1,
+			PAN: 2,
+			TOUCH_ROTATE: 3,
+			TOUCH_PAN: 4,
+			TOUCH_DOLLY_PAN: 5,
+			TOUCH_DOLLY_ROTATE: 6
+		};
+
+		let state = STATE.NONE;
+
+		const EPS = 0.000001;
+
+		// current position in spherical coordinates
+		const spherical = new Spherical();
+		const sphericalDelta = new Spherical();
+
+		let scale = 1;
+		const panOffset = new Vector3();
+
+		const rotateStart = new Vector2();
+		const rotateEnd = new Vector2();
+		const rotateDelta = new Vector2();
+
+		const panStart = new Vector2();
+		const panEnd = new Vector2();
+		const panDelta = new Vector2();
+
+		const dollyStart = new Vector2();
+		const dollyEnd = new Vector2();
+		const dollyDelta = new Vector2();
+
+		const dollyDirection = new Vector3();
+		const mouse = new Vector2();
+		let performCursorZoom = false;
+
+		const pointers = [];
+		const pointerPositions = {};
+
+		function getAutoRotationAngle( deltaTime ) {
+
+			if ( deltaTime !== null ) {
+
+				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+			} else {
+
+				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+			}
+
+		}
+
+		function getZoomScale() {
+
+			return Math.pow( 0.95, scope.zoomSpeed );
+
+		}
+
+		function rotateLeft( angle ) {
+
+			sphericalDelta.theta -= angle;
+
+		}
+
+		function rotateUp( angle ) {
+
+			sphericalDelta.phi -= angle;
+
+		}
+
+		const panLeft = function () {
+
+			const v = new Vector3();
+
+			return function panLeft( distance, objectMatrix ) {
+
+				v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
+				v.multiplyScalar( - distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		const panUp = function () {
+
+			const v = new Vector3();
+
+			return function panUp( distance, objectMatrix ) {
+
+				if ( scope.screenSpacePanning === true ) {
+
+					v.setFromMatrixColumn( objectMatrix, 1 );
+
+				} else {
+
+					v.setFromMatrixColumn( objectMatrix, 0 );
+					v.crossVectors( scope.object.up, v );
+
+				}
+
+				v.multiplyScalar( distance );
+
+				panOffset.add( v );
+
+			};
+
+		}();
+
+		// deltaX and deltaY are in pixels; right and down are positive
+		const pan = function () {
+
+			const offset = new Vector3();
+
+			return function pan( deltaX, deltaY ) {
+
+				const element = scope.domElement;
+
+				if ( scope.object.isPerspectiveCamera ) {
+
+					// perspective
+					const position = scope.object.position;
+					offset.copy( position ).sub( scope.target );
+					let targetDistance = offset.length();
+
+					// half of the fov is center to top of screen
+					targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
+
+					// we use only clientHeight here so aspect ratio does not distort speed
+					panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
+					panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
+
+				} else if ( scope.object.isOrthographicCamera ) {
+
+					// orthographic
+					panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
+					panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
+
+				} else {
+
+					// camera neither orthographic nor perspective
+					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
+					scope.enablePan = false;
+
+				}
+
+			};
+
+		}();
+
+		function dollyOut( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale /= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function dollyIn( dollyScale ) {
+
+			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
+
+				scale *= dollyScale;
+
+			} else {
+
+				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
+				scope.enableZoom = false;
+
+			}
+
+		}
+
+		function updateMouseParameters( event ) {
+
+			if ( ! scope.zoomToCursor ) {
+
+				return;
+
+			}
+
+			performCursorZoom = true;
+
+			const rect = scope.domElement.getBoundingClientRect();
+			const x = event.clientX - rect.left;
+			const y = event.clientY - rect.top;
+			const w = rect.width;
+			const h = rect.height;
+
+			mouse.x = ( x / w ) * 2 - 1;
+			mouse.y = - ( y / h ) * 2 + 1;
+
+			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
+
+		}
+
+		function clampDistance( dist ) {
+
+			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
+
+		}
+
+		//
+		// event callbacks - update the object state
+		//
+
+		function handleMouseDownRotate( event ) {
+
+			rotateStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownDolly( event ) {
+
+			updateMouseParameters( event );
+			dollyStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseDownPan( event ) {
+
+			panStart.set( event.clientX, event.clientY );
+
+		}
+
+		function handleMouseMoveRotate( event ) {
+
+			rotateEnd.set( event.clientX, event.clientY );
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMoveDolly( event ) {
+
+			dollyEnd.set( event.clientX, event.clientY );
+
+			dollyDelta.subVectors( dollyEnd, dollyStart );
+
+			if ( dollyDelta.y > 0 ) {
+
+				dollyOut( getZoomScale() );
+
+			} else if ( dollyDelta.y < 0 ) {
+
+				dollyIn( getZoomScale() );
+
+			}
+
+			dollyStart.copy( dollyEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseMovePan( event ) {
+
+			panEnd.set( event.clientX, event.clientY );
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+			scope.update();
+
+		}
+
+		function handleMouseWheel( event ) {
+
+			updateMouseParameters( event );
+
+			if ( event.deltaY < 0 ) {
+
+				dollyIn( getZoomScale() );
+
+			} else if ( event.deltaY > 0 ) {
+
+				dollyOut( getZoomScale() );
+
+			}
+
+			scope.update();
+
+		}
+
+		function handleKeyDown( event ) {
+
+			let needsUpdate = false;
+
+			switch ( event.code ) {
+
+				case scope.keys.UP:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.BOTTOM:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, - scope.keyPanSpeed );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.LEFT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+				case scope.keys.RIGHT:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( - scope.keyPanSpeed, 0 );
+
+					}
+
+					needsUpdate = true;
+					break;
+
+			}
+
+			if ( needsUpdate ) {
+
+				// prevent the browser from scrolling on cursor keys
+				event.preventDefault();
+
+				scope.update();
+
+			}
+
+
+		}
+
+		function handleTouchStartRotate() {
+
+			if ( pointers.length === 1 ) {
+
+				rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
+
+			} else {
+
+				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
+				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+
+				rotateStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartPan() {
+
+			if ( pointers.length === 1 ) {
+
+				panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
+
+			} else {
+
+				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
+				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+
+				panStart.set( x, y );
+
+			}
+
+		}
+
+		function handleTouchStartDolly() {
+
+			const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
+			const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyStart.set( 0, distance );
+
+		}
+
+		function handleTouchStartDollyPan() {
+
+			if ( scope.enableZoom ) handleTouchStartDolly();
+
+			if ( scope.enablePan ) handleTouchStartPan();
+
+		}
+
+		function handleTouchStartDollyRotate() {
+
+			if ( scope.enableZoom ) handleTouchStartDolly();
+
+			if ( scope.enableRotate ) handleTouchStartRotate();
+
+		}
+
+		function handleTouchMoveRotate( event ) {
+
+			if ( pointers.length == 1 ) {
+
+				rotateEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				rotateEnd.set( x, y );
+
+			}
+
+			rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
+
+			const element = scope.domElement;
+
+			rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
+
+			rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
+
+			rotateStart.copy( rotateEnd );
+
+		}
+
+		function handleTouchMovePan( event ) {
+
+			if ( pointers.length === 1 ) {
+
+				panEnd.set( event.pageX, event.pageY );
+
+			} else {
+
+				const position = getSecondPointerPosition( event );
+
+				const x = 0.5 * ( event.pageX + position.x );
+				const y = 0.5 * ( event.pageY + position.y );
+
+				panEnd.set( x, y );
+
+			}
+
+			panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
+
+			pan( panDelta.x, panDelta.y );
+
+			panStart.copy( panEnd );
+
+		}
+
+		function handleTouchMoveDolly( event ) {
+
+			const position = getSecondPointerPosition( event );
+
+			const dx = event.pageX - position.x;
+			const dy = event.pageY - position.y;
+
+			const distance = Math.sqrt( dx * dx + dy * dy );
+
+			dollyEnd.set( 0, distance );
+
+			dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
+
+			dollyOut( dollyDelta.y );
+
+			dollyStart.copy( dollyEnd );
+
+		}
+
+		function handleTouchMoveDollyPan( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enablePan ) handleTouchMovePan( event );
+
+		}
+
+		function handleTouchMoveDollyRotate( event ) {
+
+			if ( scope.enableZoom ) handleTouchMoveDolly( event );
+
+			if ( scope.enableRotate ) handleTouchMoveRotate( event );
+
+		}
+
+		//
+		// event handlers - FSM: listen for events and reset state
+		//
+
+		function onPointerDown( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( pointers.length === 0 ) {
+
+				scope.domElement.setPointerCapture( event.pointerId );
+
+				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			//
+
+			addPointer( event );
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchStart( event );
+
+			} else {
+
+				onMouseDown( event );
+
+			}
+
+		}
+
+		function onPointerMove( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			if ( event.pointerType === 'touch' ) {
+
+				onTouchMove( event );
+
+			} else {
+
+				onMouseMove( event );
+
+			}
+
+		}
+
+		function onPointerUp( event ) {
+
+			removePointer( event );
+
+			if ( pointers.length === 0 ) {
+
+				scope.domElement.releasePointerCapture( event.pointerId );
+
+				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+			}
+
+			scope.dispatchEvent( _endEvent );
+
+			state = STATE.NONE;
+
+		}
+
+		function onMouseDown( event ) {
+
+			let mouseAction;
+
+			switch ( event.button ) {
+
+				case 0:
+
+					mouseAction = scope.mouseButtons.LEFT;
+					break;
+
+				case 1:
+
+					mouseAction = scope.mouseButtons.MIDDLE;
+					break;
+
+				case 2:
+
+					mouseAction = scope.mouseButtons.RIGHT;
+					break;
+
+				default:
+
+					mouseAction = - 1;
+
+			}
+
+			switch ( mouseAction ) {
+
+				case MOUSE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseDownDolly( event );
+
+					state = STATE.DOLLY;
+
+					break;
+
+				case MOUSE.ROTATE:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					} else {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					}
+
+					break;
+
+				case MOUSE.PAN:
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						if ( scope.enableRotate === false ) return;
+
+						handleMouseDownRotate( event );
+
+						state = STATE.ROTATE;
+
+					} else {
+
+						if ( scope.enablePan === false ) return;
+
+						handleMouseDownPan( event );
+
+						state = STATE.PAN;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onMouseMove( event ) {
+
+			switch ( state ) {
+
+				case STATE.ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleMouseMoveRotate( event );
+
+					break;
+
+				case STATE.DOLLY:
+
+					if ( scope.enableZoom === false ) return;
+
+					handleMouseMoveDolly( event );
+
+					break;
+
+				case STATE.PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleMouseMovePan( event );
+
+					break;
+
+			}
+
+		}
+
+		function onMouseWheel( event ) {
+
+			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
+
+			event.preventDefault();
+
+			scope.dispatchEvent( _startEvent );
+
+			handleMouseWheel( event );
+
+			scope.dispatchEvent( _endEvent );
+
+		}
+
+		function onKeyDown( event ) {
+
+			if ( scope.enabled === false || scope.enablePan === false ) return;
+
+			handleKeyDown( event );
+
+		}
+
+		function onTouchStart( event ) {
+
+			trackPointer( event );
+
+			switch ( pointers.length ) {
+
+				case 1:
+
+					switch ( scope.touches.ONE ) {
+
+						case TOUCH.ROTATE:
+
+							if ( scope.enableRotate === false ) return;
+
+							handleTouchStartRotate();
+
+							state = STATE.TOUCH_ROTATE;
+
+							break;
+
+						case TOUCH.PAN:
+
+							if ( scope.enablePan === false ) return;
+
+							handleTouchStartPan();
+
+							state = STATE.TOUCH_PAN;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				case 2:
+
+					switch ( scope.touches.TWO ) {
+
+						case TOUCH.DOLLY_PAN:
+
+							if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+							handleTouchStartDollyPan();
+
+							state = STATE.TOUCH_DOLLY_PAN;
+
+							break;
+
+						case TOUCH.DOLLY_ROTATE:
+
+							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+							handleTouchStartDollyRotate();
+
+							state = STATE.TOUCH_DOLLY_ROTATE;
+
+							break;
+
+						default:
+
+							state = STATE.NONE;
+
+					}
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+			if ( state !== STATE.NONE ) {
+
+				scope.dispatchEvent( _startEvent );
+
+			}
+
+		}
+
+		function onTouchMove( event ) {
+
+			trackPointer( event );
+
+			switch ( state ) {
+
+				case STATE.TOUCH_ROTATE:
+
+					if ( scope.enableRotate === false ) return;
+
+					handleTouchMoveRotate( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_PAN:
+
+					if ( scope.enablePan === false ) return;
+
+					handleTouchMovePan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_PAN:
+
+					if ( scope.enableZoom === false && scope.enablePan === false ) return;
+
+					handleTouchMoveDollyPan( event );
+
+					scope.update();
+
+					break;
+
+				case STATE.TOUCH_DOLLY_ROTATE:
+
+					if ( scope.enableZoom === false && scope.enableRotate === false ) return;
+
+					handleTouchMoveDollyRotate( event );
+
+					scope.update();
+
+					break;
+
+				default:
+
+					state = STATE.NONE;
+
+			}
+
+		}
+
+		function onContextMenu( event ) {
+
+			if ( scope.enabled === false ) return;
+
+			event.preventDefault();
+
+		}
+
+		function addPointer( event ) {
+
+			pointers.push( event );
+
+		}
+
+		function removePointer( event ) {
+
+			delete pointerPositions[ event.pointerId ];
+
+			for ( let i = 0; i < pointers.length; i ++ ) {
+
+				if ( pointers[ i ].pointerId == event.pointerId ) {
+
+					pointers.splice( i, 1 );
+					return;
+
+				}
+
+			}
+
+		}
+
+		function trackPointer( event ) {
+
+			let position = pointerPositions[ event.pointerId ];
+
+			if ( position === undefined ) {
+
+				position = new Vector2();
+				pointerPositions[ event.pointerId ] = position;
+
+			}
+
+			position.set( event.pageX, event.pageY );
+
+		}
+
+		function getSecondPointerPosition( event ) {
+
+			const pointer = ( event.pointerId === pointers[ 0 ].pointerId ) ? pointers[ 1 ] : pointers[ 0 ];
+
+			return pointerPositions[ pointer.pointerId ];
+
+		}
+
+		//
+
+		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
+
+		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
+		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
+		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+		// force an update at start
+
+		this.update();
+
+	}
+
+}
+
+export { OrbitControls };

static/teaser_video_final.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3508c7e22570e791783fcc0e66583b79e0bf6baa07f65836885a4519861c7e4b
+size 13240865

unish/heads/align_net.py

@@ -80,7 +80,7 @@ class TimeStepRoPE1D(nn.Module):
 
 
 class TransformerDecoderLayer(nn.Module):
-    """单层Transformer Decoder with RoPE support"""
+    """Single layer Transformer Decoder with RoPE support"""
     
     def __init__(self, hidden_dim=512, num_heads=8, ff_dim=1024, dropout=0.1, use_rope=True):
         super().__init__()
@@ -287,7 +287,7 @@ class CrossViewTransformerDecoderLayer(nn.Module):
             # RoPE for timestep embedding
             self.timestep_rope = TimeStepRoPE1D(freq=100.0)
         else:
-            # Self Attention层
+            # Self Attention layer
             self.self_attention = nn.MultiheadAttention(
                 embed_dim=hidden_dim,
                 num_heads=num_heads,
@@ -295,7 +295,7 @@ class CrossViewTransformerDecoderLayer(nn.Module):
                 batch_first=True
             )
             
-            # Cross Attention层
+            # Cross Attention layer
             self.cross_attention = nn.MultiheadAttention(
                 embed_dim=hidden_dim,
                 num_heads=num_heads,

unish/pi3/models/layers/attention.py

@@ -239,8 +239,8 @@ class FlashCrossAttentionRope(CrossAttentionRope):
     def forward(self, query: Tensor, key: Tensor, value: Tensor, attn_bias=None, qpos=None, kpos=None) -> Tensor:
         B, N, C = query.shape
         _, M, _ = key.shape
-
-        # 1. 投射 query, key, value 并调整维度为 (B, num_heads, Seq_Len, head_dim)
+        
+        # 1. Project query, key, value and resize to (B, num_heads, Seq_Len, head_dim)
         q = self.q_proj(query).reshape(B, N, self.num_heads, C // self.num_heads).permute(0, 2, 1, 3)
         k = self.k_proj(key).reshape(B, M, self.num_heads, C // self.num_heads).permute(0, 2, 1, 3)
         v = self.v_proj(value).reshape(B, M, self.num_heads, C // self.num_heads).permute(0, 2, 1, 3)