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

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

@@ -8243,7 +8243,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-8jk86K8D.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-BtOgYxcz.js");
     const { AvatarSDK: AvatarSDK2 } = await Promise.resolve().then(() => AvatarSDK$1);
     const audioFormat = AvatarSDK2.getAudioFormat();
     this.streamingPlayer = new StreamingAudioPlayer({
@@ -8756,6 +8756,52 @@ 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结构体数据
    */
@@ -9017,7 +9063,13 @@ 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"])
+      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"])
     };
   }
   /**
@@ -9670,6 +9722,181 @@ 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 {
   /**
@@ -9936,7 +10163,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.75");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.77");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -11773,6 +12000,8 @@ 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 ==========
@@ -12401,13 +12630,19 @@ class AvatarController {
   }
   /**
    * Set render callback (called by AvatarView)
+   * @param callback 渲染回调函数
+   * @param characterHandle 角色句柄
+   * @param useGPUPath 是否使用 GPU 路径（跳过 splatData 计算）
    * @internal
    */
-  setRenderCallback(callback, characterHandle) {
+  setRenderCallback(callback, characterHandle, useGPUPath) {
     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)
@@ -12784,16 +13019,22 @@ class AvatarController {
           }
         }
         if (arrayIndex >= 0 && arrayIndex < this.currentKeyframes.length) {
-          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);
+          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);
+              }
             }
           }
         }
