@spatialwalk/avatarkit 1.0.0-beta.77 → 1.0.0-beta.78

package/dist/{index-CTh2onXJ.js → index-DEJMvfST.js}

@@ -1400,6 +1400,32 @@ function base64FromBytes$1(arr) {
 function isSet$1(value) {
   return value !== null && value !== void 0;
 }
+function convertProtoFlameToWasmParams(protoFlame) {
+  var _a;
+  return {
+    translation: protoFlame.translation || [0, 0, 0],
+    rotation: protoFlame.rotation || [0, 0, 0],
+    neck_pose: protoFlame.neckPose || [0, 0, 0],
+    jaw_pose: protoFlame.jawPose || [0, 0, 0],
+    eyes_pose: protoFlame.eyePose || [0, 0, 0, 0, 0, 0],
+    eyelid: protoFlame.eyeLid || [0, 0],
+    expr_params: protoFlame.expression || [],
+    shape_params: [],
+    // Realtime doesn't provide shape params, use default
+    has_eyelid: (((_a = protoFlame.eyeLid) == null ? void 0 : _a.length) || 0) > 0
+  };
+}
+function convertWasmParamsToProtoFlame(wasmParams) {
+  return {
+    translation: wasmParams.translation || [0, 0, 0],
+    rotation: wasmParams.rotation || [0, 0, 0],
+    neckPose: wasmParams.neck_pose || [0, 0, 0],
+    jawPose: wasmParams.jaw_pose || [0, 0, 0],
+    eyePose: wasmParams.eyes_pose || [0, 0, 0, 0, 0, 0],
+    eyeLid: wasmParams.eyelid || [0, 0],
+    expression: wasmParams.expr_params || []
+  };
+}
 const POSTHOG_HOST_INTL = "https://i.spatialwalk.ai";
 const POSTHOG_API_KEY_INTL = "phc_IFTLa6Z6VhTaNvsxB7klvG2JeNwcSpnnwz8YvZRC96Q";
 function getPostHogConfig(_environment) {
@@ -1452,32 +1478,6 @@ const APP_CONFIG = {
     }
   }
 };
-function convertProtoFlameToWasmParams(protoFlame) {
-  var _a;
-  return {
-    translation: protoFlame.translation || [0, 0, 0],
-    rotation: protoFlame.rotation || [0, 0, 0],
-    neck_pose: protoFlame.neckPose || [0, 0, 0],
-    jaw_pose: protoFlame.jawPose || [0, 0, 0],
-    eyes_pose: protoFlame.eyePose || [0, 0, 0, 0, 0, 0],
-    eyelid: protoFlame.eyeLid || [0, 0],
-    expr_params: protoFlame.expression || [],
-    shape_params: [],
-    // Realtime doesn't provide shape params, use default
-    has_eyelid: (((_a = protoFlame.eyeLid) == null ? void 0 : _a.length) || 0) > 0
-  };
-}
-function convertWasmParamsToProtoFlame(wasmParams) {
-  return {
-    translation: wasmParams.translation || [0, 0, 0],
-    rotation: wasmParams.rotation || [0, 0, 0],
-    neckPose: wasmParams.neck_pose || [0, 0, 0],
-    jawPose: wasmParams.jaw_pose || [0, 0, 0],
-    eyePose: wasmParams.eyes_pose || [0, 0, 0, 0, 0, 0],
-    eyeLid: wasmParams.eyelid || [0, 0],
-    expression: wasmParams.expr_params || []
-  };
-}
 var t = "undefined" != typeof window ? window : void 0, i = "undefined" != typeof globalThis ? globalThis : t;
 "undefined" == typeof self && (i.self = i), "undefined" == typeof File && (i.File = function() {
 });
@@ -7943,7 +7943,8 @@ function getCommonFields() {
   return {
     platform: "Web",
     sdk_version: sdkVersion,
-    environment: currentEnvironment || "unknown",
+    env: currentEnvironment || "unknown",
+    // environment 缩写为 env
     app_id: logContext.app_id || "",
     user_id: logContext.user_id || "",
     // 没有就传空字符串
@@ -8138,7 +8139,6 @@ function cleanupPostHog() {
 }
 function logEvent(event, level = "info", contents = {}) {
   const context = {
-    environment: currentEnvironment || "unknown",
     sessionToken: idManager.getSessionToken() ?? "",
     userId: idManager.getUserId() ?? "",
     ...contents
@@ -8243,7 +8243,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-BtOgYxcz.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-BNj8LpDw.js");
     const { AvatarSDK: AvatarSDK2 } = await Promise.resolve().then(() => AvatarSDK$1);
     const audioFormat = AvatarSDK2.getAudioFormat();
     this.streamingPlayer = new StreamingAudioPlayer({
@@ -8442,6 +8442,39 @@ const _AnimationPlayer = class _AnimationPlayer {
 };
 __publicField(_AnimationPlayer, "audioUnlocked", false);
 let AnimationPlayer = _AnimationPlayer;
+const FLAME_FRAME_RATE = 25;
+const START_TRANSITION_DURATION_S = 0.2;
+const END_TRANSITION_DURATION_S = 1.6;
+const START_TRANSITION_DURATION_MS = START_TRANSITION_DURATION_S * 1e3;
+const END_TRANSITION_DURATION_MS = END_TRANSITION_DURATION_S * 1e3;
+const AUDIO_SAMPLE_RATE = 16e3;
+const AUDIO_CHANNELS = 1;
+const AUDIO_BYTES_PER_SAMPLE = 2;
+const AUDIO_BYTES_PER_SECOND = AUDIO_SAMPLE_RATE * AUDIO_CHANNELS * AUDIO_BYTES_PER_SAMPLE;
+const BEZIER_CURVES$1 = {
+  /** 下颌: 快速启动，平滑停止 */
+  jaw: [0.2, 0.8, 0.3, 1],
+  /** 表情: 平滑 S 曲线 */
+  expression: [0.4, 0, 0.2, 1],
+  /** 眼部: 柔和 S 曲线 */
+  eye: [0.3, 0, 0.1, 1],
+  /** 颈部: 慢启动，惯性停止 */
+  neck: [0.1, 0.2, 0.2, 1],
+  /** 全局: 标准 ease-in-out */
+  global: [0.42, 0, 0.58, 1]
+};
+const TIME_SCALE = {
+  /** 下颌: 40% 时间完成 (1/2.5) */
+  jaw: 2.5,
+  /** 表情: 62.5% 时间完成 (1/1.6) */
+  expression: 1.6,
+  /** 眼部: 77% 时间完成 (1/1.3) */
+  eye: 1.3,
+  /** 颈部: 100% 时间完成 */
+  neck: 1,
+  /** 全局: 100% 时间完成 */
+  global: 1
+};
 const DEFAULT_SDK_CONFIG = {
   [Environment.cn]: "https://api.open.spatialwalk.top",
   [Environment.intl]: "https://api.intl.spatialwalk.cloud"
@@ -8756,52 +8789,6 @@ class AvatarCoreMemoryManager {
     flatData.set(this.module.HEAPF32.subarray(floatOffset, floatOffset + totalFloats));
     return flatData;
   }
-  /**
-   * 🆕 读取 AvatarFaceGeometryArray 结构体数据 (WebGPU优化路径)
-   * 每个Face Geometry: center[3] + scale + quat[4] = 8 floats
-   */
-  readFaceGeometryArray(arrayPtr) {
-    if (!arrayPtr) {
-      throw new Error("Invalid face geometry array pointer");
-    }
-    const geometriesPtr = this.module.getValue(arrayPtr, "i32");
-    const geometryCount = this.module.getValue(arrayPtr + 4, "i32");
-    if (geometryCount === 0 || !geometriesPtr) {
-      return null;
-    }
-    const floatsPerGeometry = 8;
-    const totalFloats = geometryCount * floatsPerGeometry;
-    const floatOffset = geometriesPtr / 4;
-    return this.module.HEAPF32.subarray(floatOffset, floatOffset + totalFloats);
-  }
-  /**
-   * 🆕 读取 AvatarOriginalSplatArray 结构体数据 (WebGPU优化路径)
-   * 每个Original Splat: 15 floats + 1 int32 = 64 bytes
-   */
-  readOriginalSplatArray(arrayPtr) {
-    if (!arrayPtr) {
-      throw new Error("Invalid original splat array pointer");
-    }
-    const splatsPtr = this.module.getValue(arrayPtr, "i32");
-    const splatCount = this.module.getValue(arrayPtr + 4, "i32");
-    if (splatCount === 0 || !splatsPtr) {
-      return null;
-    }
-    const floatsPerSplat = 16;
-    const totalFloats = splatCount * floatsPerSplat;
-    const splatData = new Float32Array(totalFloats);
-    const startFloatOffset = splatsPtr / 4;
-    for (let i2 = 0; i2 < splatCount; i2++) {
-      const splatFloatOffset = startFloatOffset + i2 * 16;
-      for (let j2 = 0; j2 < 15; j2++) {
-        splatData[i2 * 16 + j2] = this.module.HEAPF32[splatFloatOffset + j2];
-      }
-      const bindingByteOffset = splatsPtr + i2 * 64 + 60;
-      const bindingInt = this.module.getValue(bindingByteOffset, "i32");
-      splatData[i2 * 16 + 15] = bindingInt;
-    }
-    return { data: splatData, count: splatCount };
-  }
   /**
    * 读取AvatarMeshData结构体数据
    */
@@ -9063,13 +9050,7 @@ class AvatarCoreAdapter {
       // core, character, x, y, z
       resetEyeTracking: this.wasmModule.cwrap("avatar_core_reset_eye_tracking", "number", ["number"]),
       // FLAME information query
-      getFlameInfo: this.wasmModule.cwrap("avatar_core_get_flame_info", "number", ["number", "number", "number", "number"]),
-      // 🆕 GPU 相关 API
-      computeFrameAsFaceGeometry: this.wasmModule.cwrap("avatar_core_compute_frame_as_face_geometry", "number", ["number", "number", "number", "number"]),
-      getOriginalSplats: this.wasmModule.cwrap("avatar_core_get_original_splats", "number", ["number", "number", "number"]),
-      getFLAMETemplateData: this.wasmModule.cwrap("avatar_core_get_flame_template_data", "number", ["number", "number", "number"]),
-      freeFaceGeometry: this.wasmModule.cwrap("avatar_core_free_face_geometry", null, ["number"]),
-      freeOriginalSplats: this.wasmModule.cwrap("avatar_core_free_original_splats", null, ["number"])
+      getFlameInfo: this.wasmModule.cwrap("avatar_core_get_flame_info", "number", ["number", "number", "number", "number"])
     };
   }
   /**
@@ -9722,181 +9703,6 @@ class AvatarCoreAdapter {
     }
     return null;
   }
-  // ==================== 🆕 GPU 相关方法 ====================
-  /**
-   * 🆕 GPU 路径: 计算帧并返回 Face Geometry 数据
-   */
-  async computeFrameAsFaceGeometry(params) {
-    if (!this.isCharacterLoaded) {
-      throw new Error("Character not loaded");
-    }
-    let outputPtr = null;
-    let paramsPtr = null;
-    try {
-      const frameIndex = (params == null ? void 0 : params.frameIndex) ?? 0;
-      const characterId = params == null ? void 0 : params.characterId;
-      paramsPtr = await this.getAnimationFrameParams(frameIndex, characterId);
-      outputPtr = this.wasmModule._malloc(12);
-      const result2 = this.api.computeFrameAsFaceGeometry(
-        this.coreHandle,
-        this.characterHandle,
-        paramsPtr,
-        outputPtr
-      );
-      this.checkError(result2, "avatar_core_compute_frame_as_face_geometry");
-      return this.memoryManager.readFaceGeometryArray(outputPtr);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      logger.errorWithError("❌ computeFrameAsFaceGeometry failed:", errorMessage);
-      throw error;
-    } finally {
-      if (paramsPtr !== null) {
-        this.wasmModule._free(paramsPtr);
-      }
-      if (outputPtr !== null) {
-        this.api.freeFaceGeometry(outputPtr);
-        this.wasmModule._free(outputPtr);
-      }
-    }
-  }
-  /**
-   * 🆕 获取原始3DGS点数据 (一次性调用)
-   */
-  async getOriginalSplatsData() {
-    if (!this.isCharacterLoaded) {
-      throw new Error("Character not loaded");
-    }
-    let outputPtr = null;
-    try {
-      outputPtr = this.wasmModule._malloc(8);
-      const result2 = this.api.getOriginalSplats(
-        this.coreHandle,
-        this.characterHandle,
-        outputPtr
-      );
-      this.checkError(result2, "avatar_core_get_original_splats");
-      const splatData = this.memoryManager.readOriginalSplatArray(outputPtr);
-      if (splatData) {
-        logger.log(`✅ Loaded ${splatData.count} original splats for WebGPU (${(splatData.data.byteLength / 1024 / 1024).toFixed(2)} MB)`);
-      }
-      return splatData;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      logger.errorWithError("❌ getOriginalSplatsData failed:", errorMessage);
-      throw error;
-    } finally {
-      if (outputPtr !== null) {
-        this.api.freeOriginalSplats(outputPtr);
-        this.wasmModule._free(outputPtr);
-      }
-    }
-  }
-  /**
-   * 🆕 获取角色 Shape 参数
-   */
-  async getCharacterShapeParams(characterId) {
-    if (!this.isInitialized) {
-      throw new Error("Avatar Core not initialized");
-    }
-    const charHandle = characterId ? this.characterHandles.get(characterId) || null : this.characterHandle;
-    if (!charHandle) {
-      throw new Error("Character not loaded");
-    }
-    try {
-      const paramsPtr = this.wasmModule._malloc(300 * 4);
-      const result2 = this.api.getCharacterShapeParams(charHandle, paramsPtr);
-      this.checkError(result2, "avatar_core_get_character_shape_params");
-      const buffer = this.wasmModule.HEAPU8.buffer;
-      const params = Array.from(new Float32Array(buffer, paramsPtr, 300));
-      this.wasmModule._free(paramsPtr);
-      return { params };
-    } catch (error) {
-      logger.errorWithError("getCharacterShapeParams failed:", error);
-      throw error;
-    }
-  }
-  /**
-   * 🆕 获取 FLAME 模板数据（用于 GPU FLAME Pipeline）
-   */
-  async getFLAMETemplateData(characterId) {
-    if (!this.isInitialized) {
-      throw new Error("Avatar Core not initialized");
-    }
-    const characterHandle = characterId ? this.characterHandles.get(characterId) || null : this.characterHandle;
-    let structPtr = null;
-    try {
-      structPtr = this.wasmModule._malloc(64);
-      const result2 = this.api.getFLAMETemplateData(
-        this.coreHandle,
-        characterHandle || 0,
-        structPtr
-      );
-      this.checkError(result2, "avatar_core_get_flame_template_data");
-      const vTemplatePtr = this.wasmModule.getValue(structPtr, "i32");
-      const vertexCount = this.wasmModule.getValue(structPtr + 4, "i32");
-      const shapedirsPtr = this.wasmModule.getValue(structPtr + 8, "i32");
-      const shapeParamCount = this.wasmModule.getValue(structPtr + 12, "i32");
-      const posedirsPtr = this.wasmModule.getValue(structPtr + 16, "i32");
-      const poseParamCount = this.wasmModule.getValue(structPtr + 20, "i32");
-      const jRegressorPtr = this.wasmModule.getValue(structPtr + 24, "i32");
-      const jointCount = this.wasmModule.getValue(structPtr + 28, "i32");
-      const lbsWeightsPtr = this.wasmModule.getValue(structPtr + 32, "i32");
-      const parentsPtr = this.wasmModule.getValue(structPtr + 36, "i32");
-      const facesPtr = this.wasmModule.getValue(structPtr + 40, "i32");
-      const faceCount = this.wasmModule.getValue(structPtr + 44, "i32");
-      const staticOffsetPtr = this.wasmModule.getValue(structPtr + 48, "i32");
-      const staticOffsetCount = this.wasmModule.getValue(structPtr + 52, "i32");
-      const buffer = this.wasmModule.HEAPU8.buffer;
-      const vTemplate = new Float32Array(buffer, vTemplatePtr, vertexCount * 3).slice();
-      const shapedirs = new Float32Array(buffer, shapedirsPtr, vertexCount * 3 * shapeParamCount).slice();
-      const posedirs = new Float32Array(buffer, posedirsPtr, vertexCount * 3 * poseParamCount).slice();
-      const effectiveJointCount = jointCount > 0 ? jointCount : 5;
-      const jRegressor = new Float32Array(buffer, jRegressorPtr, effectiveJointCount * vertexCount).slice();
-      const lbsWeights = new Float32Array(buffer, lbsWeightsPtr, vertexCount * effectiveJointCount).slice();
-      const parents = new Int32Array(buffer, parentsPtr, effectiveJointCount).slice();
-      const faces = new Uint32Array(buffer, facesPtr, faceCount * 3).slice();
-      const staticOffset = staticOffsetPtr && staticOffsetCount > 0 ? new Float32Array(buffer, staticOffsetPtr, staticOffsetCount * 3).slice() : null;
-      const optimizedShapedirs = transposeBlendshapeData(shapedirs, vertexCount, shapeParamCount);
-      const optimizedPosedirs = transposeBlendshapeData(posedirs, vertexCount, poseParamCount);
-      logger.log(`FLAME template data retrieved (${((vTemplate.byteLength + optimizedShapedirs.byteLength + optimizedPosedirs.byteLength) / 1024 / 1024).toFixed(2)} MB)`);
-      return {
-        vTemplate,
-        vertexCount,
-        shapedirs: optimizedShapedirs,
-        shapeParamCount,
-        posedirs: optimizedPosedirs,
-        poseParamCount,
-        jRegressor,
-        jointCount: effectiveJointCount,
-        lbsWeights,
-        parents,
-        faces,
-        faceCount,
-        staticOffset,
-        staticOffsetCount
-      };
-    } catch (error) {
-      logger.errorWithError("getFLAMETemplateData failed:", error);
-      throw error;
-    } finally {
-      if (structPtr !== null) {
-        this.wasmModule._free(structPtr);
-      }
-    }
-  }
-}
-function transposeBlendshapeData(data, vertexCount, paramCount) {
-  const result2 = new Float32Array(data.length);
-  for (let p2 = 0; p2 < paramCount; p2++) {
-    for (let v2 = 0; v2 < vertexCount; v2++) {
-      for (let c2 = 0; c2 < 3; c2++) {
-        const srcIdx = v2 * 3 * paramCount + c2 * paramCount + p2;
-        const dstIdx = p2 * vertexCount * 3 + v2 * 3 + c2;
-        result2[dstIdx] = data[srcIdx];
-      }
-    }
-  }
-  return result2;
 }
 class AvatarSDK {
   /**
@@ -10163,7 +9969,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.77");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.78");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -12000,8 +11806,6 @@ class AvatarController {
     // Character handle for multi-character support
     __publicField(this, "characterId", null);
     // Character ID for multi-character support (used for eye tracking)
-    __publicField(this, "useGPUPath", false);
-    // 🆕 是否使用 GPU 路径（跳过 splatData 计算）
     // ========== Post-processing Configuration ==========
     __publicField(this, "postProcessingConfig", null);
     // ========== Playback Loop ==========
@@ -12043,7 +11847,7 @@ class AvatarController {
       recvFirstFlameTimestamp: 0,
       didRecvFirstFlame: false
     });
-    __publicField(this, "audioBytesPerSecond", 16e3 * 2);
+    __publicField(this, "audioBytesPerSecond", AUDIO_BYTES_PER_SECOND);
     this.avatar = avatar;
     this.playbackMode = (options == null ? void 0 : options.playbackMode) ?? DrivingServiceMode.sdk;
     if (this.playbackMode === DrivingServiceMode.sdk) {
@@ -12630,19 +12434,13 @@ class AvatarController {
   }
   /**
    * Set render callback (called by AvatarView)
-   * @param callback 渲染回调函数
-   * @param characterHandle 角色句柄
-   * @param useGPUPath 是否使用 GPU 路径（跳过 splatData 计算）
    * @internal
    */
-  setRenderCallback(callback, characterHandle, useGPUPath) {
+  setRenderCallback(callback, characterHandle) {
     this.renderCallback = callback;
     if (characterHandle !== void 0) {
       this.characterHandle = characterHandle;
     }
-    if (useGPUPath !== void 0) {
-      this.useGPUPath = useGPUPath;
-    }
   }
   /**
    * Set character ID (for multi-character support, used for eye tracking)
@@ -12956,7 +12754,7 @@ class AvatarController {
     if (this.playbackLoopId) {
       return;
     }
-    const fps = APP_CONFIG.animation.fps;
+    const fps = FLAME_FRAME_RATE;
     const playLoop = async () => {
       if (!this.isPlaying || this.currentState === AvatarState.paused || !this.animationPlayer) {
         this.playbackLoopId = null;
@@ -13019,22 +12817,16 @@ class AvatarController {
           }
         }
         if (arrayIndex >= 0 && arrayIndex < this.currentKeyframes.length) {
-          if (this.useGPUPath) {
-            if (this.renderCallback) {
-              this.renderCallback(new Float32Array(0), frameIndex);
-            }
-          } else {
-            const currentFrame = this.currentKeyframes[arrayIndex];
-            let wasmParams = convertProtoFlameToWasmParams(currentFrame);
-            if (this.postProcessingConfig) {
-              wasmParams = this.applyPostProcessingToParams(wasmParams);
-            }
-            const avatarCore = AvatarSDK.getAvatarCore();
-            if (avatarCore) {
-              const splatData = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
-              if (splatData && this.renderCallback) {
-                this.renderCallback(splatData, frameIndex);
-              }
+          const currentFrame = this.currentKeyframes[arrayIndex];
+          let wasmParams = convertProtoFlameToWasmParams(currentFrame);
+          if (this.postProcessingConfig) {
+            wasmParams = this.applyPostProcessingToParams(wasmParams);
+          }
+          const avatarCore = AvatarSDK.getAvatarCore();
+          if (avatarCore) {
+            const splatData = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
+            if (splatData && this.renderCallback) {
+              this.renderCallback(splatData, frameIndex);
             }
           }
         }
@@ -13532,47 +13324,71 @@ function getCacheInfo(url, response) {
   };
 }
 async function downloadResource(url, options) {
+  const { signal, characterId, resourceType, maxRetries = 3 } = options || {};
+  if (signal == null ? void 0 : signal.aborted) {
+    throw new Error("Download cancelled");
+  }
   try {
     let cached = null;
     let pwaCacheSubtype = void 0;
-    if (options == null ? void 0 : options.characterId) {
-      cached = await PwaCacheManager.getCharacterResource(options.characterId, url);
+    if (characterId) {
+      cached = await PwaCacheManager.getCharacterResource(characterId, url);
       if (cached) {
         pwaCacheSubtype = "character";
       }
-    } else if ((options == null ? void 0 : options.resourceType) === "template") {
+    } else if (resourceType === "template") {
       cached = await PwaCacheManager.getTemplateResource(url);
       if (cached) {
         pwaCacheSubtype = "template";
       }
     }
     if (cached) {
-      const response2 = new Response(cached);
+      const response = new Response(cached);
       await new Promise((resolve2) => setTimeout(resolve2, 0));
-      const cacheInfo2 = getCacheInfo(url, response2);
-      cacheInfo2.cacheHit = true;
-      cacheInfo2.cacheType = "pwa";
-      cacheInfo2.pwaCacheSubtype = pwaCacheSubtype;
-      return { data: cached, cacheInfo: cacheInfo2 };
-    }
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status} ${response.statusText}`);
-    }
-    const arrayBuffer = await response.arrayBuffer();
-    if (options == null ? void 0 : options.characterId) {
-      PwaCacheManager.putCharacterResource(options.characterId, url, arrayBuffer).catch((err) => {
-        logger.warn(`[downloadResource] Failed to cache character resource:`, err);
-      });
-    } else if ((options == null ? void 0 : options.resourceType) === "template") {
-      PwaCacheManager.putTemplateResource(url, arrayBuffer).catch((err) => {
-        logger.warn(`[downloadResource] Failed to cache template resource:`, err);
-      });
+      const cacheInfo = getCacheInfo(url, response);
+      cacheInfo.cacheHit = true;
+      cacheInfo.cacheType = "pwa";
+      cacheInfo.pwaCacheSubtype = pwaCacheSubtype;
+      return { data: cached, cacheInfo };
+    }
+    let lastError = null;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      if (signal == null ? void 0 : signal.aborted) {
+        throw new Error("Download cancelled");
+      }
+      try {
+        const response = await fetch(url, { signal });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status} ${response.statusText}`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        if (characterId) {
+          PwaCacheManager.putCharacterResource(characterId, url, arrayBuffer).catch((err) => {
+            logger.warn(`[downloadResource] Failed to cache character resource:`, err);
+          });
+        } else if (resourceType === "template") {
+          PwaCacheManager.putTemplateResource(url, arrayBuffer).catch((err) => {
+            logger.warn(`[downloadResource] Failed to cache template resource:`, err);
+          });
+        }
+        await new Promise((resolve2) => setTimeout(resolve2, 0));
+        const cacheInfo = getCacheInfo(url, response);
+        return { data: arrayBuffer, cacheInfo };
+      } catch (err) {
+        if (err instanceof Error && (err.name === "AbortError" || err.message === "Download cancelled")) {
+          throw err;
+        }
+        lastError = err instanceof Error ? err : new Error(String(err));
+        if (attempt < maxRetries) {
+          logger.warn(`[downloadResource] Attempt ${attempt}/${maxRetries} failed for ${url}, retrying immediately...`);
+        }
+      }
     }
-    await new Promise((resolve2) => setTimeout(resolve2, 0));
-    const cacheInfo = getCacheInfo(url, response);
-    return { data: arrayBuffer, cacheInfo };
+    throw lastError || new Error(`Failed to download ${url} after ${maxRetries} attempts`);
   } catch (err) {
+    if (err instanceof Error && (err.name === "AbortError" || err.message === "Download cancelled")) {
+      throw err;
+    }
     const msg = errorToMessage(err);
     throw new Error(`[downloadResource] ${url} → ${msg}`);
   }
@@ -13718,16 +13534,21 @@ class AvatarDownloader {
    * Load camera settings from CharacterMeta (optional)
    * @internal
    */
-  async loadCameraSettings(characterMeta) {
+  async loadCameraSettings(characterMeta, options) {
     var _a, _b;
+    const { signal } = options || {};
     const cameraUrl = (_b = (_a = characterMeta.camera) == null ? void 0 : _a.resource) == null ? void 0 : _b.remote;
     if (!cameraUrl) {
       logger.log("ℹ️ No camera resource URL provided");
       return void 0;
     }
+    if (signal == null ? void 0 : signal.aborted) {
+      throw new Error("Load cancelled");
+    }
     try {
       logger.log(`📥 Loading camera info from: ${cameraUrl}`);
       const { data: arrayBuffer } = await downloadResource(cameraUrl, {
+        signal,
         characterId: characterMeta.characterId ?? void 0,
         resourceType: "character"
       });
@@ -13746,7 +13567,10 @@ class AvatarDownloader {
    */
   async loadCharacterData(characterMeta, options) {
     var _a, _b, _c, _d, _e2, _f, _g, _h, _i2, _j;
-    const { progressCallback = null } = options || {};
+    const { progressCallback = null, signal } = options || {};
+    if (signal == null ? void 0 : signal.aborted) {
+      throw new Error("Download cancelled");
+    }
     const totalStartTime = Date.now();
     const shapeUrl = (_c = (_b = (_a = characterMeta.models) == null ? void 0 : _a.shape) == null ? void 0 : _b.resource) == null ? void 0 : _c.remote;
     const pointCloudUrl = (_f = (_e2 = (_d = characterMeta.models) == null ? void 0 : _d.gsStandard) == null ? void 0 : _e2.resource) == null ? void 0 : _f.remote;
@@ -13789,6 +13613,7 @@ class AvatarDownloader {
       updateProgress(filename, false);
       try {
         const { data: arrayBuffer, cacheInfo } = await downloadResource(url, {
+          signal,
           characterId: characterMeta.characterId ?? void 0,
           resourceType: "character"
         });
@@ -13803,6 +13628,9 @@ class AvatarDownloader {
         updateProgress(filename, true);
         return { key, success: true, size: arrayBuffer.byteLength };
       } catch (error) {
+        if (error instanceof Error && (error.name === "AbortError" || error.message === "Download cancelled")) {
+          throw error;
+        }
         if (!optional) {
           const errorMessage = error instanceof Error ? error.message : String(error);
           logEvent("download_avatar_assets_failed", "error", {
@@ -13835,9 +13663,12 @@ class AvatarDownloader {
     const totalSize = Object.values(characterData).reduce((sum, buffer) => {
       return sum + (buffer ? buffer.byteLength : 0);
     }, 0);
-    logEvent("download_avatar_assets_total_measure", "info", {
+    logEvent("download_avatar_assets_latency", "info", {
+      resolution: "default",
+      // 目前写死 default
       avatar_id: characterMeta.characterId ?? "unknown",
-      total_duration: totalDuration,
+      duration: totalDuration,
+      // 保留其他有用的字段
       parallel_duration: parallelDuration,
       total_size: totalSize,
       file_count: filesToLoad.length,
@@ -13851,9 +13682,13 @@ class AvatarDownloader {
    * @internal
    */
   async preloadResources(characterMeta, options) {
-    const { progressCallback = null } = options || {};
+    const { progressCallback = null, signal } = options || {};
+    if (signal == null ? void 0 : signal.aborted) {
+      throw new Error("Preload cancelled");
+    }
     const [characterData, preloadCameraSettings] = await Promise.all([
       this.loadCharacterData(characterMeta, {
+        signal,
         progressCallback: (info) => {
           if (progressCallback) {
             progressCallback({
@@ -13863,7 +13698,7 @@ class AvatarDownloader {
           }
         }
       }),
-      this.loadCameraSettings(characterMeta)
+      this.loadCameraSettings(characterMeta, { signal })
     ]);
     return {
       characterData,
@@ -13897,7 +13732,8 @@ class AvatarDownloader {
               ...headers,
               ...options.headers
             },
-            body: options.body ? JSON.stringify(options.body) : void 0
+            body: options.body ? JSON.stringify(options.body) : void 0,
+            signal: options.signal
           });
           if (!response.ok) {
             let error;
@@ -13930,16 +13766,21 @@ class AvatarDownloader {
    * Returns CharacterMeta with nested resource structure
    * @internal
    */
-  async getCharacterById(characterId) {
+  async getCharacterById(characterId, options) {
     var _a;
+    const { signal } = options || {};
     const startTime = Date.now();
     try {
+      if (signal == null ? void 0 : signal.aborted) {
+        throw new Error("Request cancelled");
+      }
       const client = this.getSdkApiClient();
       const response = await client.request(`/v2/character/${characterId}`, {
-        method: "GET"
+        method: "GET",
+        signal
       });
       const duration = Date.now() - startTime;
-      logEvent("fetch_avatar_metadata_measure", "info", {
+      logEvent("fetch_avatar_metadata_latency", "info", {
         avatar_id: characterId,
         duration
       });
@@ -13971,10 +13812,12 @@ const _AvatarManager = class _AvatarManager {
   constructor() {
     __publicField(this, "avatarDownloader", null);
     __publicField(this, "avatarCache", /* @__PURE__ */ new Map());
-    __publicField(this, "loadingPromises", /* @__PURE__ */ new Map());
-    // 下载队列：确保资源下载串行执行
+    /** 下载队列：FIFO 顺序 */
     __publicField(this, "downloadQueue", []);
-    __publicField(this, "isDownloading", false);
+    /** 当前正在执行的任务 */
+    __publicField(this, "currentTask", null);
+    /** 任务索引：快速查找 id 对应的任务 */
+    __publicField(this, "taskIndex", /* @__PURE__ */ new Map());
   }
   /**
    * Access via global singleton
@@ -13992,28 +13835,139 @@ const _AvatarManager = class _AvatarManager {
    * @returns Promise<Avatar>
    */
   async load(id, onProgress) {
-    const loadingPromise = this.loadingPromises.get(id);
-    if (loadingPromise) {
-      logger.log(`[AvatarManager] Avatar ${id} is already loading, reusing promise`);
-      return loadingPromise;
-    }
     if (!AvatarSDK.isInitialized) {
       throw new Error("AvatarSDK not initialized. Please call AvatarSDK.initialize() first.");
     }
     if (!this.avatarDownloader) {
       this.avatarDownloader = new AvatarDownloader();
     }
-    logger.log(`[AvatarManager] Fetching latest metadata for avatar ${id}...`);
-    onProgress == null ? void 0 : onProgress({ type: LoadProgress.downloading, progress: 5 });
-    const newCharacterMeta = await this.avatarDownloader.getCharacterById(id);
+    const existingTask = this.taskIndex.get(id);
+    if (existingTask && existingTask.status !== "completed" && existingTask.status !== "failed" && existingTask.status !== "cancelled") {
+      logger.log(`[AvatarManager] Avatar ${id} already in queue/loading, adding callback to existing task`);
+      onProgress == null ? void 0 : onProgress({ type: LoadProgress.downloading, progress: 0 });
+      return new Promise((resolve2, reject) => {
+        existingTask.requests.push({ onProgress, resolve: resolve2, reject });
+      });
+    }
+    logger.log(`[AvatarManager] Queuing new avatar download for id: ${id}`);
+    let taskResolve;
+    let taskReject;
+    const taskPromise = new Promise((resolve2, reject) => {
+      taskResolve = resolve2;
+      taskReject = reject;
+    });
+    const task = {
+      id,
+      status: "queued",
+      requests: [{ onProgress, resolve: taskResolve, reject: taskReject }],
+      abortController: new AbortController(),
+      promise: taskPromise,
+      _resolve: taskResolve,
+      _reject: taskReject
+    };
+    onProgress == null ? void 0 : onProgress({ type: LoadProgress.downloading, progress: 0 });
+    this.downloadQueue.push(task);
+    this.taskIndex.set(id, task);
+    this.processQueue();
+    return taskPromise;
+  }
+  /**
+   * Cancel a pending or running download task
+   * @param id Avatar ID to cancel
+   * @returns true if task was found and cancelled
+   */
+  cancelLoad(id) {
+    const task = this.taskIndex.get(id);
+    if (!task) {
+      logger.log(`[AvatarManager] No task found for id: ${id}`);
+      return false;
+    }
+    if (task.status === "completed" || task.status === "failed" || task.status === "cancelled") {
+      logger.log(`[AvatarManager] Task ${id} already finished with status: ${task.status}`);
+      return false;
+    }
+    logger.log(`[AvatarManager] Cancelling task for id: ${id}`);
+    task.abortController.abort();
+    task.status = "cancelled";
+    const cancelError = new Error(`Download cancelled for avatar: ${id}`);
+    this.notifyAllRequests(task, { type: LoadProgress.failed, error: cancelError });
+    task.requests.forEach((req) => req.reject(cancelError));
+    this.taskIndex.delete(id);
+    const queueIndex = this.downloadQueue.indexOf(task);
+    if (queueIndex !== -1) {
+      this.downloadQueue.splice(queueIndex, 1);
+    }
+    if (this.currentTask === task) {
+      this.currentTask = null;
+      this.processQueue();
+    }
+    return true;
+  }
+  /**
+   * Process download queue (FIFO)
+   * @internal
+   */
+  async processQueue() {
+    var _a, _b;
+    if (this.currentTask || this.downloadQueue.length === 0) {
+      return;
+    }
+    const task = this.downloadQueue.shift();
+    this.currentTask = task;
+    logger.log(`[AvatarManager] Processing task: ${task.id} (${this.downloadQueue.length} items remaining)`);
+    try {
+      const avatar = await this.executeTask(task);
+      if (task.status === "cancelled") {
+        return;
+      }
+      task.status = "completed";
+      this.notifyAllRequests(task, { type: LoadProgress.completed });
+      task.requests.forEach((req) => req.resolve(avatar));
+      (_a = task._resolve) == null ? void 0 : _a.call(task, avatar);
+    } catch (error) {
+      if (task.status === "cancelled") {
+        return;
+      }
+      task.status = "failed";
+      const err = error instanceof Error ? error : new Error(String(error));
+      this.notifyAllRequests(task, { type: LoadProgress.failed, error: err });
+      task.requests.forEach((req) => req.reject(err));
+      (_b = task._reject) == null ? void 0 : _b.call(task, err);
+    } finally {
+      if (task.status !== "cancelled") {
+        this.taskIndex.delete(task.id);
+      }
+      this.currentTask = null;
+      this.processQueue();
+    }
+  }
+  /**
+   * Execute a single download task
+   * @internal
+   */
+  async executeTask(task) {
+    const { id, abortController } = task;
+    const signal = abortController.signal;
+    const startTime = Date.now();
+    if (signal.aborted) {
+      throw new Error("Task cancelled");
+    }
+    task.status = "fetching-meta";
+    logger.log(`[AvatarManager] Fetching metadata for avatar ${id}...`);
+    const characterMeta = await this.avatarDownloader.getCharacterById(id, { signal });
+    task.characterMeta = characterMeta;
+    if (signal.aborted) {
+      throw new Error("Task cancelled");
+    }
     const cached = this.avatarCache.get(id);
     if (cached) {
       const cachedMeta = cached.getCharacterMeta();
       const cachedVersion = cachedMeta.version;
-      const newVersion = newCharacterMeta.version;
+      const newVersion = characterMeta.version;
       if (cachedVersion === newVersion) {
-        logger.log(`[AvatarManager] Avatar ${id} found in cache with same version (${cachedVersion}), updating meta and returning cached`);
-        cached.updateCharacterMeta(newCharacterMeta);
+        logger.log(`[AvatarManager] Avatar ${id} found in cache with same version (${cachedVersion}), returning cached`);
+        cached.updateCharacterMeta(characterMeta);
+        this.notifyAllRequests(task, { type: LoadProgress.downloading, progress: 100 });
         return cached;
       } else {
         logger.log(`[AvatarManager] Avatar ${id} version mismatch: cached=${cachedVersion}, new=${newVersion}, reloading...`);
@@ -14022,77 +13976,71 @@ const _AvatarManager = class _AvatarManager {
         await PwaCacheManager2.clearCharacterCache(id);
       }
     }
-    logger.log(`[AvatarManager] Queuing avatar download for id: ${id}`);
-    const loadPromise = new Promise((resolve2, reject) => {
-      this.downloadQueue.push({
-        id,
-        characterMeta: newCharacterMeta,
-        onProgress,
-        resolve: resolve2,
-        reject
-      });
+    const totalAssets = this.countTotalAssets(characterMeta);
+    const metaProgress = Math.round(1 / (1 + totalAssets) * 100);
+    this.notifyAllRequests(task, { type: LoadProgress.downloading, progress: metaProgress });
+    if (signal.aborted) {
+      throw new Error("Task cancelled");
+    }
+    task.status = "downloading";
+    logger.log("[AvatarManager] Downloading resources...");
+    let downloadedCount = 0;
+    const resources = await this.avatarDownloader.preloadResources(characterMeta, {
+      signal,
+      progressCallback: (info) => {
+        if (info.loaded > downloadedCount) {
+          downloadedCount = info.loaded;
+          const progress = Math.round((1 + downloadedCount) / (1 + totalAssets) * 100);
+          this.notifyAllRequests(task, { type: LoadProgress.downloading, progress });
+        }
+      }
+    });
+    if (signal.aborted) {
+      throw new Error("Task cancelled");
+    }
+    logger.log("[AvatarManager] Creating Avatar instance...");
+    const avatar = new Avatar(id, characterMeta, resources);
+    this.avatarCache.set(id, avatar);
+    logger.log("[AvatarManager] Avatar loaded successfully");
+    const totalDuration = Date.now() - startTime;
+    logEvent("fetch_avatar_latency", "info", {
+      resolution: "default",
+      // 目前写死 default
+      avatar_id: id,
+      duration: totalDuration
     });
-    this.loadingPromises.set(id, loadPromise);
-    loadPromise.finally(() => {
-      this.loadingPromises.delete(id);
+    logEvent("character_load", "info", {
+      avatar_id: id,
+      event: "load_success"
     });
-    this.processDownloadQueue();
-    return loadPromise;
+    return avatar;
   }
   /**
-   * Process download queue (ensure serial execution)
+   * 计算需要下载的资源总数
    * @internal
    */
-  async processDownloadQueue() {
-    if (this.isDownloading || this.downloadQueue.length === 0) {
-      return;
-    }
-    this.isDownloading = true;
-    const item = this.downloadQueue.shift();
-    logger.log(`[AvatarManager] Processing download queue item: ${item.id} (${this.downloadQueue.length} items remaining)`);
-    try {
-      const avatar = await this.doLoad(item.id, item.characterMeta, item.onProgress);
-      item.resolve(avatar);
-    } catch (error) {
-      item.reject(error instanceof Error ? error : new Error(String(error)));
-    } finally {
-      this.isDownloading = false;
-      this.processDownloadQueue();
-    }
+  countTotalAssets(meta) {
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k;
+    let count = 0;
+    if ((_c = (_b = (_a = meta.models) == null ? void 0 : _a.shape) == null ? void 0 : _b.resource) == null ? void 0 : _c.remote) count++;
+    if ((_f = (_e2 = (_d = meta.models) == null ? void 0 : _d.gsStandard) == null ? void 0 : _e2.resource) == null ? void 0 : _f.remote) count++;
+    if ((_i2 = (_h = (_g = meta.animations) == null ? void 0 : _g.frameIdle) == null ? void 0 : _h.resource) == null ? void 0 : _i2.remote) count++;
+    if ((_k = (_j = meta.camera) == null ? void 0 : _j.resource) == null ? void 0 : _k.remote) count++;
+    return count;
   }
   /**
-   * Execute actual loading logic (private method)
+   * 通知所有请求者进度更新
    * @internal
    */
-  async doLoad(id, characterMeta, onProgress) {
-    try {
-      logger.log("[AvatarManager] Step 1: Downloading resources...");
-      onProgress == null ? void 0 : onProgress({ type: LoadProgress.downloading, progress: 30 });
-      const resources = await this.avatarDownloader.preloadResources(characterMeta, {
-        progressCallback: (info) => {
-          const externalProgress = 30 + info.progress / 100 * 70;
-          onProgress == null ? void 0 : onProgress({
-            type: LoadProgress.downloading,
-            progress: Math.round(externalProgress)
-          });
-        }
-      });
-      logger.log("[AvatarManager] Step 2: Creating Avatar instance...");
-      const avatar = new Avatar(id, characterMeta, resources);
-      this.avatarCache.set(id, avatar);
-      logger.log("[AvatarManager] Avatar loaded successfully");
-      onProgress == null ? void 0 : onProgress({ type: LoadProgress.completed });
-      logEvent("character_load", "info", {
-        avatar_id: id,
-        event: "load_success"
-      });
-      return avatar;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      logger.error("Failed to load avatar:", message);
-      onProgress == null ? void 0 : onProgress({ type: LoadProgress.failed, error });
-      throw error;
-    }
+  notifyAllRequests(task, progress) {
+    task.requests.forEach((req) => {
+      var _a;
+      try {
+        (_a = req.onProgress) == null ? void 0 : _a.call(req, progress);
+      } catch (err) {
+        logger.warn(`[AvatarManager] Error in progress callback:`, err);
+      }
+    });
   }
   /**
    * Get cached avatar
@@ -14107,22 +14055,58 @@ const _AvatarManager = class _AvatarManager {
    * @param id Avatar ID
    */
   clear(id) {
+    this.cancelLoad(id);
     const removed = this.avatarCache.delete(id);
     if (removed) {
       logger.log(`[AvatarManager] Cleared avatar cache for id: ${id}`);
     }
   }
   /**
-   * Clear all avatar cache and resource loader cache
+   * Clear all avatar cache and cancel all tasks
    */
   clearAll() {
+    for (const task of this.taskIndex.values()) {
+      if (task.status !== "completed" && task.status !== "failed" && task.status !== "cancelled") {
+        this.cancelLoad(task.id);
+      }
+    }
     this.avatarCache.clear();
-    logger.log("[AvatarManager] Cleared all avatar cache");
+    this.downloadQueue = [];
+    this.taskIndex.clear();
+    this.currentTask = null;
+    logger.log("[AvatarManager] Cleared all avatar cache and cancelled all tasks");
   }
-};
-__publicField(_AvatarManager, "_instance", null);
-let AvatarManager = _AvatarManager;
-let depthBuffer = null;
+  /**
+   * Get the number of pending tasks in the queue
+   * @internal For testing purposes
+   */
+  get pendingTaskCount() {
+    return this.downloadQueue.length + (this.currentTask ? 1 : 0);
+  }
+  /**
+   * Check if a task is in progress for the given ID
+   * @internal For testing purposes
+   */
+  isLoading(id) {
+    const task = this.taskIndex.get(id);
+    return task !== void 0 && task.status !== "completed" && task.status !== "failed" && task.status !== "cancelled";
+  }
+  /**
+   * @internal For testing - get loadingPromises map (compatibility)
+   */
+  get loadingPromises() {
+    const map = /* @__PURE__ */ new Map();
+    for (const [id, task] of this.taskIndex) {
+      if (task.status !== "completed" && task.status !== "failed" && task.status !== "cancelled") {
+        map.set(id, task.promise);
+      }
+    }
+    return map;
+  }
+};
+__publicField(_AvatarManager, "_instance", null);
+let AvatarManager = _AvatarManager;
+let depthBuffer = null;
 let depthInt = null;
 let indices0 = null;
 let indices1 = null;
@@ -14771,1589 +14755,6 @@ class WebGLRenderer {
 }
 const renderShaderCode = "/**\n * WebGPU 3DGS 渲染着色器\n *\n * 实例化渲染：每个 splat 绘制一个四边形\n * 对应 WebGL 版本的 GLSL 着色器\n */\n\n// ============ Uniform Bindings ============\n\nstruct Uniforms {\n  viewMatrix: mat4x4f,\n  projectionMatrix: mat4x4f,\n  screenSize: vec2f,\n  enableFrustumCulling: u32,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n\n// ============ Storage Buffer Bindings (间接索引渲染) ============\n\n@group(1) @binding(0) var<storage, read> sortIndices: array<u32>;\n@group(1) @binding(1) var<storage, read> splatData: array<f32>;\n\n// ============ Vertex Shader ============\n\nstruct VertexInput {\n  // 共享四边形顶点 (per-vertex)\n  @location(0) quadVertex: vec2f,\n}\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) relativePosition: vec2f,\n  @location(1) color: vec4f,\n}\n\n// 常量定义\nconst BOUNDS_RADIUS: f32 = 3.0;\n\n/**\n * 计算2D协方差矩阵（复刻 WebGL 版本）\n */\nfn calcCovariance2D(\n  viewPos: vec3f,\n  cov3Da: vec3f,\n  cov3Db: vec3f,\n  viewMatrix: mat4x4f,\n  projectionMatrix: mat4x4f,\n  screenSize: vec2f\n) -> vec3f {\n  let invViewPosZ = 1.0 / viewPos.z;\n  let invViewPosZSquared = invViewPosZ * invViewPosZ;\n\n  // FOV 限制\n  let tanHalfFovX = 1.0 / projectionMatrix[0][0];\n  let tanHalfFovY = 1.0 / projectionMatrix[1][1];\n  let limX = 1.3 * tanHalfFovX;\n  let limY = 1.3 * tanHalfFovY;\n\n  var clampedViewPos = viewPos;\n  clampedViewPos.x = clamp(viewPos.x * invViewPosZ, -limX, limX) * viewPos.z;\n  clampedViewPos.y = clamp(viewPos.y * invViewPosZ, -limY, limY) * viewPos.z;\n\n  // 焦距计算\n  let focalX = screenSize.x * projectionMatrix[0][0] / 2.0;\n  let focalY = screenSize.y * projectionMatrix[1][1] / 2.0;\n\n  // 雅可比矩阵 J\n  let J = mat3x3f(\n    focalX * invViewPosZ, 0.0, -(focalX * clampedViewPos.x) * invViewPosZSquared,\n    0.0, focalY * invViewPosZ, -(focalY * clampedViewPos.y) * invViewPosZSquared,\n    0.0, 0.0, 0.0\n  );\n\n  // 视图变换矩阵 W (仅旋转部分) - 对齐 Android SDK，不使用转置\n  let W = mat3x3f(\n    viewMatrix[0].xyz,\n    viewMatrix[1].xyz,\n    viewMatrix[2].xyz\n  );\n\n  // 投影变换 T = J * W\n  let T = J * W;\n\n  // 3D 协方差矩阵 Vrk（对称矩阵）\n  let Vrk = mat3x3f(\n    cov3Da.x, cov3Da.y, cov3Da.z,\n    cov3Da.y, cov3Db.x, cov3Db.y,\n    cov3Da.z, cov3Db.y, cov3Db.z\n  );\n\n  // 2D 协方差矩阵: cov = T * Vrk * T^T\n  let cov = T * Vrk * transpose(T);\n\n  // 低通滤波器\n  var result = vec3f(cov[0][0], cov[0][1], cov[1][1]);\n  result.x += 0.3;\n  result.z += 0.3;\n\n  return result;\n}\n\n/**\n * 分解协方差矩阵\n */\nfn decomposeCovariance(cov2D: vec3f) -> array<vec2f, 2> {\n  let a = cov2D.x;\n  let b = cov2D.y;\n  let d = cov2D.z;\n\n  let det = a * d - b * b;\n  let trace = a + d;\n\n  let mean = 0.5 * trace;\n  let dist = max(0.1, sqrt(mean * mean - det));\n\n  // 特征值\n  var lambda1 = mean + dist;\n  var lambda2 = mean - dist;\n\n  // 确保特征值为正\n  lambda1 = max(lambda1, 0.01);\n  lambda2 = max(lambda2, 0.01);\n\n  // 特征向量（复刻 WebGL MetalSplatter 算法）\n  var eigenvector1: vec2f;\n  if (abs(b) < 1e-6) {\n    eigenvector1 = select(vec2f(0.0, 1.0), vec2f(1.0, 0.0), a > d);\n  } else {\n    eigenvector1 = normalize(vec2f(b, d - lambda2));\n  }\n\n  // 正交特征向量\n  let eigenvector2 = vec2f(eigenvector1.y, -eigenvector1.x);\n\n  let v1 = eigenvector1 * sqrt(lambda1);\n  let v2 = eigenvector2 * sqrt(lambda2);\n\n  return array<vec2f, 2>(v1, v2);\n}\n\n@vertex\nfn vertexMain(\n  input: VertexInput,\n  @builtin(instance_index) instanceIndex: u32\n) -> VertexOutput {\n  var output: VertexOutput;\n\n  // 🚀 间接索引：通过排序索引读取实际数据\n  let sortedIdx = sortIndices[instanceIndex];\n  let dataOffset = sortedIdx * 13u;\n\n  // 从 storage buffer 读取 splat 数据\n  let position = vec3f(\n    splatData[dataOffset + 0u],\n    splatData[dataOffset + 1u],\n    splatData[dataOffset + 2u]\n  );\n  let color = vec4f(\n    splatData[dataOffset + 3u],\n    splatData[dataOffset + 4u],\n    splatData[dataOffset + 5u],\n    splatData[dataOffset + 6u]\n  );\n  let covA = vec3f(\n    splatData[dataOffset + 7u],\n    splatData[dataOffset + 8u],\n    splatData[dataOffset + 9u]\n  );\n  let covB = vec3f(\n    splatData[dataOffset + 10u],\n    splatData[dataOffset + 11u],\n    splatData[dataOffset + 12u]\n  );\n\n  // 转换到视图空间\n  let viewPosition4 = uniforms.viewMatrix * vec4f(position, 1.0);\n  let viewPosition3 = viewPosition4.xyz;\n\n  // 计算 2D 协方差矩阵\n  let cov2D = calcCovariance2D(\n    viewPosition3,\n    covA,\n    covB,\n    uniforms.viewMatrix,\n    uniforms.projectionMatrix,\n    uniforms.screenSize\n  );\n\n  // 分解协方差矩阵\n  let axes = decomposeCovariance(cov2D);\n  let axis1 = axes[0];\n  let axis2 = axes[1];\n\n  // 投影到屏幕空间\n  let projectedCenter = uniforms.projectionMatrix * viewPosition4;\n\n  // 视锥体剔除\n  if (uniforms.enableFrustumCulling == 1u) {\n    let bounds = 1.2 * projectedCenter.w;\n    if (projectedCenter.z < 0.0 ||\n        projectedCenter.z > projectedCenter.w ||\n        projectedCenter.x < -bounds ||\n        projectedCenter.x > bounds ||\n        projectedCenter.y < -bounds ||\n        projectedCenter.y > bounds) {\n      // 剔除到屏幕外\n      output.position = vec4f(2.0, 2.0, 0.0, 1.0);\n      output.relativePosition = vec2f(0.0);\n      output.color = vec4f(0.0);\n      return output;\n    }\n  }\n\n  // 使用实例化的四边形顶点\n  let relativeCoord = input.quadVertex;\n\n  // 计算椭圆变换后的相对位置（像素单位）\n  let ellipseRelativePos = relativeCoord.x * axis1 + relativeCoord.y * axis2;\n\n  // 计算屏幕空间偏移\n  let projectedScreenDelta = ellipseRelativePos * 2.0 * BOUNDS_RADIUS / uniforms.screenSize;\n\n  // 最终顶点位置\n  output.position = vec4f(\n    projectedCenter.x + projectedScreenDelta.x * projectedCenter.w,\n    projectedCenter.y + projectedScreenDelta.y * projectedCenter.w,\n    projectedCenter.z,\n    projectedCenter.w\n  );\n\n  // 传递给 fragment shader\n  output.relativePosition = relativeCoord * BOUNDS_RADIUS;\n  output.color = color;\n\n  return output;\n}\n\n// ============ Fragment Shader ============\n\nconst BOUNDS_RADIUS_SQUARED: f32 = BOUNDS_RADIUS * BOUNDS_RADIUS;\n\nfn splatFragmentAlpha(relativePosition: vec2f, splatAlpha: f32) -> f32 {\n  // 复刻 WebGL MetalSplatter 计算方式\n  let negativeMagnitudeSquared = -dot(relativePosition, relativePosition);\n\n  // 边界检查：超出椭圆边界的点被剔除\n  if (negativeMagnitudeSquared < -BOUNDS_RADIUS_SQUARED) {\n    return 0.0;\n  }\n\n  // 高斯衰减\n  return exp(0.5 * negativeMagnitudeSquared) * splatAlpha;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n  let alpha = splatFragmentAlpha(input.relativePosition, input.color.a);\n\n  // ✅ 优化：提前丢弃几乎透明的片段（提升性能和质量，对齐 Android SDK）\n  if (alpha < 0.001) {\n    discard;\n  }\n\n  // 预乘 alpha 输出（匹配 alphaMode: 'premultiplied'）\n  return vec4f(input.color.rgb * alpha, alpha);\n}\n";
 const blitShaderCode = "/**\n * WebGPU Blit Shader\n * 用于将 render texture 绘制到屏幕，应用 transform\n */\n\nstruct BlitUniforms {\n  offset: vec2f,  // 屏幕空间偏移（NDC坐标）\n  scale: f32,     // 缩放因子\n}\n\n@group(0) @binding(0) var<uniform> blitUniforms: BlitUniforms;\n@group(1) @binding(0) var texture: texture_2d<f32>;\n@group(1) @binding(1) var textureSampler: sampler;\n\nstruct VertexInput {\n  @location(0) position: vec2f,\n  @location(1) texCoord: vec2f,\n}\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) texCoord: vec2f,\n}\n\n@vertex\nfn vertexMain(input: VertexInput) -> VertexOutput {\n  var output: VertexOutput;\n  // 应用缩放和偏移\n  let pos = input.position * blitUniforms.scale + blitUniforms.offset;\n  output.position = vec4f(pos, 0.0, 1.0);\n  // WebGPU framebuffer 纹理坐标需要翻转 Y 轴\n  // framebuffer 的内容是从上到下存储的，但纹理坐标 (0,0) 在左上角，所以需要翻转\n  output.texCoord = vec2f(input.texCoord.x, 1.0 - input.texCoord.y);\n  return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n  return textureSample(texture, textureSampler, input.texCoord);\n}\n\n";
-const transformShaderCode = "/**\n * WebGPU 3DGS Transform Compute Shader\n *\n * 功能: 在GPU上执行3DGS变换 + 协方差计算\n * 输入: Original Splats (110K点) + Face Geometry (15.4K面)\n * 输出: Transformed Splats with Covariance (GPU格式)\n */\n\n// ============================================================================\n// 数据结构定义\n// ============================================================================\n\n// ============================================================================\n// Bindings (使用flat array避免struct padding问题)\n// ============================================================================\n\n// Original Splats: 每个splat 16 floats (64 bytes紧密排列)\n// [position.xyz, scale.xyz, rotation.xyzw, color.rgba, opacity, binding(as float)]\n@group(0) @binding(0) var<storage, read> originalSplatsData: array<f32>;\n\n// Face Geometries: 每个face 8 floats (32 bytes紧密排列)\n// [center.xyz, scale, quat.xyzw]\n@group(0) @binding(1) var<storage, read> faceGeometriesData: array<f32>;\n\n// 输出为flat float array: [pos.xyz, color.rgba, cov[6]] = 13 floats per splat\n@group(0) @binding(2) var<storage, read_write> transformedData: array<f32>;\n\n// 🚀 性能优化: 单独输出紧凑的positions (用于排序)\n// [xyz] = 3 floats per splat\n@group(0) @binding(3) var<storage, read_write> positionsOutput: array<f32>;\n\n// 🆕 GPU排序优化: ViewMatrix uniform (用于计算view-space depth)\nstruct Uniforms {\n  viewMatrix: mat4x4f,\n}\n@group(0) @binding(4) var<uniform> uniforms: Uniforms;\n\n// 🆕 GPU排序优化: 输出深度值 (Uint32格式, 已处理降序)\n@group(0) @binding(5) var<storage, read_write> depthsOutput: array<u32>;\n\n// ============================================================================\n// 辅助函数\n// ============================================================================\n\n/**\n * 四元数归一化\n */\nfn normalizeQuaternion(q: vec4f) -> vec4f {\n  let norm = length(q);\n  if (norm < 1e-8) {\n    return vec4f(0.0, 0.0, 0.0, 1.0); // 单位四元数\n  }\n  return q / norm;\n}\n\n/**\n * 四元数乘法 (q1 * q2)\n * 注意: 四元数乘法不可交换\n */\nfn multiplyQuaternions(q1: vec4f, q2: vec4f) -> vec4f {\n  return vec4f(\n    q1.w * q2.x + q1.x * q2.w + q1.y * q2.z - q1.z * q2.y,  // x\n    q1.w * q2.y - q1.x * q2.z + q1.y * q2.w + q1.z * q2.x,  // y\n    q1.w * q2.z + q1.x * q2.y - q1.y * q2.x + q1.z * q2.w,  // z\n    q1.w * q2.w - q1.x * q2.x - q1.y * q2.y - q1.z * q2.z   // w\n  );\n}\n\n/**\n * 用四元数旋转向量\n * v_rotated = q * v * q_conjugate\n */\nfn rotateVectorByQuaternion(q: vec4f, v: vec3f) -> vec3f {\n  // 优化版本: v' = v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v)\n  let qxyz = q.xyz;\n  let qw = q.w;\n  let t = 2.0 * cross(qxyz, v);\n  return v + qw * t + cross(qxyz, t);\n}\n\n/**\n * 将四元数转换为3x3旋转矩阵\n * ⚠️ CRITICAL: C++存储的是TRANSPOSED matrix！\n * 所以quaternion → matrix转换后需要再次转置才能匹配C++的orientation_mat\n */\nfn quaternionToMatrix(q: vec4f) -> mat3x3f {\n  let qx = q.x;\n  let qy = q.y;\n  let qz = q.z;\n  let qw = q.w;\n\n  // 标准quaternion到matrix转换\n  let m00 = 1.0 - 2.0 * (qy*qy + qz*qz);\n  let m01 = 2.0 * (qx*qy - qz*qw);\n  let m02 = 2.0 * (qx*qz + qy*qw);\n\n  let m10 = 2.0 * (qx*qy + qz*qw);\n  let m11 = 1.0 - 2.0 * (qx*qx + qz*qz);\n  let m12 = 2.0 * (qy*qz - qx*qw);\n\n  let m20 = 2.0 * (qx*qz - qy*qw);\n  let m21 = 2.0 * (qy*qz + qx*qw);\n  let m22 = 1.0 - 2.0 * (qx*qx + qy*qy);\n\n  // WGSL mat3x3f is column-major\n  // Standard quaternion-to-matrix conversion (no transpose)\n  return mat3x3f(\n    vec3f(m00, m10, m20),  // column 0\n    vec3f(m01, m11, m21),  // column 1\n    vec3f(m02, m12, m22)   // column 2\n  );\n}\n\n/**\n * 从四元数构建旋转矩阵并计算协方差\n * Covariance = (R*S) * (R*S)^T\n */\nfn computeCovariance3D(scale: vec3f, rotation: vec4f) -> array<f32, 6> {\n  // 1. 归一化四元数\n  let q = normalizeQuaternion(rotation);\n  let qx = q.x;\n  let qy = q.y;\n  let qz = q.z;\n  let qw = q.w;\n\n  // 2. 构建旋转矩阵 R (3x3)\n  let r00 = 1.0 - 2.0 * (qy*qy + qz*qz);\n  let r01 = 2.0 * (qx*qy - qz*qw);\n  let r02 = 2.0 * (qx*qz + qy*qw);\n\n  let r10 = 2.0 * (qx*qy + qz*qw);\n  let r11 = 1.0 - 2.0 * (qx*qx + qz*qz);\n  let r12 = 2.0 * (qy*qz - qx*qw);\n\n  let r20 = 2.0 * (qx*qz - qy*qw);\n  let r21 = 2.0 * (qy*qz + qx*qw);\n  let r22 = 1.0 - 2.0 * (qx*qx + qy*qy);\n\n  // 3. 计算 R * S\n  let sx = scale.x;\n  let sy = scale.y;\n  let sz = scale.z;\n\n  let rs00 = r00 * sx;\n  let rs01 = r01 * sy;\n  let rs02 = r02 * sz;\n\n  let rs10 = r10 * sx;\n  let rs11 = r11 * sy;\n  let rs12 = r12 * sz;\n\n  let rs20 = r20 * sx;\n  let rs21 = r21 * sy;\n  let rs22 = r22 * sz;\n\n  // 4. 计算协方差矩阵上三角 = (R*S) * (R*S)^T\n  var cov: array<f32, 6>;\n  cov[0] = rs00*rs00 + rs01*rs01 + rs02*rs02;  // cov[0][0]\n  cov[1] = rs00*rs10 + rs01*rs11 + rs02*rs12;  // cov[0][1]\n  cov[2] = rs00*rs20 + rs01*rs21 + rs02*rs22;  // cov[0][2]\n  cov[3] = rs10*rs10 + rs11*rs11 + rs12*rs12;  // cov[1][1]\n  cov[4] = rs10*rs20 + rs11*rs21 + rs12*rs22;  // cov[1][2]\n  cov[5] = rs20*rs20 + rs21*rs21 + rs22*rs22;  // cov[2][2]\n\n  return cov;\n}\n\n/**\n * 计算可排序深度\n *\n * View space: Z轴负方向，物体Z < 0，越远越小\n * RadixSort: ascending (小到大)\n * 目标: far-to-near (远到近)\n *\n * depth = viewPos.z (负数，远点如-10，近点如-2)\n * 转sortable: 负数小 → sortable小\n * Ascending: 小在前 → 远在前 ✅\n *\n * 🚀 优化: 只需要 viewPos.z，因此只提取 viewMatrix 第3行的点积\n * viewPos.z = row3 · [worldPosition, 1]\n */\nfn computeSortableDepth(worldPosition: vec3f) -> u32 {\n  // 🚀 优化: 直接计算 viewPos.z，无需完整矩阵乘法\n  // WGSL 列主序: uniforms.viewMatrix[col][row]\n  // 第3行 = [viewMatrix[0][2], viewMatrix[1][2], viewMatrix[2][2], viewMatrix[3][2]]\n  let depth = uniforms.viewMatrix[0][2] * worldPosition.x +\n              uniforms.viewMatrix[1][2] * worldPosition.y +\n              uniforms.viewMatrix[2][2] * worldPosition.z +\n              uniforms.viewMatrix[3][2];\n\n  let depthBits = bitcast<u32>(depth);\n  let depthSortable = depthBits ^ select(0x80000000u, 0xffffffffu, depth < 0.0);\n  return depthSortable;\n}\n\n// ============================================================================\n// Compute Shader Main\n// ============================================================================\n\n@compute @workgroup_size(256)\nfn main(@builtin(global_invocation_id) global_id: vec3u) {\n  let idx = global_id.x;\n\n  // 边界检查 (originalSplatsData长度 / 16 = splat数量)\n  let splatCount = arrayLength(&originalSplatsData) / 16u;\n  if (idx >= splatCount) {\n    return;\n  }\n\n  // ============================================================================\n  // 读取Original Splat (16 floats per splat)\n  // [position.xyz, scale.xyz, rotation.xyzw, color.rgba, opacity, binding]\n  // ============================================================================\n  let splatOffset = idx * 16u;\n\n  let position = vec3f(\n    originalSplatsData[splatOffset + 0u],\n    originalSplatsData[splatOffset + 1u],\n    originalSplatsData[splatOffset + 2u]\n  );\n\n  let scale = vec3f(\n    originalSplatsData[splatOffset + 3u],\n    originalSplatsData[splatOffset + 4u],\n    originalSplatsData[splatOffset + 5u]\n  );\n\n  let rotation = vec4f(\n    originalSplatsData[splatOffset + 6u],\n    originalSplatsData[splatOffset + 7u],\n    originalSplatsData[splatOffset + 8u],\n    originalSplatsData[splatOffset + 9u]\n  );\n\n  let color = vec4f(\n    originalSplatsData[splatOffset + 10u],\n    originalSplatsData[splatOffset + 11u],\n    originalSplatsData[splatOffset + 12u],\n    originalSplatsData[splatOffset + 13u]\n  );\n\n  let opacity = originalSplatsData[splatOffset + 14u];\n  let binding = i32(originalSplatsData[splatOffset + 15u]);\n\n  // ============================================================================\n  // 获取绑定的Face Geometry (带边界检查)\n  // ============================================================================\n  let faceCount = arrayLength(&faceGeometriesData) / 8u;\n  if (binding < 0 || u32(binding) >= faceCount) {\n    // 绑定无效,跳过 (设置为无效点)\n    let baseOffset = idx * 13u;\n    for (var i = 0u; i < 13u; i++) {\n      transformedData[baseOffset + i] = 0.0;\n    }\n    return;\n  }\n\n  // ============================================================================\n  // 读取Face Geometry (8 floats per face)\n  // [center.xyz, scale, quat.xyzw]\n  // ============================================================================\n  let faceOffset = u32(binding) * 8u;\n\n  let faceCenter = vec3f(\n    faceGeometriesData[faceOffset + 0u],\n    faceGeometriesData[faceOffset + 1u],\n    faceGeometriesData[faceOffset + 2u]\n  );\n\n  let faceScale = faceGeometriesData[faceOffset + 3u];\n\n  let faceQuat = vec4f(\n    faceGeometriesData[faceOffset + 4u],\n    faceGeometriesData[faceOffset + 5u],\n    faceGeometriesData[faceOffset + 6u],\n    faceGeometriesData[faceOffset + 7u]\n  );\n\n  // ============================================================================\n  // 1. 位置变换: position = orientation_mat * (original_pos * face_scale) + face_center\n  //    匹配C++: transformed_splat.position = face_geometry.orientation_mat * original_splat.position * face_geometry.scaling + face_geometry.center;\n  // ============================================================================\n  let orientationMat = quaternionToMatrix(faceQuat);\n  let scaledPosition = position * faceScale;\n  let rotated = orientationMat * scaledPosition;\n  let transformedPosition = rotated + faceCenter;\n\n  // ============================================================================\n  // 2. 缩放变换: scale = original_scale * face_scale\n  // ============================================================================\n  let transformedScale = scale * faceScale;\n\n  // ============================================================================\n  // 3. 旋转变换: rotation = quat_multiply(normalize(original_rotation), face_quat)\n  // ============================================================================\n  let normalizedOriginalRotation = normalizeQuaternion(rotation);\n  let transformedRotation = multiplyQuaternions(normalizedOriginalRotation, faceQuat);\n\n  // ============================================================================\n  // 4. 计算3D协方差矩阵\n  // ============================================================================\n  let covariance = computeCovariance3D(transformedScale, transformedRotation);\n\n  // ============================================================================\n  // 5. 输出结果到flat array (13 floats per splat)\n  // ============================================================================\n  let baseOffset = idx * 13u;\n\n  // position[3]\n  transformedData[baseOffset + 0u] = transformedPosition.x;\n  transformedData[baseOffset + 1u] = transformedPosition.y;\n  transformedData[baseOffset + 2u] = transformedPosition.z;\n\n  // color[4]: 从SH 0阶系数转换为RGB\n  // SH_C0 = 0.28209479177387814\n  // RGB = SH_C0 * sh[0] + 0.5\n  let SH_C0 = 0.28209479177387814;\n  let r = clamp(SH_C0 * color.r + 0.5, 0.0, 1.0);\n  let g = clamp(SH_C0 * color.g + 0.5, 0.0, 1.0);\n  let b = clamp(SH_C0 * color.b + 0.5, 0.0, 1.0);\n\n  transformedData[baseOffset + 3u] = r;\n  transformedData[baseOffset + 4u] = g;\n  transformedData[baseOffset + 5u] = b;\n  transformedData[baseOffset + 6u] = opacity;\n\n  // covariance[6]\n  transformedData[baseOffset + 7u] = covariance[0];\n  transformedData[baseOffset + 8u] = covariance[1];\n  transformedData[baseOffset + 9u] = covariance[2];\n  transformedData[baseOffset + 10u] = covariance[3];\n  transformedData[baseOffset + 11u] = covariance[4];\n  transformedData[baseOffset + 12u] = covariance[5];\n\n  // ============================================================================\n  // 6. 🚀 同时输出紧凑的positions (用于排序，零额外开销)\n  // ============================================================================\n  let posOffset = idx * 3u;\n  positionsOutput[posOffset + 0u] = transformedPosition.x;\n  positionsOutput[posOffset + 1u] = transformedPosition.y;\n  positionsOutput[posOffset + 2u] = transformedPosition.z;\n\n  // ============================================================================\n  // 7. 🆕 GPU排序优化: 输出可排序深度值 (Uint32, 降序)\n  // ============================================================================\n  depthsOutput[idx] = computeSortableDepth(transformedPosition);\n}\n\n";
-class TransformPipeline {
-  constructor(device) {
-    __publicField(this, "device");
-    __publicField(this, "computePipeline", null);
-    __publicField(this, "bindGroup", null);
-    // GPU Buffers
-    __publicField(this, "originalSplatsBuffer", null);
-    __publicField(this, "faceGeometryBuffer", null);
-    __publicField(this, "transformedOutputBuffer", null);
-    __publicField(this, "positionsOutputBuffer", null);
-    // 🚀 紧凑的positions输出
-    __publicField(this, "viewMatrixBuffer", null);
-    // 🆕 View matrix uniform
-    __publicField(this, "depthsOutputBuffer", null);
-    // 🆕 深度输出 (Uint32, GPU排序用)
-    // 数据规模
-    __publicField(this, "splatCount", 0);
-    __publicField(this, "faceCount", 0);
-    // 🆕 GPU FLAME 支持：标记是否使用外部 GPU buffer
-    __publicField(this, "usesExternalFaceGeometryBuffer", false);
-    this.device = device;
-  }
-  /**
-   * 初始化Pipeline
-   */
-  async initialize() {
-    const shaderModule = this.device.createShaderModule({
-      label: "Transform Compute Shader",
-      code: transformShaderCode
-    });
-    this.computePipeline = await this.device.createComputePipelineAsync({
-      label: "Transform Compute Pipeline",
-      layout: "auto",
-      compute: {
-        module: shaderModule,
-        entryPoint: "main"
-      }
-    });
-    logger.log("✅ Transform Pipeline initialized");
-  }
-  /**
-   * 上传Original Splats (一次性调用)
-   * @param originalSplatsData Float32Array, 每个splat 16 floats (64 bytes)
-   * @param splatCount splat数量
-   */
-  uploadOriginalSplats(originalSplatsData, splatCount) {
-    var _a, _b;
-    if (!this.device) {
-      throw new Error("Device not initialized");
-    }
-    this.splatCount = splatCount;
-    const bufferSize = originalSplatsData.byteLength;
-    if (this.originalSplatsBuffer) {
-      this.originalSplatsBuffer.destroy();
-    }
-    this.originalSplatsBuffer = this.device.createBuffer({
-      label: "Original Splats Buffer",
-      size: bufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.device.queue.writeBuffer(
-      this.originalSplatsBuffer,
-      0,
-      originalSplatsData.buffer,
-      originalSplatsData.byteOffset,
-      originalSplatsData.byteLength
-    );
-    this.createTransformedOutputBuffer();
-    this.createViewMatrixBuffer();
-    logger.log(`✅ [TransformPipeline] Original Splats uploaded: ${splatCount} splats (${(bufferSize / 1024 / 1024).toFixed(2)} MB)`, {
-      originalSplatsBufferSize: this.originalSplatsBuffer.size,
-      transformedOutputBufferSize: ((_a = this.transformedOutputBuffer) == null ? void 0 : _a.size) || 0,
-      viewMatrixBufferSize: ((_b = this.viewMatrixBuffer) == null ? void 0 : _b.size) || 0,
-      bindGroupCreated: false
-      // bind group在首次updateFaceGeometry时创建
-    });
-  }
-  /**
-   * 🆕 设置外部 GPU FaceGeometry Buffer（GPU FLAME 路径）
-   * @param externalBuffer 外部 GPU buffer（来自 FLAME Pipeline 的 faceGeometriesBuffer）
-   * @param faceCount face 数量
-   */
-  setFaceGeometryBufferFromGPU(externalBuffer, faceCount) {
-    if (!this.device) {
-      throw new Error("Device not initialized");
-    }
-    if (this.faceGeometryBuffer && !this.usesExternalFaceGeometryBuffer) {
-      this.faceGeometryBuffer.destroy();
-    }
-    this.faceGeometryBuffer = externalBuffer;
-    this.faceCount = faceCount;
-    this.usesExternalFaceGeometryBuffer = true;
-    this.createBindGroup();
-  }
-  /**
-   * 更新Face Geometry Buffer (每帧调用) - CPU 路径
-   * @param faceGeometryData Float32Array, 每个face 8 floats (32 bytes)
-   */
-  updateFaceGeometry(faceGeometryData) {
-    if (!this.device) {
-      throw new Error("Device not initialized");
-    }
-    const faceCount = faceGeometryData.length / 8;
-    const bufferSize = faceGeometryData.byteLength;
-    const needsRebuild = !this.faceGeometryBuffer || this.faceCount !== faceCount || this.usesExternalFaceGeometryBuffer;
-    if (needsRebuild) {
-      this.faceCount = faceCount;
-      if (this.faceGeometryBuffer && !this.usesExternalFaceGeometryBuffer) {
-        this.faceGeometryBuffer.destroy();
-      }
-      this.faceGeometryBuffer = this.device.createBuffer({
-        label: "Face Geometry Buffer (CPU path)",
-        size: bufferSize,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-      this.usesExternalFaceGeometryBuffer = false;
-      this.createBindGroup();
-    }
-    if (!this.faceGeometryBuffer) {
-      throw new Error("FaceGeometry buffer not created");
-    }
-    this.device.queue.writeBuffer(
-      this.faceGeometryBuffer,
-      0,
-      faceGeometryData.buffer,
-      faceGeometryData.byteOffset,
-      faceGeometryData.byteLength
-    );
-  }
-  /**
-   * 执行Transform计算 (在给定的command encoder中)
-   * @param commandEncoder 外部command encoder (与render共享以保证顺序)
-   */
-  executeInEncoder(commandEncoder) {
-    if (!this.device || !this.computePipeline || !this.bindGroup) {
-      return;
-    }
-    if (this.splatCount === 0) {
-      return;
-    }
-    const passEncoder = commandEncoder.beginComputePass({
-      label: "Transform Compute Pass"
-    });
-    passEncoder.setPipeline(this.computePipeline);
-    passEncoder.setBindGroup(0, this.bindGroup);
-    const workgroupCount = Math.ceil(this.splatCount / 256);
-    passEncoder.dispatchWorkgroups(workgroupCount);
-    passEncoder.end();
-  }
-  /**
-   * 获取Transformed Output Buffer (供渲染器使用)
-   */
-  getTransformedOutputBuffer() {
-    return this.transformedOutputBuffer;
-  }
-  /**
-   * 🚀 获取Positions Output Buffer (供排序使用)
-   */
-  getPositionsOutputBuffer() {
-    return this.positionsOutputBuffer;
-  }
-  /**
-   * 🆕 获取Depths Output Buffer (供GPU排序使用)
-   */
-  getDepthsOutputBuffer() {
-    return this.depthsOutputBuffer;
-  }
-  /**
-   * 🆕 更新View Matrix (每帧调用)
-   * @param viewMatrix 4x4 view matrix
-   */
-  updateViewMatrix(viewMatrix) {
-    if (!this.device || !this.viewMatrixBuffer) {
-      return;
-    }
-    this.device.queue.writeBuffer(
-      this.viewMatrixBuffer,
-      0,
-      viewMatrix.buffer,
-      viewMatrix.byteOffset,
-      viewMatrix.byteLength
-    );
-  }
-  /**
-   * 获取Splat数量
-   */
-  getSplatCount() {
-    return this.splatCount;
-  }
-  /**
-   * 创建Transformed Output Buffer
-   * 格式: position[3] + color[4] + covariance[6] = 13 floats = 52 bytes
-   */
-  createTransformedOutputBuffer() {
-    if (!this.device || this.splatCount === 0) return;
-    const floatsPerSplat = 13;
-    const bufferSize = this.splatCount * floatsPerSplat * 4;
-    if (this.transformedOutputBuffer) {
-      this.transformedOutputBuffer.destroy();
-    }
-    this.transformedOutputBuffer = this.device.createBuffer({
-      label: "Transformed Output Buffer",
-      size: bufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.createPositionsOutputBuffer();
-    this.createDepthsOutputBuffer();
-  }
-  /**
-   * 🚀 创建Positions Output Buffer (用于排序)
-   * 格式: position[3] = 3 floats = 12 bytes per splat
-   */
-  createPositionsOutputBuffer() {
-    if (!this.device || this.splatCount === 0) return;
-    const floatsPerPosition = 3;
-    const bufferSize = this.splatCount * floatsPerPosition * 4;
-    if (this.positionsOutputBuffer) {
-      this.positionsOutputBuffer.destroy();
-    }
-    this.positionsOutputBuffer = this.device.createBuffer({
-      label: "Positions Output Buffer (for sorting)",
-      size: bufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-  }
-  /**
-   * 🆕 创建View Matrix Buffer
-   */
-  createViewMatrixBuffer() {
-    if (!this.device) return;
-    const bufferSize = 64;
-    this.viewMatrixBuffer = this.device.createBuffer({
-      label: "View Matrix Uniform",
-      size: bufferSize,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-  }
-  /**
-   * 🆕 创建Depths Output Buffer (用于GPU排序)
-   * 格式: depth (Uint32) = 4 bytes per splat
-   */
-  createDepthsOutputBuffer() {
-    if (!this.device || this.splatCount === 0) return;
-    const bufferSize = this.splatCount * 4;
-    this.depthsOutputBuffer = this.device.createBuffer({
-      label: "Depths Output Buffer (for GPU sorting)",
-      size: bufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-  }
-  /**
-   * 创建Bind Group
-   */
-  createBindGroup() {
-    if (!this.device || !this.computePipeline || !this.originalSplatsBuffer || !this.faceGeometryBuffer || !this.transformedOutputBuffer || !this.positionsOutputBuffer || !this.viewMatrixBuffer || // 🆕 新增检查
-    !this.depthsOutputBuffer) {
-      return;
-    }
-    const bindGroupLayout = this.computePipeline.getBindGroupLayout(0);
-    this.bindGroup = this.device.createBindGroup({
-      label: "Transform Bind Group",
-      layout: bindGroupLayout,
-      entries: [
-        {
-          binding: 0,
-          // originalSplats
-          resource: { buffer: this.originalSplatsBuffer }
-        },
-        {
-          binding: 1,
-          // faceGeometries
-          resource: { buffer: this.faceGeometryBuffer }
-        },
-        {
-          binding: 2,
-          // transformedSplats
-          resource: { buffer: this.transformedOutputBuffer }
-        },
-        {
-          binding: 3,
-          // positionsOutput
-          resource: { buffer: this.positionsOutputBuffer }
-        },
-        {
-          binding: 4,
-          // 🆕 viewMatrix (uniform)
-          resource: { buffer: this.viewMatrixBuffer }
-        },
-        {
-          binding: 5,
-          // 🆕 depthsOutput
-          resource: { buffer: this.depthsOutputBuffer }
-        }
-      ]
-    });
-  }
-  /**
-   * 清理资源
-   */
-  destroy() {
-    var _a, _b, _c, _d, _e2;
-    (_a = this.originalSplatsBuffer) == null ? void 0 : _a.destroy();
-    if (this.faceGeometryBuffer && !this.usesExternalFaceGeometryBuffer) {
-      this.faceGeometryBuffer.destroy();
-    }
-    (_b = this.transformedOutputBuffer) == null ? void 0 : _b.destroy();
-    (_c = this.positionsOutputBuffer) == null ? void 0 : _c.destroy();
-    (_d = this.viewMatrixBuffer) == null ? void 0 : _d.destroy();
-    (_e2 = this.depthsOutputBuffer) == null ? void 0 : _e2.destroy();
-    this.originalSplatsBuffer = null;
-    this.faceGeometryBuffer = null;
-    this.transformedOutputBuffer = null;
-    this.positionsOutputBuffer = null;
-    this.viewMatrixBuffer = null;
-    this.depthsOutputBuffer = null;
-    this.bindGroup = null;
-  }
-}
-const flameCommonWGSL = "/**\n * FLAME Common Definitions\n *\n * 共享的结构体、常量和工具函数\n * 🔧 Updated: Added staticOffsetCount to FLAMEMetadata\n */\n\n// ============================================================================\n// 常量定义\n// ============================================================================\n\nconst PI: f32 = 3.14159265359;\n\n// ============================================================================\n// 结构体定义 (与 FLAMEGPUBuffers 对齐)\n// ============================================================================\n\n/**\n * FLAME 帧参数 (Uniform Buffer)\n * 🚀 优化: 移除 shapeParams (已分离为独立 Storage Buffer)\n * Layout (std140, vec4 对齐):\n * - exprParams: 25 vec4 (100 floats)\n * - rotation: 1 vec4 (3 floats + padding)\n * - translation: 1 vec4 (3 floats + padding)\n * - neckPose: 1 vec4 (3 floats + padding)\n * - jawPose: 1 vec4 (3 floats + padding)\n * - eyesPose: 2 vec4 (6 floats)\n * - eyelid: 1 vec4 (2 floats + padding)\n * Total: 32 vec4 = 512 bytes (was 1744 bytes, 节省 71%)\n */\nstruct FLAMEParams {\n  exprParams: array<vec4<f32>, 25>,   // [100] expression parameters\n  rotation: vec4<f32>,                 // [3] global rotation (axis-angle) + padding\n  translation: vec4<f32>,              // [3] global translation + padding\n  neckPose: vec4<f32>,                 // [3] neck pose + padding\n  jawPose: vec4<f32>,                  // [3] jaw pose + padding\n  eyesPose: array<vec4<f32>, 2>,      // [6] eyes pose (2 vec4)\n  eyelid: vec4<f32>,                   // [2] eyelid + padding\n}\n\n/**\n * FLAME 元数据 (Uniform Buffer)\n */\nstruct FLAMEMetadata {\n  vertexCount: u32,\n  faceCount: u32,\n  jointCount: u32,\n  shapeParamCount: u32,\n  poseParamCount: u32,\n  staticOffsetCount: u32,  // 🆕 静态偏移顶点数量\n  activeShapeCount: u32,   // 🚀 活跃shape参数数量\n  _padding0: u32,          // 对齐到 32 bytes\n}\n\n// ============================================================================\n// 工具函数\n// ============================================================================\n\n/**\n * Rodrigues 公式: 轴角表示转换为旋转矩阵\n * @param axisAngle 轴角表示 (vec3)\n * @return 3x3 旋转矩阵\n */\nfn rodrigues(axisAngle: vec3<f32>) -> mat3x3<f32> {\n  // 🔧 匹配 CPU 实现：将 epsilon 加到 axis_angle 的每个分量上\n  // CPU: Vector3f axis_angle_with_epsilon(axis_angle.x + epsilon, axis_angle.y + epsilon, axis_angle.z + epsilon);\n  const EPSILON = 1e-8;\n  let axisAngleWithEpsilon = axisAngle + vec3<f32>(EPSILON);\n\n  // 计算旋转角度 θ = ||axis_angle + epsilon||\n  let theta = length(axisAngleWithEpsilon);\n\n  // 归一化得到旋转轴\n  let axis = axisAngleWithEpsilon / theta;\n  let c = cos(theta);\n  let s = sin(theta);\n  let t = 1.0 - c;\n\n  let x = axis.x;\n  let y = axis.y;\n  let z = axis.z;\n\n  // 旋转矩阵 (列主序) - 使用 Rodrigues 公式：R = I + sin(θ)*K + (1-cos(θ))*K²\n  // 其中 K 是反对称矩阵，K² 是 K 的平方\n  return mat3x3<f32>(\n    vec3<f32>(t*x*x + c,   t*x*y + s*z, t*x*z - s*y),\n    vec3<f32>(t*x*y - s*z, t*y*y + c,   t*y*z + s*x),\n    vec3<f32>(t*x*z + s*y, t*y*z - s*x, t*z*z + c)\n  );\n}\n\n/**\n * 构建 4x4 变换矩阵 (从旋转和平移)\n * @param rotation 3x3 旋转矩阵\n * @param translation 平移向量\n * @return 4x4 变换矩阵\n */\nfn makeTransform(rotation: mat3x3<f32>, translation: vec3<f32>) -> mat4x4<f32> {\n  return mat4x4<f32>(\n    vec4<f32>(rotation[0], 0.0),\n    vec4<f32>(rotation[1], 0.0),\n    vec4<f32>(rotation[2], 0.0),\n    vec4<f32>(translation, 1.0)\n  );\n}\n\n/**\n * 🚀 优化: 从 vec4 数组提取 float，使用数组索引消除分支\n */\nfn extractFloatExpr(arr: array<vec4<f32>, 25>, idx: u32) -> f32 {\n  let vecIdx = idx / 4u;\n  let offset = idx % 4u;\n  let v = arr[vecIdx];\n  // 使用数组字面量代替 if-else，GPU 可以优化为 swizzle\n  return array<f32, 4>(v.x, v.y, v.z, v.w)[offset];\n}\n\n/**\n * 矩阵乘法 (mat3x3 * vec3)\n */\nfn matMulVec3(m: mat3x3<f32>, v: vec3<f32>) -> vec3<f32> {\n  return vec3<f32>(\n    dot(m[0], v),\n    dot(m[1], v),\n    dot(m[2], v)\n  );\n}\n\n/**\n * 矩阵乘法 (mat3x3 * mat3x3)\n */\nfn matMul3x3(a: mat3x3<f32>, b: mat3x3<f32>) -> mat3x3<f32> {\n  return mat3x3<f32>(\n    matMulVec3(a, b[0]),\n    matMulVec3(a, b[1]),\n    matMulVec3(a, b[2])\n  );\n}\n\n/**\n * 计算三角形法向量\n */\nfn computeTriangleNormal(v0: vec3<f32>, v1: vec3<f32>, v2: vec3<f32>) -> vec3<f32> {\n  let edge1 = v1 - v0;\n  let edge2 = v2 - v0;\n  return normalize(cross(edge1, edge2));\n}\n\n/**\n * 计算三角形质心\n */\nfn computeTriangleCentroid(v0: vec3<f32>, v1: vec3<f32>, v2: vec3<f32>) -> vec3<f32> {\n  return (v0 + v1 + v2) / 3.0;\n}\n\n/**\n * 四元数转旋转矩阵\n * @param q 四元数 (x, y, z, w)\n * @return 3x3 旋转矩阵\n */\nfn quaternionToMatrix(q: vec4<f32>) -> mat3x3<f32> {\n  let x = q.x;\n  let y = q.y;\n  let z = q.z;\n  let w = q.w;\n\n  let x2 = x * x;\n  let y2 = y * y;\n  let z2 = z * z;\n  let xy = x * y;\n  let xz = x * z;\n  let yz = y * z;\n  let wx = w * x;\n  let wy = w * y;\n  let wz = w * z;\n\n  return mat3x3<f32>(\n    vec3<f32>(1.0 - 2.0*(y2 + z2), 2.0*(xy + wz), 2.0*(xz - wy)),\n    vec3<f32>(2.0*(xy - wz), 1.0 - 2.0*(x2 + z2), 2.0*(yz + wx)),\n    vec3<f32>(2.0*(xz + wy), 2.0*(yz - wx), 1.0 - 2.0*(x2 + y2))\n  );\n}\n\n";
-const flameShapeBlendWGSL = "@group(0) @binding(0) var<uniform> metadata: FLAMEMetadata;\n@group(0) @binding(1) var<storage, read> activeShapeIndices: array<u32>;  // 🚀 活跃shape参数索引\n@group(0) @binding(2) var<storage, read> activeShapeValues: array<f32>;   // 🚀 活跃shape参数值\n@group(0) @binding(3) var<uniform> params: FLAMEParams;\n\n@group(1) @binding(0) var<storage, read> vTemplate: array<f32>;\n@group(1) @binding(1) var<storage, read> shapedirs: array<f32>;\n@group(1) @binding(2) var<storage, read_write> vShaped: array<f32>;\n@group(1) @binding(3) var<storage, read> staticOffset: array<f32>;\n\n@compute @workgroup_size(256)\nfn main(@builtin(global_invocation_id) globalId: vec3<u32>) {\n  let vertexIdx = globalId.x;\n  let vertexCount = metadata.vertexCount;\n  \n  // 🔧 边界检查：确保不处理超出范围的顶点\n  if (vertexIdx >= vertexCount) {\n    return;\n  }\n\n  let baseIdx = vertexIdx * 3u;\n  var vertex = vec3<f32>(\n    vTemplate[baseIdx],\n    vTemplate[baseIdx + 1u],\n    vTemplate[baseIdx + 2u]\n  );\n\n  let numExprParams = 100u;\n  let numActiveShapeParams = metadata.activeShapeCount;  // 🚀 使用活跃参数数量\n\n  // 🚀 优化: 只循环活跃的shape参数（零参数过滤）\n  for (var i = 0u; i < numActiveShapeParams; i++) {\n    let shapeParamIdx = activeShapeIndices[i];  // 原始参数索引 [0, 300)\n    let shapeParam = activeShapeValues[i];      // 参数值\n\n    let offset = shapeParamIdx * vertexCount * 3u + vertexIdx * 3u;\n    let dx = shapedirs[offset];\n    let dy = shapedirs[offset + 1u];\n    let dz = shapedirs[offset + 2u];\n\n    vertex += vec3<f32>(dx, dy, dz) * shapeParam;\n  }\n\n  for (var e = 0u; e < numExprParams; e++) {\n    let exprParam = extractFloatExpr(params.exprParams, e);\n    let paramIdx = 300u + e;  // shape参数固定为300个\n\n    let offset = paramIdx * vertexCount * 3u + vertexIdx * 3u;\n    let dx = shapedirs[offset];\n    let dy = shapedirs[offset + 1u];\n    let dz = shapedirs[offset + 2u];\n\n    vertex += vec3<f32>(dx, dy, dz) * exprParam;\n  }\n\n  if (vertexIdx < metadata.staticOffsetCount) {\n    vertex.x += staticOffset[baseIdx];\n    vertex.y += staticOffset[baseIdx + 1u];\n    vertex.z += staticOffset[baseIdx + 2u];\n  }\n\n  vShaped[baseIdx] = vertex.x;\n  vShaped[baseIdx + 1u] = vertex.y;\n  vShaped[baseIdx + 2u] = vertex.z;\n}\n\n";
-const flamePoseDeformWGSL = "@group(0) @binding(0) var<uniform> params: FLAMEParams;\n@group(0) @binding(1) var<uniform> metadata: FLAMEMetadata;\n\n@group(1) @binding(0) var<storage, read> vShaped: array<f32>;\n@group(1) @binding(1) var<storage, read> posedirs: array<f32>;\n@group(1) @binding(2) var<storage, read_write> vPosed: array<f32>;\n\n/**\n * 计算 pose_feature 向量 (36 维)\n *\n * 从 5 个关节的旋转参数计算:\n * - Joint 0 (global): 跳过\n * - Joints 1-4 (neck, jaw, left_eye, right_eye): 各贡献 9 个元素\n *\n * 🔧 关键修复: WGSL mat3x3 是列主序的!\n *    - mat[col][row] = M[row][col]\n *    - 要按 C++ 行主序展平 (M[0][0], M[0][1], M[0][2], M[1][0], ...)\n *    - 必须用 mat[col][row] 访问 M[row][col]\n */\nfn computePoseFeature() -> array<f32, 36> {\n  var pose_feature: array<f32, 36>;\n\n  // Joint 1: neck (indices 0-8)\n  let R_neck = rodrigues(vec3<f32>(params.neckPose.x, params.neckPose.y, params.neckPose.z));\n  let I = mat3x3<f32>(1.0, 0.0, 0.0,  0.0, 1.0, 0.0,  0.0, 0.0, 1.0);\n  let rel_neck = R_neck - I;\n\n  // 🔧 修复: 按行主序展平 - mat[col][row] 对应 M[row][col]\n  // 第 0 行: M[0][0], M[0][1], M[0][2] = mat[0][0], mat[1][0], mat[2][0]\n  pose_feature[0] = rel_neck[0][0]; pose_feature[1] = rel_neck[1][0]; pose_feature[2] = rel_neck[2][0];\n  // 第 1 行: M[1][0], M[1][1], M[1][2] = mat[0][1], mat[1][1], mat[2][1]\n  pose_feature[3] = rel_neck[0][1]; pose_feature[4] = rel_neck[1][1]; pose_feature[5] = rel_neck[2][1];\n  // 第 2 行: M[2][0], M[2][1], M[2][2] = mat[0][2], mat[1][2], mat[2][2]\n  pose_feature[6] = rel_neck[0][2]; pose_feature[7] = rel_neck[1][2]; pose_feature[8] = rel_neck[2][2];\n\n  // Joint 2: jaw (indices 9-17)\n  let R_jaw = rodrigues(vec3<f32>(params.jawPose.x, params.jawPose.y, params.jawPose.z));\n  let rel_jaw = R_jaw - I;\n\n  pose_feature[9]  = rel_jaw[0][0]; pose_feature[10] = rel_jaw[1][0]; pose_feature[11] = rel_jaw[2][0];\n  pose_feature[12] = rel_jaw[0][1]; pose_feature[13] = rel_jaw[1][1]; pose_feature[14] = rel_jaw[2][1];\n  pose_feature[15] = rel_jaw[0][2]; pose_feature[16] = rel_jaw[1][2]; pose_feature[17] = rel_jaw[2][2];\n\n  // Joint 3: left_eye (indices 18-26)\n  let R_left_eye = rodrigues(vec3<f32>(params.eyesPose[0].x, params.eyesPose[0].y, params.eyesPose[0].z));\n  let rel_left_eye = R_left_eye - I;\n\n  pose_feature[18] = rel_left_eye[0][0]; pose_feature[19] = rel_left_eye[1][0]; pose_feature[20] = rel_left_eye[2][0];\n  pose_feature[21] = rel_left_eye[0][1]; pose_feature[22] = rel_left_eye[1][1]; pose_feature[23] = rel_left_eye[2][1];\n  pose_feature[24] = rel_left_eye[0][2]; pose_feature[25] = rel_left_eye[1][2]; pose_feature[26] = rel_left_eye[2][2];\n\n  // Joint 4: right_eye (indices 27-35)\n  let R_right_eye = rodrigues(vec3<f32>(params.eyesPose[1].x, params.eyesPose[1].y, params.eyesPose[1].z));\n  let rel_right_eye = R_right_eye - I;\n\n  pose_feature[27] = rel_right_eye[0][0]; pose_feature[28] = rel_right_eye[1][0]; pose_feature[29] = rel_right_eye[2][0];\n  pose_feature[30] = rel_right_eye[0][1]; pose_feature[31] = rel_right_eye[1][1]; pose_feature[32] = rel_right_eye[2][1];\n  pose_feature[33] = rel_right_eye[0][2]; pose_feature[34] = rel_right_eye[1][2]; pose_feature[35] = rel_right_eye[2][2];\n\n  return pose_feature;\n}\n\n// ============================================================================\n// Compute Shader\n// ============================================================================\n\n@compute @workgroup_size(256)\nfn main(@builtin(global_invocation_id) globalId: vec3<u32>) {\n  let vertexIdx = globalId.x;\n  let vertexCount = metadata.vertexCount;\n  \n  // 🔧 边界检查：确保不处理超出范围的顶点\n  if (vertexIdx >= vertexCount) {\n    return;\n  }\n\n  let baseIdx = vertexIdx * 3u;\n  var vertex = vec3<f32>(\n    vShaped[baseIdx],\n    vShaped[baseIdx + 1u],\n    vShaped[baseIdx + 2u]\n  );\n\n  // 计算 pose_feature (36 维)\n  let pose_feature = computePoseFeature();\n  let poseParamCount = metadata.poseParamCount; // 36\n\n  var pose_offset = vec3<f32>(0.0, 0.0, 0.0);\n\n  // 🔧 使用转置布局 [param][vertex][xyz] (GPU优化后的布局)\n  // GPU 数据已通过 transposeBlendshapeData 转置，布局为 [param][vertex][xyz]\n  // 索引公式: p * vertexCount * 3 + v * 3 + xyz\n  for (var p = 0u; p < poseParamCount; p++) {\n    let feature = pose_feature[p];\n\n    let offset = p * vertexCount * 3u + vertexIdx * 3u;\n    let dx = posedirs[offset];\n    let dy = posedirs[offset + 1u];\n    let dz = posedirs[offset + 2u];\n\n    pose_offset += vec3<f32>(dx, dy, dz) * feature;\n  }\n\n  // 应用姿态偏移\n  vertex += pose_offset;\n\n  // 写回结果\n  vPosed[baseIdx] = vertex.x;\n  vPosed[baseIdx + 1u] = vertex.y;\n  vPosed[baseIdx + 2u] = vertex.z;\n}\n\n";
-const flameJointRegressWGSL = "@group(0) @binding(1) var<uniform> metadata: FLAMEMetadata;\n\n@group(1) @binding(0) var<storage, read> vShaped: array<f32>;  // 🔧 修复: 使用v_shaped而不是v_posed\n@group(1) @binding(1) var<storage, read> jRegressor: array<f32>;\n@group(1) @binding(2) var<storage, read_write> joints: array<f32>;\n\n\n// 每个 workgroup 的局部累加缓冲区 (256 threads × 3 coords)\nvar<workgroup> sharedSumX: array<f32, 256>;\nvar<workgroup> sharedSumY: array<f32, 256>;\nvar<workgroup> sharedSumZ: array<f32, 256>;\n\n// ============================================================================\n// Compute Shader\n// ============================================================================\n\n/**\n * 计算策略:\n * - 对于 5 个关节，使用 5 个 workgroups (每个 workgroup 256 threads)\n * - 每个 workgroup 处理一个关节的所有顶点\n * - 使用 shared memory 进行树状归约\n *\n * Dispatch: (5, 1, 1) workgroups × (256, 1, 1) threads\n */\n@compute @workgroup_size(256, 1, 1)\nfn main(\n  @builtin(global_invocation_id) globalId: vec3<u32>,\n  @builtin(local_invocation_id) localId: vec3<u32>,\n  @builtin(workgroup_id) workgroupId: vec3<u32>\n) {\n  let jointIdx = workgroupId.x;\n  let threadIdx = localId.x;\n  let vertexCount = metadata.vertexCount;\n  let jointCount = metadata.jointCount;\n\n  // 🔧 边界检查：确保不处理超出范围的关节\n  if (jointIdx >= jointCount) {\n    return;\n  }\n\n  // 初始化局部累加器\n  var localSumX: f32 = 0.0;\n  var localSumY: f32 = 0.0;\n  var localSumZ: f32 = 0.0;\n\n  // 每个线程处理多个顶点（循环展开）\n  // 8031 vertices / 256 threads ≈ 32 iterations per thread\n  let stride = 256u;\n  var vertexIdx = threadIdx;\n\n  // 🔧 修复: 使用v_shaped而不是v_posed（与CPU逻辑一致）\n  while (vertexIdx < vertexCount) {\n    let regressorIdx = jointIdx * vertexCount + vertexIdx;\n    let weight = jRegressor[regressorIdx];\n    let vIdx = vertexIdx * 3u;\n    \n    // 🔧 边界检查：确保不访问超出范围的顶点\n    if (vIdx + 2u < arrayLength(&vShaped)) {\n      let vx = vShaped[vIdx];\n      let vy = vShaped[vIdx + 1u];\n      let vz = vShaped[vIdx + 2u];\n\n      localSumX += weight * vx;\n      localSumY += weight * vy;\n      localSumZ += weight * vz;\n    }\n\n    vertexIdx += stride;\n  }\n\n  // 写入 shared memory\n  sharedSumX[threadIdx] = localSumX;\n  sharedSumY[threadIdx] = localSumY;\n  sharedSumZ[threadIdx] = localSumZ;\n\n  // 同步所有线程\n  workgroupBarrier();\n\n  // 🚀 优化: 树状归约 (256 → 128 → 64 → 32，然后展开最后 5 次迭代)\n  // 前 3 次迭代需要 barrier (128 → 64 → 32)\n  var activeThreads = 128u;\n  for (var i = 0u; i < 3u; i++) {\n    if (threadIdx < activeThreads) {\n      sharedSumX[threadIdx] += sharedSumX[threadIdx + activeThreads];\n      sharedSumY[threadIdx] += sharedSumY[threadIdx + activeThreads];\n      sharedSumZ[threadIdx] += sharedSumZ[threadIdx + activeThreads];\n    }\n    workgroupBarrier();\n    activeThreads = activeThreads / 2u;\n  }\n\n  // 🔧 展开最后 5 次迭代 (32 → 16 → 8 → 4 → 2 → 1)\n  // 注意：即使在同一 subgroup 内，也需要 barrier 以确保正确性\n  if (threadIdx < 32u) {\n    sharedSumX[threadIdx] += sharedSumX[threadIdx + 16u];\n    sharedSumY[threadIdx] += sharedSumY[threadIdx + 16u];\n    sharedSumZ[threadIdx] += sharedSumZ[threadIdx + 16u];\n  }\n  workgroupBarrier();\n  \n  if (threadIdx < 16u) {\n    sharedSumX[threadIdx] += sharedSumX[threadIdx + 8u];\n    sharedSumY[threadIdx] += sharedSumY[threadIdx + 8u];\n    sharedSumZ[threadIdx] += sharedSumZ[threadIdx + 8u];\n  }\n  workgroupBarrier();\n  \n  if (threadIdx < 8u) {\n    sharedSumX[threadIdx] += sharedSumX[threadIdx + 4u];\n    sharedSumY[threadIdx] += sharedSumY[threadIdx + 4u];\n    sharedSumZ[threadIdx] += sharedSumZ[threadIdx + 4u];\n  }\n  workgroupBarrier();\n  \n  if (threadIdx < 4u) {\n    sharedSumX[threadIdx] += sharedSumX[threadIdx + 2u];\n    sharedSumY[threadIdx] += sharedSumY[threadIdx + 2u];\n    sharedSumZ[threadIdx] += sharedSumZ[threadIdx + 2u];\n  }\n  workgroupBarrier();\n  \n  if (threadIdx < 2u) {\n    sharedSumX[threadIdx] += sharedSumX[threadIdx + 1u];\n    sharedSumY[threadIdx] += sharedSumY[threadIdx + 1u];\n    sharedSumZ[threadIdx] += sharedSumZ[threadIdx + 1u];\n  }\n  workgroupBarrier();\n\n  // 线程 0 写入最终结果\n  if (threadIdx == 0u) {\n    let outputIdx = jointIdx * 3u;\n    joints[outputIdx] = sharedSumX[0];\n    joints[outputIdx + 1u] = sharedSumY[0];\n    joints[outputIdx + 2u] = sharedSumZ[0];\n  }\n}\n\n";
-const flameFKinematicsWGSL = "@group(0) @binding(0) var<uniform> params: FLAMEParams;\n@group(0) @binding(1) var<uniform> metadata: FLAMEMetadata;\n\n@group(1) @binding(0) var<storage, read> joints: array<f32>;\n@group(1) @binding(1) var<storage, read_write> jointTransforms: array<f32>;\n\n/**\n * 写入 4x4 矩阵到扁平数组 (列主序)\n */\nfn writeMat4(buffer: ptr<storage, array<f32>, read_write>, offset: u32, m: mat4x4<f32>) {\n  (*buffer)[offset +  0u] = m[0][0];\n  (*buffer)[offset +  1u] = m[0][1];\n  (*buffer)[offset +  2u] = m[0][2];\n  (*buffer)[offset +  3u] = m[0][3];\n  (*buffer)[offset +  4u] = m[1][0];\n  (*buffer)[offset +  5u] = m[1][1];\n  (*buffer)[offset +  6u] = m[1][2];\n  (*buffer)[offset +  7u] = m[1][3];\n  (*buffer)[offset +  8u] = m[2][0];\n  (*buffer)[offset +  9u] = m[2][1];\n  (*buffer)[offset + 10u] = m[2][2];\n  (*buffer)[offset + 11u] = m[2][3];\n  (*buffer)[offset + 12u] = m[3][0];\n  (*buffer)[offset + 13u] = m[3][1];\n  (*buffer)[offset + 14u] = m[3][2];\n  (*buffer)[offset + 15u] = m[3][3];\n}\n\n/**\n * 4x4 矩阵求逆 (简化版，假设是变换矩阵)\n * 对于变换矩阵 [R | t; 0 | 1]，逆矩阵为 [R^T | -R^T*t; 0 | 1]\n *\n * 🔧 关键：WGSL 使用列主序！\n * m[0] = 第1列, m[1] = 第2列, m[2] = 第3列, m[3] = 第4列\n */\nfn invertTransform(m: mat4x4<f32>) -> mat4x4<f32> {\n  // 🔧 正确提取旋转部分 (列主序)\n  // m[col][row] -> M[row][col]\n  let r00 = m[0][0]; let r01 = m[1][0]; let r02 = m[2][0];  // 第1行\n  let r10 = m[0][1]; let r11 = m[1][1]; let r12 = m[2][1];  // 第2行\n  let r20 = m[0][2]; let r21 = m[1][2]; let r22 = m[2][2];  // 第3行\n\n  // 🔧 正确提取平移部分 (第4列)\n  let tx = m[3][0];  // M[0][3]\n  let ty = m[3][1];  // M[1][3]\n  let tz = m[3][2];  // M[2][3]\n\n  // 计算 R^T (旋转矩阵的转置)\n  let rt00 = r00; let rt01 = r10; let rt02 = r20;\n  let rt10 = r01; let rt11 = r11; let rt12 = r21;\n  let rt20 = r02; let rt21 = r12; let rt22 = r22;\n\n  // 计算 -R^T * t\n  let ntx = -(rt00 * tx + rt01 * ty + rt02 * tz);\n  let nty = -(rt10 * tx + rt11 * ty + rt12 * tz);\n  let ntz = -(rt20 * tx + rt21 * ty + rt22 * tz);\n\n  // 🔧 构建逆矩阵 (列主序)\n  return mat4x4<f32>(\n    vec4<f32>(rt00, rt10, rt20, 0.0),  // 第1列\n    vec4<f32>(rt01, rt11, rt21, 0.0),  // 第2列\n    vec4<f32>(rt02, rt12, rt22, 0.0),  // 第3列\n    vec4<f32>(ntx, nty, ntz, 1.0)      // 第4列\n  );\n}\n\n// ============================================================================\n// Compute Shader\n// ============================================================================\n\n@group(1) @binding(2) var<storage, read> parents: array<i32>;\n\n@compute @workgroup_size(1)\nfn main() {\n  // 🔧 严格按照 CPU 路径逻辑：FLAME 标准有 5 个关节\n  // CPU: poseToRotationMatrices 硬编码 5 个旋转矩阵\n  // CPU: skinVerticesFlat 硬编码 5 个关节\n  const NUM_JOINTS = 5u;\n  \n  // 🔧 使用 metadata 以防止编译器优化掉 binding\n  // 确保 metadata 被实际使用（即使我们硬编码了 5）\n  let jointCountFromMetadata = metadata.jointCount;\n  // 验证：如果 metadata 中的 jointCount 不是 5，可能会有问题，但我们仍然使用硬编码的 5\n  // 这只是为了防止编译器优化掉 metadata binding\n  if (jointCountFromMetadata < NUM_JOINTS) {\n    // 这个分支永远不会执行，但确保 metadata 被读取\n  }\n  \n  // ========== Step 1: 读取关节位置 (绝对位置) ==========\n  // 🔧 只读取前 5 个关节（与 CPU 逻辑一致）\n  var J: array<vec3<f32>, NUM_JOINTS>;\n  for (var i = 0u; i < NUM_JOINTS; i++) {\n    let idx = i * 3u;\n    J[i] = vec3<f32>(joints[idx], joints[idx + 1u], joints[idx + 2u]);\n  }\n\n  // ========== Step 2: 计算相对关节位置 ==========\n  // C++: rel_joints[i] = joints[i] - joints[parents[i]]\n  // CPU: for (size_t i = 1; i < num_joints; i++) { rel_joints[i] = rel_joints[i] - joints[parents[i]]; }\n  var rel_J: array<vec3<f32>, NUM_JOINTS>;\n  rel_J[0] = J[0];  // root: 无父关节\n  for (var i = 1u; i < NUM_JOINTS; i++) {\n    let parentIdx = parents[i];\n    if (parentIdx >= 0) {\n      rel_J[i] = J[i] - J[u32(parentIdx)];\n    } else {\n      rel_J[i] = J[i];  // 如果 parent 无效，使用绝对位置\n    }\n  }\n\n  // ========== Step 3: 准备 pose 旋转矩阵 ==========\n  // 🔧 严格按照 CPU: poseToRotationMatrices 从 15 维 full_pose 转换为 5 个旋转矩阵\n  // full_pose[0:3] = rotation, [3:6] = neck, [6:9] = jaw, [9:12] = left_eye, [12:15] = right_eye\n  let globalRotation = params.rotation.xyz;  // full_pose[0:3]\n  let neckPose = params.neckPose.xyz;        // full_pose[3:6]\n  let jawPose = params.jawPose.xyz;          // full_pose[6:9]\n  let leftEyePose = params.eyesPose[0].xyz;  // full_pose[9:12] = [left_eye_pitch, left_eye_yaw, left_eye_roll]\n  let rightEyePose = params.eyesPose[1].xyz;  // full_pose[12:15] = [right_eye_pitch, right_eye_yaw, right_eye_roll]\n\n  var R: array<mat3x3<f32>, NUM_JOINTS>;\n  R[0] = rodrigues(globalRotation);\n  R[1] = rodrigues(neckPose);\n  R[2] = rodrigues(jawPose);\n  R[3] = rodrigues(leftEyePose);\n  R[4] = rodrigues(rightEyePose);\n\n  // ========== Step 4: 创建局部变换矩阵 ==========\n  // C++: transforms_mat[i] = Matrix4f(pose_matrices[i], rel_joints[i])\n  var transforms_mat: array<mat4x4<f32>, NUM_JOINTS>;\n  for (var i = 0u; i < NUM_JOINTS; i++) {\n    transforms_mat[i] = makeTransform(R[i], rel_J[i]);\n  }\n\n  // ========== Step 5: 构建变换链 ==========\n  // C++: transform_chain[0] = transforms_mat[0]\n  //      for (size_t i = 1; i < num_joints; i++) {\n  //        transform_chain[i] = transform_chain[parent] * transforms_mat[i]\n  //      }\n  var transform_chain: array<mat4x4<f32>, NUM_JOINTS>;\n  transform_chain[0] = transforms_mat[0];  // root\n  \n  for (var i = 1u; i < NUM_JOINTS; i++) {\n    let parentIdx = parents[i];\n    if (parentIdx >= 0 && parentIdx < i32(NUM_JOINTS)) {\n      transform_chain[i] = transform_chain[u32(parentIdx)] * transforms_mat[i];\n    } else {\n      // CPU: 如果 parent 无效，使用 Identity\n      transform_chain[i] = transforms_mat[i];\n    }\n  }\n\n  // ========== Step 6: 应用 bind pose inverse ==========\n  // C++: bind_pose = Matrix4f(Identity, joints[i])\n  //      rel_transforms[i] = transform_chain[i] * bind_pose.inverse()\n  for (var i = 0u; i < NUM_JOINTS; i++) {\n    let bind_pose = mat4x4<f32>(\n      vec4<f32>(1.0, 0.0, 0.0, 0.0),\n      vec4<f32>(0.0, 1.0, 0.0, 0.0),\n      vec4<f32>(0.0, 0.0, 1.0, 0.0),\n      vec4<f32>(J[i].x, J[i].y, J[i].z, 1.0)\n    );\n\n    let bind_pose_inv = invertTransform(bind_pose);\n    let rel_transform = transform_chain[i] * bind_pose_inv;\n\n    writeMat4(&jointTransforms, i * 16u, rel_transform);\n  }\n}\n\n";
-const flameLBSWGSL = "@group(0) @binding(0) var<uniform> metadata: FLAMEMetadata;\n\n@group(1) @binding(0) var<storage, read> vPosed: array<f32>;\n@group(1) @binding(1) var<storage, read> jointTransforms: array<f32>;\n@group(1) @binding(2) var<storage, read> lbsWeights: array<f32>;\n@group(1) @binding(3) var<storage, read_write> vDeformed: array<f32>;\n\n// 🚀 优化: 使用 shared memory 缓存 joint transforms (5 joints × 16 floats = 80 floats)\n// 所有线程都需要读取相同的 5 个 joint transforms，缓存到 shared memory 可以显著提升性能\nvar<workgroup> sharedJointTransforms: array<f32, 80>; // 5 joints × 16 floats\n\nfn readMat4FromShared(jointIdx: u32) -> mat4x4<f32> {\n  let offset = jointIdx * 16u;\n  return mat4x4<f32>(\n    vec4<f32>(sharedJointTransforms[offset +  0u], sharedJointTransforms[offset +  1u], sharedJointTransforms[offset +  2u], sharedJointTransforms[offset +  3u]),\n    vec4<f32>(sharedJointTransforms[offset +  4u], sharedJointTransforms[offset +  5u], sharedJointTransforms[offset +  6u], sharedJointTransforms[offset +  7u]),\n    vec4<f32>(sharedJointTransforms[offset +  8u], sharedJointTransforms[offset +  9u], sharedJointTransforms[offset + 10u], sharedJointTransforms[offset + 11u]),\n    vec4<f32>(sharedJointTransforms[offset + 12u], sharedJointTransforms[offset + 13u], sharedJointTransforms[offset + 14u], sharedJointTransforms[offset + 15u])\n  );\n}\n\nfn transformPoint(m: mat4x4<f32>, p: vec3<f32>) -> vec3<f32> {\n  let p4 = vec4<f32>(p, 1.0);\n  let transformed = m * p4;\n  return transformed.xyz;\n}\n\n@compute @workgroup_size(256)\nfn main(\n  @builtin(global_invocation_id) globalId: vec3<u32>,\n  @builtin(local_invocation_id) localId: vec3<u32>\n) {\n  let vertexIdx = globalId.x;\n  let threadIdx = localId.x;\n\n  // 🚀 优化: 使用 shared memory 加载 joint transforms\n  // 每个 workgroup 只需要加载一次，所有线程共享\n  // 使用前 5 个线程加载 5 个 joint transforms (每个 16 floats)\n  const NUM_JOINTS = 5u;\n  if (threadIdx < NUM_JOINTS) {\n    let globalOffset = threadIdx * 16u;\n    let sharedOffset = threadIdx * 16u;\n    // 加载 16 floats (一个 mat4x4)\n    for (var i = 0u; i < 16u; i++) {\n      sharedJointTransforms[sharedOffset + i] = jointTransforms[globalOffset + i];\n    }\n  }\n\n  // 同步所有线程，确保 shared memory 已加载完成\n  // 🔧 必须在边界检查之前执行 barrier，以保证 uniform control flow\n  workgroupBarrier();\n\n  // 🔧 边界检查：确保不处理超出范围的顶点（在 barrier 之后）\n  let vertexCount = metadata.vertexCount;\n  if (vertexIdx >= vertexCount) {\n    return;\n  }\n\n  let baseIdx = vertexIdx * 3u;\n  let vertex = vec3<f32>(\n    vPosed[baseIdx],\n    vPosed[baseIdx + 1u],\n    vPosed[baseIdx + 2u]\n  );\n\n  // 🔧 严格按照 CPU 路径逻辑：FLAME 标准有 5 个关节\n  // 🔧 使用 metadata 以防止编译器优化掉 binding\n  let _jointCount = metadata.jointCount;  // 防止优化，但实际使用硬编码的 5\n  let weightBase = vertexIdx * NUM_JOINTS;\n\n  // 🔧 完全按照 CPU 逻辑：只使用前 5 个关节的权重和变换矩阵\n  let w0 = lbsWeights[weightBase + 0u];\n  let w1 = lbsWeights[weightBase + 1u];\n  let w2 = lbsWeights[weightBase + 2u];\n  let w3 = lbsWeights[weightBase + 3u];\n  let w4 = lbsWeights[weightBase + 4u];\n\n  // 🚀 优化: 从 shared memory 读取 joint transforms\n  let T0 = readMat4FromShared(0u);\n  let T1 = readMat4FromShared(1u);\n  let T2 = readMat4FromShared(2u);\n  let T3 = readMat4FromShared(3u);\n  let T4 = readMat4FromShared(4u);\n\n  // 🔧 完全按照 CPU 逻辑：内联 transformPoint 并加权\n  // 🔧 CPU的skinVerticesFlat不包含全局平移，所以这里也不应用\n  var result = transformPoint(T0, vertex) * w0 +\n               transformPoint(T1, vertex) * w1 +\n               transformPoint(T2, vertex) * w2 +\n               transformPoint(T3, vertex) * w3 +\n               transformPoint(T4, vertex) * w4;\n\n  // ❌ 移除：CPU的skinVerticesFlat不包含全局平移\n  // 全局平移应该在LBS之后、Face Geometry之前单独应用（如果需要）\n  // result += params.translation.xyz;\n\n  vDeformed[baseIdx] = result.x;\n  vDeformed[baseIdx + 1u] = result.y;\n  vDeformed[baseIdx + 2u] = result.z;\n}\n\n";
-const flameFaceGeometryWGSL = "/**\n * FLAME Face Geometry Compute Shader\n *\n * 为每个三角形面片计算几何信息:\n * - center: 面片重心 (v0 + v1 + v2) / 3\n * - scale: 面片缩放（基于面积）\n * - quaternion: 面片方向（从局部坐标系转换）\n *\n * 这些几何信息用于后续的 3DGS splat 变换\n *\n * Input:\n * - v_deformed: [vertexCount × 3] 最终变形顶点\n * - faces: [faceCount × 3] 面片索引\n *\n * Output:\n * - faceGeometries: [faceCount × 8] (center xyz, scale, quat xyzw)\n */\n\n// 导入公共定义\n// (WGSL 不支持 #include，在 TypeScript 中手动拼接)\n\n@group(0) @binding(0) var<uniform> params: FLAMEParams;\n@group(0) @binding(1) var<uniform> metadata: FLAMEMetadata;\n\n@group(1) @binding(0) var<storage, read> vDeformed: array<f32>;\n@group(1) @binding(1) var<storage, read> faces: array<u32>;\n@group(1) @binding(2) var<storage, read_write> faceGeometries: array<f32>;\n\n/**\n * 安全归一化向量（处理零长度情况）\n * 🔧 与CPU实现一致：长度为0时返回零向量\n */\nfn safeNormalize(v: vec3<f32>) -> vec3<f32> {\n  let len = length(v);\n  if (len > 1e-8) {\n    return v / len;\n  } else {\n    // 🔧 与CPU一致：返回零向量（而不是默认方向）\n    return vec3<f32>(0.0, 0.0, 0.0);\n  }\n}\n\n/**\n * 3x3 旋转矩阵转四元数 (xyzw 顺序)\n *\n * 使用 Shepperd's method 确保数值稳定性\n */\nfn matrixToQuaternion(m: mat3x3<f32>) -> vec4<f32> {\n  let trace = m[0][0] + m[1][1] + m[2][2];\n\n  var quat: vec4<f32>;\n\n  if (trace > 0.0) {\n    // w 是最大分量\n    let s = sqrt(trace + 1.0) * 2.0; // s = 4 * w\n    quat.w = 0.25 * s;\n    quat.x = (m[2][1] - m[1][2]) / s;\n    quat.y = (m[0][2] - m[2][0]) / s;\n    quat.z = (m[1][0] - m[0][1]) / s;\n  } else if (m[0][0] > m[1][1] && m[0][0] > m[2][2]) {\n    // x 是最大分量\n    let s = sqrt(1.0 + m[0][0] - m[1][1] - m[2][2]) * 2.0; // s = 4 * x\n    quat.w = (m[2][1] - m[1][2]) / s;\n    quat.x = 0.25 * s;\n    quat.y = (m[0][1] + m[1][0]) / s;\n    quat.z = (m[0][2] + m[2][0]) / s;\n  } else if (m[1][1] > m[2][2]) {\n    // y 是最大分量\n    let s = sqrt(1.0 + m[1][1] - m[0][0] - m[2][2]) * 2.0; // s = 4 * y\n    quat.w = (m[0][2] - m[2][0]) / s;\n    quat.x = (m[0][1] + m[1][0]) / s;\n    quat.y = 0.25 * s;\n    quat.z = (m[1][2] + m[2][1]) / s;\n  } else {\n    // z 是最大分量\n    let s = sqrt(1.0 + m[2][2] - m[0][0] - m[1][1]) * 2.0; // s = 4 * z\n    quat.w = (m[1][0] - m[0][1]) / s;\n    quat.x = (m[0][2] + m[2][0]) / s;\n    quat.y = (m[1][2] + m[2][1]) / s;\n    quat.z = 0.25 * s;\n  }\n\n  // 手动归一化（与CPU实现一致）\n  let len = length(quat);\n  if (len > 1e-8) {\n    // 🔧 确保 w 分量为正，消除符号歧义（q 和 -q 表示同一个旋转）\n    // 在归一化之前检查未归一化的w（与CPU实现完全一致）\n    var normalized = quat;\n    if (quat.w < 0.0) {\n      normalized.x = -quat.x;\n      normalized.y = -quat.y;\n      normalized.z = -quat.z;\n      normalized.w = -quat.w;\n    }\n    \n    // 然后归一化\n    return normalized / len;\n  } else {\n    // 默认单位四元数\n    return vec4<f32>(0.0, 0.0, 0.0, 1.0);\n  }\n}\n\nfn computeFaceOrientationAndScaling(\n  v0: vec3<f32>,\n  v1: vec3<f32>,\n  v2: vec3<f32>\n) -> mat3x3<f32> {\n  let edge1 = v1 - v0;\n  let edge2 = v2 - v0;\n\n  let axis0 = safeNormalize(edge1);\n  let tempAxis1 = cross(axis0, edge2);\n  let axis1 = safeNormalize(tempAxis1);\n  let tempAxis2 = cross(axis1, axis0);\n  let axis2 = safeNormalize(tempAxis2) * -1.0;\n\n  return mat3x3<f32>(\n    axis0.x, axis1.x, axis2.x,\n    axis0.y, axis1.y, axis2.y,\n    axis0.z, axis1.z, axis2.z\n  );\n}\n\n@compute @workgroup_size(256)\nfn main(@builtin(global_invocation_id) globalId: vec3<u32>) {\n  let faceIdx = globalId.x;\n  \n  // 🔧 读取metadata以防止编译器优化掉binding\n  let _faceCount = metadata.faceCount;\n  let _vertexCount = metadata.vertexCount;\n\n  let faceBaseIdx = faceIdx * 3u;\n  let idx0 = faces[faceBaseIdx];\n  let idx1 = faces[faceBaseIdx + 1u];\n  let idx2 = faces[faceBaseIdx + 2u];\n\n  // 🔧 读取顶点并应用全局平移（与CPU逻辑一致：CPU的Face Geometry使用已应用平移的顶点）\n  let v0 = vec3<f32>(\n    vDeformed[idx0 * 3u],\n    vDeformed[idx0 * 3u + 1u],\n    vDeformed[idx0 * 3u + 2u]\n  ) + params.translation.xyz;\n\n  let v1 = vec3<f32>(\n    vDeformed[idx1 * 3u],\n    vDeformed[idx1 * 3u + 1u],\n    vDeformed[idx1 * 3u + 2u]\n  ) + params.translation.xyz;\n\n  let v2 = vec3<f32>(\n    vDeformed[idx2 * 3u],\n    vDeformed[idx2 * 3u + 1u],\n    vDeformed[idx2 * 3u + 2u]\n  ) + params.translation.xyz;\n\n  let center = (v0 + v1 + v2) / 3.0;\n\n  let edge1 = v1 - v0;\n  let edge2 = v2 - v0;\n  let orientationMatrix = computeFaceOrientationAndScaling(v0, v1, v2);\n\n  let axis0 = safeNormalize(edge1);\n  let tempAxis1 = cross(axis0, edge2);\n  let axis1 = safeNormalize(tempAxis1);\n  let tempAxis2 = cross(axis1, axis0);\n  let axis2 = safeNormalize(tempAxis2) * -1.0;\n\n  let s0 = length(edge1);\n  let s1 = abs(dot(axis2, edge2));\n  let scale = (s0 + s1) / 2.0;\n\n  let quat = matrixToQuaternion(orientationMatrix);\n\n  let outputIdx = faceIdx * 8u;\n  faceGeometries[outputIdx] = center.x;\n  faceGeometries[outputIdx + 1u] = center.y;\n  faceGeometries[outputIdx + 2u] = center.z;\n  faceGeometries[outputIdx + 3u] = scale;\n  faceGeometries[outputIdx + 4u] = quat.x;\n  faceGeometries[outputIdx + 5u] = quat.y;\n  faceGeometries[outputIdx + 6u] = quat.z;\n  faceGeometries[outputIdx + 7u] = quat.w;\n}\n\n";
-class FLAMEPipeline {
-  // Face geometry 输出 [faceCount × 8]
-  constructor(device, buffers, vertexCount, faceCount, jointCount) {
-    __publicField(this, "device");
-    __publicField(this, "buffers");
-    // 元数据
-    __publicField(this, "vertexCount");
-    __publicField(this, "faceCount");
-    __publicField(this, "jointCount");
-    // 计算管线
-    __publicField(this, "shapeBlendPipeline");
-    __publicField(this, "poseDeformPipeline");
-    __publicField(this, "jointRegressPipeline");
-    __publicField(this, "fkPipeline");
-    __publicField(this, "lbsPipeline");
-    __publicField(this, "faceGeometryPipeline");
-    __publicField(this, "shapeBlendParamsBindGroup");
-    __publicField(this, "poseDeformParamsBindGroup");
-    __publicField(this, "jointRegressMetadataBindGroup");
-    __publicField(this, "fkParamsBindGroup");
-    __publicField(this, "lbsMetadataBindGroup");
-    __publicField(this, "shapeBlendBindGroup");
-    __publicField(this, "poseDeformBindGroup");
-    __publicField(this, "jointRegressBindGroup");
-    __publicField(this, "fkBindGroup");
-    __publicField(this, "lbsBindGroup");
-    __publicField(this, "faceGeometryParamsBindGroup");
-    __publicField(this, "faceGeometryBindGroup");
-    // 中间缓冲区
-    __publicField(this, "vShapedBuffer");
-    // Shape blending 输出
-    __publicField(this, "vPosedBuffer");
-    // Pose deformation 输出
-    __publicField(this, "jointsBuffer");
-    // Joint regression 输出 [jointCount × 3]
-    __publicField(this, "jointTransformsBuffer");
-    // FK 输出 [jointCount × 16] (mat4)
-    __publicField(this, "vDeformedBuffer");
-    // LBS 输出
-    __publicField(this, "faceGeometriesBuffer");
-    this.device = device;
-    this.buffers = buffers;
-    this.vertexCount = vertexCount;
-    this.faceCount = faceCount;
-    this.jointCount = jointCount;
-    this.initialize();
-  }
-  initialize() {
-    logger.log("🔧 Initializing FLAME Pipeline...");
-    this.createIntermediateBuffers();
-    this.clearIntermediateBuffers();
-    this.createComputePipelines();
-    this.createBindGroups();
-    logger.log("✅ FLAME Pipeline initialized");
-  }
-  /**
-   * 创建中间缓冲区
-   */
-  createIntermediateBuffers() {
-    const vertexBufferSize = this.vertexCount * 3 * 4;
-    const safeJointCount = Math.max(1, this.jointCount);
-    const jointBufferSize = safeJointCount * 3 * 4;
-    const transformBufferSize = safeJointCount * 16 * 4;
-    const faceGeometryBufferSize = this.faceCount * 8 * 4;
-    const minBufferSize = 4;
-    this.vShapedBuffer = this.device.createBuffer({
-      label: "v_shaped",
-      size: Math.max(vertexBufferSize, minBufferSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.vPosedBuffer = this.device.createBuffer({
-      label: "v_posed",
-      size: Math.max(vertexBufferSize, minBufferSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.jointsBuffer = this.device.createBuffer({
-      label: "joints",
-      size: Math.max(jointBufferSize, minBufferSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.jointTransformsBuffer = this.device.createBuffer({
-      label: "joint_transforms",
-      size: Math.max(transformBufferSize, minBufferSize),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.vDeformedBuffer = this.device.createBuffer({
-      label: "v_deformed",
-      size: vertexBufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-    this.faceGeometriesBuffer = this.device.createBuffer({
-      label: "face_geometries",
-      size: faceGeometryBufferSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
-  }
-  /**
-   * 清零所有中间缓冲区 (避免未初始化的垃圾数据)
-   * 🔧 关键修复: LBS shader 如果某些顶点权重全为0，会跳过不写入，导致保留垃圾数据
-   */
-  clearIntermediateBuffers() {
-    const encoder = this.device.createCommandEncoder({ label: "Clear FLAME Buffers" });
-    encoder.clearBuffer(this.vShapedBuffer);
-    encoder.clearBuffer(this.vPosedBuffer);
-    encoder.clearBuffer(this.jointsBuffer);
-    encoder.clearBuffer(this.jointTransformsBuffer);
-    encoder.clearBuffer(this.vDeformedBuffer);
-    encoder.clearBuffer(this.faceGeometriesBuffer);
-    this.device.queue.submit([encoder.finish()]);
-    logger.log("🧹 Cleared all intermediate FLAME buffers");
-  }
-  /**
-   * 创建计算管线
-   */
-  createComputePipelines() {
-    this.shapeBlendPipeline = this.createPipeline(
-      flameShapeBlendWGSL,
-      "Shape Blending Pipeline"
-    );
-    this.poseDeformPipeline = this.createPipeline(
-      flamePoseDeformWGSL,
-      "Pose Deformation Pipeline"
-    );
-    this.jointRegressPipeline = this.createPipeline(
-      flameJointRegressWGSL,
-      "Joint Regression Pipeline"
-    );
-    this.fkPipeline = this.createPipeline(
-      flameFKinematicsWGSL,
-      "Forward Kinematics Pipeline"
-    );
-    this.lbsPipeline = this.createPipeline(
-      flameLBSWGSL,
-      "LBS Skinning Pipeline"
-    );
-    this.faceGeometryPipeline = this.createPipeline(
-      flameFaceGeometryWGSL,
-      "Face Geometry Pipeline"
-    );
-  }
-  /**
-   * 创建单个计算管线
-   */
-  createPipeline(shaderCode, label) {
-    const fullShaderCode = flameCommonWGSL + "\n" + shaderCode;
-    const shaderModule = this.device.createShaderModule({
-      label: `${label} Shader`,
-      code: fullShaderCode
-    });
-    return this.device.createComputePipeline({
-      label,
-      layout: "auto",
-      compute: {
-        module: shaderModule,
-        entryPoint: "main"
-      }
-    });
-  }
-  /**
-   * 创建绑定组
-   */
-  createBindGroups() {
-    this.shapeBlendParamsBindGroup = this.device.createBindGroup({
-      label: "Shape Blend Params Bind Group",
-      layout: this.shapeBlendPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.metadata } },
-        { binding: 1, resource: { buffer: this.buffers.activeShapeIndices } },
-        // 🚀 活跃shape参数索引
-        { binding: 2, resource: { buffer: this.buffers.activeShapeValues } },
-        // 🚀 活跃shape参数值
-        { binding: 3, resource: { buffer: this.buffers.frameParams } }
-        // 动态 Uniform Buffer
-      ]
-    });
-    this.poseDeformParamsBindGroup = this.device.createBindGroup({
-      label: "Pose Deform Params Bind Group",
-      layout: this.poseDeformPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.frameParams } },
-        { binding: 1, resource: { buffer: this.buffers.metadata } }
-      ]
-    });
-    this.fkParamsBindGroup = this.device.createBindGroup({
-      label: "FK Params Bind Group",
-      layout: this.fkPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.frameParams } },
-        { binding: 1, resource: { buffer: this.buffers.metadata } }
-      ]
-    });
-    this.jointRegressMetadataBindGroup = this.device.createBindGroup({
-      label: "Joint Regress Metadata Bind Group",
-      layout: this.jointRegressPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 1, resource: { buffer: this.buffers.metadata } }
-      ]
-    });
-    this.lbsMetadataBindGroup = this.device.createBindGroup({
-      label: "LBS Metadata Bind Group",
-      layout: this.lbsPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.metadata } }
-      ]
-    });
-    const staticOffsetBuffer = this.buffers.staticOffset || this.device.createBuffer({
-      label: "dummy_static_offset",
-      size: 4,
-      // 最小 buffer 大小
-      usage: GPUBufferUsage.STORAGE
-    });
-    this.shapeBlendBindGroup = this.device.createBindGroup({
-      label: "Shape Blend Bind Group",
-      layout: this.shapeBlendPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.vTemplate } },
-        { binding: 1, resource: { buffer: this.buffers.shapedirs } },
-        { binding: 2, resource: { buffer: this.vShapedBuffer } },
-        { binding: 3, resource: { buffer: staticOffsetBuffer } }
-      ]
-    });
-    this.poseDeformBindGroup = this.device.createBindGroup({
-      label: "Pose Deform Bind Group",
-      layout: this.poseDeformPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.vShapedBuffer } },
-        { binding: 1, resource: { buffer: this.buffers.posedirs } },
-        { binding: 2, resource: { buffer: this.vPosedBuffer } }
-      ]
-    });
-    this.jointRegressBindGroup = this.device.createBindGroup({
-      label: "Joint Regress Bind Group",
-      layout: this.jointRegressPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.vShapedBuffer } },
-        // 🔧 修复: 使用v_shaped
-        { binding: 1, resource: { buffer: this.buffers.jRegressor } },
-        { binding: 2, resource: { buffer: this.jointsBuffer } }
-      ]
-    });
-    this.fkBindGroup = this.device.createBindGroup({
-      label: "FK Bind Group",
-      layout: this.fkPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.jointsBuffer } },
-        { binding: 1, resource: { buffer: this.jointTransformsBuffer } },
-        { binding: 2, resource: { buffer: this.buffers.parents } }
-        // 🔧 添加 parents buffer
-      ]
-    });
-    this.lbsBindGroup = this.device.createBindGroup({
-      label: "LBS Bind Group",
-      layout: this.lbsPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.vPosedBuffer } },
-        { binding: 1, resource: { buffer: this.jointTransformsBuffer } },
-        { binding: 2, resource: { buffer: this.buffers.lbsWeights } },
-        { binding: 3, resource: { buffer: this.vDeformedBuffer } }
-      ]
-    });
-    this.faceGeometryParamsBindGroup = this.device.createBindGroup({
-      label: "Face Geometry Params Bind Group",
-      layout: this.faceGeometryPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.buffers.frameParams } },
-        { binding: 1, resource: { buffer: this.buffers.metadata } }
-      ]
-    });
-    this.faceGeometryBindGroup = this.device.createBindGroup({
-      label: "Face Geometry Bind Group",
-      layout: this.faceGeometryPipeline.getBindGroupLayout(1),
-      entries: [
-        { binding: 0, resource: { buffer: this.vDeformedBuffer } },
-        { binding: 1, resource: { buffer: this.buffers.faces } },
-        { binding: 2, resource: { buffer: this.faceGeometriesBuffer } }
-      ]
-    });
-  }
-  /**
-   * 计算一帧 FLAME (主入口)
-   * 🚀 优化: 拆分为6个独立pass，支持详细的GPU profiling
-   */
-  compute(commandEncoder) {
-    const vertexWorkgroups = Math.ceil(this.vertexCount / 256);
-    const faceWorkgroups = Math.ceil(this.faceCount / 256);
-    const shapePass = commandEncoder.beginComputePass({
-      label: "FLAME Shape Blending"
-    });
-    shapePass.setPipeline(this.shapeBlendPipeline);
-    shapePass.setBindGroup(0, this.shapeBlendParamsBindGroup);
-    shapePass.setBindGroup(1, this.shapeBlendBindGroup);
-    shapePass.dispatchWorkgroups(vertexWorkgroups);
-    shapePass.end();
-    const NUM_JOINTS = 5;
-    const actualJointCount = Math.min(this.jointCount, NUM_JOINTS);
-    const jointRegressPass = commandEncoder.beginComputePass({
-      label: "FLAME Joint Regression"
-    });
-    jointRegressPass.setPipeline(this.jointRegressPipeline);
-    jointRegressPass.setBindGroup(0, this.jointRegressMetadataBindGroup);
-    jointRegressPass.setBindGroup(1, this.jointRegressBindGroup);
-    jointRegressPass.dispatchWorkgroups(actualJointCount, 1, 1);
-    jointRegressPass.end();
-    const posePass = commandEncoder.beginComputePass({
-      label: "FLAME Pose Deformation"
-    });
-    posePass.setPipeline(this.poseDeformPipeline);
-    posePass.setBindGroup(0, this.poseDeformParamsBindGroup);
-    posePass.setBindGroup(1, this.poseDeformBindGroup);
-    posePass.dispatchWorkgroups(vertexWorkgroups);
-    posePass.end();
-    const fkPass = commandEncoder.beginComputePass({
-      label: "FLAME Forward Kinematics"
-    });
-    fkPass.setPipeline(this.fkPipeline);
-    fkPass.setBindGroup(0, this.fkParamsBindGroup);
-    fkPass.setBindGroup(1, this.fkBindGroup);
-    fkPass.dispatchWorkgroups(1, 1, 1);
-    fkPass.end();
-    const lbsPass = commandEncoder.beginComputePass({
-      label: "FLAME LBS"
-    });
-    lbsPass.setPipeline(this.lbsPipeline);
-    lbsPass.setBindGroup(0, this.lbsMetadataBindGroup);
-    lbsPass.setBindGroup(1, this.lbsBindGroup);
-    lbsPass.dispatchWorkgroups(vertexWorkgroups);
-    lbsPass.end();
-    const faceGeomPass = commandEncoder.beginComputePass({
-      label: "FLAME Face Geometry"
-    });
-    faceGeomPass.setPipeline(this.faceGeometryPipeline);
-    faceGeomPass.setBindGroup(0, this.faceGeometryParamsBindGroup);
-    faceGeomPass.setBindGroup(1, this.faceGeometryBindGroup);
-    faceGeomPass.dispatchWorkgroups(faceWorkgroups);
-    faceGeomPass.end();
-    return {
-      faceGeometries: this.faceGeometriesBuffer,
-      faceCount: this.faceCount
-    };
-  }
-  /**
-   * 清理资源
-   */
-  destroy() {
-    var _a, _b, _c, _d, _e2, _f;
-    (_a = this.vShapedBuffer) == null ? void 0 : _a.destroy();
-    (_b = this.vPosedBuffer) == null ? void 0 : _b.destroy();
-    (_c = this.jointsBuffer) == null ? void 0 : _c.destroy();
-    (_d = this.jointTransformsBuffer) == null ? void 0 : _d.destroy();
-    (_e2 = this.vDeformedBuffer) == null ? void 0 : _e2.destroy();
-    (_f = this.faceGeometriesBuffer) == null ? void 0 : _f.destroy();
-    logger.log("🧹 FLAME Pipeline destroyed");
-  }
-}
-class FLAMEGPUBuffers {
-  constructor() {
-    __publicField(this, "device", null);
-    __publicField(this, "buffers", null);
-    // 缓存元数据
-    __publicField(this, "vertexCount", 0);
-    __publicField(this, "faceCount", 0);
-    __publicField(this, "jointCount", 0);
-    __publicField(this, "shapeParamCount", 0);
-    __publicField(this, "poseParamCount", 0);
-    __publicField(this, "staticOffsetCount", 0);
-    __publicField(this, "activeShapeCount", 0);
-    // 🚀 活跃shape参数数量
-    // 🚀 优化: 缓存参数数据数组，避免每帧创建新数组 (减少 GC 压力)
-    // 减小size：移除 shapeParams[300]，只保留动态参数
-    __publicField(this, "paramDataCache", new Float32Array(32 * 4));
-  }
-  // 32 vec4 = 128 floats (expr[100] + poses[28])
-  /**
-   * 初始化 GPU 缓冲区并上传模板数据
-   * 🚀 优化: 需要传入 characterHandle 以获取静态 shape parameters
-   * @param activeShapeParams 活跃shape参数（零参数过滤优化，可选）
-   */
-  initialize(device, templateData, _shapeParams, activeShapeParams) {
-    var _a;
-    this.device = device;
-    this.vertexCount = templateData.vertexCount;
-    this.faceCount = templateData.faceCount;
-    this.jointCount = templateData.jointCount;
-    this.shapeParamCount = templateData.shapeParamCount;
-    this.poseParamCount = templateData.poseParamCount;
-    const ORIGINAL_FLAME_VERTEX_COUNT = 5023;
-    this.staticOffsetCount = Math.min(templateData.staticOffsetCount, ORIGINAL_FLAME_VERTEX_COUNT);
-    if (this.vertexCount === 0) {
-      throw new Error(`Invalid vertexCount: ${this.vertexCount}`);
-    }
-    if (this.faceCount === 0) {
-      throw new Error(`Invalid faceCount: ${this.faceCount}`);
-    }
-    if (this.jointCount === 0) {
-      throw new Error(`Invalid jointCount: ${this.jointCount}`);
-    }
-    const expectedJRegressorSize = this.jointCount * this.vertexCount * 4;
-    if (templateData.jRegressor.byteLength !== expectedJRegressorSize) {
-      throw new Error(`Invalid jRegressor size: expected ${expectedJRegressorSize}, got ${templateData.jRegressor.byteLength}`);
-    }
-    logger.log("🔧 FLAME metadata validation:", {
-      vertexCount: this.vertexCount,
-      faceCount: this.faceCount,
-      jointCount: this.jointCount,
-      jRegressorSize: templateData.jRegressor.byteLength,
-      expectedJRegressorSize
-    });
-    this.activeShapeCount = (activeShapeParams == null ? void 0 : activeShapeParams.count) || 0;
-    this.buffers = {
-      vTemplate: this.createStorageBuffer("v_template", templateData.vTemplate),
-      shapedirs: this.createStorageBuffer("shapedirs", templateData.shapedirs),
-      posedirs: this.createStorageBuffer("posedirs", templateData.posedirs),
-      jRegressor: this.createStorageBuffer("J_regressor", templateData.jRegressor),
-      lbsWeights: this.createStorageBuffer("lbs_weights", templateData.lbsWeights),
-      parents: this.createStorageBuffer("parents", templateData.parents),
-      faces: this.createStorageBuffer("faces", templateData.faces),
-      staticOffset: templateData.staticOffset ? this.createStorageBuffer(
-        "static_offset",
-        templateData.staticOffset.slice(0, this.staticOffsetCount * 3)
-        // 只上传前 5023 个顶点
-      ) : null,
-      // 🚀 优化: 使用活跃shape参数（零参数过滤）
-      activeShapeIndices: activeShapeParams ? this.createStorageBuffer("active_shape_indices", activeShapeParams.activeIndices) : this.createStorageBuffer("active_shape_indices", new Uint32Array(0)),
-      // 回退：空数组
-      activeShapeValues: activeShapeParams ? this.createStorageBuffer("active_shape_values", activeShapeParams.activeValues) : this.createStorageBuffer("active_shape_values", new Float32Array(0)),
-      // 回退：空数组
-      frameParams: this.createFrameParamsBuffer(),
-      metadata: this.createMetadataBuffer()
-    };
-    const totalSize = (templateData.vTemplate.byteLength + templateData.shapedirs.byteLength + templateData.posedirs.byteLength + templateData.jRegressor.byteLength + templateData.lbsWeights.byteLength + templateData.parents.byteLength + templateData.faces.byteLength + (((_a = templateData.staticOffset) == null ? void 0 : _a.byteLength) || 0)) / 1024 / 1024;
-    logger.log(`✅ FLAME GPU buffers initialized (${totalSize.toFixed(2)} MB uploaded)`);
-    logger.log(`   Vertices: ${this.vertexCount}, Faces: ${this.faceCount}, Joints: ${this.jointCount}`);
-    if (this.staticOffsetCount > 0) {
-      logger.log(`   Static offset: ${this.staticOffsetCount} vertices`);
-    }
-  }
-  /**
-   * 创建 Storage Buffer 并上传数据
-   */
-  createStorageBuffer(label, data) {
-    const minBufferSize = 4;
-    const bufferSize = Math.max(data.byteLength, minBufferSize);
-    const buffer = this.device.createBuffer({
-      label: `FLAME ${label}`,
-      size: bufferSize,
-      // 🔧 添加 COPY_SRC 以支持 debug 读取
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
-      mappedAtCreation: true
-    });
-    if (data instanceof Float32Array) {
-      new Float32Array(buffer.getMappedRange()).set(data);
-    } else if (data instanceof Int32Array) {
-      new Int32Array(buffer.getMappedRange()).set(data);
-    } else if (data instanceof Uint32Array) {
-      new Uint32Array(buffer.getMappedRange()).set(data);
-    }
-    buffer.unmap();
-    return buffer;
-  }
-  /**
-   * 创建帧参数 Uniform Buffer
-   * 🚀 优化: 移除 shapeParams，减小 70% 大小
-   *
-   * Layout (std140):
-   * - exprParams: vec4[25]   (100 floats, padded)
-   * - rotation: vec4         (3 floats + padding)
-   * - translation: vec4      (3 floats + padding)
-   * - neckPose: vec4         (3 floats + padding)
-   * - jawPose: vec4          (3 floats + padding)
-   * - eyesPose: vec4[2]      (6 floats, split into 2 vec4)
-   * - eyelid: vec4           (2 floats + padding)
-   */
-  createFrameParamsBuffer() {
-    const size = 25 * 16 + // exprParams (25 vec4)
-    16 + // rotation (1 vec4)
-    16 + // translation (1 vec4)
-    16 + // neckPose (1 vec4)
-    16 + // jawPose (1 vec4)
-    2 * 16 + // eyesPose (2 vec4)
-    16;
-    return this.device.createBuffer({
-      label: "FLAME frame params",
-      size,
-      // 🔧 添加 COPY_SRC 以支持 debug 读取
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
-    });
-  }
-  /**
-   * 创建元数据 Uniform Buffer
-   *
-   * Layout:
-   * - vertexCount: u32
-   * - faceCount: u32
-   * - jointCount: u32
-   * - shapeParamCount: u32
-   * - poseParamCount: u32
-   * - staticOffsetCount: u32
-   * (padding to 256 bytes for alignment)
-   */
-  createMetadataBuffer() {
-    const buffer = this.device.createBuffer({
-      label: "FLAME metadata",
-      size: 256,
-      // 足够大且对齐
-      // 🔧 添加 COPY_SRC 以支持 debug 读取
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
-      mappedAtCreation: true
-    });
-    const view = new Uint32Array(buffer.getMappedRange());
-    view[0] = this.vertexCount;
-    view[1] = this.faceCount;
-    view[2] = this.jointCount;
-    view[3] = this.shapeParamCount;
-    view[4] = this.poseParamCount;
-    view[5] = this.staticOffsetCount;
-    view[6] = this.activeShapeCount;
-    buffer.unmap();
-    return buffer;
-  }
-  /**
-   * 更新每帧参数
-   * 🚀 优化: 移除 shapeParams 打包，减少 70% 上传量
-   */
-  updateFrameParams(params) {
-    if (!this.buffers || !this.device) {
-      throw new Error("FLAME GPU buffers not initialized");
-    }
-    const data = this.paramDataCache;
-    let offset = 0;
-    for (let i2 = 0; i2 < 100; i2 += 4) {
-      data[offset++] = params.exprParams[i2] || 0;
-      data[offset++] = params.exprParams[i2 + 1] || 0;
-      data[offset++] = params.exprParams[i2 + 2] || 0;
-      data[offset++] = params.exprParams[i2 + 3] || 0;
-    }
-    data[offset++] = params.rotation[0] || 0;
-    data[offset++] = params.rotation[1] || 0;
-    data[offset++] = params.rotation[2] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.translation[0] || 0;
-    data[offset++] = params.translation[1] || 0;
-    data[offset++] = params.translation[2] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.neckPose[0] || 0;
-    data[offset++] = params.neckPose[1] || 0;
-    data[offset++] = params.neckPose[2] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.jawPose[0] || 0;
-    data[offset++] = params.jawPose[1] || 0;
-    data[offset++] = params.jawPose[2] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.eyesPose[0] || 0;
-    data[offset++] = params.eyesPose[1] || 0;
-    data[offset++] = params.eyesPose[2] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.eyesPose[3] || 0;
-    data[offset++] = params.eyesPose[4] || 0;
-    data[offset++] = params.eyesPose[5] || 0;
-    data[offset++] = 0;
-    data[offset++] = params.eyelid[0] || 0;
-    data[offset++] = params.eyelid[1] || 0;
-    data[offset++] = 0;
-    data[offset++] = 0;
-    this.device.queue.writeBuffer(this.buffers.frameParams, 0, data);
-  }
-  /**
-   * 获取所有缓冲区
-   */
-  getBuffers() {
-    if (!this.buffers) {
-      throw new Error("FLAME GPU buffers not initialized");
-    }
-    return this.buffers;
-  }
-  /**
-   * 获取元数据
-   */
-  getMetadata() {
-    return {
-      vertexCount: this.vertexCount,
-      faceCount: this.faceCount,
-      jointCount: this.jointCount,
-      shapeParamCount: this.shapeParamCount,
-      poseParamCount: this.poseParamCount,
-      staticOffsetCount: this.staticOffsetCount
-    };
-  }
-  /**
-   * 清理资源
-   */
-  destroy() {
-    if (this.buffers) {
-      Object.values(this.buffers).forEach((buffer) => {
-        if (buffer) {
-          buffer.destroy();
-        }
-      });
-      this.buffers = null;
-    }
-    this.device = null;
-    logger.log("🗑️ FLAME GPU buffers destroyed");
-  }
-}
-const RADIX_SIZE = 256;
-const WORKGROUP_SIZE = 256;
-const ELEMENTS_PER_THREAD = 4;
-const ELEMENTS_PER_WG = WORKGROUP_SIZE * ELEMENTS_PER_THREAD;
-const computeDepthShader = (
-  /* wgsl */
-  `
-struct Uniforms {
-  cameraPosition: vec3<f32>,
-  _pad0: f32,
-  cameraForward: vec3<f32>,
-  _pad1: f32,
-  splatCount: u32,
-  paddedCount: u32,
-  _pad2: u32,
-  _pad3: u32,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> positions: array<f32>;
-@group(0) @binding(2) var<storage, read_write> keys: array<u32>;
-@group(0) @binding(3) var<storage, read_write> values: array<u32>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-  let idx = globalId.x;
-  
-  if (idx >= uniforms.paddedCount) {
-    return;
-  }
-  
-  if (idx >= uniforms.splatCount) {
-    // 填充区域，使用最大 key 值，排序后会在最后
-    keys[idx] = 0xFFFFFFFFu;
-    values[idx] = idx;
-    return;
-  }
-  
-  let posOffset = idx * 3u;
-  let pos = vec3<f32>(
-    positions[posOffset],
-    positions[posOffset + 1u],
-    positions[posOffset + 2u]
-  );
-  
-  // 计算深度
-  let diff = pos - uniforms.cameraPosition;
-  let depth = dot(diff, uniforms.cameraForward);
-  
-  // 转换为可排序的 key（与 CPU sortSplats.ts 完全相同）
-  let d = bitcast<i32>(depth);
-  let signMask = d >> 31;
-  let negSignMask = -signMask;
-  let mask = negSignMask | i32(0x80000000u);
-  let sortableKey = u32(d ^ mask);
-  
-  // 不取反！CPU 是升序排序后翻转结果
-  keys[idx] = sortableKey;
-  values[idx] = idx;
-}
-`
-);
-const histogramShader = (
-  /* wgsl */
-  `
-struct Params {
-  count: u32,
-  shift: u32,      // 当前 pass 的 bit shift (0, 8, 16, 24)
-  numWorkgroups: u32,
-  _pad: u32,
-}
-
-@group(0) @binding(0) var<uniform> params: Params;
-@group(0) @binding(1) var<storage, read> keys: array<u32>;
-@group(0) @binding(2) var<storage, read_write> histograms: array<u32>;  // numWorkgroups * 256
-
-var<workgroup> localHist: array<atomic<u32>, ${RADIX_SIZE}>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(
-  @builtin(local_invocation_id) localId: vec3<u32>,
-  @builtin(workgroup_id) groupId: vec3<u32>
-) {
-  let tid = localId.x;
-  let gid = groupId.x;
-  
-  // 初始化 local histogram
-  atomicStore(&localHist[tid], 0u);
-  workgroupBarrier();
-  
-  // 每个线程处理多个元素
-  let startIdx = gid * ${ELEMENTS_PER_WG}u + tid;
-  for (var i = 0u; i < ${ELEMENTS_PER_THREAD}u; i++) {
-    let idx = startIdx + i * ${WORKGROUP_SIZE}u;
-    if (idx < params.count) {
-      let key = keys[idx];
-      let bucket = (key >> params.shift) & 0xFFu;
-      atomicAdd(&localHist[bucket], 1u);
-    }
-  }
-  
-  workgroupBarrier();
-  
-  // 写入 global histogram
-  // 布局: histograms[bucket * numWorkgroups + gid] = 该 workgroup 在该 bucket 的数量
-  let histOffset = tid * params.numWorkgroups + gid;
-  histograms[histOffset] = atomicLoad(&localHist[tid]);
-}
-`
-);
-const scanShader = (
-  /* wgsl */
-  `
-struct Params {
-  count: u32,      // 要 scan 的元素数量
-  _pad0: u32,
-  _pad1: u32,
-  _pad2: u32,
-}
-
-@group(0) @binding(0) var<uniform> params: Params;
-@group(0) @binding(1) var<storage, read_write> data: array<u32>;
-@group(0) @binding(2) var<storage, read_write> blockSums: array<u32>;
-
-var<workgroup> temp: array<u32, ${WORKGROUP_SIZE * 2}>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(
-  @builtin(local_invocation_id) localId: vec3<u32>,
-  @builtin(workgroup_id) groupId: vec3<u32>
-) {
-  let tid = localId.x;
-  let gid = groupId.x;
-  let blockSize = ${WORKGROUP_SIZE * 2}u;
-  let offset = gid * blockSize;
-  
-  // 加载数据到 shared memory
-  let idx0 = offset + tid;
-  let idx1 = offset + tid + ${WORKGROUP_SIZE}u;
-  temp[tid] = select(0u, data[idx0], idx0 < params.count);
-  temp[tid + ${WORKGROUP_SIZE}u] = select(0u, data[idx1], idx1 < params.count);
-  
-  // Up-sweep (reduce)
-  var stride = 1u;
-  for (var d = blockSize >> 1u; d > 0u; d >>= 1u) {
-    workgroupBarrier();
-    if (tid < d) {
-      let ai = stride * (2u * tid + 1u) - 1u;
-      let bi = stride * (2u * tid + 2u) - 1u;
-      temp[bi] += temp[ai];
-    }
-    stride <<= 1u;
-  }
-  
-  // 保存 block sum 并清零最后一个元素
-  if (tid == 0u) {
-    blockSums[gid] = temp[blockSize - 1u];
-    temp[blockSize - 1u] = 0u;
-  }
-  
-  // Down-sweep
-  for (var d = 1u; d < blockSize; d <<= 1u) {
-    stride >>= 1u;
-    workgroupBarrier();
-    if (tid < d) {
-      let ai = stride * (2u * tid + 1u) - 1u;
-      let bi = stride * (2u * tid + 2u) - 1u;
-      let t = temp[ai];
-      temp[ai] = temp[bi];
-      temp[bi] += t;
-    }
-  }
-  
-  workgroupBarrier();
-  
-  // 写回
-  if (idx0 < params.count) { data[idx0] = temp[tid]; }
-  if (idx1 < params.count) { data[idx1] = temp[tid + ${WORKGROUP_SIZE}u]; }
-}
-`
-);
-const addBlockSumsShader = (
-  /* wgsl */
-  `
-struct Params {
-  count: u32,
-  _pad0: u32,
-  _pad1: u32,
-  _pad2: u32,
-}
-
-@group(0) @binding(0) var<uniform> params: Params;
-@group(0) @binding(1) var<storage, read_write> data: array<u32>;
-@group(0) @binding(2) var<storage, read> blockSums: array<u32>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(
-  @builtin(local_invocation_id) localId: vec3<u32>,
-  @builtin(workgroup_id) groupId: vec3<u32>
-) {
-  let tid = localId.x;
-  let gid = groupId.x;
-  
-  if (gid == 0u) { return; }  // 第一个 block 不需要加
-  
-  let blockSize = ${WORKGROUP_SIZE * 2}u;
-  let offset = gid * blockSize;
-  let blockSum = blockSums[gid];
-  
-  let idx0 = offset + tid;
-  let idx1 = offset + tid + ${WORKGROUP_SIZE}u;
-  
-  if (idx0 < params.count) { data[idx0] += blockSum; }
-  if (idx1 < params.count) { data[idx1] += blockSum; }
-}
-`
-);
-const scatterShader = (
-  /* wgsl */
-  `
-struct Params {
-  count: u32,
-  shift: u32,
-  numWorkgroups: u32,
-  _pad: u32,
-}
-
-@group(0) @binding(0) var<uniform> params: Params;
-@group(0) @binding(1) var<storage, read> keysIn: array<u32>;
-@group(0) @binding(2) var<storage, read> valuesIn: array<u32>;
-@group(0) @binding(3) var<storage, read> globalOffsets: array<u32>;
-@group(0) @binding(4) var<storage, read_write> keysOut: array<u32>;
-@group(0) @binding(5) var<storage, read_write> valuesOut: array<u32>;
-
-var<workgroup> localOffsets: array<u32, ${RADIX_SIZE}>;
-var<workgroup> localCounts: array<u32, ${RADIX_SIZE}>;
-var<workgroup> elementOffsets: array<u32, ${ELEMENTS_PER_WG}>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(
-  @builtin(local_invocation_id) localId: vec3<u32>,
-  @builtin(workgroup_id) groupId: vec3<u32>
-) {
-  let tid = localId.x;
-  let gid = groupId.x;
-  
-  // 加载该 workgroup 的 global offset
-  let globalIdx = tid * params.numWorkgroups + gid;
-  localOffsets[tid] = globalOffsets[globalIdx];
-  localCounts[tid] = 0u;
-  
-  workgroupBarrier();
-  
-  let baseIdx = gid * ${ELEMENTS_PER_WG}u;
-  let endIdx = min(baseIdx + ${ELEMENTS_PER_WG}u, params.count);
-  let elemCount = endIdx - baseIdx;
-  
-  // 阶段 1：线程 0 计算所有元素的 local offset（保证稳定性）
-  if (tid == 0u) {
-    for (var i = 0u; i < elemCount; i++) {
-      let idx = baseIdx + i;
-      let key = keysIn[idx];
-      let bucket = (key >> params.shift) & 0xFFu;
-      
-      elementOffsets[i] = localCounts[bucket];
-      localCounts[bucket] = localCounts[bucket] + 1u;
-    }
-  }
-  
-  workgroupBarrier();
-  
-  // 阶段 2：所有线程并行写入
-  for (var i = tid; i < elemCount; i += ${WORKGROUP_SIZE}u) {
-    let idx = baseIdx + i;
-    let key = keysIn[idx];
-    let value = valuesIn[idx];
-    let bucket = (key >> params.shift) & 0xFFu;
-    
-    let dstIdx = localOffsets[bucket] + elementOffsets[i];
-    keysOut[dstIdx] = key;
-    valuesOut[dstIdx] = value;
-  }
-}
-`
-);
-const reverseShader = (
-  /* wgsl */
-  `
-struct Params {
-  count: u32,
-  _pad0: u32,
-  _pad1: u32,
-  _pad2: u32,
-}
-
-@group(0) @binding(0) var<uniform> params: Params;
-@group(0) @binding(1) var<storage, read> valuesIn: array<u32>;
-@group(0) @binding(2) var<storage, read_write> valuesOut: array<u32>;
-
-@compute @workgroup_size(${WORKGROUP_SIZE})
-fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-  let idx = globalId.x;
-  if (idx >= params.count) {
-    return;
-  }
-  
-  // 翻转：第 i 个元素放到第 (count - 1 - i) 个位置
-  valuesOut[idx] = valuesIn[params.count - 1u - idx];
-}
-`
-);
-class GPURadixSort {
-  constructor(options) {
-    __publicField(this, "device");
-    __publicField(this, "maxSplatCount");
-    __publicField(this, "paddedCount");
-    __publicField(this, "numWorkgroups");
-    // Pipelines
-    __publicField(this, "depthPipeline", null);
-    __publicField(this, "histogramPipeline", null);
-    __publicField(this, "scanPipeline", null);
-    __publicField(this, "addBlockSumsPipeline", null);
-    __publicField(this, "scatterPipeline", null);
-    __publicField(this, "reversePipeline", null);
-    // Buffers
-    __publicField(this, "uniformBuffer", null);
-    __publicField(this, "paramsBuffer", null);
-    __publicField(this, "scanParamsBuffer", null);
-    // Double buffering for keys/values
-    __publicField(this, "keysBuffer0", null);
-    __publicField(this, "keysBuffer1", null);
-    __publicField(this, "valuesBuffer0", null);
-    __publicField(this, "valuesBuffer1", null);
-    // Histogram and scan buffers
-    __publicField(this, "histogramBuffer", null);
-    __publicField(this, "blockSumsBuffer", null);
-    __publicField(this, "blockSumsBuffer2", null);
-    // 用于多级 scan
-    // External
-    __publicField(this, "positionsBuffer", null);
-    this.device = options.device;
-    this.maxSplatCount = options.maxSplatCount;
-    this.paddedCount = Math.ceil(options.maxSplatCount / ELEMENTS_PER_WG) * ELEMENTS_PER_WG;
-    this.numWorkgroups = this.paddedCount / ELEMENTS_PER_WG;
-    this.initialize();
-  }
-  initialize() {
-    this.depthPipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Depth",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: computeDepthShader }),
-        entryPoint: "main"
-      }
-    });
-    this.histogramPipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Histogram",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: histogramShader }),
-        entryPoint: "main"
-      }
-    });
-    this.scanPipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Scan",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: scanShader }),
-        entryPoint: "main"
-      }
-    });
-    this.addBlockSumsPipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Add Block Sums",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: addBlockSumsShader }),
-        entryPoint: "main"
-      }
-    });
-    this.scatterPipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Scatter",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: scatterShader }),
-        entryPoint: "main"
-      }
-    });
-    this.reversePipeline = this.device.createComputePipeline({
-      label: "Radix Sort - Reverse",
-      layout: "auto",
-      compute: {
-        module: this.device.createShaderModule({ code: reverseShader }),
-        entryPoint: "main"
-      }
-    });
-    const n2 = this.paddedCount;
-    this.uniformBuffer = this.device.createBuffer({
-      label: "Radix Sort - Uniforms",
-      size: 48,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.paramsBuffer = this.device.createBuffer({
-      label: "Radix Sort - Params",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.scanParamsBuffer = this.device.createBuffer({
-      label: "Radix Sort - Scan Params",
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.keysBuffer0 = this.device.createBuffer({
-      label: "Radix Sort - Keys 0",
-      size: n2 * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-    this.keysBuffer1 = this.device.createBuffer({
-      label: "Radix Sort - Keys 1",
-      size: n2 * 4,
-      usage: GPUBufferUsage.STORAGE
-    });
-    this.valuesBuffer0 = this.device.createBuffer({
-      label: "Radix Sort - Values 0",
-      size: n2 * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-    this.valuesBuffer1 = this.device.createBuffer({
-      label: "Radix Sort - Values 1",
-      size: n2 * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    });
-    const histogramSize = RADIX_SIZE * this.numWorkgroups * 4;
-    this.histogramBuffer = this.device.createBuffer({
-      label: "Radix Sort - Histogram",
-      size: histogramSize,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    const scanBlockSize = WORKGROUP_SIZE * 2;
-    const numScanBlocks = Math.ceil(histogramSize / 4 / scanBlockSize);
-    this.blockSumsBuffer = this.device.createBuffer({
-      label: "Radix Sort - Block Sums",
-      size: Math.max(numScanBlocks * 4, 16),
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.blockSumsBuffer2 = this.device.createBuffer({
-      label: "Radix Sort - Block Sums 2",
-      size: 16,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    logger.log(`✅ [GPURadixSort] Initialized: maxSplatCount=${this.maxSplatCount}, paddedCount=${this.paddedCount}, numWorkgroups=${this.numWorkgroups}`);
-  }
-  setPositionsBuffer(buffer) {
-    this.positionsBuffer = buffer;
-  }
-  async sortAsync(viewMatrix, splatCount) {
-    if (!this.positionsBuffer) {
-      throw new Error("Positions buffer not set");
-    }
-    const cameraPosition = [
-      -viewMatrix[12],
-      -viewMatrix[13],
-      -viewMatrix[14]
-    ];
-    const cameraForward = [
-      -viewMatrix[2],
-      -viewMatrix[6],
-      -viewMatrix[10]
-    ];
-    await this.runDepthPass(cameraPosition, cameraForward, splatCount);
-    let keysIn = this.keysBuffer0;
-    let keysOut = this.keysBuffer1;
-    let valuesIn = this.valuesBuffer0;
-    let valuesOut = this.valuesBuffer1;
-    for (let pass = 0; pass < 4; pass++) {
-      const shift = pass * 8;
-      await this.runHistogramPass(keysIn, this.paddedCount, shift);
-      await this.runPrefixSum();
-      await this.runScatterPass(keysIn, valuesIn, keysOut, valuesOut, this.paddedCount, shift);
-      const tempK = keysIn;
-      keysIn = keysOut;
-      keysOut = tempK;
-      const tempV = valuesIn;
-      valuesIn = valuesOut;
-      valuesOut = tempV;
-    }
-    await this.runReversePass(valuesIn, valuesOut, splatCount);
-    return valuesOut;
-  }
-  async runReversePass(valuesIn, valuesOut, splatCount) {
-    const paramsData = new Uint32Array([splatCount, 0, 0, 0]);
-    this.device.queue.writeBuffer(this.paramsBuffer, 0, paramsData);
-    const bindGroup = this.device.createBindGroup({
-      layout: this.reversePipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.paramsBuffer } },
-        { binding: 1, resource: { buffer: valuesIn } },
-        { binding: 2, resource: { buffer: valuesOut } }
-      ]
-    });
-    const encoder = this.device.createCommandEncoder();
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.reversePipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.dispatchWorkgroups(Math.ceil(splatCount / WORKGROUP_SIZE));
-    pass.end();
-    this.device.queue.submit([encoder.finish()]);
-  }
-  async runDepthPass(cameraPosition, cameraForward, splatCount) {
-    const uniformData = new ArrayBuffer(48);
-    const floatView = new Float32Array(uniformData);
-    const uintView = new Uint32Array(uniformData);
-    floatView[0] = cameraPosition[0];
-    floatView[1] = cameraPosition[1];
-    floatView[2] = cameraPosition[2];
-    floatView[3] = 0;
-    floatView[4] = cameraForward[0];
-    floatView[5] = cameraForward[1];
-    floatView[6] = cameraForward[2];
-    floatView[7] = 0;
-    uintView[8] = splatCount;
-    uintView[9] = this.paddedCount;
-    this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
-    const bindGroup = this.device.createBindGroup({
-      layout: this.depthPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.uniformBuffer } },
-        { binding: 1, resource: { buffer: this.positionsBuffer } },
-        { binding: 2, resource: { buffer: this.keysBuffer0 } },
-        { binding: 3, resource: { buffer: this.valuesBuffer0 } }
-      ]
-    });
-    const encoder = this.device.createCommandEncoder();
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.depthPipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.dispatchWorkgroups(Math.ceil(this.paddedCount / WORKGROUP_SIZE));
-    pass.end();
-    this.device.queue.submit([encoder.finish()]);
-  }
-  async runHistogramPass(keysBuffer, count, shift) {
-    const paramsData = new Uint32Array([count, shift, this.numWorkgroups, 0]);
-    this.device.queue.writeBuffer(this.paramsBuffer, 0, paramsData);
-    const bindGroup = this.device.createBindGroup({
-      layout: this.histogramPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.paramsBuffer } },
-        { binding: 1, resource: { buffer: keysBuffer } },
-        { binding: 2, resource: { buffer: this.histogramBuffer } }
-      ]
-    });
-    const encoder = this.device.createCommandEncoder();
-    encoder.clearBuffer(this.histogramBuffer);
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.histogramPipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.dispatchWorkgroups(this.numWorkgroups);
-    pass.end();
-    this.device.queue.submit([encoder.finish()]);
-  }
-  async runPrefixSum() {
-    const histogramCount = RADIX_SIZE * this.numWorkgroups;
-    const scanBlockSize = WORKGROUP_SIZE * 2;
-    const numBlocks = Math.ceil(histogramCount / scanBlockSize);
-    const scanParams = new Uint32Array([histogramCount, 0, 0, 0]);
-    this.device.queue.writeBuffer(this.scanParamsBuffer, 0, scanParams);
-    const scanBindGroup = this.device.createBindGroup({
-      layout: this.scanPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.scanParamsBuffer } },
-        { binding: 1, resource: { buffer: this.histogramBuffer } },
-        { binding: 2, resource: { buffer: this.blockSumsBuffer } }
-      ]
-    });
-    const encoder = this.device.createCommandEncoder();
-    encoder.clearBuffer(this.blockSumsBuffer);
-    encoder.clearBuffer(this.blockSumsBuffer2);
-    const pass1 = encoder.beginComputePass();
-    pass1.setPipeline(this.scanPipeline);
-    pass1.setBindGroup(0, scanBindGroup);
-    pass1.dispatchWorkgroups(numBlocks);
-    pass1.end();
-    this.device.queue.submit([encoder.finish()]);
-    if (numBlocks > 1) {
-      const blockSumsParams = new Uint32Array([numBlocks, 0, 0, 0]);
-      this.device.queue.writeBuffer(this.scanParamsBuffer, 0, blockSumsParams);
-      const blockSumsScanBindGroup = this.device.createBindGroup({
-        layout: this.scanPipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: { buffer: this.scanParamsBuffer } },
-          { binding: 1, resource: { buffer: this.blockSumsBuffer } },
-          { binding: 2, resource: { buffer: this.blockSumsBuffer2 } }
-        ]
-      });
-      const encoder2 = this.device.createCommandEncoder();
-      const pass2 = encoder2.beginComputePass();
-      pass2.setPipeline(this.scanPipeline);
-      pass2.setBindGroup(0, blockSumsScanBindGroup);
-      pass2.dispatchWorkgroups(1);
-      pass2.end();
-      this.device.queue.submit([encoder2.finish()]);
-      this.device.queue.writeBuffer(this.scanParamsBuffer, 0, scanParams);
-      const addBindGroup = this.device.createBindGroup({
-        layout: this.addBlockSumsPipeline.getBindGroupLayout(0),
-        entries: [
-          { binding: 0, resource: { buffer: this.scanParamsBuffer } },
-          { binding: 1, resource: { buffer: this.histogramBuffer } },
-          { binding: 2, resource: { buffer: this.blockSumsBuffer } }
-        ]
-      });
-      const encoder3 = this.device.createCommandEncoder();
-      const pass3 = encoder3.beginComputePass();
-      pass3.setPipeline(this.addBlockSumsPipeline);
-      pass3.setBindGroup(0, addBindGroup);
-      pass3.dispatchWorkgroups(numBlocks);
-      pass3.end();
-      this.device.queue.submit([encoder3.finish()]);
-    }
-  }
-  async runScatterPass(keysIn, valuesIn, keysOut, valuesOut, count, shift) {
-    const paramsData = new Uint32Array([count, shift, this.numWorkgroups, 0]);
-    this.device.queue.writeBuffer(this.paramsBuffer, 0, paramsData);
-    const bindGroup = this.device.createBindGroup({
-      layout: this.scatterPipeline.getBindGroupLayout(0),
-      entries: [
-        { binding: 0, resource: { buffer: this.paramsBuffer } },
-        { binding: 1, resource: { buffer: keysIn } },
-        { binding: 2, resource: { buffer: valuesIn } },
-        { binding: 3, resource: { buffer: this.histogramBuffer } },
-        { binding: 4, resource: { buffer: keysOut } },
-        { binding: 5, resource: { buffer: valuesOut } }
-      ]
-    });
-    const encoder = this.device.createCommandEncoder();
-    const pass = encoder.beginComputePass();
-    pass.setPipeline(this.scatterPipeline);
-    pass.setBindGroup(0, bindGroup);
-    pass.dispatchWorkgroups(this.numWorkgroups);
-    pass.end();
-    this.device.queue.submit([encoder.finish()]);
-  }
-  destroy() {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i2, _j;
-    (_a = this.uniformBuffer) == null ? void 0 : _a.destroy();
-    (_b = this.paramsBuffer) == null ? void 0 : _b.destroy();
-    (_c = this.scanParamsBuffer) == null ? void 0 : _c.destroy();
-    (_d = this.keysBuffer0) == null ? void 0 : _d.destroy();
-    (_e2 = this.keysBuffer1) == null ? void 0 : _e2.destroy();
-    (_f = this.valuesBuffer0) == null ? void 0 : _f.destroy();
-    (_g = this.valuesBuffer1) == null ? void 0 : _g.destroy();
-    (_h = this.histogramBuffer) == null ? void 0 : _h.destroy();
-    (_i2 = this.blockSumsBuffer) == null ? void 0 : _i2.destroy();
-    (_j = this.blockSumsBuffer2) == null ? void 0 : _j.destroy();
-  }
-}
 class WebGPURenderer {
   constructor(canvas, backgroundColor, alpha = true) {
     __publicField(this, "canvas");
@@ -16372,19 +14773,6 @@ class WebGPURenderer {
     __publicField(this, "storageBindGroup", null);
     __publicField(this, "bindGroupNeedsUpdate", false);
     // 标记 bind group 是否需要更新
-    // 🆕 Transform Pipeline (GPU 3DGS Transform优化)
-    __publicField(this, "transformPipeline", null);
-    __publicField(this, "useGPUTransform", false);
-    // 是否使用GPU Transform路径
-    // 🆕 FLAME Pipeline (GPU FLAME Forward Pass优化)
-    __publicField(this, "flamePipeline", null);
-    __publicField(this, "flameGPUBuffers", null);
-    __publicField(this, "useGPUFLAME", false);
-    // 是否使用GPU FLAME路径
-    // 🆕 GPU Radix Sort (GPU 深度排序优化)
-    __publicField(this, "gpuRadixSort", null);
-    __publicField(this, "useGPURadixSort", true);
-    // 是否使用 GPU 排序
     __publicField(this, "splatCount", 0);
     __publicField(this, "presentationFormat", "bgra8unorm");
     __publicField(this, "alpha");
@@ -16428,8 +14816,6 @@ class WebGPURenderer {
     this.createQuadVertexBuffer();
     await this.createRenderPipeline();
     await this.createBlitPipeline();
-    this.transformPipeline = new TransformPipeline(this.device);
-    await this.transformPipeline.initialize();
   }
   /**
    * 创建 Uniform Buffer
@@ -16786,336 +15172,60 @@ class WebGPURenderer {
     if (!this.splatDataBuffer || this.splatDataBuffer.size !== packedData.byteLength) {
       if (this.splatDataBuffer) {
         this.splatDataBuffer.destroy();
-      }
-      this.splatDataBuffer = this.device.createBuffer({
-        label: "Splat Data Buffer",
-        size: packedData.byteLength,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-      this.bindGroupNeedsUpdate = true;
-    }
-    this.device.queue.writeBuffer(
-      this.splatDataBuffer,
-      0,
-      packedData.buffer,
-      packedData.byteOffset,
-      packedData.byteLength
-    );
-    if (sortOrder) {
-      const indexBufferSize = sortOrder.byteLength;
-      if (!this.sortIndexBuffer || this.sortIndexBuffer.size !== indexBufferSize) {
-        if (this.sortIndexBuffer) {
-          this.sortIndexBuffer.destroy();
-        }
-        this.sortIndexBuffer = this.device.createBuffer({
-          label: "Sort Index Buffer",
-          size: indexBufferSize,
-          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
-        });
-        this.bindGroupNeedsUpdate = true;
-      }
-      this.device.queue.writeBuffer(
-        this.sortIndexBuffer,
-        0,
-        sortOrder.buffer,
-        sortOrder.byteOffset,
-        sortOrder.byteLength
-      );
-      if (this.bindGroupNeedsUpdate && this.renderPipeline && this.sortIndexBuffer && this.splatDataBuffer) {
-        const storageBindGroupLayout = this.renderPipeline.getBindGroupLayout(1);
-        this.storageBindGroup = this.device.createBindGroup({
-          label: "Storage Bind Group",
-          layout: storageBindGroupLayout,
-          entries: [
-            {
-              binding: 0,
-              resource: { buffer: this.sortIndexBuffer }
-            },
-            {
-              binding: 1,
-              resource: { buffer: this.splatDataBuffer }
-            }
-          ]
-        });
-        this.bindGroupNeedsUpdate = false;
-      }
-    }
-  }
-  /**
-   * 🆕 上传原始Splats数据到GPU (一次性调用，角色加载时)
-   * @param originalSplatsData Float32Array, 每个splat 16 floats (64 bytes)
-   * @param splatCount splat数量
-   */
-  loadOriginalSplats(originalSplatsData, splatCount) {
-    if (!this.transformPipeline) {
-      logger.warn("⚠️ Transform pipeline not initialized, skipping original splats upload");
-      return;
-    }
-    this.transformPipeline.uploadOriginalSplats(originalSplatsData, splatCount);
-    this.splatCount = splatCount;
-    this.useGPUTransform = true;
-    if (this.useGPURadixSort && this.device) {
-      try {
-        this.gpuRadixSort = new GPURadixSort({
-          device: this.device,
-          maxSplatCount: splatCount
-        });
-        logger.log(`✅ [WebGPURenderer] GPU Radix Sort initialized for ${splatCount} splats`);
-      } catch (e2) {
-        logger.warn("⚠️ [WebGPURenderer] Failed to initialize GPU Radix Sort, falling back to CPU", e2);
-        this.useGPURadixSort = false;
-      }
-    }
-    if (!this.sortIndexBuffer || this.sortIndexBuffer.size !== splatCount * 4) {
-      if (this.sortIndexBuffer) {
-        this.sortIndexBuffer.destroy();
-      }
-      this.sortIndexBuffer = this.device.createBuffer({
-        label: "Sort Index Buffer",
-        size: splatCount * 4,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
-      });
-      const defaultSortOrder = new Uint32Array(splatCount);
-      for (let i2 = 0; i2 < splatCount; i2++) {
-        defaultSortOrder[i2] = i2;
-      }
-      this.device.queue.writeBuffer(this.sortIndexBuffer, 0, defaultSortOrder);
-      this.bindGroupNeedsUpdate = true;
-    }
-    this.splatDataBuffer = this.transformPipeline.getTransformedOutputBuffer();
-    if (this.renderPipeline && this.sortIndexBuffer && this.splatDataBuffer) {
-      const storageBindGroupLayout = this.renderPipeline.getBindGroupLayout(1);
-      this.storageBindGroup = this.device.createBindGroup({
-        label: "Initial Storage Bind Group",
-        layout: storageBindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: { buffer: this.sortIndexBuffer }
-          },
-          {
-            binding: 1,
-            resource: { buffer: this.splatDataBuffer }
-          }
-        ]
-      });
-      this.bindGroupNeedsUpdate = false;
-      logger.log("✅ [WebGPURenderer] loadOriginalSplats: Initial storage bind group created", {
-        sortIndexBufferSize: this.sortIndexBuffer.size,
-        splatDataBufferSize: this.splatDataBuffer.size,
-        splatCount
-      });
-    } else {
-      logger.warn("⚠️ [WebGPURenderer] loadOriginalSplats: 无法创建Initial storage bind group", {
-        hasRenderPipeline: !!this.renderPipeline,
-        hasSortIndexBuffer: !!this.sortIndexBuffer,
-        hasSplatDataBuffer: !!this.splatDataBuffer
-      });
-    }
-    logger.log(`✅ [WebGPURenderer] loadOriginalSplats: Original splats uploaded to GPU: ${splatCount} splats`);
-  }
-  /**
-   * 🆕 更新Face Geometry (每帧调用，用于GPU Transform优化)
-   * @param faceGeometryData Float32Array, 每个face 8 floats (32 bytes)
-   */
-  updateFaceGeometry(faceGeometryData) {
-    if (!this.transformPipeline) {
-      logger.warn("⚠️ Transform pipeline not initialized, skipping face geometry update");
-      return;
-    }
-    this.transformPipeline.updateFaceGeometry(faceGeometryData);
-  }
-  /**
-   * 🆕 加载 FLAME 模板数据到 GPU (一次性调用，角色加载时)
-   * @param templateData FLAME 模板数据
-   * @param shapeParams Shape 参数 [300]
-   * @param activeShapeParams 活跃shape参数（零参数过滤优化，可选）
-   */
-  loadFLAMETemplateData(templateData, shapeParams, activeShapeParams) {
-    if (!this.device) {
-      throw new Error("Device not initialized");
-    }
-    this.flameGPUBuffers = new FLAMEGPUBuffers();
-    this.flameGPUBuffers.initialize(this.device, templateData, shapeParams, activeShapeParams);
-    const metadata = this.flameGPUBuffers.getMetadata();
-    if (metadata.vertexCount === 0 || metadata.faceCount === 0 || metadata.jointCount === 0) {
-      throw new Error(`Invalid FLAME metadata: vertexCount=${metadata.vertexCount}, faceCount=${metadata.faceCount}, jointCount=${metadata.jointCount}`);
-    }
-    logger.log("🔧 FLAME Pipeline metadata:", {
-      vertexCount: metadata.vertexCount,
-      faceCount: metadata.faceCount,
-      jointCount: metadata.jointCount,
-      shapeParamCount: metadata.shapeParamCount,
-      poseParamCount: metadata.poseParamCount,
-      staticOffsetCount: metadata.staticOffsetCount
-    });
-    this.flamePipeline = new FLAMEPipeline(
-      this.device,
-      this.flameGPUBuffers.getBuffers(),
-      metadata.vertexCount,
-      metadata.faceCount,
-      metadata.jointCount
-    );
-    this.useGPUFLAME = true;
-    logger.log("✅ FLAME Pipeline initialized and GPU FLAME path enabled");
-  }
-  /**
-   * 🆕 更新 FLAME 帧参数 (每帧调用)
-   * @param frameParams FLAME 帧参数
-   */
-  updateFLAMEFrameParams(frameParams) {
-    if (!this.flameGPUBuffers) {
-      return;
-    }
-    this.flameGPUBuffers.updateFrameParams(frameParams);
-  }
-  /**
-   * 🆕 获取是否使用 GPU Transform 路径
-   */
-  getUseGPUTransform() {
-    return this.useGPUTransform;
-  }
-  /**
-   * 🆕 获取是否使用 GPU FLAME 路径
-   */
-  getUseGPUFLAME() {
-    return this.useGPUFLAME;
-  }
-  /**
-   * 🆕 使用Face Geometry渲染 (GPU Transform优化路径)
-   * 数据流: Face Geometry → GPU Transform → Render
-   * 
-   * 支持两种模式：
-   * 1. CPU FLAME 路径：传入 faceGeometryData（从 CPU 计算）
-   * 2. GPU FLAME 路径：传入 frameParams（在 GPU 上计算 FLAME）
-   */
-  async renderWithFaceGeometry(faceGeometryDataOrFrameParams, viewMatrix, projectionMatrix, screenSize, transform) {
-    if (!this.transformPipeline || !this.useGPUTransform) {
-      logger.error(`❌ Transform pipeline not ready or GPU Transform not enabled: hasTransformPipeline=${!!this.transformPipeline}, useGPUTransform=${this.useGPUTransform}`);
-      return;
-    }
-    if (!this.device || !this.context || !this.renderPipeline || !this.uniformBindGroup) {
-      logger.error(`❌ [WebGPURenderer] Render resources not ready: hasDevice=${!!this.device}, hasContext=${!!this.context}, hasRenderPipeline=${!!this.renderPipeline}, hasUniformBindGroup=${!!this.uniformBindGroup}`);
-      return;
-    }
-    const [width, height] = screenSize;
-    const needsTransform = transform && (transform.x !== 0 || transform.y !== 0 || transform.scale !== 1);
-    let faceGeometryBuffer = null;
-    const isFLAMEFrameParams = !(faceGeometryDataOrFrameParams instanceof Float32Array);
-    const computeEncoder = this.device.createCommandEncoder({
-      label: "FLAME + Transform Command Encoder"
-    });
-    if (this.useGPUFLAME && this.flamePipeline && isFLAMEFrameParams) {
-      const frameParams = faceGeometryDataOrFrameParams;
-      this.updateFLAMEFrameParams(frameParams);
-      const flameOutput = this.flamePipeline.compute(computeEncoder);
-      faceGeometryBuffer = flameOutput.faceGeometries;
-      if (faceGeometryBuffer) {
-        this.transformPipeline.setFaceGeometryBufferFromGPU(faceGeometryBuffer, flameOutput.faceCount);
-      }
-    } else {
-      const faceGeometryData = faceGeometryDataOrFrameParams;
-      this.transformPipeline.updateFaceGeometry(faceGeometryData);
-    }
-    this.transformPipeline.updateViewMatrix(viewMatrix);
-    this.updateUniforms(viewMatrix, projectionMatrix, screenSize);
-    this.transformPipeline.executeInEncoder(computeEncoder);
-    const transformedBuffer = this.transformPipeline.getTransformedOutputBuffer();
-    if (!transformedBuffer) {
-      logger.error("❌ Transformed buffer not available");
-      return;
-    }
-    const bufferChanged = !this.splatDataBuffer || this.splatDataBuffer !== transformedBuffer;
-    if (bufferChanged) {
-      this.splatDataBuffer = transformedBuffer;
-      this.bindGroupNeedsUpdate = true;
-    }
-    this.device.queue.submit([computeEncoder.finish()]);
-    await this.updateSortIndexFromGPU(viewMatrix);
-    if (this.bindGroupNeedsUpdate && this.renderPipeline && this.sortIndexBuffer && this.splatDataBuffer && this.device) {
-      const storageBindGroupLayout = this.renderPipeline.getBindGroupLayout(1);
-      this.storageBindGroup = this.device.createBindGroup({
-        label: "Storage Bind Group",
-        layout: storageBindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: { buffer: this.sortIndexBuffer }
-          },
-          {
-            binding: 1,
-            resource: { buffer: this.splatDataBuffer }
-          }
-        ]
-      });
-      this.bindGroupNeedsUpdate = false;
-    }
-    if (!this.storageBindGroup) {
-      logger.error(`❌ Storage bind group not ready: bindGroupNeedsUpdate=${this.bindGroupNeedsUpdate}, hasRenderPipeline=${!!this.renderPipeline}, hasSortIndexBuffer=${!!this.sortIndexBuffer}, hasSplatDataBuffer=${!!this.splatDataBuffer}, hasDevice=${!!this.device}`);
-      return;
-    }
-    const renderEncoder = this.device.createCommandEncoder({
-      label: "Render Command Encoder"
-    });
-    if (needsTransform) {
-      if (!this.renderTexture || this.framebufferWidth !== width || this.framebufferHeight !== height) {
-        this.createRenderTexture(width, height);
-      }
-      const renderPass = renderEncoder.beginRenderPass({
-        label: "Render to Texture Pass",
-        colorAttachments: [
-          {
-            view: this.renderTextureView,
-            clearValue: {
-              r: this.backgroundColor[0],
-              g: this.backgroundColor[1],
-              b: this.backgroundColor[2],
-              a: this.backgroundColor[3]
-            },
-            loadOp: "clear",
-            storeOp: "store"
-          }
-        ],
-        depthStencilAttachment: {
-          view: this.depthTexture.createView(),
-          depthLoadOp: "clear",
-          depthStoreOp: "store",
-          depthClearValue: 1
-        }
+      }
+      this.splatDataBuffer = this.device.createBuffer({
+        label: "Splat Data Buffer",
+        size: packedData.byteLength,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
       });
-      renderPass.setPipeline(this.renderTexturePipeline);
-      renderPass.setBindGroup(0, this.uniformBindGroup);
-      renderPass.setBindGroup(1, this.storageBindGroup);
-      renderPass.setVertexBuffer(0, this.quadVertexBuffer);
-      renderPass.draw(4, this.splatCount);
-      renderPass.end();
-      this.blitToScreen(renderEncoder, transform);
-    } else {
-      const textureView = this.context.getCurrentTexture().createView();
-      const renderPass = renderEncoder.beginRenderPass({
-        label: "Render Pass",
-        colorAttachments: [
-          {
-            view: textureView,
-            clearValue: {
-              r: this.backgroundColor[0],
-              g: this.backgroundColor[1],
-              b: this.backgroundColor[2],
-              a: this.backgroundColor[3]
+      this.bindGroupNeedsUpdate = true;
+    }
+    this.device.queue.writeBuffer(
+      this.splatDataBuffer,
+      0,
+      packedData.buffer,
+      packedData.byteOffset,
+      packedData.byteLength
+    );
+    if (sortOrder) {
+      const indexBufferSize = sortOrder.byteLength;
+      if (!this.sortIndexBuffer || this.sortIndexBuffer.size !== indexBufferSize) {
+        if (this.sortIndexBuffer) {
+          this.sortIndexBuffer.destroy();
+        }
+        this.sortIndexBuffer = this.device.createBuffer({
+          label: "Sort Index Buffer",
+          size: indexBufferSize,
+          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+        this.bindGroupNeedsUpdate = true;
+      }
+      this.device.queue.writeBuffer(
+        this.sortIndexBuffer,
+        0,
+        sortOrder.buffer,
+        sortOrder.byteOffset,
+        sortOrder.byteLength
+      );
+      if (this.bindGroupNeedsUpdate && this.renderPipeline && this.sortIndexBuffer && this.splatDataBuffer) {
+        const storageBindGroupLayout = this.renderPipeline.getBindGroupLayout(1);
+        this.storageBindGroup = this.device.createBindGroup({
+          label: "Storage Bind Group",
+          layout: storageBindGroupLayout,
+          entries: [
+            {
+              binding: 0,
+              resource: { buffer: this.sortIndexBuffer }
             },
-            loadOp: "clear",
-            storeOp: "store"
-          }
-        ]
-      });
-      renderPass.setPipeline(this.renderPipeline);
-      renderPass.setBindGroup(0, this.uniformBindGroup);
-      renderPass.setBindGroup(1, this.storageBindGroup);
-      renderPass.setVertexBuffer(0, this.quadVertexBuffer);
-      renderPass.draw(4, this.splatCount);
-      renderPass.end();
+            {
+              binding: 1,
+              resource: { buffer: this.splatDataBuffer }
+            }
+          ]
+        });
+        this.bindGroupNeedsUpdate = false;
+      }
     }
-    this.device.queue.submit([renderEncoder.finish()]);
   }
   /**
    * 渲染一帧
@@ -17128,54 +15238,9 @@ class WebGPURenderer {
     const [width, height] = screenSize;
     const needsTransform = transform && (transform.x !== 0 || transform.y !== 0 || transform.scale !== 1);
     this.updateUniforms(viewMatrix, projectionMatrix, screenSize);
-    if (this.useGPUTransform && this.transformPipeline) {
-      this.transformPipeline.updateViewMatrix(viewMatrix);
-      const commandEncoder2 = this.device.createCommandEncoder({
-        label: "Transform + Render Command Encoder"
-      });
-      this.transformPipeline.executeInEncoder(commandEncoder2);
-      const transformedBuffer = this.transformPipeline.getTransformedOutputBuffer();
-      if (transformedBuffer) {
-        if (this.splatDataBuffer !== transformedBuffer) {
-          this.splatDataBuffer = transformedBuffer;
-          this.bindGroupNeedsUpdate = true;
-        }
-      }
-      this.renderWithCommandEncoder(commandEncoder2, viewMatrix, projectionMatrix, screenSize, transform, needsTransform || false, width, height);
-      this.device.queue.submit([commandEncoder2.finish()]);
-      return;
-    }
     const commandEncoder = this.device.createCommandEncoder({
       label: "Render Command Encoder"
     });
-    this.renderWithCommandEncoder(commandEncoder, viewMatrix, projectionMatrix, screenSize, transform, needsTransform || false, width, height);
-    this.device.queue.submit([commandEncoder.finish()]);
-  }
-  /**
-   * 🆕 渲染逻辑（提取为独立方法，供Transform和传统路径共用）
-   */
-  renderWithCommandEncoder(commandEncoder, _viewMatrix, _projectionMatrix, _screenSize, transform, needsTransform, width, height) {
-    if (this.bindGroupNeedsUpdate && this.renderPipeline && this.sortIndexBuffer && this.splatDataBuffer && this.device) {
-      const storageBindGroupLayout = this.renderPipeline.getBindGroupLayout(1);
-      this.storageBindGroup = this.device.createBindGroup({
-        label: "Storage Bind Group",
-        layout: storageBindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: { buffer: this.sortIndexBuffer }
-          },
-          {
-            binding: 1,
-            resource: { buffer: this.splatDataBuffer }
-          }
-        ]
-      });
-      this.bindGroupNeedsUpdate = false;
-    }
-    if (!this.device || !this.context || !this.renderPipeline || !this.storageBindGroup) {
-      return;
-    }
     if (needsTransform) {
       if (!this.renderTexture || this.framebufferWidth !== width || this.framebufferHeight !== height) {
         this.createRenderTexture(width, height);
@@ -17234,6 +15299,7 @@ class WebGPURenderer {
       renderPass.draw(4, this.splatCount);
       renderPass.end();
     }
+    this.device.queue.submit([commandEncoder.finish()]);
   }
   /**
    * 将 render texture 绘制到屏幕（应用 transform）
@@ -17323,99 +15389,11 @@ class WebGPURenderer {
   updateBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
   }
-  /**
-   * 🔍 关键修复：从GPU读取transform后的positions，进行深度排序，更新sortIndexBuffer
-   * 这解决了第一帧GPU路径渲染异常的问题（未排序导致渲染顺序错误）
-   */
-  async updateSortIndexFromGPU(viewMatrix) {
-    if (!this.device || !this.transformPipeline || !this.sortIndexBuffer) {
-      return;
-    }
-    if (this.useGPURadixSort && this.gpuRadixSort) {
-      const positionsBuffer2 = this.transformPipeline.getPositionsOutputBuffer();
-      if (!positionsBuffer2) {
-        logger.warn("⚠️ [WebGPURenderer] updateSortIndexFromGPU: positionsBuffer not available");
-        return;
-      }
-      this.gpuRadixSort.setPositionsBuffer(positionsBuffer2);
-      const sortedIndicesBuffer = await this.gpuRadixSort.sortAsync(viewMatrix, this.splatCount);
-      const copyEncoder = this.device.createCommandEncoder({ label: "Copy Sort Result" });
-      copyEncoder.copyBufferToBuffer(
-        sortedIndicesBuffer,
-        0,
-        this.sortIndexBuffer,
-        0,
-        this.splatCount * 4
-      );
-      this.device.queue.submit([copyEncoder.finish()]);
-      return;
-    }
-    performance.now();
-    const cameraPosition = [
-      -viewMatrix[12],
-      -viewMatrix[13],
-      -viewMatrix[14]
-    ];
-    const cameraForward = [
-      -viewMatrix[2],
-      -viewMatrix[6],
-      -viewMatrix[10]
-    ];
-    const positionsBuffer = this.transformPipeline.getPositionsOutputBuffer();
-    if (!positionsBuffer) {
-      logger.warn("⚠️ [WebGPURenderer] updateSortIndexFromGPU: positionsBuffer not available");
-      return;
-    }
-    const positionsSize = this.splatCount * 3 * 4;
-    const stagingBuffer = this.device.createBuffer({
-      size: positionsSize,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-    });
-    const readbackStart = performance.now();
-    const readbackEncoder = this.device.createCommandEncoder();
-    readbackEncoder.copyBufferToBuffer(
-      positionsBuffer,
-      0,
-      stagingBuffer,
-      0,
-      positionsSize
-    );
-    this.device.queue.submit([readbackEncoder.finish()]);
-    await stagingBuffer.mapAsync(GPUMapMode.READ);
-    const positionsMapped = stagingBuffer.getMappedRange();
-    const positions = new Float32Array(positionsMapped);
-    performance.now() - readbackStart;
-    const convertStart = performance.now();
-    const floatsPerPoint = 13;
-    const packedData = new Float32Array(this.splatCount * floatsPerPoint);
-    for (let i2 = 0; i2 < this.splatCount; i2++) {
-      const offset = i2 * floatsPerPoint;
-      const posOffset = i2 * 3;
-      packedData[offset] = positions[posOffset];
-      packedData[offset + 1] = positions[posOffset + 1];
-      packedData[offset + 2] = positions[posOffset + 2];
-    }
-    performance.now() - convertStart;
-    const sortStart = performance.now();
-    const sortOrder = sortSplats(packedData, cameraPosition, cameraForward);
-    performance.now() - sortStart;
-    const writeStart = performance.now();
-    this.device.queue.writeBuffer(
-      this.sortIndexBuffer,
-      0,
-      sortOrder.buffer,
-      sortOrder.byteOffset,
-      sortOrder.byteLength
-    );
-    performance.now() - writeStart;
-    stagingBuffer.unmap();
-    stagingBuffer.destroy();
-  }
   /**
    * 清理资源
    */
   dispose() {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i2;
     (_a = this.sortIndexBuffer) == null ? void 0 : _a.destroy();
     (_b = this.splatDataBuffer) == null ? void 0 : _b.destroy();
     (_c = this.quadVertexBuffer) == null ? void 0 : _c.destroy();
@@ -17424,11 +15402,7 @@ class WebGPURenderer {
     (_f = this.depthTexture) == null ? void 0 : _f.destroy();
     (_g = this.blitUniformBuffer) == null ? void 0 : _g.destroy();
     (_h = this.blitQuadBuffer) == null ? void 0 : _h.destroy();
-    (_i2 = this.transformPipeline) == null ? void 0 : _i2.destroy();
-    (_j = this.flamePipeline) == null ? void 0 : _j.destroy();
-    (_k = this.flameGPUBuffers) == null ? void 0 : _k.destroy();
-    (_l = this.gpuRadixSort) == null ? void 0 : _l.destroy();
-    (_m = this.device) == null ? void 0 : _m.destroy();
+    (_i2 = this.device) == null ? void 0 : _i2.destroy();
     this.sortIndexBuffer = null;
     this.splatDataBuffer = null;
     this.quadVertexBuffer = null;
@@ -17442,10 +15416,6 @@ class WebGPURenderer {
     this.blitQuadBuffer = null;
     this.blitPipeline = null;
     this.blitSampler = null;
-    this.transformPipeline = null;
-    this.flamePipeline = null;
-    this.flameGPUBuffers = null;
-    this.gpuRadixSort = null;
     this.device = null;
     this.context = null;
     this.renderPipeline = null;
@@ -17572,33 +15542,6 @@ class RenderSystem {
     const renderTime = performance.now() - startRender;
     this.renderTime = renderTime;
   }
-  /**
-   * 🆕 使用Face Geometry渲染 (GPU Transform优化路径)
-   * 数据流: Face Geometry → GPU Transform → Render
-   */
-  async renderFrameWithFaceGeometry(faceGeometryData, viewMatrix, projectionMatrix, screenSize, transform, cpuFaceGeometriesForComparison, avatarCore) {
-    if (!this.renderer || this.backend !== "webgpu") {
-      logger.warn("⚠️ renderFrameWithFaceGeometry only works with WebGPU, falling back to standard render");
-      return;
-    }
-    this.updateCameraMatrices();
-    const webgpuRenderer = this.renderer;
-    if (typeof webgpuRenderer.renderWithFaceGeometry === "function") {
-      await webgpuRenderer.renderWithFaceGeometry(
-        faceGeometryData,
-        viewMatrix ?? this.viewMatrix,
-        projectionMatrix ?? this.projectionMatrix,
-        screenSize ?? [this.canvas.width, this.canvas.height],
-        transform ?? (this.offsetX !== 0 || this.offsetY !== 0 || this.scale !== 1 ? { x: this.offsetX, y: this.offsetY, scale: this.scale } : void 0),
-        cpuFaceGeometriesForComparison,
-        avatarCore
-      );
-    } else {
-      logger.error("❌ WebGPU renderer does not support renderWithFaceGeometry");
-      return;
-    }
-    this.renderTime = performance.now();
-  }
   /**
    * Set transform for render texture blit
    * @param x - Horizontal offset in normalized coordinates (-1 to 1, where -1 = left edge, 0 = center, 1 = right edge)
@@ -17833,7 +15776,7 @@ function linearLerp(from, to2, progress) {
     expression: lerpArrays(from.expression || [], to2.expression || [], progress)
   };
 }
-function generateTransitionFramesLinear(from, to2, durationMs, fps = 25) {
+function generateTransitionFramesLinear(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
   const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
   const frames = Array.from({ length: steps });
   if (steps === 1) {
@@ -17876,27 +15819,11 @@ function createBezierEasing(x1, y1, x2, y2) {
   };
 }
 const BEZIER_CURVES = {
-  // jaw: fast start, smooth stop
-  jaw: createBezierEasing(0.2, 0.8, 0.3, 1),
-  // expression: smooth S curve
-  expression: createBezierEasing(0.4, 0, 0.2, 1),
-  // eye: softer S curve
-  eye: createBezierEasing(0.3, 0, 0.1, 1),
-  // neck: slow start, inertial stop
-  neck: createBezierEasing(0.1, 0.2, 0.2, 1),
-  // global: standard ease-in-out
-  global: createBezierEasing(0.42, 0, 0.58, 1)
-};
-const TIME_SCALE = {
-  jaw: 2.5,
-  // 40% time to complete
-  expression: 1.6,
-  // 62.5% time to complete
-  eye: 1.3,
-  // 77% time to complete
-  neck: 1,
-  // 100% time to complete
-  global: 1
+  jaw: createBezierEasing(...BEZIER_CURVES$1.jaw),
+  expression: createBezierEasing(...BEZIER_CURVES$1.expression),
+  eye: createBezierEasing(...BEZIER_CURVES$1.eye),
+  neck: createBezierEasing(...BEZIER_CURVES$1.neck),
+  global: createBezierEasing(...BEZIER_CURVES$1.global)
 };
 function bezierLerp(from, to2, progress) {
   const getT = (key) => {
@@ -17919,7 +15846,7 @@ function bezierLerp(from, to2, progress) {
     expression: lerpArrays(from.expression || [], to2.expression || [], getT("expression"))
   };
 }
-function generateTransitionFrames(from, to2, durationMs, fps = 25) {
+function generateTransitionFrames(from, to2, durationMs, fps = FLAME_FRAME_RATE) {
   const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
   const frames = Array.from({ length: steps });
   if (steps === 1) {
@@ -17969,9 +15896,9 @@ class AvatarView {
     // Transition animation data
     __publicField(this, "transitionKeyframes", []);
     __publicField(this, "transitionStartTime", 0);
-    __publicField(this, "startTransitionDurationMs", 200);
+    __publicField(this, "startTransitionDurationMs", START_TRANSITION_DURATION_MS);
     // Idle -> Speaking 过渡时长
-    __publicField(this, "endTransitionDurationMs", 1600);
+    __publicField(this, "endTransitionDurationMs", END_TRANSITION_DURATION_MS);
     // Speaking -> Idle 过渡时长
     __publicField(this, "cachedIdleFirstFrame", null);
     __publicField(this, "idleCurrentFrameIndex", 0);
@@ -17983,6 +15910,8 @@ class AvatarView {
     // Unique ID for this character instance
     // 纯渲染模式标志（阻止 idle 循环渲染）
     __publicField(this, "isPureRenderingMode", false);
+    // 渲染开关标志（控制是否进行渲染循环）
+    __publicField(this, "_renderingEnabled", true);
     // avatar_active 埋点相关
     __publicField(this, "avatarActiveTimer", null);
     __publicField(this, "AVATAR_ACTIVE_INTERVAL", 6e5);
@@ -18054,12 +15983,12 @@ class AvatarView {
       aligned.from,
       aligned.to,
       durationMs,
-      APP_CONFIG.animation.fps
+      FLAME_FRAME_RATE
     ) : generateTransitionFrames(
       aligned.from,
       aligned.to,
       durationMs,
-      APP_CONFIG.animation.fps
+      FLAME_FRAME_RATE
     );
     if (keyframes.length < 2) {
       keyframes = [aligned.from, aligned.to];
@@ -18198,7 +16127,6 @@ class AvatarView {
         logger.log("[AvatarView] Initializing render system...");
       const cameraConfig = this.resolveCameraConfig(resources);
       await this.initializeRenderSystem(cameraConfig);
-      await this.initializeGPUPath(avatarCore);
       if (APP_CONFIG.debug)
         logger.log("[AvatarView] Starting rendering...");
       await this.renderFirstFrame();
@@ -18234,78 +16162,6 @@ class AvatarView {
     if (APP_CONFIG.debug)
       logger.log("[AvatarView] Render system initialized successfully");
   }
-  /**
-   * 🆕 初始化 GPU 路径 (Transform + FLAME Pipeline)
-   * @internal
-   */
-  async initializeGPUPath(avatarCore) {
-    try {
-      logger.log("[AvatarView] 🚀 Initializing GPU Transform optimization...");
-      const renderer = this.renderSystem.renderer;
-      logger.log("[AvatarView] GPU Init - hasRenderer:", !!renderer, "hasLoadOriginalSplats:", typeof (renderer == null ? void 0 : renderer.loadOriginalSplats) === "function");
-      const originalSplatsResult = await avatarCore.getOriginalSplatsData();
-      logger.log("[AvatarView] GPU Init - originalSplatsResult:", !!originalSplatsResult, "hasData:", !!(originalSplatsResult == null ? void 0 : originalSplatsResult.data), "count:", originalSplatsResult == null ? void 0 : originalSplatsResult.count);
-      if (originalSplatsResult && originalSplatsResult.data) {
-        if (renderer && typeof renderer.loadOriginalSplats === "function") {
-          renderer.loadOriginalSplats(
-            originalSplatsResult.data,
-            originalSplatsResult.count
-          );
-          logger.log(`[AvatarView] ✅ Original splats uploaded to GPU: ${originalSplatsResult.count} splats`);
-          if (typeof renderer.getUseGPUTransform === "function") {
-            logger.log("[AvatarView] GPU Init - useGPUTransform after upload:", renderer.getUseGPUTransform());
-          }
-        } else {
-          logger.warn("[AvatarView] ⚠️ GPU Init - renderer.loadOriginalSplats not available!");
-        }
-      } else {
-        logger.warn("[AvatarView] ⚠️ GPU Init - No original splats data from WASM!");
-      }
-      try {
-        const templateData = await avatarCore.getFLAMETemplateData(this.characterId);
-        if (templateData && renderer && typeof renderer.loadFLAMETemplateData === "function") {
-          const shapeParamsResult = await avatarCore.getCharacterShapeParams(this.characterId);
-          if (shapeParamsResult && shapeParamsResult.params) {
-            const shapeParams = new Float32Array(shapeParamsResult.params);
-            const activeShapeIndices = [];
-            const activeShapeValues = [];
-            const EPSILON = 1e-6;
-            for (let i2 = 0; i2 < shapeParams.length && i2 < 300; i2++) {
-              if (Math.abs(shapeParams[i2]) > EPSILON) {
-                activeShapeIndices.push(i2);
-                activeShapeValues.push(shapeParams[i2]);
-              }
-            }
-            renderer.loadFLAMETemplateData(templateData, shapeParams, {
-              activeIndices: new Uint32Array(activeShapeIndices),
-              activeValues: new Float32Array(activeShapeValues),
-              count: activeShapeIndices.length
-            });
-            if (APP_CONFIG.debug)
-              logger.log(`[AvatarView] ✅ FLAME template data uploaded to GPU: ${templateData.vertexCount} vertices`);
-          }
-        }
-      } catch (flameError) {
-        logger.warn("[AvatarView] Failed to load FLAME template data:", flameError instanceof Error ? flameError.message : String(flameError));
-      }
-      const useGPUPath = typeof (renderer == null ? void 0 : renderer.getUseGPUTransform) === "function" && renderer.getUseGPUTransform() && typeof (renderer == null ? void 0 : renderer.getUseGPUFLAME) === "function" && renderer.getUseGPUFLAME();
-      if (useGPUPath) {
-        this.avatarController.setRenderCallback(
-          (splatData, frameIndex) => {
-            this.renderRealtimeFrame(splatData, frameIndex);
-          },
-          this.characterHandle,
-          true
-          // useGPUPath = true
-        );
-        logger.log("[AvatarView] ✅ GPU path enabled for AvatarController (skipping splatData computation)");
-      }
-      if (APP_CONFIG.debug)
-        logger.log("[AvatarView] ✅ GPU Transform optimization initialized");
-    } catch (error) {
-      logger.warn("[AvatarView] Failed to initialize GPU path, falling back to CPU:", error instanceof Error ? error.message : String(error));
-    }
-  }
   /**
    * Get default camera configuration
    * @internal
@@ -18403,76 +16259,27 @@ class AvatarView {
     if (!avatarCore) {
       throw new Error("AvatarCore not available");
     }
-    const backend = this.renderSystem.getBackend();
-    const renderer = this.renderSystem.renderer;
-    const hasGetUseGPUTransform = typeof (renderer == null ? void 0 : renderer.getUseGPUTransform) === "function";
-    const gpuTransformFlag = hasGetUseGPUTransform ? renderer.getUseGPUTransform() : false;
-    const useGPUTransform = backend === "webgpu" && renderer && hasGetUseGPUTransform && gpuTransformFlag;
-    logger.log("[AvatarView] renderFirstFrame - GPU path check:", {
-      backend,
-      hasRenderer: !!renderer,
-      hasGetUseGPUTransform,
-      gpuTransformFlag,
-      useGPUTransform
-    });
-    const useGPUFLAME = typeof (renderer == null ? void 0 : renderer.getUseGPUFLAME) === "function" && renderer.getUseGPUFLAME();
-    if (useGPUTransform && useGPUFLAME) {
-      logger.log("[AvatarView] 🚀🔥 Using FULL GPU path for first frame (GPU FLAME + GPU Transform)!");
-      try {
-        const neutralFrameParams = {
-          exprParams: new Float32Array(100),
-          rotation: new Float32Array([0, 0, 0]),
-          translation: new Float32Array([0, 0, 0]),
-          neckPose: new Float32Array([0, 0, 0]),
-          jawPose: new Float32Array([0, 0, 0]),
-          eyesPose: new Float32Array([0, 0, 0, 0, 0, 0]),
-          eyelid: new Float32Array([0, 0])
-        };
-        await this.renderSystem.renderFrameWithFaceGeometry(neutralFrameParams);
-        logger.log("[AvatarView] ✅ First frame rendered successfully (FULL GPU path)");
-      } catch (gpuFlameError) {
-        logger.error("[AvatarView] ❌ GPU FLAME path failed, falling back to CPU FLAME");
-        const faceGeometryData = await avatarCore.computeFrameAsFaceGeometry({ frameIndex: 0, characterId: this.characterId });
-        if (faceGeometryData) {
-          await this.renderSystem.renderFrameWithFaceGeometry(faceGeometryData);
-          logger.log("[AvatarView] ✅ First frame rendered successfully (fallback to CPU FLAME)");
-        } else {
-          throw new Error("Failed to compute first frame face geometry data");
-        }
-      }
-    } else if (useGPUTransform) {
-      logger.log("[AvatarView] 🚀 Using GPU Transform path for first frame (CPU FLAME)!");
-      const faceGeometryData = await avatarCore.computeFrameAsFaceGeometry({ frameIndex: 0, characterId: this.characterId });
-      if (faceGeometryData) {
-        await this.renderSystem.renderFrameWithFaceGeometry(faceGeometryData);
-        logger.log("[AvatarView] ✅ First frame rendered successfully (GPU Transform path)");
-      } else {
-        throw new Error("Failed to compute first frame face geometry data");
-      }
+    const neutralParams = {
+      shape_params: Array.from({ length: 100 }, () => 0),
+      expr_params: Array.from({ length: 50 }, () => 0),
+      rotation: [0, 0, 0],
+      translation: [0, 0, 0],
+      neck_pose: [0, 0, 0],
+      jaw_pose: [0, 0, 0],
+      eyes_pose: [0, 0, 0, 0, 0, 0]
+    };
+    const splatData = await avatarCore.computeFrameFlatFromParams(neutralParams, this.characterHandle ?? void 0);
+    if (splatData) {
+      this.renderSystem.loadSplatsFromPackedData(splatData);
+      this.renderSystem.renderFrame();
+      if (APP_CONFIG.debug)
+        logger.log("[AvatarView] First frame rendered successfully");
+      (_a = this.onFirstRendering) == null ? void 0 : _a.call(this);
+      this.reportAvatarActive();
+      this.startAvatarActiveHeartbeat();
     } else {
-      logger.log("[AvatarView] 📊 Using CPU path for first frame (GPU not ready)");
-      const neutralParams = {
-        shape_params: Array.from({ length: 100 }, () => 0),
-        expr_params: Array.from({ length: 50 }, () => 0),
-        rotation: [0, 0, 0],
-        translation: [0, 0, 0],
-        neck_pose: [0, 0, 0],
-        jaw_pose: [0, 0, 0],
-        eyes_pose: [0, 0, 0, 0, 0, 0]
-      };
-      const splatData = await avatarCore.computeFrameFlatFromParams(neutralParams, this.characterHandle ?? void 0);
-      if (splatData) {
-        this.renderSystem.loadSplatsFromPackedData(splatData);
-        this.renderSystem.renderFrame();
-        if (APP_CONFIG.debug)
-          logger.log("[AvatarView] First frame rendered successfully (CPU path)");
-      } else {
-        throw new Error("Failed to compute first frame splat data");
-      }
+      throw new Error("Failed to compute first frame splat data");
     }
-    (_a = this.onFirstRendering) == null ? void 0 : _a.call(this);
-    this.reportAvatarActive();
-    this.startAvatarActiveHeartbeat();
   }
   /**
    * Update FPS statistics (called in requestAnimationFrame callback)
@@ -18510,7 +16317,7 @@ class AvatarView {
     }
     this.idleCurrentFrameIndex = 0;
     let lastTime = 0;
-    const targetFPS = APP_CONFIG.animation.fps;
+    const targetFPS = FLAME_FRAME_RATE;
     const frameInterval = 1e3 / targetFPS;
     this.initFPS();
     const renderFrame = async (currentTime) => {
@@ -18532,50 +16339,24 @@ class AvatarView {
           this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
           return;
         }
+        if (!this._renderingEnabled) {
+          this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
+          return;
+        }
         const avatarCore = AvatarSDK.getAvatarCore();
         if (!avatarCore) {
           return;
         }
-        const backend = this.renderSystem.getBackend();
-        const renderer = this.renderSystem.renderer;
-        const useGPUTransform = backend === "webgpu" && renderer && typeof renderer.getUseGPUTransform === "function" && renderer.getUseGPUTransform();
-        const useGPUFLAME = typeof (renderer == null ? void 0 : renderer.getUseGPUFLAME) === "function" && renderer.getUseGPUFLAME();
-        if (useGPUTransform && useGPUFLAME) {
-          const flameParams = await avatarCore.getCurrentFrameParams(this.idleCurrentFrameIndex, this.characterId);
-          this.idleCurrentFrameIndex++;
+        const splatData = await avatarCore.computeCompleteFrameFlat({ frameIndex: this.idleCurrentFrameIndex }, this.characterHandle ?? void 0);
+        this.idleCurrentFrameIndex++;
+        if (splatData) {
           if (this.renderingState !== "idle") {
             return;
           }
           if (this.isPureRenderingMode) {
             return;
           }
-          const frameParams = this.convertFlameParamsToGPUFormat(flameParams);
-          await this.renderSystem.renderFrameWithFaceGeometry(frameParams);
-        } else if (useGPUTransform) {
-          const faceGeometryData = await avatarCore.computeFrameAsFaceGeometry({ frameIndex: this.idleCurrentFrameIndex, characterId: this.characterId });
-          this.idleCurrentFrameIndex++;
-          if (faceGeometryData) {
-            if (this.renderingState !== "idle") {
-              return;
-            }
-            if (this.isPureRenderingMode) {
-              return;
-            }
-            await this.renderSystem.renderFrameWithFaceGeometry(faceGeometryData);
-          }
-        } else {
-          const splatData = await avatarCore.computeCompleteFrameFlat({ frameIndex: this.idleCurrentFrameIndex }, this.characterHandle ?? void 0);
-          this.idleCurrentFrameIndex++;
-          if (splatData) {
-            if (this.renderingState !== "idle") {
-              return;
-            }
-            if (this.isPureRenderingMode) {
-              return;
-            }
-            this.renderSystem.loadSplatsFromPackedData(splatData);
-            this.renderSystem.renderFrame();
-          }
+          this.doRender(splatData);
         }
         this.idleAnimationLoopId = requestAnimationFrame(renderFrame);
       } catch (error) {
@@ -18596,7 +16377,7 @@ class AvatarView {
       this.stopRealtimeAnimationLoop();
     }
     let lastTime = 0;
-    const targetFPS = APP_CONFIG.animation.fps;
+    const targetFPS = FLAME_FRAME_RATE;
     const frameInterval = 1e3 / targetFPS;
     this.initFPS();
     const renderFrame = async (currentTime) => {
@@ -18642,18 +16423,9 @@ class AvatarView {
           const wasmParams = convertProtoFlameToWasmParams(currentFrame);
           const avatarCore = AvatarSDK.getAvatarCore();
           if (avatarCore) {
-            const backend = this.renderSystem.getBackend();
-            const renderer = this.renderSystem.renderer;
-            const useGPUTransform = backend === "webgpu" && renderer && typeof renderer.getUseGPUTransform === "function" && renderer.getUseGPUTransform();
-            if (useGPUTransform) {
-              const frameParams = this.convertFlameParamsToGPUFormat(wasmParams);
-              await this.renderSystem.renderFrameWithFaceGeometry(frameParams);
-            } else {
-              const sd = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
-              if (sd) {
-                this.renderSystem.loadSplatsFromPackedData(sd);
-                this.renderSystem.renderFrame();
-              }
+            const sd = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
+            if (sd) {
+              this.doRender(sd);
             }
           }
           if (progress >= 1) {
@@ -18731,51 +16503,32 @@ class AvatarView {
     this.stopIdleAnimationLoop();
     this.stopRealtimeAnimationLoop();
   }
+  /**
+   * Unified render method - all rendering goes through here
+   * This is the single point of control for renderingEnabled flag
+   * @internal
+   */
+  doRender(splatData) {
+    if (!this.renderSystem || !this._renderingEnabled) {
+      return;
+    }
+    this.renderSystem.loadSplatsFromPackedData(splatData);
+    this.renderSystem.renderFrame();
+  }
   /**
    * Render realtime frame (called by playback layer callback)
    * @internal
    */
-  async renderRealtimeFrame(splatData, frameIndex) {
+  renderRealtimeFrame(splatData, frameIndex) {
     if (!this.renderSystem || this.renderingState !== "speaking") {
       return;
     }
-    const backend = this.renderSystem.getBackend();
-    const renderer = this.renderSystem.renderer;
-    const useGPUTransform = backend === "webgpu" && renderer && typeof renderer.getUseGPUTransform === "function" && renderer.getUseGPUTransform();
-    if (useGPUTransform) {
-      if (frameIndex >= 0 && frameIndex < this.currentKeyframes.length) {
-        const flame = this.currentKeyframes[frameIndex];
-        const wasmParams = convertProtoFlameToWasmParams(flame);
-        const frameParams = this.convertFlameParamsToGPUFormat(wasmParams);
-        await this.renderSystem.renderFrameWithFaceGeometry(frameParams);
-        this.lastRealtimeProtoFrame = flame;
-      }
-    } else {
-      this.renderSystem.loadSplatsFromPackedData(splatData);
-      this.renderSystem.renderFrame();
-      if (frameIndex >= 0 && frameIndex < this.currentKeyframes.length) {
-        this.lastRealtimeProtoFrame = this.currentKeyframes[frameIndex];
-      }
-    }
     this.lastRenderedFrameIndex = frameIndex;
     if (frameIndex >= 0 && frameIndex < this.currentKeyframes.length) {
-      this.currentPlayingFrame = this.currentKeyframes[frameIndex];
+      this.lastRealtimeProtoFrame = this.currentKeyframes[frameIndex];
+      this.currentPlayingFrame = this.lastRealtimeProtoFrame;
     }
-  }
-  /**
-   * 🆕 将 FlameParams 转换为 FLAMEFrameParams (GPU 格式)
-   * @internal
-   */
-  convertFlameParamsToGPUFormat(params) {
-    return {
-      exprParams: new Float32Array(params.expr_params || Array(100).fill(0)),
-      rotation: new Float32Array(params.rotation || [0, 0, 0]),
-      translation: new Float32Array(params.translation || [0, 0, 0]),
-      neckPose: new Float32Array(params.neck_pose || [0, 0, 0]),
-      jawPose: new Float32Array(params.jaw_pose || [0, 0, 0]),
-      eyesPose: new Float32Array(params.eyes_pose || [0, 0, 0, 0, 0, 0]),
-      eyelid: new Float32Array(params.eyelid || [0, 0])
-    };
+    this.doRender(splatData);
   }
   /**
    * State transition method
@@ -19137,21 +16890,12 @@ class AvatarView {
       if (!avatarCore) {
         throw new Error("AvatarCore not available");
       }
-      const backend = this.renderSystem.getBackend();
-      const renderer = this.renderSystem.renderer;
-      const useGPUTransform = backend === "webgpu" && renderer && typeof renderer.getUseGPUTransform === "function" && renderer.getUseGPUTransform();
-      if (useGPUTransform) {
-        const frameParams = this.convertFlameParamsToGPUFormat(wasmParams);
-        await this.renderSystem.renderFrameWithFaceGeometry(frameParams);
-      } else {
-        const splatData = await avatarCore.computeFrameFlatFromParams(
-          wasmParams,
-          this.characterHandle ?? void 0
-        );
-        if (splatData) {
-          this.renderSystem.loadSplatsFromPackedData(splatData);
-          this.renderSystem.renderFrame();
-        }
+      const splatData = await avatarCore.computeFrameFlatFromParams(
+        wasmParams,
+        this.characterHandle ?? void 0
+      );
+      if (splatData) {
+        this.doRender(splatData);
       }
     } catch (error) {
       logger.error("[AvatarView] Failed to render flame:", error instanceof Error ? error.message : String(error));
@@ -19188,7 +16932,7 @@ class AvatarView {
       const aligned = this.alignFlamePair(fromFrame, toFrame);
       const alignedFrom = aligned.from;
       const alignedTo = aligned.to;
-      const fps = APP_CONFIG.animation.fps;
+      const fps = FLAME_FRAME_RATE;
       const durationMs = frameCount / fps * 1e3;
       const transitionFrames = useLinear ? generateTransitionFramesLinear(alignedFrom, alignedTo, durationMs, fps) : generateTransitionFrames(alignedFrom, alignedTo, durationMs, fps);
       transitionFrames[0] = alignedFrom;
@@ -19220,6 +16964,76 @@ class AvatarView {
       this.renderSystem.handleResize();
     }
   }
+  /**
+   * Pause rendering loop
+   * 
+   * When called:
+   * - Rendering loop stops (no GPU/canvas updates)
+   * - Audio playback continues normally
+   * - Animation state machine continues running
+   * 
+   * Use `resumeRendering()` to resume rendering.
+   * 
+   * @example
+   * // Stop rendering to save GPU resources (audio continues)
+   * avatarView.pauseRendering()
+   */
+  pauseRendering() {
+    if (!this._renderingEnabled) {
+      return;
+    }
+    this._renderingEnabled = false;
+    logger.log("[AvatarView] Rendering paused");
+  }
+  /**
+   * Resume rendering loop
+   * 
+   * When called:
+   * - Rendering loop resumes from current state
+   * - If in Idle state, immediately renders current frame to restore display
+   * 
+   * @example
+   * // Resume rendering
+   * avatarView.resumeRendering()
+   */
+  resumeRendering() {
+    if (this._renderingEnabled) {
+      return;
+    }
+    this._renderingEnabled = true;
+    logger.log("[AvatarView] Rendering resumed");
+    if (this.isInitialized && this.renderSystem && this.renderingState === "idle") {
+      this.renderCurrentIdleFrame();
+    }
+  }
+  /**
+   * Check if rendering is currently enabled
+   * @returns true if rendering is enabled, false if paused
+   */
+  isRenderingEnabled() {
+    return this._renderingEnabled;
+  }
+  /**
+   * Render current idle frame immediately
+   * @internal
+   */
+  async renderCurrentIdleFrame() {
+    const avatarCore = AvatarSDK.getAvatarCore();
+    if (!avatarCore || !this.renderSystem) {
+      return;
+    }
+    try {
+      const splatData = await avatarCore.computeCompleteFrameFlat(
+        { frameIndex: this.idleCurrentFrameIndex },
+        this.characterHandle ?? void 0
+      );
+      if (splatData) {
+        this.doRender(splatData);
+      }
+    } catch (error) {
+      logger.warn("[AvatarView] Failed to render current idle frame:", error);
+    }
+  }
   /**
    * 获取渲染性能统计
    * @returns 渲染性能统计数据，如果渲染系统未初始化则返回 null
@@ -19260,6 +17074,9 @@ class AvatarView {
     const { x: x2, y: y2, scale } = value;
     logger.log(`[AvatarView] Setting transform: x=${x2}, y=${y2}, scale=${scale}`);
     this.renderSystem.setTransform(x2, y2, scale);
+    if (this.isInitialized && this.renderSystem && this._renderingEnabled) {
+      this.renderSystem.renderFrame();
+    }
   }
   /**
    * Report avatar_active event