@@ -14530,122 +14771,1720 @@ 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";
-class WebGPURenderer {
-  constructor(canvas, backgroundColor, alpha = true) {
-    __publicField(this, "canvas");
-    __publicField(this, "backgroundColor");
-    __publicField(this, "device", null);
-    __publicField(this, "context", null);
-    __publicField(this, "renderPipeline", null);
-    __publicField(this, "renderTexturePipeline", null);
-    // 用于渲染到 render texture
-    __publicField(this, "quadVertexBuffer", null);
-    __publicField(this, "uniformBuffer", null);
-    __publicField(this, "uniformBindGroup", null);
-    // 🚀 间接索引渲染 buffers
-    __publicField(this, "sortIndexBuffer", null);
-    __publicField(this, "splatDataBuffer", null);
-    __publicField(this, "storageBindGroup", null);
-    __publicField(this, "bindGroupNeedsUpdate", false);
-    // 标记 bind group 是否需要更新
+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, "presentationFormat", "bgra8unorm");
-    __publicField(this, "alpha");
-    // Render texture framebuffer
-    __publicField(this, "renderTexture", null);
-    __publicField(this, "renderTextureView", null);
-    __publicField(this, "depthTexture", null);
-    __publicField(this, "framebufferWidth", 0);
-    __publicField(this, "framebufferHeight", 0);
-    // Blit pipeline for drawing render texture to screen
-    __publicField(this, "blitPipeline", null);
-    __publicField(this, "blitUniformBuffer", null);
-    __publicField(this, "blitQuadBuffer", null);
-    __publicField(this, "blitSampler", null);
-    this.canvas = canvas;
-    this.backgroundColor = backgroundColor || [0, 0, 0, 0];
-    this.alpha = alpha;
+    __publicField(this, "faceCount", 0);
+    // 🆕 GPU FLAME 支持：标记是否使用外部 GPU buffer
+    __publicField(this, "usesExternalFaceGeometryBuffer", false);
+    this.device = device;
   }
   /**
-   * 初始化 WebGPU 渲染器
+   * 初始化Pipeline
    */
   async initialize() {
-    const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: "high-performance"
+    const shaderModule = this.device.createShaderModule({
+      label: "Transform Compute Shader",
+      code: transformShaderCode
     });
-    if (!adapter) {
-      throw new Error("WebGPU: No GPU adapter found");
+    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.device = await adapter.requestDevice();
-    this.context = this.canvas.getContext("webgpu");
-    if (!this.context) {
-      throw new Error("WebGPU: Failed to get canvas context");
+    this.splatCount = splatCount;
+    const bufferSize = originalSplatsData.byteLength;
+    if (this.originalSplatsBuffer) {
+      this.originalSplatsBuffer.destroy();
     }
-    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    this.context.configure({
-      device: this.device,
-      format: this.presentationFormat,
-      alphaMode: this.alpha ? "premultiplied" : "opaque"
+    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时创建
     });
-    this.createUniformBuffer();
-    this.createQuadVertexBuffer();
-    await this.createRenderPipeline();
-    await this.createBlitPipeline();
   }
   /**
-   * 创建 Uniform Buffer
+   * 🆕 设置外部 GPU FaceGeometry Buffer（GPU FLAME 路径）
+   * @param externalBuffer 外部 GPU buffer（来自 FLAME Pipeline 的 faceGeometriesBuffer）
+   * @param faceCount face 数量
    */
-  createUniformBuffer() {
-    if (!this.device)
+  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;
-    const uniformBufferSize = 160;
-    this.uniformBuffer = this.device.createBuffer({
-      label: "Uniform Buffer",
-      size: uniformBufferSize,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    }
+    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 (供渲染器使用)
    */
-  createQuadVertexBuffer() {
-    if (!this.device)
+  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;
-    const quadVertices = new Float32Array([
-      -1,
-      -1,
-      // 左下
-      -1,
-      1,
-      // 左上
-      1,
-      -1,
-      // 右下
-      1,
-      1
-      // 右上
-    ]);
-    this.quadVertexBuffer = this.device.createBuffer({
-      label: "Quad Vertex Buffer",
-      size: quadVertices.byteLength,
-      usage: GPUBufferUsage.VERTEX,
-      mappedAtCreation: true
+    }
+    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
     });
-    new Float32Array(this.quadVertexBuffer.getMappedRange()).set(quadVertices);
-    this.quadVertexBuffer.unmap();
+    this.createPositionsOutputBuffer();
+    this.createDepthsOutputBuffer();
   }
   /**
-   * 创建 Render Pipeline
+   * 🚀 创建Positions Output Buffer (用于排序)
+   * 格式: position[3] = 3 floats = 12 bytes per splat
    */
-  async createRenderPipeline() {
-    if (!this.device)
-      return;
-    const shaderModule = this.device.createShaderModule({
-      label: "3DGS Render Shader",
-      code: renderShaderCode
+  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
     });
-    const uniformBindGroupLayout = this.device.createBindGroupLayout({
-      label: "Uniform Bind Group Layout",
+  }
+  /**
+   * 🆕 创建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");
+    __publicField(this, "backgroundColor");
+    __publicField(this, "device", null);
+    __publicField(this, "context", null);
+    __publicField(this, "renderPipeline", null);
+    __publicField(this, "renderTexturePipeline", null);
+    // 用于渲染到 render texture
+    __publicField(this, "quadVertexBuffer", null);
+    __publicField(this, "uniformBuffer", null);
+    __publicField(this, "uniformBindGroup", null);
+    // 🚀 间接索引渲染 buffers
+    __publicField(this, "sortIndexBuffer", null);
+    __publicField(this, "splatDataBuffer", null);
+    __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");
+    // Render texture framebuffer
+    __publicField(this, "renderTexture", null);
+    __publicField(this, "renderTextureView", null);
+    __publicField(this, "depthTexture", null);
+    __publicField(this, "framebufferWidth", 0);
+    __publicField(this, "framebufferHeight", 0);
+    // Blit pipeline for drawing render texture to screen
+    __publicField(this, "blitPipeline", null);
+    __publicField(this, "blitUniformBuffer", null);
+    __publicField(this, "blitQuadBuffer", null);
+    __publicField(this, "blitSampler", null);
+    this.canvas = canvas;
+    this.backgroundColor = backgroundColor || [0, 0, 0, 0];
+    this.alpha = alpha;
+  }
+  /**
+   * 初始化 WebGPU 渲染器
+   */
+  async initialize() {
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: "high-performance"
+    });
+    if (!adapter) {
+      throw new Error("WebGPU: No GPU adapter found");
+    }
+    this.device = await adapter.requestDevice();
+    this.context = this.canvas.getContext("webgpu");
+    if (!this.context) {
+      throw new Error("WebGPU: Failed to get canvas context");
+    }
+    this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.context.configure({
+      device: this.device,
+      format: this.presentationFormat,
+      alphaMode: this.alpha ? "premultiplied" : "opaque"
+    });
+    this.createUniformBuffer();
+    this.createQuadVertexBuffer();
+    await this.createRenderPipeline();
+    await this.createBlitPipeline();
+    this.transformPipeline = new TransformPipeline(this.device);
+    await this.transformPipeline.initialize();
+  }
+  /**
+   * 创建 Uniform Buffer
+   */
+  createUniformBuffer() {
+    if (!this.device)
+      return;
+    const uniformBufferSize = 160;
+    this.uniformBuffer = this.device.createBuffer({
+      label: "Uniform Buffer",
+      size: uniformBufferSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+  }
+  /**
+   * 创建四边形顶点缓冲区（实例化渲染用）
+   */
+  createQuadVertexBuffer() {
+    if (!this.device)
+      return;
+    const quadVertices = new Float32Array([
+      -1,
+      -1,
+      // 左下
+      -1,
+      1,
+      // 左上
+      1,
+      -1,
+      // 右下
+      1,
+      1
+      // 右上
+    ]);
+    this.quadVertexBuffer = this.device.createBuffer({
+      label: "Quad Vertex Buffer",
+      size: quadVertices.byteLength,
+      usage: GPUBufferUsage.VERTEX,
+      mappedAtCreation: true
+    });
+    new Float32Array(this.quadVertexBuffer.getMappedRange()).set(quadVertices);
+    this.quadVertexBuffer.unmap();
+  }
+  /**
+   * 创建 Render Pipeline
+   */
+  async createRenderPipeline() {
+    if (!this.device)
+      return;
+    const shaderModule = this.device.createShaderModule({
+      label: "3DGS Render Shader",
+      code: renderShaderCode
+    });
+    const uniformBindGroupLayout = this.device.createBindGroupLayout({
+      label: "Uniform Bind Group Layout",
       entries: [
         {
           binding: 0,
@@ -14948,59 +16787,335 @@ class WebGPURenderer {
       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.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.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.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);
       }
-      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 }
+      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]
             },
-            {
-              binding: 1,
-              resource: { buffer: this.splatDataBuffer }
-            }
-          ]
-        });
-        this.bindGroupNeedsUpdate = false;
-      }
+            loadOp: "clear",
+            storeOp: "store"
+          }
+        ],
+        depthStencilAttachment: {
+          view: this.depthTexture.createView(),
+          depthLoadOp: "clear",
+          depthStoreOp: "store",
+          depthClearValue: 1
+        }
+      });
+      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]
+            },
+            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();
     }
+    this.device.queue.submit([renderEncoder.finish()]);
   }
   /**
    * 渲染一帧
@@ -15013,9 +17128,54 @@ 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);
@@ -15074,7 +17234,6 @@ class WebGPURenderer {
       renderPass.draw(4, this.splatCount);
       renderPass.end();
     }
-    this.device.queue.submit([commandEncoder.finish()]);
   }
   /**
    * 将 render texture 绘制到屏幕（应用 transform）
@@ -15164,11 +17323,99 @@ 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;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m;
     (_a = this.sortIndexBuffer) == null ? void 0 : _a.destroy();
     (_b = this.splatDataBuffer) == null ? void 0 : _b.destroy();
     (_c = this.quadVertexBuffer) == null ? void 0 : _c.destroy();
@@ -15177,7 +17424,11 @@ 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.device) == null ? void 0 : _i2.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();
     this.sortIndexBuffer = null;
     this.splatDataBuffer = null;
     this.quadVertexBuffer = null;
@@ -15191,6 +17442,10 @@ 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;
@@ -15317,6 +17572,33 @@ 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)
@@ -15916,6 +18198,7 @@ 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();
@@ -15951,6 +18234,78 @@ 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
@@ -16048,27 +18403,76 @@ class AvatarView {
     if (!avatarCore) {
       throw new Error("AvatarCore not available");
     }
-    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();
+    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");
+      }
     } else {
-      throw new Error("Failed to compute first frame splat data");
+      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");
+      }
     }
+    (_a = this.onFirstRendering) == null ? void 0 : _a.call(this);
+    this.reportAvatarActive();
+    this.startAvatarActiveHeartbeat();
   }
   /**
    * Update FPS statistics (called in requestAnimationFrame callback)
@@ -16132,17 +18536,46 @@ class AvatarView {
         if (!avatarCore) {
           return;
         }
-        const splatData = await avatarCore.computeCompleteFrameFlat({ frameIndex: this.idleCurrentFrameIndex }, this.characterHandle ?? void 0);
-        this.idleCurrentFrameIndex++;
-        if (splatData) {
+        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++;
           if (this.renderingState !== "idle") {
             return;
           }
           if (this.isPureRenderingMode) {
             return;
           }
-          this.renderSystem.loadSplatsFromPackedData(splatData);
-          this.renderSystem.renderFrame();
+          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.idleAnimationLoopId = requestAnimationFrame(renderFrame);
       } catch (error) {
@@ -16209,10 +18642,18 @@ class AvatarView {
           const wasmParams = convertProtoFlameToWasmParams(currentFrame);
           const avatarCore = AvatarSDK.getAvatarCore();
           if (avatarCore) {
-            const sd = await avatarCore.computeFrameFlatFromParams(wasmParams, this.characterHandle ?? void 0);
-            if (sd) {
-              this.renderSystem.loadSplatsFromPackedData(sd);
-              this.renderSystem.renderFrame();
+            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();
+              }
             }
           }
           if (progress >= 1) {
@@ -16294,18 +18735,48 @@ class AvatarView {
    * Render realtime frame (called by playback layer callback)
    * @internal
    */
-  renderRealtimeFrame(splatData, frameIndex) {
+  async renderRealtimeFrame(splatData, frameIndex) {
     if (!this.renderSystem || this.renderingState !== "speaking") {
       return;
     }
-    this.renderSystem.loadSplatsFromPackedData(splatData);
-    this.renderSystem.renderFrame();
+    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.lastRealtimeProtoFrame = this.currentKeyframes[frameIndex];
-      this.currentPlayingFrame = this.lastRealtimeProtoFrame;
+      this.currentPlayingFrame = this.currentKeyframes[frameIndex];
     }
   }
+  /**
+   * 🆕 将 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])
+    };
+  }
   /**
    * State transition method
    * Unified state transition management to ensure state consistency
@@ -16666,13 +19137,21 @@ class AvatarView {
       if (!avatarCore) {
         throw new Error("AvatarCore not available");
       }
-      const splatData = await avatarCore.computeFrameFlatFromParams(
-        wasmParams,
-        this.characterHandle ?? void 0
-      );
-      if (splatData) {
-        this.renderSystem.loadSplatsFromPackedData(splatData);
-        this.renderSystem.renderFrame();
+      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();
+        }
       }
     } catch (error) {
       logger.error("[AvatarView] Failed to render flame:", error instanceof Error ? error.message : String(error));
@@ -16781,9 +19260,6 @@ 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.renderSystem.renderFrame();
-    }
   }
   /**
    * Report avatar_active event