@d5techs/3dgs-lib 1.0.1 → 1.1.0

package/dist/3dgs-lib.js

@@ -1,6 +1,245 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DEFAULT_MATERIAL = {
+  baseColorFactor: [1, 1, 1, 1],
+  baseColorTexture: null,
+  metallicFactor: 0,
+  roughnessFactor: 0.5,
+  doubleSided: false
+};
+const DEFAULT_OBJ_MATERIAL = {
+  baseColorFactor: [1, 1, 1, 1],
+  baseColorTexture: null,
+  metallicFactor: 0,
+  roughnessFactor: 0.5,
+  doubleSided: true
+};
+var SHMode = /* @__PURE__ */ ((SHMode2) => {
+  SHMode2[SHMode2["L0"] = 0] = "L0";
+  SHMode2[SHMode2["L1"] = 1] = "L1";
+  SHMode2[SHMode2["L2"] = 2] = "L2";
+  SHMode2[SHMode2["L3"] = 3] = "L3";
+  return SHMode2;
+})(SHMode || {});
+function isMobileDevice() {
+  if (typeof navigator === "undefined" || typeof window === "undefined") {
+    return false;
+  }
+  const ua = navigator.userAgent || navigator.vendor || window.opera || "";
+  const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
+    ua.toLowerCase()
+  );
+  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+  const isSmallScreen = window.innerWidth <= 768;
+  const isIPadAsMac = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  return isMobileUA || isIPadAsMac || hasTouch && isSmallScreen;
+}
+function getRecommendedDPR() {
+  const isMobile = isMobileDevice();
+  const maxDpr = isMobile ? 1.5 : 3;
+  return Math.min(window.devicePixelRatio || 1, maxDpr);
+}
+function isWebGPUSupported() {
+  return typeof navigator !== "undefined" && "gpu" in navigator;
+}
+function computeBoundingBox$1(positions) {
+  if (positions.length < 3) {
+    return {
+      min: [0, 0, 0],
+      max: [0, 0, 0],
+      center: [0, 0, 0],
+      radius: 0
+    };
+  }
+  const min = [positions[0], positions[1], positions[2]];
+  const max = [positions[0], positions[1], positions[2]];
+  for (let i = 3; i < positions.length; i += 3) {
+    const x = positions[i];
+    const y = positions[i + 1];
+    const z = positions[i + 2];
+    min[0] = Math.min(min[0], x);
+    min[1] = Math.min(min[1], y);
+    min[2] = Math.min(min[2], z);
+    max[0] = Math.max(max[0], x);
+    max[1] = Math.max(max[1], y);
+    max[2] = Math.max(max[2], z);
+  }
+  const center = [
+    (min[0] + max[0]) / 2,
+    (min[1] + max[1]) / 2,
+    (min[2] + max[2]) / 2
+  ];
+  const dx = max[0] - min[0];
+  const dy = max[1] - min[1];
+  const dz = max[2] - min[2];
+  const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
+  return { min, max, center, radius };
+}
+function mergeBoundingBoxes(boxes) {
+  if (boxes.length === 0) return null;
+  let combinedMin = [...boxes[0].min];
+  let combinedMax = [...boxes[0].max];
+  for (let i = 1; i < boxes.length; i++) {
+    const box = boxes[i];
+    combinedMin[0] = Math.min(combinedMin[0], box.min[0]);
+    combinedMin[1] = Math.min(combinedMin[1], box.min[1]);
+    combinedMin[2] = Math.min(combinedMin[2], box.min[2]);
+    combinedMax[0] = Math.max(combinedMax[0], box.max[0]);
+    combinedMax[1] = Math.max(combinedMax[1], box.max[1]);
+    combinedMax[2] = Math.max(combinedMax[2], box.max[2]);
+  }
+  const center = [
+    (combinedMin[0] + combinedMax[0]) / 2,
+    (combinedMin[1] + combinedMax[1]) / 2,
+    (combinedMin[2] + combinedMax[2]) / 2
+  ];
+  const dx = combinedMax[0] - combinedMin[0];
+  const dy = combinedMax[1] - combinedMin[1];
+  const dz = combinedMax[2] - combinedMin[2];
+  const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
+  return { min: combinedMin, max: combinedMax, center, radius };
+}
+function createBoundingBoxFromMinMax(min, max) {
+  const center = [
+    (min[0] + max[0]) / 2,
+    (min[1] + max[1]) / 2,
+    (min[2] + max[2]) / 2
+  ];
+  const dx = max[0] - min[0];
+  const dy = max[1] - min[1];
+  const dz = max[2] - min[2];
+  const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
+  return { min, max, center, radius };
+}
+function transformBoundingBox(bbox, modelMatrix) {
+  const corners = [
+    [bbox.min[0], bbox.min[1], bbox.min[2]],
+    [bbox.max[0], bbox.min[1], bbox.min[2]],
+    [bbox.min[0], bbox.max[1], bbox.min[2]],
+    [bbox.max[0], bbox.max[1], bbox.min[2]],
+    [bbox.min[0], bbox.min[1], bbox.max[2]],
+    [bbox.max[0], bbox.min[1], bbox.max[2]],
+    [bbox.min[0], bbox.max[1], bbox.max[2]],
+    [bbox.max[0], bbox.max[1], bbox.max[2]]
+  ];
+  const m = modelMatrix;
+  let minX = Infinity, minY = Infinity, minZ = Infinity;
+  let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+  for (const [x, y, z] of corners) {
+    const tx = m[0] * x + m[4] * y + m[8] * z + m[12];
+    const ty = m[1] * x + m[5] * y + m[9] * z + m[13];
+    const tz = m[2] * x + m[6] * y + m[10] * z + m[14];
+    minX = Math.min(minX, tx);
+    minY = Math.min(minY, ty);
+    minZ = Math.min(minZ, tz);
+    maxX = Math.max(maxX, tx);
+    maxY = Math.max(maxY, ty);
+    maxZ = Math.max(maxZ, tz);
+  }
+  return createBoundingBoxFromMinMax(
+    [minX, minY, minZ],
+    [maxX, maxY, maxZ]
+  );
+}
+async function loadTextureFromURL(device, url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      return null;
+    }
+    const blob = await response.blob();
+    return loadTextureFromBlob(device, blob);
+  } catch (error) {
+    console.warn(`Failed to load texture from URL: ${url}`, error);
+    return null;
+  }
+}
+async function loadTextureFromBlob(device, blob) {
+  try {
+    const imageBitmap = await createImageBitmap(blob);
+    return createTextureFromImageBitmap(device, imageBitmap);
+  } catch (error) {
+    console.warn(`Failed to create texture from blob`, error);
+    return null;
+  }
+}
+async function loadTextureFromBuffer(device, buffer, mimeType = "image/png") {
+  try {
+    const uint8Array = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+    const blob = new Blob([uint8Array], { type: mimeType });
+    return loadTextureFromBlob(device, blob);
+  } catch (error) {
+    console.warn(`Failed to create texture from buffer`, error);
+    return null;
+  }
+}
+function createTextureFromImageBitmap(device, imageBitmap) {
+  const texture = device.createTexture({
+    size: [imageBitmap.width, imageBitmap.height, 1],
+    format: "rgba8unorm",
+    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+  });
+  device.queue.copyExternalImageToTexture(
+    { source: imageBitmap },
+    { texture },
+    [imageBitmap.width, imageBitmap.height]
+  );
+  return texture;
+}
+class TextureCache {
+  constructor(device) {
+    __publicField(this, "cache", /* @__PURE__ */ new Map());
+    __publicField(this, "device");
+    this.device = device;
+  }
+  /**
+   * 获取或加载纹理
+   */
+  async getOrLoad(url) {
+    if (this.cache.has(url)) {
+      return this.cache.get(url);
+    }
+    const texture = await loadTextureFromURL(this.device, url);
+    if (texture) {
+      this.cache.set(url, texture);
+    }
+    return texture;
+  }
+  /**
+   * 检查缓存中是否存在
+   */
+  has(url) {
+    return this.cache.has(url);
+  }
+  /**
+   * 从缓存获取
+   */
+  get(url) {
+    return this.cache.get(url);
+  }
+  /**
+   * 添加到缓存
+   */
+  set(url, texture) {
+    this.cache.set(url, texture);
+  }
+  /**
+   * 清空缓存
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * 销毁所有纹理并清空缓存
+   */
+  destroy() {
+    for (const texture of this.cache.values()) {
+      texture.destroy();
+    }
+    this.cache.clear();
+  }
+}
 class Renderer {
   constructor(canvas) {
     __publicField(this, "canvas");
@@ -130,11 +369,7 @@ class Renderer {
     this.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { width, height } = entry.contentRect;
-        const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
-          navigator.userAgent.toLowerCase()
-        );
-        const maxDpr = isMobile ? 1.5 : 3;
-        const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+        const dpr = getRecommendedDPR();
         this.canvas.width = Math.floor(width * dpr);
         this.canvas.height = Math.floor(height * dpr);
         this.createDepthTexture();
@@ -203,8 +438,10 @@ class Camera {
     __publicField(this, "fov", Math.PI / 4);
     // 45度
     __publicField(this, "aspect", 1);
-    __publicField(this, "near", 1e-3);
-    __publicField(this, "far", 1e4);
+    __publicField(this, "near", 0.1);
+    // 增大近平面以提高深度精度 (参考实现使用 0.1)
+    __publicField(this, "far", 1e3);
+    // 减小远平面以提高深度精度
     // 矩阵
     __publicField(this, "viewMatrix", new Float32Array(16));
     __publicField(this, "projectionMatrix", new Float32Array(16));
@@ -2184,7 +2421,7 @@ class GLBLoader {
         this.device.queue.writeBuffer(indexBuffer, 0, indexData);
       }
     }
-    const boundingBox = this.computeBoundingBox(positions);
+    const boundingBox = this.computeBoundingBoxFromPositions(positions);
     const material = await this.parseMaterial(gltf, primitive.material, binData);
     const mesh = new Mesh(vertexBuffer, vertexCount, indexBuffer, indexCount, boundingBox);
     mesh.hasUV = hasUV;
@@ -2290,38 +2527,8 @@ class GLBLoader {
   /**
    * 计算顶点数据的 bounding box
    */
-  computeBoundingBox(positions) {
-    if (positions.length < 3) {
-      return {
-        min: [0, 0, 0],
-        max: [0, 0, 0],
-        center: [0, 0, 0],
-        radius: 0
-      };
-    }
-    const min = [positions[0], positions[1], positions[2]];
-    const max = [positions[0], positions[1], positions[2]];
-    for (let i = 3; i < positions.length; i += 3) {
-      const x = positions[i];
-      const y = positions[i + 1];
-      const z = positions[i + 2];
-      min[0] = Math.min(min[0], x);
-      min[1] = Math.min(min[1], y);
-      min[2] = Math.min(min[2], z);
-      max[0] = Math.max(max[0], x);
-      max[1] = Math.max(max[1], y);
-      max[2] = Math.max(max[2], z);
-    }
-    const center = [
-      (min[0] + max[0]) / 2,
-      (min[1] + max[1]) / 2,
-      (min[2] + max[2]) / 2
-    ];
-    const dx = max[0] - min[0];
-    const dy = max[1] - min[1];
-    const dz = max[2] - min[2];
-    const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
-    return { min, max, center, radius };
+  computeBoundingBoxFromPositions(positions) {
+    return computeBoundingBox$1(positions);
   }
   /**
    * 获取访问器数据 - 修复字节对齐问题
@@ -3318,7 +3525,7 @@ class OBJLoader {
       });
       this.device.queue.writeBuffer(indexBuffer, 0, indexData);
     }
-    const boundingBox = this.computeBoundingBox(obj.positions);
+    const boundingBox = this.computeBoundingBoxFromPositions(obj.positions);
     const mesh = new Mesh(vertexBuffer, vertexCount, indexBuffer, indexCount, boundingBox);
     mesh.hasUV = hasUVs;
     mesh.indexFormat = indexFormat;
@@ -3359,53 +3566,16 @@ class OBJLoader {
    * 计算顶点数据的 bounding box
    * Requirement 3.5: 计算并存储 bounding box 信息
    */
-  computeBoundingBox(positions) {
-    if (positions.length < 3) {
-      return {
-        min: [0, 0, 0],
-        max: [0, 0, 0],
-        center: [0, 0, 0],
-        radius: 0
-      };
-    }
-    const min = [positions[0], positions[1], positions[2]];
-    const max = [positions[0], positions[1], positions[2]];
-    for (let i = 3; i < positions.length; i += 3) {
-      const x = positions[i];
-      const y = positions[i + 1];
-      const z = positions[i + 2];
-      min[0] = Math.min(min[0], x);
-      min[1] = Math.min(min[1], y);
-      min[2] = Math.min(min[2], z);
-      max[0] = Math.max(max[0], x);
-      max[1] = Math.max(max[1], y);
-      max[2] = Math.max(max[2], z);
-    }
-    const center = [
-      (min[0] + max[0]) / 2,
-      (min[1] + max[1]) / 2,
-      (min[2] + max[2]) / 2
-    ];
-    const dx = max[0] - min[0];
-    const dy = max[1] - min[1];
-    const dz = max[2] - min[2];
-    const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
-    return { min, max, center, radius };
+  computeBoundingBoxFromPositions(positions) {
+    return computeBoundingBox$1(positions);
   }
   /**
    * 创建材质数据
    * Requirement 4.3: 将材质关联到网格
    */
   async createMaterial(materialName, materials, baseUrl) {
-    const defaultMaterial = {
-      baseColorFactor: [1, 1, 1, 1],
-      baseColorTexture: null,
-      metallicFactor: 0,
-      roughnessFactor: 0.5,
-      doubleSided: true
-    };
     if (!materialName || !materials.has(materialName)) {
-      return defaultMaterial;
+      return { ...DEFAULT_OBJ_MATERIAL };
     }
     const parsedMaterial = materials.get(materialName);
     const material = {
@@ -4205,27 +4375,20 @@ function deserializeSplat(data) {
   }
   return splats;
 }
-const DEFAULT_NUM_BUCKETS$1 = 65536;
-const IOS_NUM_BUCKETS$1 = 4096;
 const WORKGROUP_SIZE$1 = 256;
-function isIOSDevice$1() {
-  if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent || "";
-  return /iphone|ipad|ipod/i.test(ua.toLowerCase()) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
-}
-function generateCullingShaderCode$1(numBuckets) {
-  const bucketBits = Math.log2(numBuckets);
+const RADIX_BITS = 8;
+const RADIX_SIZE = 256;
+const ELEMENTS_PER_THREAD = 4;
+const BLOCK_SIZE = WORKGROUP_SIZE$1 * ELEMENTS_PER_THREAD;
+function generateCullingShaderCode$1() {
   return (
     /* wgsl */
     `
 /**
- * Pass 1: 剔除 + 深度计算 + 桶计数
- * 桶数量: ${numBuckets}
+ * Project & Cull Shader
+ * 基于 rfs-gsplat-render 实现
  */
 
-const NUM_BUCKETS: u32 = ${numBuckets}u;
-const BUCKET_MAX: u32 = ${numBuckets - 1}u;
-
 struct Splat {
   mean:     vec3<f32>,
   _pad0:    f32,
@@ -4254,29 +4417,22 @@ struct CullingParams {
   farPlane: f32,
   screenWidth: f32,
   screenHeight: f32,
+  frustumDilation: f32,
   pixelThreshold: f32,
-  _pad0: f32,
   _pad1: f32,
 }
 
-struct Counters {
-  visibleCount: atomic<u32>,
-}
-
 @group(0) @binding(0) var<storage, read> splats: array<Splat>;
 @group(0) @binding(1) var<uniform> camera: CameraUniforms;
 @group(0) @binding(2) var<uniform> params: CullingParams;
-@group(0) @binding(3) var<storage, read_write> counters: Counters;
+@group(0) @binding(3) var<storage, read_write> depthKeys: array<u32>;
 @group(0) @binding(4) var<storage, read_write> visibleIndices: array<u32>;
-@group(0) @binding(5) var<storage, read_write> depthKeys: array<u32>;
-@group(0) @binding(6) var<storage, read_write> bucketCounts: array<atomic<u32>>;
-@group(0) @binding(7) var<storage, read_write> drawIndirect: array<u32>;
+@group(0) @binding(5) var<storage, read_write> indirectBuffer: array<atomic<u32>, 4>;
 
 fn maxScale(scale: vec3<f32>) -> f32 {
   return max(max(scale.x, scale.y), scale.z);
 }
 
-// 从模型矩阵提取最大缩放因子
 fn getModelMaxScale(model: mat4x4<f32>) -> f32 {
   let sx = length(model[0].xyz);
   let sy = length(model[1].xyz);
@@ -4284,422 +4440,504 @@ fn getModelMaxScale(model: mat4x4<f32>) -> f32 {
   return max(max(sx, sy), sz);
 }
 
-@compute @workgroup_size(${WORKGROUP_SIZE$1})
-fn cullAndCount(@builtin(global_invocation_id) gid: vec3<u32>) {
-  let i = gid.x;
-  if (i >= params.splatCount) {
-    return;
-  }
+// IEEE 754 位操作编码浮点数为可排序的 u32
+// 参考 rfs-gsplat-render 的 encode_min_max_fp32 实现
+fn encodeDepthKey(val: f32) -> u32 {
+  var bits = bitcast<u32>(val);
+  bits ^= bitcast<u32>(bitcast<i32>(bits) >> 31) | 0x80000000u;
+  return bits;
+}
+
+// 视锥剔除检查
+// 基于 rfs-gsplat-render 的 is_in_frustum 实现
+fn isInFrustum(clipPos: vec4<f32>, frustumDilation: f32) -> bool {
+  let clip = (1.0 + frustumDilation) * clipPos.w;
   
-  let splat = splats[i];
-  // 先应用模型矩阵变换到世界空间，再变换到视图空间
-  let worldPos = camera.model * vec4<f32>(splat.mean, 1.0);
-  let viewPos = camera.view * worldPos;
-  let z = -viewPos.z;
+  if abs(clipPos.x) > clip { return false; }
+  if abs(clipPos.y) > clip { return false; }
   
-  // 近平面剔除
-  if (z < params.nearPlane) {
-    return;
+  let nearThreshold = (0.0 - frustumDilation) * clipPos.w;
+  if clipPos.z < nearThreshold || clipPos.z > clipPos.w {
+    return false;
   }
   
-  // 远平面剔除
-  if (z > params.farPlane) {
-    return;
-  }
+  return true;
+}
+
+@compute @workgroup_size(${WORKGROUP_SIZE$1})
+fn projectAndCull(@builtin(global_invocation_id) gid: vec3<u32>) {
+  let i = gid.x;
+  if i >= params.splatCount { return; }
   
-  // 视锥剔除
-  let fx = camera.proj[0][0];
-  let fy = camera.proj[1][1];
-  let x_ndc = viewPos.x * fx / z;
-  let y_ndc = viewPos.y * fy / z;
-  // 考虑模型缩放对 splat 半径的影响
-  let modelScale = getModelMaxScale(camera.model);
-  let worldRadius = maxScale(splat.scale) * modelScale * 3.0;
-  let r_ndc = worldRadius * max(fx, fy) / z;
+  let splat = splats[i];
   
-  if (x_ndc < -1.0 - r_ndc || x_ndc > 1.0 + r_ndc) {
-    return;
-  }
-  if (y_ndc < -1.0 - r_ndc || y_ndc > 1.0 + r_ndc) {
-    return;
-  }
+  // 透明度剔除
+  if splat.opacity < 0.004 { return; }
   
-  // 屏幕尺寸剔除
-  let screenRadiusX = r_ndc * params.screenWidth * 0.5;
-  let screenRadiusY = r_ndc * params.screenHeight * 0.5;
-  let screenRadius = max(screenRadiusX, screenRadiusY);
+  // 变换: Local -> World -> View -> Clip
+  let worldPos = camera.model * vec4<f32>(splat.mean, 1.0);
+  let viewPos = camera.view * worldPos;
+  let clipPos = camera.proj * viewPos;
   
-  if (screenRadius < params.pixelThreshold) {
-    return;
-  }
+  // 视锥剔除
+  if !isInFrustum(clipPos, params.frustumDilation) { return; }
   
-  // 透明度剔除
-  if (splat.opacity < 0.004) {
-    return;
-  }
+  // 深度编码 (viewPos.z 是负数)
+  let depth = viewPos.z;
+  let sortableDepth = encodeDepthKey(depth);
   
-  // 通过剔除，计算深度桶
-  let depthRange = params.farPlane - params.nearPlane;
-  let normalizedDepth = clamp((z - params.nearPlane) / depthRange, 0.0, 1.0);
-  // 反转：让远处的桶 ID 更小，这样 counting sort 后远处的在前面
-  let depthBucket = BUCKET_MAX - u32(normalizedDepth * f32(BUCKET_MAX));
-  // 复合 key: 深度桶 + 原始索引低位作为 tie-breaker
-  let depthKey = (depthBucket << ${32 - bucketBits}u) | (i & ${(1 << 32 - bucketBits) - 1}u);
+  // 原子增加可见计数并获取索引
+  // indirectBuffer[1] 是 instance_count
+  let visibleIdx = atomicAdd(&indirectBuffer[1], 1u);
   
-  // 分配可见索引位置
-  let visibleIdx = atomicAdd(&counters.visibleCount, 1u);
+  // 写入可见点列表
+  depthKeys[visibleIdx] = sortableDepth;
   visibleIndices[visibleIdx] = i;
-  depthKeys[visibleIdx] = depthKey;
-  
-  // 统计桶计数
-  atomicAdd(&bucketCounts[depthBucket], 1u);
-}
-
-@compute @workgroup_size(1)
-fn resetCounters() {
-  atomicStore(&counters.visibleCount, 0u);
-}
-
-@compute @workgroup_size(${WORKGROUP_SIZE$1})
-fn resetBucketCounts(@builtin(global_invocation_id) gid: vec3<u32>) {
-  let i = gid.x;
-  if (i < NUM_BUCKETS) {
-    atomicStore(&bucketCounts[i], 0u);
-  }
 }
 
 @compute @workgroup_size(1)
-fn updateDrawIndirect() {
-  let count = atomicLoad(&counters.visibleCount);
-  drawIndirect[0] = 4u;
-  drawIndirect[1] = count;
-  drawIndirect[2] = 0u;
-  drawIndirect[3] = 0u;
+fn initIndirectBuffer() {
+  // [vertex_count, instance_count, first_vertex, first_instance]
+  atomicStore(&indirectBuffer[0], 4u);
+  atomicStore(&indirectBuffer[1], 0u);  // instance_count 由 cull shader 填充
+  atomicStore(&indirectBuffer[2], 0u);
+  atomicStore(&indirectBuffer[3], 0u);
 }
 `
   );
 }
-function generatePrefixSumShaderCode$1(numBuckets) {
+function generateRadixSortShaderCode() {
   return (
     /* wgsl */
     `
 /**
- * Pass 2: 串行前缀和
- * ${numBuckets} 个桶
+ * GPU Radix Sort - 3-Pass Architecture
+ * 基于 rfs-gsplat-render 实现
+ * 
+ * Pass 1: Upsweep - 构建局部直方图并累加到全局
+ * Pass 2: Spine - 对分区和全局直方图进行前缀和
+ * Pass 3: Downsweep - 使用计算的偏移量散射元素 (稳定排序)
  */
 
-const NUM_BUCKETS: u32 = ${numBuckets}u;
-
-@group(0) @binding(0) var<storage, read_write> bucketCounts: array<u32>;
-@group(0) @binding(1) var<storage, read_write> bucketOffsets: array<u32>;
-
-@compute @workgroup_size(1)
-fn prefixSum() {
-  var sum = 0u;
-  for (var i = 0u; i < NUM_BUCKETS; i++) {
-    bucketOffsets[i] = sum;
-    sum += bucketCounts[i];
+const WG: u32 = ${WORKGROUP_SIZE$1}u;
+const RADIX_BITS: u32 = ${RADIX_BITS}u;
+const RADIX_SIZE: u32 = ${RADIX_SIZE}u;
+const RADIX_MASK: u32 = ${RADIX_SIZE - 1}u;
+const ELEMENTS_PER_THREAD: u32 = ${ELEMENTS_PER_THREAD}u;
+const BLOCK_SIZE: u32 = ${BLOCK_SIZE}u;
+
+fn divCeil(a: u32, b: u32) -> u32 {
+  return (a + b - 1u) / b;
+}
+
+struct SortParams {
+  maxElementCount: u32,
+  bitShift: u32,
+  passIndex: u32,
+  _padding: u32,
+}
+
+// ============================================================================
+// Pass 1: Upsweep - 计数局部直方图并累加到全局
+// ============================================================================
+
+@group(0) @binding(0) var<uniform> upsweepParams: SortParams;
+@group(0) @binding(1) var<storage, read> indirectBufferUpsweep: array<u32>;
+@group(0) @binding(2) var<storage, read> keysIn: array<u32>;
+@group(0) @binding(3) var<storage, read_write> globalHistogram: array<atomic<u32>>;
+@group(0) @binding(4) var<storage, read_write> partitionHistogram: array<u32>;
+
+var<workgroup> localHistogram: array<atomic<u32>, RADIX_SIZE>;
+
+@compute @workgroup_size(256, 1, 1)
+fn upsweep(
+  @builtin(local_invocation_id) localId: vec3<u32>,
+  @builtin(workgroup_id) workgroupId: vec3<u32>,
+) {
+  // 从 indirectBuffer[1] 读取动态可见数量 (instance_count)
+  let numKeys = indirectBufferUpsweep[1];
+  let numPartitions = divCeil(numKeys, BLOCK_SIZE);
+  let partitionId = workgroupId.x;
+  
+  if partitionId >= numPartitions { return; }
+  
+  let tid = localId.x;
+  let partitionStart = partitionId * BLOCK_SIZE;
+  let shift = upsweepParams.bitShift;
+  let passIdx = upsweepParams.passIndex;
+  
+  // 初始化局部直方图
+  if tid < RADIX_SIZE {
+    atomicStore(&localHistogram[tid], 0u);
   }
-}
-`
-  );
-}
-function generateScatterShaderCode$1(numBuckets) {
-  const bucketBits = Math.log2(numBuckets);
-  const depthShift = 32 - bucketBits;
-  return (
-    /* wgsl */
-    `
-/**
- * Pass 3: 散射到最终排序位置
- * 桶数量: ${numBuckets}
- */
-
-const NUM_BUCKETS: u32 = ${numBuckets}u;
-
-struct Counters {
-  visibleCount: u32,
-}
-
-@group(0) @binding(0) var<storage, read> visibleIndices: array<u32>;
-@group(0) @binding(1) var<storage, read> depthKeys: array<u32>;
-@group(0) @binding(2) var<storage, read> bucketOffsets: array<u32>;
-@group(0) @binding(3) var<storage, read_write> bucketPositions: array<atomic<u32>>;
-@group(0) @binding(4) var<storage, read_write> sortedIndices: array<u32>;
-@group(0) @binding(5) var<storage, read> counters: Counters;
-
-@compute @workgroup_size(${WORKGROUP_SIZE$1})
-fn scatter(@builtin(global_invocation_id) gid: vec3<u32>) {
-  let i = gid.x;
-  if (i >= counters.visibleCount) {
-    return;
+  workgroupBarrier();
+  
+  // 构建局部直方图
+  for (var j = 0u; j < ELEMENTS_PER_THREAD; j++) {
+    let keyIdx = partitionStart + tid * ELEMENTS_PER_THREAD + j;
+    if keyIdx < numKeys {
+      let key = keysIn[keyIdx];
+      let bin = (key >> shift) & RADIX_MASK;
+      atomicAdd(&localHistogram[bin], 1u);
+    }
   }
   
-  let depthKey = depthKeys[i];
-  let originalIndex = visibleIndices[i];
+  workgroupBarrier();
   
-  // 从复合 key 提取深度桶
-  let depthBucket = depthKey >> ${depthShift}u;
+  // 写入分区直方图并累加到全局直方图
+  if tid < RADIX_SIZE {
+    let count = atomicLoad(&localHistogram[tid]);
+    partitionHistogram[RADIX_SIZE * partitionId + tid] = count;
+    atomicAdd(&globalHistogram[RADIX_SIZE * passIdx + tid], count);
+  }
+}
+
+// ============================================================================
+// Pass 2: Spine - 对分区和全局直方图进行前缀和
+// ============================================================================
+
+@group(0) @binding(0) var<storage, read> indirectBufferSpine: array<u32>;
+@group(0) @binding(1) var<storage, read_write> globalHistogramSpine: array<u32>;
+@group(0) @binding(2) var<storage, read_write> partitionHistogramSpine: array<u32>;
+@group(0) @binding(3) var<uniform> spineParams: SortParams;
+
+// 双缓冲用于无数据竞争的 Hillis-Steele scan
+var<workgroup> scanA: array<u32, 256>;
+var<workgroup> scanB: array<u32, 256>;
+var<workgroup> reductionShared: u32;
+
+@compute @workgroup_size(256, 1, 1)
+fn spine(
+  @builtin(local_invocation_id) localId: vec3<u32>,
+  @builtin(workgroup_id) workgroupId: vec3<u32>,
+) {
+  let numKeys = indirectBufferSpine[1];
+  let numPartitions = divCeil(numKeys, BLOCK_SIZE);
+  let bin = workgroupId.x;
+  let tid = localId.x;
   
-  // 在桶内分配位置
-  let bucketOffset = bucketOffsets[depthBucket];
-  let posInBucket = atomicAdd(&bucketPositions[depthBucket], 1u);
-  let destIdx = bucketOffset + posInBucket;
+  if bin >= RADIX_SIZE { return; }
   
-  // 写入最终排序位置
-  sortedIndices[destIdx] = originalIndex;
-}
-
-@compute @workgroup_size(${WORKGROUP_SIZE$1})
-fn resetBucketPositions(@builtin(global_invocation_id) gid: vec3<u32>) {
-  let i = gid.x;
-  if (i < NUM_BUCKETS) {
-    atomicStore(&bucketPositions[i], 0u);
+  // 初始化共享 reduction
+  if tid == 0u {
+    reductionShared = 0u;
+  }
+  workgroupBarrier();
+  
+  // 处理此 bin 的所有分区（分批处理）
+  let MAX_BATCH_SIZE = 256u;
+  for (var batchStart = 0u; batchStart < numPartitions; batchStart += MAX_BATCH_SIZE) {
+    let partitionIdx = batchStart + tid;
+    let batchSize = min(MAX_BATCH_SIZE, numPartitions - batchStart);
+    
+    // 加载此批次的值
+    if tid < batchSize && partitionIdx < numPartitions {
+      scanA[tid] = partitionHistogramSpine[RADIX_SIZE * partitionIdx + bin];
+    } else {
+      scanA[tid] = 0u;
+    }
+    workgroupBarrier();
+    
+    // Hillis-Steele inclusive prefix sum (双缓冲避免数据竞争)
+    var useA = true;
+    var offset = 1u;
+    for (var d = 0u; d < 8u; d++) {
+      if useA {
+        if tid >= offset {
+          scanB[tid] = scanA[tid] + scanA[tid - offset];
+        } else {
+          scanB[tid] = scanA[tid];
+        }
+      } else {
+        if tid >= offset {
+          scanA[tid] = scanB[tid] + scanB[tid - offset];
+        } else {
+          scanA[tid] = scanB[tid];
+        }
+      }
+      workgroupBarrier();
+      useA = !useA;
+      offset <<= 1u;
+    }
+    
+    // 8 次迭代后结果在 scanA 中
+    
+    // 写回为 exclusive prefix sum（加上 reduction）
+    if tid < batchSize && partitionIdx < numPartitions {
+      var exclusive = reductionShared;
+      if tid > 0u {
+        exclusive += scanA[tid - 1u];
+      }
+      partitionHistogramSpine[RADIX_SIZE * partitionIdx + bin] = exclusive;
+    }
+    
+    // 更新下一批的 reduction
+    workgroupBarrier();
+    if tid == 0u && batchSize > 0u {
+      reductionShared += scanA[batchSize - 1u];
+    }
+    workgroupBarrier();
+  }
+  
+  // Bin 0 的工作组同时处理全局直方图前缀和
+  if bin == 0u {
+    let passIdx = spineParams.passIndex;
+    scanA[tid] = globalHistogramSpine[RADIX_SIZE * passIdx + tid];
+    workgroupBarrier();
+    
+    // Hillis-Steele inclusive scan (双缓冲)
+    var useA = true;
+    var offset = 1u;
+    for (var d = 0u; d < 8u; d++) {
+      if useA {
+        if tid >= offset {
+          scanB[tid] = scanA[tid] + scanA[tid - offset];
+        } else {
+          scanB[tid] = scanA[tid];
+        }
+      } else {
+        if tid >= offset {
+          scanA[tid] = scanB[tid] + scanB[tid - offset];
+        } else {
+          scanA[tid] = scanB[tid];
+        }
+      }
+      workgroupBarrier();
+      useA = !useA;
+      offset <<= 1u;
+    }
+    
+    // 转换为 exclusive (结果在 scanA 中)
+    var exclusive = 0u;
+    if tid > 0u {
+      exclusive = scanA[tid - 1u];
+    }
+    globalHistogramSpine[RADIX_SIZE * passIdx + tid] = exclusive;
+  }
+}
+
+// ============================================================================
+// Pass 3: Downsweep - 使用偏移量散射元素 (稳定排序)
+// ============================================================================
+
+@group(0) @binding(0) var<uniform> downsweepParams: SortParams;
+@group(0) @binding(1) var<storage, read> indirectBufferDownsweep: array<u32>;
+@group(0) @binding(2) var<storage, read> globalHistogramDownsweep: array<u32>;
+@group(0) @binding(3) var<storage, read> partitionHistogramDownsweep: array<u32>;
+@group(0) @binding(4) var<storage, read> downsweepKeysIn: array<u32>;
+@group(0) @binding(5) var<storage, read> downsweepValuesIn: array<u32>;
+@group(0) @binding(6) var<storage, read_write> downsweepKeysOut: array<u32>;
+@group(0) @binding(7) var<storage, read_write> downsweepValuesOut: array<u32>;
+
+var<workgroup> localKeys: array<u32, BLOCK_SIZE>;
+var<workgroup> localValues: array<u32, BLOCK_SIZE>;
+var<workgroup> localBins: array<u32, BLOCK_SIZE>;
+
+@compute @workgroup_size(256, 1, 1)
+fn downsweep(
+  @builtin(local_invocation_id) localId: vec3<u32>,
+  @builtin(workgroup_id) workgroupId: vec3<u32>,
+) {
+  let numKeys = indirectBufferDownsweep[1];
+  let numPartitions = divCeil(numKeys, BLOCK_SIZE);
+  let partitionId = workgroupId.x;
+  
+  if partitionId >= numPartitions { return; }
+  
+  let tid = localId.x;
+  let partitionStart = partitionId * BLOCK_SIZE;
+  let shift = downsweepParams.bitShift;
+  
+  // 加载元素到共享内存
+  for (var j = 0u; j < ELEMENTS_PER_THREAD; j++) {
+    let keyIdx = partitionStart + tid * ELEMENTS_PER_THREAD + j;
+    let localIdx = tid * ELEMENTS_PER_THREAD + j;
+    
+    if keyIdx < numKeys {
+      let key = downsweepKeysIn[keyIdx];
+      localKeys[localIdx] = key;
+      localValues[localIdx] = downsweepValuesIn[keyIdx];
+      localBins[localIdx] = (key >> shift) & RADIX_MASK;
+    } else {
+      localBins[localIdx] = 0xFFFFFFFFu;
+    }
+  }
+  
+  workgroupBarrier();
+  
+  // 线程 0 执行顺序散射以保持稳定性
+  // 这是 rfs-gsplat-render 的关键设计，确保稳定排序
+  if tid == 0u {
+    var binWritePos: array<u32, RADIX_SIZE>;
+    
+    let passIdx = downsweepParams.passIndex;
+    
+    // 从全局 + 分区偏移初始化写入位置
+    for (var b = 0u; b < RADIX_SIZE; b++) {
+      binWritePos[b] = globalHistogramDownsweep[RADIX_SIZE * passIdx + b] + 
+                       partitionHistogramDownsweep[RADIX_SIZE * partitionId + b];
+    }
+    
+    // 按输入顺序顺序写入 (稳定)
+    let partitionEnd = min(partitionStart + BLOCK_SIZE, numKeys);
+    for (var k = 0u; k < BLOCK_SIZE; k++) {
+      let keyIdx = partitionStart + k;
+      if keyIdx < partitionEnd {
+        let b = localBins[k];
+        if b != 0xFFFFFFFFu {
+          let writePos = binWritePos[b];
+          if writePos < numKeys {
+            downsweepKeysOut[writePos] = localKeys[k];
+            downsweepValuesOut[writePos] = localValues[k];
+            binWritePos[b]++;
+          }
+        }
+      }
+    }
   }
 }
 `
   );
 }
 class GSSplatSorter {
-  constructor(device, splatCount, splatBuffer, cameraBuffer, options = {}) {
+  constructor(device, splatCount, splatBuffer, cameraBuffer, _options = {}) {
     __publicField(this, "device");
     __publicField(this, "splatCount");
-    // ============================================
-    // Buffers
-    // ============================================
+    // Culling Buffers
     __publicField(this, "cullingParamsBuffer");
-    __publicField(this, "countersBuffer");
-    __publicField(this, "visibleIndicesBuffer");
     __publicField(this, "depthKeysBuffer");
-    __publicField(this, "bucketCountsBuffer");
-    __publicField(this, "bucketOffsetsBuffer");
-    __publicField(this, "bucketPositionsBuffer");
+    __publicField(this, "visibleIndicesBuffer");
+    __publicField(this, "indirectBuffer");
+    // Radix Sort Buffers
+    __publicField(this, "globalHistogramBuffer");
+    __publicField(this, "partitionHistogramBuffer");
+    __publicField(this, "keysTempBuffer");
+    __publicField(this, "valuesTempBuffer");
+    // 每个 pass 独立的参数 buffer (避免竞争)
+    __publicField(this, "sortParamsBuffers", []);
+    // Sorted output
     __publicField(this, "sortedIndicesBuffer");
-    __publicField(this, "drawIndirectBuffer");
-    // ============================================
-    // Pipelines
-    // ============================================
-    __publicField(this, "resetCountersPipeline");
-    __publicField(this, "resetBucketCountsPipeline");
-    __publicField(this, "cullAndCountPipeline");
-    __publicField(this, "updateDrawIndirectPipeline");
-    __publicField(this, "prefixSumPipeline");
-    __publicField(this, "resetBucketPositionsPipeline");
-    __publicField(this, "scatterPipeline");
-    // ============================================
-    // Bind Groups
-    // ============================================
+    // Culling Pipelines
+    __publicField(this, "initIndirectPipeline");
+    __publicField(this, "projectCullPipeline");
     __publicField(this, "cullingBindGroupLayout");
     __publicField(this, "cullingBindGroup");
-    __publicField(this, "prefixSumBindGroupLayout");
-    __publicField(this, "prefixSumBindGroup");
-    __publicField(this, "scatterBindGroupLayout");
-    __publicField(this, "scatterBindGroup");
-    // 工作组大小和桶数量
-    __publicField(this, "WORKGROUP_SIZE", WORKGROUP_SIZE$1);
-    __publicField(this, "numBuckets");
-    // 当前屏幕信息
+    // Radix Sort Pipelines
+    __publicField(this, "upsweepPipeline");
+    __publicField(this, "spinePipeline");
+    __publicField(this, "downsweepPipeline");
+    __publicField(this, "upsweepBindGroupLayout");
+    __publicField(this, "spineBindGroupLayout");
+    __publicField(this, "downsweepBindGroupLayout");
+    // Bind groups for each pass (4 passes)
+    __publicField(this, "upsweepBindGroups", []);
+    __publicField(this, "spineBindGroups", []);
+    __publicField(this, "downsweepBindGroups", []);
+    __publicField(this, "numPartitions");
+    // 屏幕信息和剔除选项
     __publicField(this, "screenWidth", 1920);
     __publicField(this, "screenHeight", 1080);
-    // 剔除选项
     __publicField(this, "cullingOptions", {
       nearPlane: 0.1,
       farPlane: 1e3,
-      pixelThreshold: 1
+      pixelThreshold: 0,
+      frustumDilation: 0.2
     });
     this.device = device;
     this.splatCount = splatCount;
-    const isIOS = isIOSDevice$1();
-    this.numBuckets = options.numBuckets ?? (isIOS ? IOS_NUM_BUCKETS$1 : DEFAULT_NUM_BUCKETS$1);
-    const cullingCode = generateCullingShaderCode$1(this.numBuckets);
-    const prefixSumCode = generatePrefixSumShaderCode$1(this.numBuckets);
-    const scatterCode = generateScatterShaderCode$1(this.numBuckets);
+    this.numPartitions = Math.ceil(splatCount / BLOCK_SIZE);
     const cullingModule = device.createShaderModule({
-      code: cullingCode,
+      code: generateCullingShaderCode$1(),
       label: "culling-shader"
     });
-    const prefixSumModule = device.createShaderModule({
-      code: prefixSumCode,
-      label: "prefix-sum-shader"
-    });
-    const scatterModule = device.createShaderModule({
-      code: scatterCode,
-      label: "scatter-shader"
-    });
-    cullingModule.getCompilationInfo().then((info) => {
-      if (info.messages.length > 0) ;
-    });
-    prefixSumModule.getCompilationInfo().then((info) => {
-      if (info.messages.length > 0) ;
-    });
-    scatterModule.getCompilationInfo().then((info) => {
-      if (info.messages.length > 0) ;
+    const radixSortModule = device.createShaderModule({
+      code: generateRadixSortShaderCode(),
+      label: "radix-sort-shader"
     });
     this.cullingParamsBuffer = device.createBuffer({
       size: 32,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+      label: "culling-params"
     });
-    this.countersBuffer = device.createBuffer({
-      size: 16,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
+    this.depthKeysBuffer = device.createBuffer({
+      size: splatCount * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "depth-keys"
     });
     this.visibleIndicesBuffer = device.createBuffer({
       size: splatCount * 4,
-      usage: GPUBufferUsage.STORAGE
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "visible-indices"
     });
-    this.depthKeysBuffer = device.createBuffer({
-      size: splatCount * 4,
-      usage: GPUBufferUsage.STORAGE
+    this.indirectBuffer = device.createBuffer({
+      size: 16,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST,
+      label: "indirect-buffer"
     });
-    this.bucketCountsBuffer = device.createBuffer({
-      size: this.numBuckets * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    this.globalHistogramBuffer = device.createBuffer({
+      size: RADIX_SIZE * 4 * 4,
+      // 4 passes * 256 bins * 4 bytes
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "global-histogram"
     });
-    this.bucketOffsetsBuffer = device.createBuffer({
-      size: this.numBuckets * 4,
-      usage: GPUBufferUsage.STORAGE
+    this.partitionHistogramBuffer = device.createBuffer({
+      size: this.numPartitions * RADIX_SIZE * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "partition-histogram"
     });
-    this.bucketPositionsBuffer = device.createBuffer({
-      size: this.numBuckets * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    this.keysTempBuffer = device.createBuffer({
+      size: splatCount * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "keys-temp"
     });
-    this.sortedIndicesBuffer = device.createBuffer({
+    this.valuesTempBuffer = device.createBuffer({
       size: splatCount * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+      label: "values-temp"
     });
-    this.drawIndirectBuffer = device.createBuffer({
-      size: 16,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT | GPUBufferUsage.COPY_DST
+    for (let i = 0; i < 4; i++) {
+      const paramsBuffer = device.createBuffer({
+        size: 16,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        label: `sort-params-${i}`
+      });
+      this.sortParamsBuffers.push(paramsBuffer);
+      const sortParams = new ArrayBuffer(16);
+      const sortView = new DataView(sortParams);
+      sortView.setUint32(0, splatCount, true);
+      sortView.setUint32(4, i * RADIX_BITS, true);
+      sortView.setUint32(8, i, true);
+      sortView.setUint32(12, 0, true);
+      device.queue.writeBuffer(paramsBuffer, 0, sortParams);
+    }
+    this.sortedIndicesBuffer = device.createBuffer({
+      size: splatCount * 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+      label: "sorted-indices"
     });
     this.cullingBindGroupLayout = device.createBindGroupLayout({
+      label: "culling-bind-group-layout",
       entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "read-only-storage" }
-        },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "uniform" }
-        },
-        {
-          binding: 2,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "uniform" }
-        },
-        {
-          binding: 3,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 4,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 5,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 6,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 7,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        }
+        { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+        { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+        { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 4, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 5, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
       ]
     });
     const cullingPipelineLayout = device.createPipelineLayout({
       bindGroupLayouts: [this.cullingBindGroupLayout]
     });
-    this.resetCountersPipeline = device.createComputePipeline({
-      layout: cullingPipelineLayout,
-      compute: { module: cullingModule, entryPoint: "resetCounters" }
-    });
-    this.resetBucketCountsPipeline = device.createComputePipeline({
-      layout: cullingPipelineLayout,
-      compute: { module: cullingModule, entryPoint: "resetBucketCounts" }
-    });
-    this.cullAndCountPipeline = device.createComputePipeline({
+    this.initIndirectPipeline = device.createComputePipeline({
       layout: cullingPipelineLayout,
-      compute: { module: cullingModule, entryPoint: "cullAndCount" }
+      compute: { module: cullingModule, entryPoint: "initIndirectBuffer" },
+      label: "init-indirect-pipeline"
     });
-    this.updateDrawIndirectPipeline = device.createComputePipeline({
+    this.projectCullPipeline = device.createComputePipeline({
       layout: cullingPipelineLayout,
-      compute: { module: cullingModule, entryPoint: "updateDrawIndirect" }
-    });
-    this.prefixSumBindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        }
-      ]
-    });
-    const prefixSumPipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.prefixSumBindGroupLayout]
-    });
-    this.prefixSumPipeline = device.createComputePipeline({
-      layout: prefixSumPipelineLayout,
-      compute: { module: prefixSumModule, entryPoint: "prefixSum" }
-    });
-    this.scatterBindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          binding: 0,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "read-only-storage" }
-        },
-        {
-          binding: 1,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "read-only-storage" }
-        },
-        {
-          binding: 2,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "read-only-storage" }
-        },
-        {
-          binding: 3,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 4,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "storage" }
-        },
-        {
-          binding: 5,
-          visibility: GPUShaderStage.COMPUTE,
-          buffer: { type: "read-only-storage" }
-        }
-        // countersBuffer
-      ]
-    });
-    const scatterPipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.scatterBindGroupLayout]
-    });
-    this.resetBucketPositionsPipeline = device.createComputePipeline({
-      layout: scatterPipelineLayout,
-      compute: { module: scatterModule, entryPoint: "resetBucketPositions" }
-    });
-    this.scatterPipeline = device.createComputePipeline({
-      layout: scatterPipelineLayout,
-      compute: { module: scatterModule, entryPoint: "scatter" }
+      compute: { module: cullingModule, entryPoint: "projectAndCull" },
+      label: "project-cull-pipeline"
     });
     this.cullingBindGroup = device.createBindGroup({
       layout: this.cullingBindGroupLayout,
@@ -4707,127 +4945,196 @@ class GSSplatSorter {
         { binding: 0, resource: { buffer: splatBuffer } },
         { binding: 1, resource: { buffer: cameraBuffer } },
         { binding: 2, resource: { buffer: this.cullingParamsBuffer } },
-        { binding: 3, resource: { buffer: this.countersBuffer } },
+        { binding: 3, resource: { buffer: this.depthKeysBuffer } },
         { binding: 4, resource: { buffer: this.visibleIndicesBuffer } },
-        { binding: 5, resource: { buffer: this.depthKeysBuffer } },
-        { binding: 6, resource: { buffer: this.bucketCountsBuffer } },
-        { binding: 7, resource: { buffer: this.drawIndirectBuffer } }
+        { binding: 5, resource: { buffer: this.indirectBuffer } }
+      ],
+      label: "culling-bind-group"
+    });
+    this.upsweepBindGroupLayout = device.createBindGroupLayout({
+      label: "upsweep-layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 4, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
       ]
     });
-    this.prefixSumBindGroup = device.createBindGroup({
-      layout: this.prefixSumBindGroupLayout,
+    this.spineBindGroupLayout = device.createBindGroupLayout({
+      label: "spine-layout",
       entries: [
-        { binding: 0, resource: { buffer: this.bucketCountsBuffer } },
-        { binding: 1, resource: { buffer: this.bucketOffsetsBuffer } }
+        { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } }
       ]
     });
-    this.scatterBindGroup = device.createBindGroup({
-      layout: this.scatterBindGroupLayout,
+    this.downsweepBindGroupLayout = device.createBindGroupLayout({
+      label: "downsweep-layout",
       entries: [
-        { binding: 0, resource: { buffer: this.visibleIndicesBuffer } },
-        { binding: 1, resource: { buffer: this.depthKeysBuffer } },
-        { binding: 2, resource: { buffer: this.bucketOffsetsBuffer } },
-        { binding: 3, resource: { buffer: this.bucketPositionsBuffer } },
-        { binding: 4, resource: { buffer: this.sortedIndicesBuffer } },
-        { binding: 5, resource: { buffer: this.countersBuffer } }
-        // 使用 GPU countersBuffer
+        { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 4, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 5, visibility: GPUShaderStage.COMPUTE, buffer: { type: "read-only-storage" } },
+        { binding: 6, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } },
+        { binding: 7, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
       ]
     });
+    this.upsweepPipeline = device.createComputePipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.upsweepBindGroupLayout] }),
+      compute: { module: radixSortModule, entryPoint: "upsweep" },
+      label: "upsweep-pipeline"
+    });
+    this.spinePipeline = device.createComputePipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.spineBindGroupLayout] }),
+      compute: { module: radixSortModule, entryPoint: "spine" },
+      label: "spine-pipeline"
+    });
+    this.downsweepPipeline = device.createComputePipeline({
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.downsweepBindGroupLayout] }),
+      compute: { module: radixSortModule, entryPoint: "downsweep" },
+      label: "downsweep-pipeline"
+    });
+    this.createRadixSortBindGroups();
   }
   /**
-   * 设置屏幕尺寸
-   */
-  setScreenSize(width, height) {
-    this.screenWidth = width;
-    this.screenHeight = height;
-  }
-  /**
-   * 设置剔除参数
-   */
-  setCullingOptions(options) {
-    this.cullingOptions = { ...this.cullingOptions, ...options };
+   * 创建 Radix Sort 的 bind groups
+   * 4 个 pass，使用 ping-pong buffers
+   * 
+   * Ping-pong 模式:
+   * - Pass 0: depthKeys/visibleIndices -> keysTempBuffer/valuesTempBuffer
+   * - Pass 1: keysTempBuffer/valuesTempBuffer -> depthKeys/visibleIndices
+   * - Pass 2: depthKeys/visibleIndices -> keysTempBuffer/valuesTempBuffer
+   * - Pass 3: keysTempBuffer/valuesTempBuffer -> (depthKeys)/sortedIndicesBuffer
+   */
+  createRadixSortBindGroups() {
+    for (let passIdx = 0; passIdx < 4; passIdx++) {
+      const isEvenPass = passIdx % 2 === 0;
+      const keysIn = isEvenPass ? this.depthKeysBuffer : this.keysTempBuffer;
+      const valuesIn = isEvenPass ? this.visibleIndicesBuffer : this.valuesTempBuffer;
+      let keysOut;
+      let valuesOut;
+      if (isEvenPass) {
+        keysOut = this.keysTempBuffer;
+        valuesOut = this.valuesTempBuffer;
+      } else {
+        keysOut = this.depthKeysBuffer;
+        valuesOut = passIdx === 3 ? this.sortedIndicesBuffer : this.visibleIndicesBuffer;
+      }
+      this.upsweepBindGroups[passIdx] = this.device.createBindGroup({
+        layout: this.upsweepBindGroupLayout,
+        entries: [
+          { binding: 0, resource: { buffer: this.sortParamsBuffers[passIdx] } },
+          { binding: 1, resource: { buffer: this.indirectBuffer } },
+          { binding: 2, resource: { buffer: keysIn } },
+          { binding: 3, resource: { buffer: this.globalHistogramBuffer } },
+          { binding: 4, resource: { buffer: this.partitionHistogramBuffer } }
+        ],
+        label: `upsweep-bind-group-${passIdx}`
+      });
+      this.spineBindGroups[passIdx] = this.device.createBindGroup({
+        layout: this.spineBindGroupLayout,
+        entries: [
+          { binding: 0, resource: { buffer: this.indirectBuffer } },
+          { binding: 1, resource: { buffer: this.globalHistogramBuffer } },
+          { binding: 2, resource: { buffer: this.partitionHistogramBuffer } },
+          { binding: 3, resource: { buffer: this.sortParamsBuffers[passIdx] } }
+        ],
+        label: `spine-bind-group-${passIdx}`
+      });
+      this.downsweepBindGroups[passIdx] = this.device.createBindGroup({
+        layout: this.downsweepBindGroupLayout,
+        entries: [
+          { binding: 0, resource: { buffer: this.sortParamsBuffers[passIdx] } },
+          { binding: 1, resource: { buffer: this.indirectBuffer } },
+          { binding: 2, resource: { buffer: this.globalHistogramBuffer } },
+          { binding: 3, resource: { buffer: this.partitionHistogramBuffer } },
+          { binding: 4, resource: { buffer: keysIn } },
+          { binding: 5, resource: { buffer: valuesIn } },
+          { binding: 6, resource: { buffer: keysOut } },
+          { binding: 7, resource: { buffer: valuesOut } }
+        ],
+        label: `downsweep-bind-group-${passIdx}`
+      });
+    }
+  }
+  /**
+   * 设置屏幕尺寸
+   */
+  setScreenSize(width, height) {
+    this.screenWidth = width;
+    this.screenHeight = height;
+  }
+  /**
+   * 设置剔除参数
+   */
+  setCullingOptions(options) {
+    this.cullingOptions = { ...this.cullingOptions, ...options };
   }
   /**
    * 执行剔除和排序
    * 每帧调用
-   * 
-   * 优化：合并所有 compute pass 到单次 GPU 提交
-   * WebGPU 保证同一 command buffer 中的命令按顺序执行
    */
   sort() {
-    try {
-      const cullingParamsData = new ArrayBuffer(32);
-      const cullingParamsView = new DataView(cullingParamsData);
-      cullingParamsView.setUint32(0, this.splatCount, true);
-      cullingParamsView.setFloat32(4, this.cullingOptions.nearPlane, true);
-      cullingParamsView.setFloat32(8, this.cullingOptions.farPlane, true);
-      cullingParamsView.setFloat32(12, this.screenWidth, true);
-      cullingParamsView.setFloat32(16, this.screenHeight, true);
-      cullingParamsView.setFloat32(20, this.cullingOptions.pixelThreshold, true);
-      cullingParamsView.setFloat32(24, 0, true);
-      cullingParamsView.setFloat32(28, 0, true);
-      this.device.queue.writeBuffer(
-        this.cullingParamsBuffer,
-        0,
-        cullingParamsData
-      );
-      const cullWorkgroupCount = Math.ceil(this.splatCount / this.WORKGROUP_SIZE);
-      const bucketResetWorkgroups = Math.ceil(
-        this.numBuckets / this.WORKGROUP_SIZE
-      );
-      const encoder = this.device.createCommandEncoder();
-      {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.resetCountersPipeline);
-        pass.setBindGroup(0, this.cullingBindGroup);
-        pass.dispatchWorkgroups(1);
-        pass.end();
-      }
-      {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.resetBucketCountsPipeline);
-        pass.setBindGroup(0, this.cullingBindGroup);
-        pass.dispatchWorkgroups(bucketResetWorkgroups);
-        pass.end();
-      }
-      {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.cullAndCountPipeline);
-        pass.setBindGroup(0, this.cullingBindGroup);
-        pass.dispatchWorkgroups(cullWorkgroupCount);
-        pass.end();
-      }
-      {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.updateDrawIndirectPipeline);
-        pass.setBindGroup(0, this.cullingBindGroup);
-        pass.dispatchWorkgroups(1);
-        pass.end();
-      }
+    const cullingParamsData = new ArrayBuffer(32);
+    const view = new DataView(cullingParamsData);
+    view.setUint32(0, this.splatCount, true);
+    view.setFloat32(4, this.cullingOptions.nearPlane, true);
+    view.setFloat32(8, this.cullingOptions.farPlane, true);
+    view.setFloat32(12, this.screenWidth, true);
+    view.setFloat32(16, this.screenHeight, true);
+    view.setFloat32(20, this.cullingOptions.frustumDilation ?? 0.2, true);
+    view.setFloat32(24, this.cullingOptions.pixelThreshold, true);
+    view.setFloat32(28, 0, true);
+    this.device.queue.writeBuffer(this.cullingParamsBuffer, 0, cullingParamsData);
+    const encoder = this.device.createCommandEncoder({ label: "splat-sort-encoder" });
+    encoder.clearBuffer(this.depthKeysBuffer);
+    encoder.clearBuffer(this.visibleIndicesBuffer);
+    encoder.clearBuffer(this.keysTempBuffer);
+    encoder.clearBuffer(this.valuesTempBuffer);
+    encoder.clearBuffer(this.globalHistogramBuffer);
+    encoder.clearBuffer(this.partitionHistogramBuffer);
+    {
+      const pass = encoder.beginComputePass({ label: "init-indirect" });
+      pass.setPipeline(this.initIndirectPipeline);
+      pass.setBindGroup(0, this.cullingBindGroup);
+      pass.dispatchWorkgroups(1);
+      pass.end();
+    }
+    {
+      const pass = encoder.beginComputePass({ label: "project-cull" });
+      pass.setPipeline(this.projectCullPipeline);
+      pass.setBindGroup(0, this.cullingBindGroup);
+      pass.dispatchWorkgroups(Math.ceil(this.splatCount / WORKGROUP_SIZE$1));
+      pass.end();
+    }
+    for (let passIdx = 0; passIdx < 4; passIdx++) {
       {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.prefixSumPipeline);
-        pass.setBindGroup(0, this.prefixSumBindGroup);
-        pass.dispatchWorkgroups(1);
+        const pass = encoder.beginComputePass({ label: `upsweep-p${passIdx}` });
+        pass.setPipeline(this.upsweepPipeline);
+        pass.setBindGroup(0, this.upsweepBindGroups[passIdx]);
+        pass.dispatchWorkgroups(this.numPartitions);
         pass.end();
       }
       {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.resetBucketPositionsPipeline);
-        pass.setBindGroup(0, this.scatterBindGroup);
-        pass.dispatchWorkgroups(bucketResetWorkgroups);
+        const pass = encoder.beginComputePass({ label: `spine-p${passIdx}` });
+        pass.setPipeline(this.spinePipeline);
+        pass.setBindGroup(0, this.spineBindGroups[passIdx]);
+        pass.dispatchWorkgroups(RADIX_SIZE);
         pass.end();
       }
       {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(this.scatterPipeline);
-        pass.setBindGroup(0, this.scatterBindGroup);
-        pass.dispatchWorkgroups(cullWorkgroupCount);
+        const pass = encoder.beginComputePass({ label: `downsweep-p${passIdx}` });
+        pass.setPipeline(this.downsweepPipeline);
+        pass.setBindGroup(0, this.downsweepBindGroups[passIdx]);
+        pass.dispatchWorkgroups(this.numPartitions);
         pass.end();
       }
-      this.device.queue.submit([encoder.finish()]);
-    } catch (error) {
     }
+    this.device.queue.submit([encoder.finish()]);
   }
   /**
    * 获取排序后的索引 buffer（用于渲染）
@@ -4839,7 +5146,7 @@ class GSSplatSorter {
    * 获取 DrawIndirect buffer
    */
   getDrawIndirectBuffer() {
-    return this.drawIndirectBuffer;
+    return this.indirectBuffer;
   }
   /**
    * 获取 splat 总数量
@@ -4852,58 +5159,37 @@ class GSSplatSorter {
    */
   destroy() {
     this.cullingParamsBuffer.destroy();
-    this.countersBuffer.destroy();
-    this.visibleIndicesBuffer.destroy();
     this.depthKeysBuffer.destroy();
-    this.bucketCountsBuffer.destroy();
-    this.bucketOffsetsBuffer.destroy();
-    this.bucketPositionsBuffer.destroy();
+    this.visibleIndicesBuffer.destroy();
+    this.indirectBuffer.destroy();
+    this.globalHistogramBuffer.destroy();
+    this.partitionHistogramBuffer.destroy();
+    this.keysTempBuffer.destroy();
+    this.valuesTempBuffer.destroy();
+    for (const buffer of this.sortParamsBuffers) {
+      buffer.destroy();
+    }
     this.sortedIndicesBuffer.destroy();
-    this.drawIndirectBuffer.destroy();
   }
 }
-var SHMode$1 = /* @__PURE__ */ ((SHMode2) => {
-  SHMode2[SHMode2["L0"] = 0] = "L0";
-  SHMode2[SHMode2["L1"] = 1] = "L1";
-  SHMode2[SHMode2["L2"] = 2] = "L2";
-  SHMode2[SHMode2["L3"] = 3] = "L3";
-  return SHMode2;
-})(SHMode$1 || {});
-function isMobileDevice$1() {
-  if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent || navigator.vendor || window.opera || "";
-  const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
-    ua.toLowerCase()
-  );
-  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-  const isSmallScreen = window.innerWidth <= 768;
-  const isIPadAsMac = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
-  const result = isMobileUA || isIPadAsMac || hasTouch && isSmallScreen;
-  return result;
-}
-var PerformanceTier = /* @__PURE__ */ ((PerformanceTier2) => {
-  PerformanceTier2["HIGH"] = "high";
-  PerformanceTier2["MEDIUM"] = "medium";
-  PerformanceTier2["LOW"] = "low";
-  return PerformanceTier2;
-})(PerformanceTier || {});
-function detectPerformanceTier(device) {
-  const isMobile = isMobileDevice$1();
-  device.limits.maxBufferSize;
-  const maxStorageBufferBindingSize = device.limits.maxStorageBufferBindingSize;
-  if (isMobile) {
-    return "low";
-  }
-  if (maxStorageBufferBindingSize >= 1024 * 1024 * 1024) {
-    return "high";
-  } else if (maxStorageBufferBindingSize >= 256 * 1024 * 1024) {
-    return "medium";
-  }
-  return "low";
-}
-const shaderCodeL0 = (
+const gsOptimizedShader = (
   /* wgsl */
   `
+/**
+ * 优化的 3D Gaussian Splatting Shader
+ * 参考 rfs-gsplat-render 实现，修复颜色和抗锯齿问题
+ */
+
+const SQRT_8: f32 = 2.82842712475;
+const SH_C0: f32 = 0.28209479177387814;
+const SH_C1: f32 = 0.4886025119029199;
+// Normalized Gaussian 常量 (匹配 SuperSplat)
+const EXP_NEG4: f32 = 0.01831563888873418;
+const INV_ONE_MINUS_EXP_NEG4: f32 = 1.01865736036377408;
+// 低通滤波器 (正则化协方差矩阵)
+const LOW_PASS_FILTER: f32 = 0.3;
+const ALPHA_CULL_THRESHOLD: f32 = 0.00392156863;
+
 struct Uniforms {
   view: mat4x4<f32>,
   proj: mat4x4<f32>,
@@ -4915,17 +5201,15 @@ struct Uniforms {
 }
 
 struct Splat {
-  mean:     vec3<f32>,
-  _pad0:    f32,
-  scale:    vec3<f32>,
-  _pad1:    f32,
+  mean: vec3<f32>, _pad0: f32,
+  scale: vec3<f32>, _pad1: f32,
   rotation: vec4<f32>,
-  colorDC:  vec3<f32>,
-  opacity:  f32,
-  sh1:      array<f32, 9>,
-  sh2:      array<f32, 15>,
-  sh3:      array<f32, 21>,
-  _pad2:    array<f32, 3>,
+  colorDC: vec3<f32>,
+  opacity: f32,
+  sh1: array<f32, 9>,
+  sh2: array<f32, 15>,
+  sh3: array<f32, 21>,
+  _pad2: array<f32, 3>,
 }
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -4934,100 +5218,137 @@ struct Splat {
 
 struct VertexOutput {
   @builtin(position) position: vec4<f32>,
-  @location(0) localUV: vec2<f32>,
+  @location(0) fragPos: vec2<f32>,
   @location(1) color: vec3<f32>,
   @location(2) opacity: f32,
 }
 
 const QUAD_POSITIONS = array<vec2<f32>, 4>(
-  vec2<f32>(-1.0, -1.0),
-  vec2<f32>( 1.0, -1.0),
-  vec2<f32>(-1.0,  1.0),
-  vec2<f32>( 1.0,  1.0),
+  vec2<f32>(-1.0, -1.0), vec2<f32>(-1.0, 1.0),
+  vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0),
 );
 
-// 椭圆缩放因子: 控制高斯 splat 的渲染范围
-// 3.0 = 3σ 覆盖 99.7%，更大的值会让 splat 更大更柔和
-const ELLIPSE_SCALE: f32 = 3.0;
-// 高斯衰减系数: 在 r=1 (即 3σ) 处衰减到 exp(-4.5) ≈ 0.011
-const GAUSSIAN_DECAY: f32 = 4.5;
-// SH L0 常数: sqrt(1/(4*pi)) - 用于 DC 颜色计算
-const SH_C0: f32 = 0.28209479177387814;
+// ClipCorner 优化 (精确匹配 PlayCanvas/SuperSplat)
+// 从 PlayCanvas: clip = min(1.0, sqrt(-log(1.0 / (255.0 * alpha))) / 2.0)
+// 这根据透明度缩小 quad，排除 alpha < 1/255 的 Gaussian 区域
+fn computeClipFactor(alpha: f32) -> f32 {
+  // 保护非常小的 alpha 值
+  // 当 alpha <= 1/255 时，splat 不可见
+  if alpha <= ALPHA_CULL_THRESHOLD { return 0.0; }
+  // PlayCanvas 公式: clip = min(1.0, sqrt(-log(1.0 / (255.0 * alpha))) / 2.0)
+  // 简化: -log(1/(255*a)) = log(255*a)
+  return min(1.0, sqrt(log(255.0 * alpha)) / 2.0);
+}
 
+// 四元数转旋转矩阵 (PLY 格式: w, x, y, z)
 fn quatToMat3(q: vec4<f32>) -> mat3x3<f32> {
-  let w = q[0]; let x = q[1]; let y = q[2]; let z = q[3];
-  let x2 = x + x; let y2 = y + y; let z2 = z + z;
-  let xx = x * x2; let xy = x * y2; let xz = x * z2;
-  let yy = y * y2; let yz = y * z2; let zz = z * z2;
-  let wx = w * x2; let wy = w * y2; let wz = w * z2;
+  let r = q.x; let x = q.y; let y = q.z; let z = q.w;
   return mat3x3<f32>(
-    vec3<f32>(1.0 - (yy + zz), xy + wz, xz - wy),
-    vec3<f32>(xy - wz, 1.0 - (xx + zz), yz + wx),
-    vec3<f32>(xz + wy, yz - wx, 1.0 - (xx + yy))
+    vec3<f32>(1.0 - 2.0 * (y * y + z * z), 2.0 * (x * y + r * z), 2.0 * (x * z - r * y)),
+    vec3<f32>(2.0 * (x * y - r * z), 1.0 - 2.0 * (x * x + z * z), 2.0 * (y * z + r * x)),
+    vec3<f32>(2.0 * (x * z + r * y), 2.0 * (y * z - r * x), 1.0 - 2.0 * (x * x + y * y))
   );
 }
 
-// 从模型矩阵提取三轴缩放因子
-fn getModelScale3(model: mat4x4<f32>) -> vec3<f32> {
-  return vec3<f32>(
-    length(model[0].xyz),
-    length(model[1].xyz),
-    length(model[2].xyz)
-  );
+fn computeCovariance3D(scale: vec3<f32>, rotation: vec4<f32>) -> mat3x3<f32> {
+  let R = quatToMat3(rotation);
+  let S = mat3x3<f32>(vec3<f32>(scale.x, 0.0, 0.0), vec3<f32>(0.0, scale.y, 0.0), vec3<f32>(0.0, 0.0, scale.z));
+  let M = R * S;
+  return M * transpose(M);
 }
 
-fn computeCov2D(mean: vec3<f32>, scale: vec3<f32>, rotation: vec4<f32>, modelView: mat4x4<f32>, proj: mat4x4<f32>, modelScale: vec3<f32>) -> vec3<f32> {
-  let R = quatToMat3(rotation);
-  // 应用模型缩放到 splat scale (支持非均匀缩放)
-  let scaledScale = scale * modelScale;
-  let s2 = scaledScale * scaledScale;
-  // 构建协方差矩阵 Sigma = R * diag(s²) * R^T
-  let M = mat3x3<f32>(R[0] * s2.x, R[1] * s2.y, R[2] * s2.z);
-  let Sigma = M * transpose(R);
-  
-  let viewPos = (modelView * vec4<f32>(mean, 1.0)).xyz;
-  let viewRot = mat3x3<f32>(modelView[0].xyz, modelView[1].xyz, modelView[2].xyz);
-  let SigmaView = viewRot * Sigma * transpose(viewRot);
+// 协方差投影 (匹配参考实现)
+// 注意: viewCenter 是 vec4，直接使用 .xyz (不除以 w)
+fn projectCovariance(cov3d: mat3x3<f32>, viewCenter: vec4<f32>, focal: vec2<f32>, modelViewMat: mat4x4<f32>) -> vec3<f32> {
+  let v = viewCenter.xyz;  // 直接使用，不除以 w
+  let s = 1.0 / (v.z * v.z);
   
-  let fx = proj[0][0]; let fy = proj[1][1];
-  let z = -viewPos.z;
-  let z_clamped = max(z, 0.001);
-  let z2 = z_clamped * z_clamped;
+  // Jacobian 矩阵
+  let J = mat3x3<f32>(
+    vec3<f32>(focal.x / v.z, 0.0, 0.0),
+    vec3<f32>(0.0, focal.y / v.z, 0.0),
+    vec3<f32>(-(focal.x * v.x) * s, -(focal.y * v.y) * s, 0.0)
+  );
   
-  // 雅可比矩阵: 从相机坐标到 NDC 的偏导数
-  // 对于 WebGPU (相机看向 -Z): x_ndc = fx * x_cam / (-z_cam)
-  let j1 = vec3<f32>(fx / z_clamped, 0.0, fx * viewPos.x / z2);
-  let j2 = vec3<f32>(0.0, fy / z_clamped, fy * viewPos.y / z2);
+  // 从 model-view 矩阵提取 3x3 旋转部分 (匹配参考实现)
+  let W = mat3x3<f32>(
+    vec3<f32>(modelViewMat[0][0], modelViewMat[0][1], modelViewMat[0][2]),
+    vec3<f32>(modelViewMat[1][0], modelViewMat[1][1], modelViewMat[1][2]),
+    vec3<f32>(modelViewMat[2][0], modelViewMat[2][1], modelViewMat[2][2])
+  );
   
-  // 投影协方差: J * Sigma * J^T (只需要 2x2 上三角)
-  let Sj1 = SigmaView * j1;
-  let Sj2 = SigmaView * j2;
-  return vec3<f32>(dot(j1, Sj1), dot(j1, Sj2), dot(j2, Sj2));
+  let T = J * W;
+  let cov2d = T * cov3d * transpose(T);
+  return vec3<f32>(cov2d[0][0], cov2d[0][1], cov2d[1][1]);
 }
 
-fn computeEllipseAxes(cov2D: vec3<f32>) -> mat2x2<f32> {
-  let a = cov2D.x; let b = cov2D.y; let c = cov2D.z;
-  let trace = a + c;
-  let det = a * c - b * b;
-  let disc = trace * trace - 4.0 * det;
-  let sqrtDisc = sqrt(max(disc, 0.0));
-  let lambda1 = max((trace + sqrtDisc) * 0.5, 0.0);
-  let lambda2 = max((trace - sqrtDisc) * 0.5, 0.0);
-  let r1 = sqrt(lambda1);
-  let r2 = sqrt(lambda2);
+struct ExtentResult {
+  basis: vec4<f32>,
+  adjustedOpacity: f32,
+}
+
+// 计算 2D 投影范围
+// 精确匹配 PlayCanvas/SuperSplat 实现
+// 注意: MipSplatting 抗锯齿默认禁用，因为大多数模型不是用 MipSplatting 训练的
+// 如果模型是用 MipSplatting 训练的，可以启用 GSPLAT_AA 模式
+fn computeExtentBasisAA(cov2dIn: vec3<f32>, opacity: f32, viewportSize: vec2<f32>) -> ExtentResult {
+  var result: ExtentResult;
+  var cov2d = cov2dIn;
+  var alpha = opacity;
   
-  var axis1: vec2<f32>; var axis2: vec2<f32>;
-  // 改进的数值稳定性: 检查特征向量是否可靠
-  let eigenvecLen = abs(b) + abs(lambda1 - a);
-  if (eigenvecLen > 1e-6) {
-    axis1 = normalize(vec2<f32>(b, lambda1 - a));
-    axis2 = vec2<f32>(-axis1.y, axis1.x);
-  } else {
-    // 退化情况: 使用标准轴
-    if (a >= c) { axis1 = vec2<f32>(1.0, 0.0); axis2 = vec2<f32>(0.0, 1.0); }
-    else { axis1 = vec2<f32>(0.0, 1.0); axis2 = vec2<f32>(1.0, 0.0); }
+  // 添加低通滤波 (正则化) - 匹配 PlayCanvas: +0.3
+  // 这避免了非常小的特征值导致的数值问题
+  cov2d.x += LOW_PASS_FILTER;
+  cov2d.z += LOW_PASS_FILTER;
+  
+  // 特征值分解 (使用 PlayCanvas 公式)
+  let a = cov2d.x;  // diagonal1
+  let d = cov2d.z;  // diagonal2
+  let b = cov2d.y;  // offDiagonal
+  
+  let mid = 0.5 * (a + d);
+  let radius = length(vec2<f32>((a - d) * 0.5, b));
+  
+  let lambda1 = mid + radius;
+  let lambda2 = max(mid - radius, 0.1);  // PlayCanvas 使用 0.1 最小值
+  
+  // 检查特征值是否有效
+  if lambda2 <= 0.0 { 
+    result.basis = vec4<f32>(0.0);
+    result.adjustedOpacity = 0.0;
+    return result;
   }
-  return mat2x2<f32>(axis1 * r1, axis2 * r2);
+  
+  // 使用基于视口的最大限制 (匹配 PlayCanvas)
+  let vmin = min(1024.0, min(viewportSize.x, viewportSize.y));
+  
+  // 计算轴长度: l = 2.0 * min(sqrt(2.0 * lambda), vmin)
+  // 这等价于 std_dev * sqrt(lambda)，因为 std_dev = sqrt(8) ≈ 2.83
+  let l1 = 2.0 * min(sqrt(2.0 * lambda1), vmin);
+  let l2 = 2.0 * min(sqrt(2.0 * lambda2), vmin);
+  
+  // 关键: 剔除小于 2 像素的 Gaussian (匹配 PlayCanvas)
+  // 这消除了导致"雾化"伪影的亚像素 splat
+  if l1 < 2.0 && l2 < 2.0 { 
+    result.basis = vec4<f32>(0.0);
+    result.adjustedOpacity = 0.0;
+    return result;
+  }
+  
+  // 从 offDiagonal 和特征值差计算特征向量
+  // diagonalVector = normalize(vec2(offDiagonal, lambda1 - diagonal1))
+  let diagVec = normalize(vec2<f32>(b, lambda1 - a));
+  let eigenvector1 = diagVec;
+  let eigenvector2 = vec2<f32>(diagVec.y, -diagVec.x);
+  
+  // 计算基向量 (不应用额外的 splat_scale，因为我们使用默认值 1.0)
+  result.basis = vec4<f32>(eigenvector1 * l1, eigenvector2 * l2);
+  result.adjustedOpacity = alpha;
+  return result;
+}
+
+fn getModelScale3(model: mat4x4<f32>) -> vec3<f32> {
+  return vec3<f32>(length(model[0].xyz), length(model[1].xyz), length(model[2].xyz));
 }
 
 @vertex
@@ -5036,861 +5357,238 @@ fn vs_main(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) ins
   let splatIndex = sortedIndices[instanceIndex];
   let splat = splats[splatIndex];
   let quadPos = QUAD_POSITIONS[vertexIndex];
-  output.localUV = quadPos;
   
-  // 计算 modelView 矩阵和模型缩放
-  let modelView = uniforms.view * uniforms.model;
-  let modelScale = getModelScale3(uniforms.model);
+  // 透明度剔除
+  if splat.opacity < ALPHA_CULL_THRESHOLD { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
   
-  let cov2D = computeCov2D(splat.mean, splat.scale, splat.rotation, modelView, uniforms.proj, modelScale);
-  let axes = computeEllipseAxes(cov2D);
-  let screenOffset = axes[0] * quadPos.x * ELLIPSE_SCALE + axes[1] * quadPos.y * ELLIPSE_SCALE;
+  // 四元数有效性检查
+  let quatNormSqr = dot(splat.rotation, splat.rotation);
+  if quatNormSqr < 1e-6 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
   
-  // 应用 model 变换到 splat 位置
+  // 变换到视图空间 (匹配参考实现: Local -> World -> View -> Clip)
   let worldPos = uniforms.model * vec4<f32>(splat.mean, 1.0);
-  let viewPos = uniforms.view * worldPos;
-  var clipPos = uniforms.proj * viewPos;
-  clipPos.x = clipPos.x + screenOffset.x * clipPos.w;
-  clipPos.y = clipPos.y + screenOffset.y * clipPos.w;
-  output.position = clipPos;
-  // DC 颜色已经在 PLYLoader 中预计算: colorDC = 0.5 + SH_C0 * f_dc
-  output.color = splat.colorDC;
-  output.opacity = splat.opacity;
+  let viewPos = uniforms.view * worldPos;  // vec4, 保持 w 分量
+  let clipPos = uniforms.proj * viewPos;
   
-  return output;
-}
-
-@fragment
-fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  let r = length(input.localUV);
-  if (r > 1.0) { discard; }
-  let gaussianWeight = exp(-r * r * GAUSSIAN_DECAY);
-  let alpha = input.opacity * gaussianWeight;
-  if (alpha < 0.004) { discard; }
-  let color = clamp(input.color, vec3<f32>(0.0), vec3<f32>(1.0));
-  return vec4<f32>(color * alpha, alpha);
-}
-`
-);
-const shaderCodeL1 = (
-  /* wgsl */
-  `
-struct Uniforms {
-  view: mat4x4<f32>,
-  proj: mat4x4<f32>,
-  model: mat4x4<f32>,
-  cameraPos: vec3<f32>,
-  _pad: f32,
-  screenSize: vec2<f32>,
-  _pad2: vec2<f32>,
-}
-
-struct Splat {
-  mean:     vec3<f32>,
-  _pad0:    f32,
-  scale:    vec3<f32>,
-  _pad1:    f32,
-  rotation: vec4<f32>,
-  colorDC:  vec3<f32>,
-  opacity:  f32,
-  sh1:      array<f32, 9>,
-  sh2:      array<f32, 15>,
-  sh3:      array<f32, 21>,
-  _pad2:    array<f32, 3>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> splats: array<Splat>;
-@group(0) @binding(2) var<storage, read> sortedIndices: array<u32>;
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) localUV: vec2<f32>,
-  @location(1) color: vec3<f32>,
-  @location(2) opacity: f32,
-}
-
-const QUAD_POSITIONS = array<vec2<f32>, 4>(
-  vec2<f32>(-1.0, -1.0),
-  vec2<f32>( 1.0, -1.0),
-  vec2<f32>(-1.0,  1.0),
-  vec2<f32>( 1.0,  1.0),
-);
-
-const ELLIPSE_SCALE: f32 = 3.0;
-const GAUSSIAN_DECAY: f32 = 4.5;
-
-// SH 常数
-const SH_C0: f32 = 0.28209479177387814;  // sqrt(1/(4*pi)) - DC 颜色
-const SH_C1: f32 = 0.4886025119029199;   // sqrt(3/(4*pi)) - L1
-
-// 计算 L1 球谐函数贡献
-// 数据布局 (按基函数分组): [basis0_R, basis0_G, basis0_B, basis1_R, basis1_G, basis1_B, ...]
-// 即 sh1[0..2] = 第一个基函数的 RGB, sh1[3..5] = 第二个基函数的 RGB, sh1[6..8] = 第三个基函数的 RGB
-// 原始 3DGS 公式: result = SH_C1 * (-sh[0] * y + sh[1] * z - sh[2] * x)
-// 其中 sh[0], sh[1], sh[2] 是 vec3 (RGB)
-fn evalSH1(dir: vec3<f32>, sh1: array<f32, 9>) -> vec3<f32> {
-  let x = dir.x;
-  let y = dir.y;
-  let z = dir.z;
-  
-  // sh[0] = vec3(sh1[0], sh1[1], sh1[2]) - 第一个基函数 (Y_1^{-1})
-  // sh[1] = vec3(sh1[3], sh1[4], sh1[5]) - 第二个基函数 (Y_1^0)
-  // sh[2] = vec3(sh1[6], sh1[7], sh1[8]) - 第三个基函数 (Y_1^1)
-  let sh0 = vec3<f32>(sh1[0], sh1[1], sh1[2]);
-  let sh1_1 = vec3<f32>(sh1[3], sh1[4], sh1[5]);
-  let sh2 = vec3<f32>(sh1[6], sh1[7], sh1[8]);
-  
-  return SH_C1 * (-sh0 * y + sh1_1 * z - sh2 * x);
-}
-
-fn quatToMat3(q: vec4<f32>) -> mat3x3<f32> {
-  let w = q[0]; let x = q[1]; let y = q[2]; let z = q[3];
-  let x2 = x + x; let y2 = y + y; let z2 = z + z;
-  let xx = x * x2; let xy = x * y2; let xz = x * z2;
-  let yy = y * y2; let yz = y * z2; let zz = z * z2;
-  let wx = w * x2; let wy = w * y2; let wz = w * z2;
-  return mat3x3<f32>(
-    vec3<f32>(1.0 - (yy + zz), xy + wz, xz - wy),
-    vec3<f32>(xy - wz, 1.0 - (xx + zz), yz + wx),
-    vec3<f32>(xz + wy, yz - wx, 1.0 - (xx + yy))
-  );
-}
-
-fn getModelScale3(model: mat4x4<f32>) -> vec3<f32> {
-  return vec3<f32>(
-    length(model[0].xyz),
-    length(model[1].xyz),
-    length(model[2].xyz)
-  );
-}
-
-fn computeCov2D(mean: vec3<f32>, scale: vec3<f32>, rotation: vec4<f32>, modelView: mat4x4<f32>, proj: mat4x4<f32>, modelScale: vec3<f32>) -> vec3<f32> {
-  let R = quatToMat3(rotation);
-  let scaledScale = scale * modelScale;
-  let s2 = scaledScale * scaledScale;
-  let M = mat3x3<f32>(R[0] * s2.x, R[1] * s2.y, R[2] * s2.z);
-  let Sigma = M * transpose(R);
-  
-  let viewPos = (modelView * vec4<f32>(mean, 1.0)).xyz;
-  let viewRot = mat3x3<f32>(modelView[0].xyz, modelView[1].xyz, modelView[2].xyz);
-  let SigmaView = viewRot * Sigma * transpose(viewRot);
-  
-  let fx = proj[0][0]; let fy = proj[1][1];
-  let z = -viewPos.z;
-  let z_clamped = max(z, 0.001);
-  let z2 = z_clamped * z_clamped;
-  
-  let j1 = vec3<f32>(fx / z_clamped, 0.0, fx * viewPos.x / z2);
-  let j2 = vec3<f32>(0.0, fy / z_clamped, fy * viewPos.y / z2);
-  let Sj1 = SigmaView * j1;
-  let Sj2 = SigmaView * j2;
-  return vec3<f32>(dot(j1, Sj1), dot(j1, Sj2), dot(j2, Sj2));
-}
-
-fn computeEllipseAxes(cov2D: vec3<f32>) -> mat2x2<f32> {
-  let a = cov2D.x; let b = cov2D.y; let c = cov2D.z;
-  let trace = a + c;
-  let det = a * c - b * b;
-  let disc = trace * trace - 4.0 * det;
-  let sqrtDisc = sqrt(max(disc, 0.0));
-  let lambda1 = max((trace + sqrtDisc) * 0.5, 0.0);
-  let lambda2 = max((trace - sqrtDisc) * 0.5, 0.0);
-  let r1 = sqrt(lambda1);
-  let r2 = sqrt(lambda2);
-  
-  var axis1: vec2<f32>; var axis2: vec2<f32>;
-  let eigenvecLen = abs(b) + abs(lambda1 - a);
-  if (eigenvecLen > 1e-6) {
-    axis1 = normalize(vec2<f32>(b, lambda1 - a));
-    axis2 = vec2<f32>(-axis1.y, axis1.x);
-  } else {
-    if (a >= c) { axis1 = vec2<f32>(1.0, 0.0); axis2 = vec2<f32>(0.0, 1.0); }
-    else { axis1 = vec2<f32>(0.0, 1.0); axis2 = vec2<f32>(1.0, 0.0); }
-  }
-  return mat2x2<f32>(axis1 * r1, axis2 * r2);
-}
-
-@vertex
-fn vs_main(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> VertexOutput {
-  var output: VertexOutput;
-  let splatIndex = sortedIndices[instanceIndex];
-  let splat = splats[splatIndex];
-  let quadPos = QUAD_POSITIONS[vertexIndex];
-  output.localUV = quadPos;
-  
-  let modelView = uniforms.view * uniforms.model;
-  let modelScale = getModelScale3(uniforms.model);
-  
-  let cov2D = computeCov2D(splat.mean, splat.scale, splat.rotation, modelView, uniforms.proj, modelScale);
-  let axes = computeEllipseAxes(cov2D);
-  let screenOffset = axes[0] * quadPos.x * ELLIPSE_SCALE + axes[1] * quadPos.y * ELLIPSE_SCALE;
-  
-  let worldPos = uniforms.model * vec4<f32>(splat.mean, 1.0);
-  let viewPos = uniforms.view * worldPos;
-  var clipPos = uniforms.proj * viewPos;
-  clipPos.x = clipPos.x + screenOffset.x * clipPos.w;
-  clipPos.y = clipPos.y + screenOffset.y * clipPos.w;
-  output.position = clipPos;
-  
-  // SH 计算 - 使用局部坐标系中的方向
-  // 将相机位置转换到局部坐标系
-  // cam_local = A^{-1} * (cam_world - t) = (A^T / s^2) * (cam_world - t)
-  // 其中 A 是模型矩阵的 3x3 部分，s^2 是缩放的平方
-  let A = mat3x3<f32>(
-    uniforms.model[0].xyz,
-    uniforms.model[1].xyz,
-    uniforms.model[2].xyz
-  );
-  let modelTranslation = uniforms.model[3].xyz;
-  let s2 = max(1e-12, (dot(A[0], A[0]) + dot(A[1], A[1]) + dot(A[2], A[2])) / 3.0);
-  let camLocal = (transpose(A) * (uniforms.cameraPos - modelTranslation)) / s2;
-  // 方向：从相机指向 splat（与 visionary 一致）
-  let dirLocal = normalize(splat.mean - camLocal);
-  
-  let shColor = evalSH1(dirLocal, splat.sh1);
-  // DC 颜色已经在 PLYLoader 中预计算，这里只加 SH 贡献
-  // 使用 max 确保颜色不为负（与 visionary 一致）
-  output.color = max(vec3<f32>(0.0), splat.colorDC + shColor);
-  output.opacity = splat.opacity;
-  
-  return output;
-}
-
-@fragment
-fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  let r = length(input.localUV);
-  if (r > 1.0) { discard; }
-  let gaussianWeight = exp(-r * r * GAUSSIAN_DECAY);
-  let alpha = input.opacity * gaussianWeight;
-  if (alpha < 0.004) { discard; }
-  let color = clamp(input.color, vec3<f32>(0.0), vec3<f32>(1.0));
-  return vec4<f32>(color * alpha, alpha);
-}
-`
-);
-const shaderCodeL2 = (
-  /* wgsl */
-  `
-struct Uniforms {
-  view: mat4x4<f32>,
-  proj: mat4x4<f32>,
-  model: mat4x4<f32>,
-  cameraPos: vec3<f32>,
-  _pad: f32,
-  screenSize: vec2<f32>,
-  _pad2: vec2<f32>,
-}
-
-struct Splat {
-  mean:     vec3<f32>,
-  _pad0:    f32,
-  scale:    vec3<f32>,
-  _pad1:    f32,
-  rotation: vec4<f32>,
-  colorDC:  vec3<f32>,
-  opacity:  f32,
-  sh1:      array<f32, 9>,
-  sh2:      array<f32, 15>,
-  sh3:      array<f32, 21>,
-  _pad2:    array<f32, 3>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> splats: array<Splat>;
-@group(0) @binding(2) var<storage, read> sortedIndices: array<u32>;
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) localUV: vec2<f32>,
-  @location(1) color: vec3<f32>,
-  @location(2) opacity: f32,
-}
-
-const QUAD_POSITIONS = array<vec2<f32>, 4>(
-  vec2<f32>(-1.0, -1.0),
-  vec2<f32>( 1.0, -1.0),
-  vec2<f32>(-1.0,  1.0),
-  vec2<f32>( 1.0,  1.0),
-);
-
-const ELLIPSE_SCALE: f32 = 3.0;
-const GAUSSIAN_DECAY: f32 = 4.5;
-
-// SH 常数
-const SH_C0: f32 = 0.28209479177387814;  // sqrt(1/(4*pi)) - DC 颜色
-const SH_C1: f32 = 0.4886025119029199;   // sqrt(3/(4*pi)) - L1
-const SH_C2_0: f32 = 1.0925484305920792;
-const SH_C2_1: f32 = -1.0925484305920792;
-const SH_C2_2: f32 = 0.31539156525252005;
-const SH_C2_3: f32 = -1.0925484305920792;
-const SH_C2_4: f32 = 0.5462742152960396;
-
-// 数据布局 (按基函数分组): [basis0_RGB, basis1_RGB, basis2_RGB]
-fn evalSH1(dir: vec3<f32>, sh1: array<f32, 9>) -> vec3<f32> {
-  let x = dir.x;
-  let y = dir.y;
-  let z = dir.z;
-  let sh0 = vec3<f32>(sh1[0], sh1[1], sh1[2]);
-  let sh1_1 = vec3<f32>(sh1[3], sh1[4], sh1[5]);
-  let sh2 = vec3<f32>(sh1[6], sh1[7], sh1[8]);
-  return SH_C1 * (-sh0 * y + sh1_1 * z - sh2 * x);
-}
-
-// 数据布局 (按基函数分组): [basis0_RGB, basis1_RGB, ..., basis4_RGB]
-fn evalSH2(dir: vec3<f32>, sh2: array<f32, 15>) -> vec3<f32> {
-  let x = dir.x; let y = dir.y; let z = dir.z;
-  let xx = x * x; let yy = y * y; let zz = z * z;
-  let xy = x * y; let yz = y * z; let xz = x * z;
-
-  // L2 基函数
-  let b0 = SH_C2_0 * xy;
-  let b1 = SH_C2_1 * yz;
-  let b2 = SH_C2_2 * (2.0 * zz - xx - yy);
-  let b3 = SH_C2_3 * xz;
-  let b4 = SH_C2_4 * (xx - yy);
-
-  // 数据按基函数分组: sh2[0..2]=basis0_RGB, sh2[3..5]=basis1_RGB, ...
-  let c0 = vec3<f32>(sh2[0], sh2[1], sh2[2]);
-  let c1 = vec3<f32>(sh2[3], sh2[4], sh2[5]);
-  let c2 = vec3<f32>(sh2[6], sh2[7], sh2[8]);
-  let c3 = vec3<f32>(sh2[9], sh2[10], sh2[11]);
-  let c4 = vec3<f32>(sh2[12], sh2[13], sh2[14]);
-  
-  return c0 * b0 + c1 * b1 + c2 * b2 + c3 * b3 + c4 * b4;
-}
-
-fn quatToMat3(q: vec4<f32>) -> mat3x3<f32> {
-  let w = q[0]; let x = q[1]; let y = q[2]; let z = q[3];
-  let x2 = x + x; let y2 = y + y; let z2 = z + z;
-  let xx = x * x2; let xy = x * y2; let xz = x * z2;
-  let yy = y * y2; let yz = y * z2; let zz = z * z2;
-  let wx = w * x2; let wy = w * y2; let wz = w * z2;
-  return mat3x3<f32>(
-    vec3<f32>(1.0 - (yy + zz), xy + wz, xz - wy),
-    vec3<f32>(xy - wz, 1.0 - (xx + zz), yz + wx),
-    vec3<f32>(xz + wy, yz - wx, 1.0 - (xx + yy))
-  );
-}
-
-fn getModelScale3(model: mat4x4<f32>) -> vec3<f32> {
-  return vec3<f32>(
-    length(model[0].xyz),
-    length(model[1].xyz),
-    length(model[2].xyz)
-  );
-}
-
-fn computeCov2D(mean: vec3<f32>, scale: vec3<f32>, rotation: vec4<f32>, modelView: mat4x4<f32>, proj: mat4x4<f32>, modelScale: vec3<f32>) -> vec3<f32> {
-  let R = quatToMat3(rotation);
-  let scaledScale = scale * modelScale;
-  let s2 = scaledScale * scaledScale;
-  let M = mat3x3<f32>(R[0] * s2.x, R[1] * s2.y, R[2] * s2.z);
-  let Sigma = M * transpose(R);
-  
-  let viewPos = (modelView * vec4<f32>(mean, 1.0)).xyz;
-  let viewRot = mat3x3<f32>(modelView[0].xyz, modelView[1].xyz, modelView[2].xyz);
-  let SigmaView = viewRot * Sigma * transpose(viewRot);
-  
-  let fx = proj[0][0]; let fy = proj[1][1];
-  let z = -viewPos.z;
-  let z_clamped = max(z, 0.001);
-  let z2 = z_clamped * z_clamped;
+  // 近平面剔除 (viewPos.z 是负数，相机看向 -Z)
+  if viewPos.z >= 0.0 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
   
-  let j1 = vec3<f32>(fx / z_clamped, 0.0, fx * viewPos.x / z2);
-  let j2 = vec3<f32>(0.0, fy / z_clamped, fy * viewPos.y / z2);
-  let Sj1 = SigmaView * j1;
-  let Sj2 = SigmaView * j2;
-  return vec3<f32>(dot(j1, Sj1), dot(j1, Sj2), dot(j2, Sj2));
-}
-
-fn computeEllipseAxes(cov2D: vec3<f32>) -> mat2x2<f32> {
-  let a = cov2D.x; let b = cov2D.y; let c = cov2D.z;
-  let trace = a + c;
-  let det = a * c - b * b;
-  let disc = trace * trace - 4.0 * det;
-  let sqrtDisc = sqrt(max(disc, 0.0));
-  let lambda1 = max((trace + sqrtDisc) * 0.5, 0.0);
-  let lambda2 = max((trace - sqrtDisc) * 0.5, 0.0);
-  let r1 = sqrt(lambda1);
-  let r2 = sqrt(lambda2);
+  // NDC 计算
+  let pW = 1.0 / (clipPos.w + 0.0000001);
+  let ndcPos = clipPos * pW;
   
-  var axis1: vec2<f32>; var axis2: vec2<f32>;
-  let eigenvecLen = abs(b) + abs(lambda1 - a);
-  if (eigenvecLen > 1e-6) {
-    axis1 = normalize(vec2<f32>(b, lambda1 - a));
-    axis2 = vec2<f32>(-axis1.y, axis1.x);
-  } else {
-    if (a >= c) { axis1 = vec2<f32>(1.0, 0.0); axis2 = vec2<f32>(0.0, 1.0); }
-    else { axis1 = vec2<f32>(0.0, 1.0); axis2 = vec2<f32>(1.0, 0.0); }
+  // 视锥剔除 (放宽边界以避免 pop-in)
+  let clipBound = 1.3;
+  if abs(ndcPos.x) > clipBound || abs(ndcPos.y) > clipBound || ndcPos.z < -0.2 || ndcPos.z > 1.0 {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
   }
-  return mat2x2<f32>(axis1 * r1, axis2 * r2);
-}
-
-@vertex
-fn vs_main(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> VertexOutput {
-  var output: VertexOutput;
-  let splatIndex = sortedIndices[instanceIndex];
-  let splat = splats[splatIndex];
-  let quadPos = QUAD_POSITIONS[vertexIndex];
-  output.localUV = quadPos;
-  
-  let modelView = uniforms.view * uniforms.model;
-  let modelScale = getModelScale3(uniforms.model);
-  
-  let cov2D = computeCov2D(splat.mean, splat.scale, splat.rotation, modelView, uniforms.proj, modelScale);
-  let axes = computeEllipseAxes(cov2D);
-  let screenOffset = axes[0] * quadPos.x * ELLIPSE_SCALE + axes[1] * quadPos.y * ELLIPSE_SCALE;
-  
-  let worldPos = uniforms.model * vec4<f32>(splat.mean, 1.0);
-  let viewPos = uniforms.view * worldPos;
-  var clipPos = uniforms.proj * viewPos;
-  clipPos.x = clipPos.x + screenOffset.x * clipPos.w;
-  clipPos.y = clipPos.y + screenOffset.y * clipPos.w;
-  output.position = clipPos;
-  
-  // SH 计算 - 使用局部坐标系中的方向 (与 visionary 一致)
-  let A = mat3x3<f32>(
-    uniforms.model[0].xyz,
-    uniforms.model[1].xyz,
-    uniforms.model[2].xyz
-  );
-  let modelTranslation = uniforms.model[3].xyz;
-  let s2 = max(1e-12, (dot(A[0], A[0]) + dot(A[1], A[1]) + dot(A[2], A[2])) / 3.0);
-  let camLocal = (transpose(A) * (uniforms.cameraPos - modelTranslation)) / s2;
-  let dirLocal = normalize(splat.mean - camLocal);
-  
-  let shColor1 = evalSH1(dirLocal, splat.sh1);
-  let shColor2 = evalSH2(dirLocal, splat.sh2);
-  output.color = max(vec3<f32>(0.0), splat.colorDC + shColor1 + shColor2);
-  output.opacity = splat.opacity;
-  
-  return output;
-}
-
-@fragment
-fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  let r = length(input.localUV);
-  if (r > 1.0) { discard; }
-  let gaussianWeight = exp(-r * r * GAUSSIAN_DECAY);
-  let alpha = input.opacity * gaussianWeight;
-  if (alpha < 0.004) { discard; }
-  let color = clamp(input.color, vec3<f32>(0.0), vec3<f32>(1.0));
-  return vec4<f32>(color * alpha, alpha);
-}
-`
-);
-const shaderCodeL3 = (
-  /* wgsl */
-  `
-struct Uniforms {
-  view: mat4x4<f32>,
-  proj: mat4x4<f32>,
-  model: mat4x4<f32>,
-  cameraPos: vec3<f32>,
-  _pad: f32,
-  screenSize: vec2<f32>,
-  _pad2: vec2<f32>,
-}
-
-struct Splat {
-  mean:     vec3<f32>,
-  _pad0:    f32,
-  scale:    vec3<f32>,
-  _pad1:    f32,
-  rotation: vec4<f32>,
-  colorDC:  vec3<f32>,
-  opacity:  f32,
-  sh1:      array<f32, 9>,
-  sh2:      array<f32, 15>,
-  sh3:      array<f32, 21>,
-  _pad2:    array<f32, 3>,
-}
-
-@group(0) @binding(0) var<uniform> uniforms: Uniforms;
-@group(0) @binding(1) var<storage, read> splats: array<Splat>;
-@group(0) @binding(2) var<storage, read> sortedIndices: array<u32>;
-
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) localUV: vec2<f32>,
-  @location(1) color: vec3<f32>,
-  @location(2) opacity: f32,
-}
-
-const QUAD_POSITIONS = array<vec2<f32>, 4>(
-  vec2<f32>(-1.0, -1.0),
-  vec2<f32>( 1.0, -1.0),
-  vec2<f32>(-1.0,  1.0),
-  vec2<f32>( 1.0,  1.0),
-);
-
-const ELLIPSE_SCALE: f32 = 3.0;
-const GAUSSIAN_DECAY: f32 = 4.5;
-
-// SH 常数
-const SH_C0: f32 = 0.28209479177387814;  // sqrt(1/(4*pi)) - DC 颜色
-const SH_C1: f32 = 0.4886025119029199;   // sqrt(3/(4*pi)) - L1
-const SH_C2_0: f32 = 1.0925484305920792;
-const SH_C2_1: f32 = -1.0925484305920792;
-const SH_C2_2: f32 = 0.31539156525252005;
-const SH_C2_3: f32 = -1.0925484305920792;
-const SH_C2_4: f32 = 0.5462742152960396;
-const SH_C3_0: f32 = -0.5900435899266435;
-const SH_C3_1: f32 = 2.890611442640554;
-const SH_C3_2: f32 = -0.4570457994644658;
-const SH_C3_3: f32 = 0.3731763325901154;
-const SH_C3_4: f32 = -0.4570457994644658;
-const SH_C3_5: f32 = 1.445305721320277;
-const SH_C3_6: f32 = -0.5900435899266435;
-
-// 数据布局 (按基函数分组): [basis0_RGB, basis1_RGB, basis2_RGB]
-fn evalSH1(dir: vec3<f32>, sh1: array<f32, 9>) -> vec3<f32> {
-  let x = dir.x;
-  let y = dir.y;
-  let z = dir.z;
-  let sh0 = vec3<f32>(sh1[0], sh1[1], sh1[2]);
-  let sh1_1 = vec3<f32>(sh1[3], sh1[4], sh1[5]);
-  let sh2 = vec3<f32>(sh1[6], sh1[7], sh1[8]);
-  return SH_C1 * (-sh0 * y + sh1_1 * z - sh2 * x);
-}
-
-// 数据布局 (按基函数分组): [basis0_RGB, ..., basis4_RGB]
-fn evalSH2(dir: vec3<f32>, sh2: array<f32, 15>) -> vec3<f32> {
-  let x = dir.x; let y = dir.y; let z = dir.z;
-  let xx = x * x; let yy = y * y; let zz = z * z;
-  let xy = x * y; let yz = y * z; let xz = x * z;
-
-  let b0 = SH_C2_0 * xy;
-  let b1 = SH_C2_1 * yz;
-  let b2 = SH_C2_2 * (2.0 * zz - xx - yy);
-  let b3 = SH_C2_3 * xz;
-  let b4 = SH_C2_4 * (xx - yy);
-
-  let c0 = vec3<f32>(sh2[0], sh2[1], sh2[2]);
-  let c1 = vec3<f32>(sh2[3], sh2[4], sh2[5]);
-  let c2 = vec3<f32>(sh2[6], sh2[7], sh2[8]);
-  let c3 = vec3<f32>(sh2[9], sh2[10], sh2[11]);
-  let c4 = vec3<f32>(sh2[12], sh2[13], sh2[14]);
   
-  return c0 * b0 + c1 * b1 + c2 * b2 + c3 * b3 + c4 * b4;
-}
-
-// 数据布局 (按基函数分组): [basis0_RGB, ..., basis6_RGB]
-fn evalSH3(dir: vec3<f32>, sh3: array<f32, 21>) -> vec3<f32> {
-  let x = dir.x; let y = dir.y; let z = dir.z;
-  let xx = x * x; let yy = y * y; let zz = z * z;
-  let xy = x * y; let yz = y * z; let xz = x * z;
-
-  let b0 = SH_C3_0 * y * (3.0 * xx - yy);
-  let b1 = SH_C3_1 * xy * z;
-  let b2 = SH_C3_2 * y * (4.0 * zz - xx - yy);
-  let b3 = SH_C3_3 * z * (2.0 * zz - 3.0 * xx - 3.0 * yy);
-  let b4 = SH_C3_4 * x * (4.0 * zz - xx - yy);
-  let b5 = SH_C3_5 * z * (xx - yy);
-  let b6 = SH_C3_6 * x * (xx - 3.0 * yy);
-
-  let c0 = vec3<f32>(sh3[0], sh3[1], sh3[2]);
-  let c1 = vec3<f32>(sh3[3], sh3[4], sh3[5]);
-  let c2 = vec3<f32>(sh3[6], sh3[7], sh3[8]);
-  let c3 = vec3<f32>(sh3[9], sh3[10], sh3[11]);
-  let c4 = vec3<f32>(sh3[12], sh3[13], sh3[14]);
-  let c5 = vec3<f32>(sh3[15], sh3[16], sh3[17]);
-  let c6 = vec3<f32>(sh3[18], sh3[19], sh3[20]);
+  // 计算 3D 协方差 (使用原始 scale，模型缩放通过 model-view 矩阵处理)
+  // 关键: 不要在这里应用模型缩放，协方差投影会通过 model-view 矩阵正确处理
+  let cov3d = computeCovariance3D(splat.scale, splat.rotation);
   
-  return c0 * b0 + c1 * b1 + c2 * b2 + c3 * b3 + c4 * b4 + c5 * b5 + c6 * b6;
-}
-
-fn quatToMat3(q: vec4<f32>) -> mat3x3<f32> {
-  let w = q[0]; let x = q[1]; let y = q[2]; let z = q[3];
-  let x2 = x + x; let y2 = y + y; let z2 = z + z;
-  let xx = x * x2; let xy = x * y2; let xz = x * z2;
-  let yy = y * y2; let yz = y * z2; let zz = z * z2;
-  let wx = w * x2; let wy = w * y2; let wz = w * z2;
-  return mat3x3<f32>(
-    vec3<f32>(1.0 - (yy + zz), xy + wz, xz - wy),
-    vec3<f32>(xy - wz, 1.0 - (xx + zz), yz + wx),
-    vec3<f32>(xz + wy, yz - wx, 1.0 - (xx + yy))
-  );
-}
-
-fn getModelScale3(model: mat4x4<f32>) -> vec3<f32> {
-  return vec3<f32>(
-    length(model[0].xyz),
-    length(model[1].xyz),
-    length(model[2].xyz)
+  // 计算焦距 (匹配参考实现: abs(proj[0][0]) * 0.5 * width)
+  let focal = vec2<f32>(
+    abs(uniforms.proj[0][0]) * 0.5 * uniforms.screenSize.x,
+    abs(uniforms.proj[1][1]) * 0.5 * uniforms.screenSize.y
   );
-}
-
-fn computeCov2D(mean: vec3<f32>, scale: vec3<f32>, rotation: vec4<f32>, modelView: mat4x4<f32>, proj: mat4x4<f32>, modelScale: vec3<f32>) -> vec3<f32> {
-  let R = quatToMat3(rotation);
-  let scaledScale = scale * modelScale;
-  let s2 = scaledScale * scaledScale;
-  let M = mat3x3<f32>(R[0] * s2.x, R[1] * s2.y, R[2] * s2.z);
-  let Sigma = M * transpose(R);
-  
-  let viewPos = (modelView * vec4<f32>(mean, 1.0)).xyz;
-  let viewRot = mat3x3<f32>(modelView[0].xyz, modelView[1].xyz, modelView[2].xyz);
-  let SigmaView = viewRot * Sigma * transpose(viewRot);
-  
-  let fx = proj[0][0]; let fy = proj[1][1];
-  let z = -viewPos.z;
-  let z_clamped = max(z, 0.001);
-  let z2 = z_clamped * z_clamped;
   
-  let j1 = vec3<f32>(fx / z_clamped, 0.0, fx * viewPos.x / z2);
-  let j2 = vec3<f32>(0.0, fy / z_clamped, fy * viewPos.y / z2);
-  let Sj1 = SigmaView * j1;
-  let Sj2 = SigmaView * j2;
-  return vec3<f32>(dot(j1, Sj1), dot(j1, Sj2), dot(j2, Sj2));
-}
-
-fn computeEllipseAxes(cov2D: vec3<f32>) -> mat2x2<f32> {
-  let a = cov2D.x; let b = cov2D.y; let c = cov2D.z;
-  let trace = a + c;
-  let det = a * c - b * b;
-  let disc = trace * trace - 4.0 * det;
-  let sqrtDisc = sqrt(max(disc, 0.0));
-  let lambda1 = max((trace + sqrtDisc) * 0.5, 0.0);
-  let lambda2 = max((trace - sqrtDisc) * 0.5, 0.0);
-  let r1 = sqrt(lambda1);
-  let r2 = sqrt(lambda2);
+  // 计算 model-view 矩阵 (匹配参考实现)
+  let modelViewMat = uniforms.view * uniforms.model;
   
-  var axis1: vec2<f32>; var axis2: vec2<f32>;
-  let eigenvecLen = abs(b) + abs(lambda1 - a);
-  if (eigenvecLen > 1e-6) {
-    axis1 = normalize(vec2<f32>(b, lambda1 - a));
-    axis2 = vec2<f32>(-axis1.y, axis1.x);
-  } else {
-    if (a >= c) { axis1 = vec2<f32>(1.0, 0.0); axis2 = vec2<f32>(0.0, 1.0); }
-    else { axis1 = vec2<f32>(0.0, 1.0); axis2 = vec2<f32>(1.0, 0.0); }
-  }
-  return mat2x2<f32>(axis1 * r1, axis2 * r2);
-}
-
-@vertex
-fn vs_main(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> VertexOutput {
-  var output: VertexOutput;
-  let splatIndex = sortedIndices[instanceIndex];
-  let splat = splats[splatIndex];
-  let quadPos = QUAD_POSITIONS[vertexIndex];
-  output.localUV = quadPos;
+  // 投影协方差到 2D (传入 viewPos 作为 vec4，不除以 w)
+  let cov2d = projectCovariance(cov3d, viewPos, focal, modelViewMat);
   
-  // 计算 modelView 矩阵和模型缩放
-  let modelView = uniforms.view * uniforms.model;
-  let modelScale = getModelScale3(uniforms.model);
-  
-  let cov2D = computeCov2D(splat.mean, splat.scale, splat.rotation, modelView, uniforms.proj, modelScale);
-  let axes = computeEllipseAxes(cov2D);
-  let screenOffset = axes[0] * quadPos.x * ELLIPSE_SCALE + axes[1] * quadPos.y * ELLIPSE_SCALE;
+  // 计算范围基向量 (带抗锯齿)
+  let extentResult = computeExtentBasisAA(cov2d, splat.opacity, uniforms.screenSize);
+  let basis = extentResult.basis;
+  let adjustedOpacity = extentResult.adjustedOpacity;
   
-  // 应用 model 变换到 splat 位置
-  let worldPos = uniforms.model * vec4<f32>(splat.mean, 1.0);
-  let viewPos = uniforms.view * worldPos;
-  var clipPos = uniforms.proj * viewPos;
-  clipPos.x = clipPos.x + screenOffset.x * clipPos.w;
-  clipPos.y = clipPos.y + screenOffset.y * clipPos.w;
-  output.position = clipPos;
+  if basis.x == 0.0 && basis.y == 0.0 && basis.z == 0.0 && basis.w == 0.0 {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
   
-  // SH 计算 - 使用局部坐标系中的方向 (与 visionary 一致)
-  let A = mat3x3<f32>(
-    uniforms.model[0].xyz,
-    uniforms.model[1].xyz,
-    uniforms.model[2].xyz
-  );
-  let modelTranslation = uniforms.model[3].xyz;
-  let s2 = max(1e-12, (dot(A[0], A[0]) + dot(A[1], A[1]) + dot(A[2], A[2])) / 3.0);
-  let camLocal = (transpose(A) * (uniforms.cameraPos - modelTranslation)) / s2;
-  let dirLocal = normalize(splat.mean - camLocal);
+  // 视锥边缘剔除 (匹配 PlayCanvas)
+  let maxExtentPixels = max(length(basis.xy), length(basis.zw));
+  let pixelToClip = vec2<f32>(clipPos.w, clipPos.w) / uniforms.screenSize;
+  let splatExtentClip = vec2<f32>(maxExtentPixels, maxExtentPixels) * pixelToClip;
+  if any((abs(clipPos.xy) - splatExtentClip) > vec2<f32>(clipPos.w, clipPos.w)) {
+    output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output;
+  }
+  
+  // ClipCorner 优化 (匹配 PlayCanvas/SuperSplat)
+  // 根据透明度缩小 quad，排除 alpha < 1/255 的区域
+  let clipFactor = computeClipFactor(adjustedOpacity);
+  if clipFactor <= 0.0 { output.position = vec4<f32>(0.0, 0.0, 2.0, 1.0); return output; }
   
-  let shColor1 = evalSH1(dirLocal, splat.sh1);
-  let shColor2 = evalSH2(dirLocal, splat.sh2);
-  let shColor3 = evalSH3(dirLocal, splat.sh3);
-  output.color = max(vec3<f32>(0.0), splat.colorDC + shColor1 + shColor2 + shColor3);
-  output.opacity = splat.opacity;
+  // 计算最终顶点位置
+  // basis_viewport: 从像素转换到 NDC 空间
+  let basisViewport = vec2<f32>(1.0 / uniforms.screenSize.x, 1.0 / uniforms.screenSize.y);
   
+  // 用 clipFactor 缩放基向量 (缩小 quad)
+  let basisVector1 = basis.xy * clipFactor;
+  let basisVector2 = basis.zw * clipFactor;
+  
+  // 计算 NDC 偏移
+  // 注意: quadPos 在 [-1, 1] 范围内，clipFactor 只影响 quad 大小 (basis_vector)
+  let ndcOffset = (quadPos.x * basisVector1 + quadPos.y * basisVector2) * basisViewport * 2.0;
+  output.position = vec4<f32>(ndcPos.xy + ndcOffset, ndcPos.z, 1.0);
+  
+  // UV 输出 - 用 clipFactor 缩放以获得正确的 Gaussian 权重
+  output.fragPos = quadPos * clipFactor;
+  
+  // 颜色已在 CPU 端预处理为 (dc * SH_C0 + 0.5)，直接使用
+  // 这是 3DGS 的标准颜色格式，在 sRGB 空间中
+  output.color = splat.colorDC;
+  output.opacity = adjustedOpacity;
   return output;
 }
 
 @fragment
 fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-  let r = length(input.localUV);
-  if (r > 1.0) { discard; }
-  let gaussianWeight = exp(-r * r * GAUSSIAN_DECAY);
-  let alpha = input.opacity * gaussianWeight;
-  if (alpha < 0.004) { discard; }
-  let color = clamp(input.color, vec3<f32>(0.0), vec3<f32>(1.0));
-  return vec4<f32>(color * alpha, alpha);
+  if input.opacity <= 0.0 { discard; }
+  
+  // A = 到中心的平方距离，在 UV 空间中
+  // 由于 clipCorner 优化，fragPos 在 [-clip, clip] 范围内
+  let A = dot(input.fragPos, input.fragPos);
+  
+  // 丢弃单位圆外的片段
+  if A > 1.0 { discard; }
+  
+  // Normalized Gaussian 衰减 (精确匹配 SuperSplat normExp)
+  // 关键修复: 在 A=1 (边界) 时返回精确的 0.0，消除边缘雾化
+  // 在 A=0 (中心): weight = 1.0
+  // 在 A=1 (边界): weight = 精确的 0.0 (而不是标准 exp(-4) ≈ 0.018)
+  let weight = (exp(-4.0 * A) - EXP_NEG4) * INV_ONE_MINUS_EXP_NEG4;
+  
+  // 组合 splat 透明度
+  let opacity = weight * input.opacity;
+  
+  // Alpha 阈值丢弃 (匹配 SuperSplat: if (alpha < 1.0 / 255.0) discard)
+  if opacity < ALPHA_CULL_THRESHOLD { discard; }
+  
+  // 颜色 clamp 到有效范围 (防止负值)
+  let color = max(input.color, vec3<f32>(0.0));
+  
+  // 预乘 alpha 输出 (匹配 blend mode: src=ONE, dst=ONE_MINUS_SRC_ALPHA)
+  // 这是 3DGS 渲染的标准混合模式
+  return vec4<f32>(color * opacity, opacity);
 }
 `
 );
-var SHMode = /* @__PURE__ */ ((SHMode2) => {
-  SHMode2[SHMode2["L0"] = 0] = "L0";
-  SHMode2[SHMode2["L1"] = 1] = "L1";
-  SHMode2[SHMode2["L2"] = 2] = "L2";
-  SHMode2[SHMode2["L3"] = 3] = "L3";
-  return SHMode2;
-})(SHMode || {});
 const SPLAT_FLOAT_COUNT = 64;
-const SPLAT_COMPACT_FLOAT_COUNT = 16;
-const PERFORMANCE_CONFIGS = {
-  [
-    "high"
-    /* HIGH */
-  ]: {
-    maxVisibleSplats: Infinity,
-    enableSorting: true,
-    sortEveryNFrames: 1,
-    useCompactFormat: false,
-    pixelCullThreshold: 1,
-    defaultSHMode: 1
-    /* L1 */
-  },
-  [
-    "medium"
-    /* MEDIUM */
-  ]: {
-    maxVisibleSplats: Infinity,
-    enableSorting: true,
-    sortEveryNFrames: 1,
-    useCompactFormat: false,
-    pixelCullThreshold: 1,
-    defaultSHMode: 1
-    /* L1 */
-  },
-  [
-    "low"
-    /* LOW */
-  ]: {
-    maxVisibleSplats: Infinity,
-    enableSorting: true,
-    sortEveryNFrames: 1,
-    useCompactFormat: false,
-    pixelCullThreshold: 1,
-    defaultSHMode: 0
-    /* L0 */
-  }
-};
 class GSSplatRenderer {
   constructor(renderer, camera) {
     __publicField(this, "renderer");
     __publicField(this, "camera");
-    __publicField(this, "pipelineL0");
-    __publicField(this, "pipelineL1");
-    __publicField(this, "pipelineL2");
-    __publicField(this, "pipelineL3");
-    __publicField(this, "pipelineL0Compact");
-    // 移动端紧凑格式管线
+    __publicField(this, "pipeline");
     __publicField(this, "bindGroupLayout");
-    __publicField(this, "bindGroupLayoutCompact");
-    // 紧凑格式的 layout
     __publicField(this, "uniformBuffer");
     __publicField(this, "splatBuffer", null);
     __publicField(this, "splatCount", 0);
     __publicField(this, "bindGroup", null);
-    // 深度排序器（含剔除功能）- 使用 V2 分桶稳定排序
     __publicField(this, "sorter", null);
-    // 是否启用 DrawIndirect (剔除优化)
-    // 注意：在某些移动设备上可能有问题，可以禁用作为备用
-    __publicField(this, "useDrawIndirect", true);
-    // 是否为移动设备（用于调试）
-    __publicField(this, "isMobile", false);
-    // 像素剔除阈值 (小于此像素的 splat 会被剔除)
-    __publicField(this, "pixelCullThreshold", 1);
-    // SH 模式：L0/L1/L2/L3
-    __publicField(this, "shMode", 1);
-    // 点云的 bounding box（在 setData 时计算）
+    __publicField(this, "shMode", SHMode.L0);
     __publicField(this, "boundingBox", null);
-    // ============================================
-    // 变换相关 (position, rotation, scale)
-    // ============================================
+    // Transform
     __publicField(this, "position", [0, 0, 0]);
     __publicField(this, "rotation", [0, 0, 0]);
-    // Euler angles (radians)
     __publicField(this, "scale", [1, 1, 1]);
     __publicField(this, "pivot", [0, 0, 0]);
-    // 旋转/缩放中心点
     __publicField(this, "modelMatrix", new Float32Array(16));
-    // 4x4 model matrix
-    // ============================================
-    // 移动端优化相关
-    // ============================================
-    __publicField(this, "performanceTier");
-    __publicField(this, "optimizationConfig");
-    __publicField(this, "frameCount", 0);
-    __publicField(this, "useCompactFormat", false);
+    // 剔除选项
+    __publicField(this, "pixelCullThreshold", 1);
     this.renderer = renderer;
     this.camera = camera;
-    this.isMobile = isMobileDevice$1();
-    this.performanceTier = detectPerformanceTier(renderer.device);
-    this.optimizationConfig = { ...PERFORMANCE_CONFIGS[this.performanceTier] };
-    this.pixelCullThreshold = this.optimizationConfig.pixelCullThreshold;
-    this.shMode = this.optimizationConfig.defaultSHMode;
-    this.useCompactFormat = this.optimizationConfig.useCompactFormat;
-    this.createPipelines();
+    this.createPipeline();
     this.createUniformBuffer();
     this.updateModelMatrix();
   }
-  // ============================================
-  // Transform 方法
-  // ============================================
-  /**
-   * 设置位置
-   */
+  createPipeline() {
+    const device = this.renderer.device;
+    const shaderModule = device.createShaderModule({
+      code: gsOptimizedShader
+    });
+    this.bindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+        { binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }
+      ]
+    });
+    const pipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.bindGroupLayout]
+    });
+    this.pipeline = device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vs_main",
+        buffers: []
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fs_main",
+        targets: [{
+          format: this.renderer.format,
+          blend: {
+            color: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            },
+            alpha: {
+              srcFactor: "one",
+              dstFactor: "one-minus-src-alpha",
+              operation: "add"
+            }
+          }
+        }]
+      },
+      primitive: {
+        topology: "triangle-strip"
+      },
+      depthStencil: {
+        format: this.renderer.depthFormat,
+        depthWriteEnabled: false,
+        depthCompare: "always"
+      }
+    });
+  }
+  createUniformBuffer() {
+    this.uniformBuffer = this.renderer.device.createBuffer({
+      size: 224,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+  }
   setPosition(x, y, z) {
     this.position = [x, y, z];
     this.updateModelMatrix();
   }
-  /**
-   * 获取位置
-   */
   getPosition() {
     return [...this.position];
   }
-  /**
-   * 设置旋转 (欧拉角, 弧度)
-   */
   setRotation(x, y, z) {
     this.rotation = [x, y, z];
     this.updateModelMatrix();
   }
-  /**
-   * 获取旋转
-   */
   getRotation() {
     return [...this.rotation];
   }
-  /**
-   * 设置缩放
-   */
   setScale(x, y, z) {
     this.scale = [x, y, z];
     this.updateModelMatrix();
   }
-  /**
-   * 获取缩放
-   */
   getScale() {
     return [...this.scale];
   }
-  /**
-   * 设置旋转/缩放中心点 (pivot)
-   */
   setPivot(x, y, z) {
     this.pivot = [x, y, z];
     this.updateModelMatrix();
   }
-  /**
-   * 获取旋转/缩放中心点 (pivot)
-   */
   getPivot() {
     return [...this.pivot];
   }
-  /**
-   * 更新模型矩阵
-   * 变换顺序: T * Tp * R * S * Tp^-1
-   * 即: 先移到原点，缩放，旋转，再移回pivot，最后应用用户平移
-   */
   updateModelMatrix() {
     const [tx, ty, tz] = this.position;
     const [rx, ry, rz] = this.rotation;
@@ -5934,148 +5632,18 @@ class GSSplatRenderer {
     this.modelMatrix[14] = finalTz;
     this.modelMatrix[15] = 1;
   }
-  /**
-   * 获取当前模型矩阵
-   */
   getModelMatrix() {
     return this.modelMatrix;
   }
-  /**
-   * 获取当前性能等级
-   */
-  getPerformanceTier() {
-    return this.performanceTier;
-  }
-  /**
-   * 手动设置优化配置
-   */
-  setOptimizationConfig(config) {
-    this.optimizationConfig = { ...this.optimizationConfig, ...config };
-    this.pixelCullThreshold = this.optimizationConfig.pixelCullThreshold;
-    if (config.defaultSHMode !== void 0) {
-      this.shMode = config.defaultSHMode;
-    }
-  }
-  /**
-   * 获取当前优化配置
-   */
-  getOptimizationConfig() {
-    return { ...this.optimizationConfig };
-  }
-  /**
-   * 设置 SH 模式
-   * @param mode L0/L1/L2/L3
-   */
   setSHMode(mode) {
     this.shMode = mode;
   }
-  /**
-   * 获取当前 SH 模式
-   */
   getSHMode() {
     return this.shMode;
   }
-  /**
-   * 设置是否启用 DrawIndirect (剔除优化)
-   * 启用后会在 GPU 上进行可见性剔除，仅绘制可见 splat
-   */
-  setUseDrawIndirect(enabled) {
-    this.useDrawIndirect = enabled;
-  }
-  /**
-   * 设置像素剔除阈值
-   * 屏幕上小于此像素数的 splat 会被剔除
-   * @param threshold 像素阈值，默认 1.0
-   */
   setPixelCullThreshold(threshold) {
     this.pixelCullThreshold = threshold;
   }
-  /**
-   * 创建渲染管线 (L0/L1/L2/L3 四个版本)
-   */
-  createPipelines() {
-    const device = this.renderer.device;
-    const shaderModuleL0 = device.createShaderModule({ code: shaderCodeL0 });
-    const shaderModuleL1 = device.createShaderModule({ code: shaderCodeL1 });
-    const shaderModuleL2 = device.createShaderModule({ code: shaderCodeL2 });
-    const shaderModuleL3 = device.createShaderModule({ code: shaderCodeL3 });
-    this.bindGroupLayout = device.createBindGroupLayout({
-      entries: [
-        {
-          // uniform buffer (view + proj matrices)
-          binding: 0,
-          visibility: GPUShaderStage.VERTEX,
-          buffer: { type: "uniform" }
-        },
-        {
-          // storage buffer (splats array)
-          binding: 1,
-          visibility: GPUShaderStage.VERTEX,
-          buffer: { type: "read-only-storage" }
-        },
-        {
-          // storage buffer (sorted indices)
-          binding: 2,
-          visibility: GPUShaderStage.VERTEX,
-          buffer: { type: "read-only-storage" }
-        }
-      ]
-    });
-    const pipelineLayout = device.createPipelineLayout({
-      bindGroupLayouts: [this.bindGroupLayout]
-    });
-    const basePipelineDesc = {
-      layout: pipelineLayout,
-      primitive: {
-        topology: "triangle-strip"
-      },
-      depthStencil: {
-        format: this.renderer.depthFormat,
-        depthWriteEnabled: false,
-        depthCompare: "always"
-      }
-    };
-    const blendState = {
-      color: {
-        srcFactor: "one",
-        dstFactor: "one-minus-src-alpha",
-        operation: "add"
-      },
-      alpha: {
-        srcFactor: "one",
-        dstFactor: "one-minus-src-alpha",
-        operation: "add"
-      }
-    };
-    const createPipeline = (module) => device.createRenderPipeline({
-      ...basePipelineDesc,
-      vertex: { module, entryPoint: "vs_main", buffers: [] },
-      fragment: {
-        module,
-        entryPoint: "fs_main",
-        targets: [{ format: this.renderer.format, blend: blendState }]
-      }
-    });
-    this.pipelineL0 = createPipeline(shaderModuleL0);
-    this.pipelineL1 = createPipeline(shaderModuleL1);
-    this.pipelineL2 = createPipeline(shaderModuleL2);
-    this.pipelineL3 = createPipeline(shaderModuleL3);
-  }
-  /**
-   * 创建 uniform buffer
-   * 布局: view (64 bytes) + proj (64 bytes) + model (64 bytes) + cameraPos (12 bytes) + padding (4 bytes) + screenSize (8 bytes) + padding (8 bytes) = 224 bytes
-   */
-  createUniformBuffer() {
-    this.uniformBuffer = this.renderer.device.createBuffer({
-      size: 224,
-      // view (64) + proj (64) + model (64) + cameraPos (12) + padding (4) + screenSize (8) + padding (8)
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-  }
-  /**
-   * 设置 splat 数据
-   * @param splats CPU 端的 splat 数组
-   */
   setData(splats) {
     const device = this.renderer.device;
     if (this.splatBuffer) {
@@ -6085,19 +5653,7 @@ class GSSplatRenderer {
       this.sorter.destroy();
       this.sorter = null;
     }
-    splats.length;
-    const maxSplats = this.optimizationConfig.maxVisibleSplats;
-    if (splats.length > maxSplats && maxSplats !== Infinity) {
-      const step = splats.length / maxSplats;
-      const sampledSplats = [];
-      for (let i = 0; i < maxSplats; i++) {
-        const idx = Math.floor(i * step);
-        sampledSplats.push(splats[idx]);
-      }
-      splats = sampledSplats;
-    }
     this.splatCount = splats.length;
-    this.frameCount = 0;
     if (this.splatCount === 0) {
       this.splatBuffer = null;
       this.bindGroup = null;
@@ -6105,12 +5661,10 @@ class GSSplatRenderer {
       return;
     }
     this.boundingBox = this.computeBoundingBox(splats);
-    const useCompact = this.useCompactFormat;
-    const floatCount = useCompact ? SPLAT_COMPACT_FLOAT_COUNT : SPLAT_FLOAT_COUNT;
-    const data = new Float32Array(this.splatCount * floatCount);
+    const data = new Float32Array(this.splatCount * SPLAT_FLOAT_COUNT);
     for (let i = 0; i < this.splatCount; i++) {
       const splat = splats[i];
-      const offset = i * floatCount;
+      const offset = i * SPLAT_FLOAT_COUNT;
       data[offset + 0] = splat.mean[0];
       data[offset + 1] = splat.mean[1];
       data[offset + 2] = splat.mean[2];
@@ -6127,27 +5681,70 @@ class GSSplatRenderer {
       data[offset + 13] = splat.colorDC[1];
       data[offset + 14] = splat.colorDC[2];
       data[offset + 15] = splat.opacity;
-      if (!useCompact) {
-        const shRest = splat.shRest;
-        for (let j = 0; j < 9; j++) {
-          data[offset + 16 + j] = shRest ? shRest[j] : 0;
-        }
-        for (let j = 0; j < 15; j++) {
-          data[offset + 25 + j] = shRest ? shRest[9 + j] : 0;
-        }
-        for (let j = 0; j < 21; j++) {
-          data[offset + 40 + j] = shRest ? shRest[24 + j] : 0;
-        }
-        data[offset + 61] = 0;
-        data[offset + 62] = 0;
-        data[offset + 63] = 0;
+      const shRest = splat.shRest;
+      for (let j = 0; j < 9; j++) {
+        data[offset + 16 + j] = shRest ? shRest[j] : 0;
+      }
+      for (let j = 0; j < 15; j++) {
+        data[offset + 25 + j] = shRest ? shRest[9 + j] : 0;
       }
+      for (let j = 0; j < 21; j++) {
+        data[offset + 40 + j] = shRest ? shRest[24 + j] : 0;
+      }
+      data[offset + 61] = 0;
+      data[offset + 62] = 0;
+      data[offset + 63] = 0;
     }
     this.splatBuffer = device.createBuffer({
       size: data.byteLength,
       usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
     });
-    device.queue.writeBuffer(this.splatBuffer, 0, data);
+    device.queue.writeBuffer(this.splatBuffer, 0, data);
+    this.sorter = new GSSplatSorter(
+      device,
+      this.splatCount,
+      this.splatBuffer,
+      this.uniformBuffer
+    );
+    this.sorter.setScreenSize(this.renderer.width, this.renderer.height);
+    this.sorter.setCullingOptions({
+      nearPlane: this.camera.near,
+      farPlane: this.camera.far,
+      pixelThreshold: this.pixelCullThreshold
+    });
+    this.bindGroup = device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: { buffer: this.splatBuffer } },
+        { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } }
+      ]
+    });
+  }
+  setCompactData(compactData) {
+    const device = this.renderer.device;
+    if (this.splatBuffer) {
+      this.splatBuffer.destroy();
+    }
+    if (this.sorter) {
+      this.sorter.destroy();
+      this.sorter = null;
+    }
+    this.splatCount = compactData.count;
+    if (this.splatCount === 0) {
+      this.splatBuffer = null;
+      this.bindGroup = null;
+      this.boundingBox = null;
+      return;
+    }
+    this.boundingBox = this.computeBoundingBoxFromCompact(compactData);
+    const includeSH = compactData.shCoeffs !== void 0;
+    const gpuData = compactDataToGPUBuffer(compactData, includeSH);
+    this.splatBuffer = device.createBuffer({
+      size: gpuData.byteLength,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    device.queue.writeBuffer(this.splatBuffer, 0, gpuData.buffer);
     this.sorter = new GSSplatSorter(
       device,
       this.splatCount,
@@ -6163,130 +5760,16 @@ class GSSplatRenderer {
     this.bindGroup = device.createBindGroup({
       layout: this.bindGroupLayout,
       entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.uniformBuffer }
-        },
-        {
-          binding: 1,
-          resource: { buffer: this.splatBuffer }
-        },
-        {
-          binding: 2,
-          resource: { buffer: this.sorter.getIndicesBuffer() }
-        }
+        { binding: 0, resource: { buffer: this.uniformBuffer } },
+        { binding: 1, resource: { buffer: this.splatBuffer } },
+        { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } }
       ]
     });
-    (data.byteLength / (1024 * 1024)).toFixed(2);
-  }
-  /**
-   * 设置紧凑格式的 splat 数据（移动端优化）
-   * 直接接受 CompactSplatData，避免创建中间对象
-   * @param compactData 紧凑格式的 splat 数据
-   */
-  setCompactData(compactData) {
-    try {
-      const device = this.renderer.device;
-      if (this.splatBuffer) {
-        this.splatBuffer.destroy();
-      }
-      if (this.sorter) {
-        this.sorter.destroy();
-        this.sorter = null;
-      }
-      this.splatCount = compactData.count;
-      this.frameCount = 0;
-      if (this.splatCount === 0) {
-        this.splatBuffer = null;
-        this.bindGroup = null;
-        this.boundingBox = null;
-        return;
-      }
-      this.boundingBox = this.computeBoundingBoxFromCompact(compactData);
-      const includeSH = compactData.shCoeffs !== void 0;
-      const gpuData = compactDataToGPUBuffer(compactData, includeSH);
-      this.splatBuffer = device.createBuffer({
-        size: gpuData.byteLength,
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-      device.queue.writeBuffer(this.splatBuffer, 0, gpuData.buffer);
-      this.sorter = new GSSplatSorter(
-        device,
-        this.splatCount,
-        this.splatBuffer,
-        this.uniformBuffer
-      );
-      this.sorter.setScreenSize(this.renderer.width, this.renderer.height);
-      this.sorter.setCullingOptions({
-        nearPlane: this.camera.near,
-        farPlane: this.camera.far,
-        pixelThreshold: this.pixelCullThreshold
-      });
-      this.bindGroup = device.createBindGroup({
-        layout: this.bindGroupLayout,
-        entries: [
-          { binding: 0, resource: { buffer: this.uniformBuffer } },
-          { binding: 1, resource: { buffer: this.splatBuffer } },
-          { binding: 2, resource: { buffer: this.sorter.getIndicesBuffer() } }
-        ]
-      });
-      const memoryMB = (gpuData.byteLength / (1024 * 1024)).toFixed(2);
-    } catch (error) {
-      this.splatCount = 0;
-      this.splatBuffer = null;
-      this.bindGroup = null;
-      this.sorter = null;
-    }
-  }
-  /**
-   * 从紧凑数据计算 bounding box
-   */
-  computeBoundingBoxFromCompact(data) {
-    if (data.count === 0) {
-      return { min: [0, 0, 0], max: [0, 0, 0], center: [0, 0, 0], radius: 0 };
-    }
-    const positions = data.positions;
-    const min = [
-      positions[0],
-      positions[1],
-      positions[2]
-    ];
-    const max = [
-      positions[0],
-      positions[1],
-      positions[2]
-    ];
-    for (let i = 1; i < data.count; i++) {
-      const x = positions[i * 3 + 0];
-      const y = positions[i * 3 + 1];
-      const z = positions[i * 3 + 2];
-      min[0] = Math.min(min[0], x);
-      min[1] = Math.min(min[1], y);
-      min[2] = Math.min(min[2], z);
-      max[0] = Math.max(max[0], x);
-      max[1] = Math.max(max[1], y);
-      max[2] = Math.max(max[2], z);
-    }
-    const center = [
-      (min[0] + max[0]) / 2,
-      (min[1] + max[1]) / 2,
-      (min[2] + max[2]) / 2
-    ];
-    const dx = max[0] - min[0];
-    const dy = max[1] - min[1];
-    const dz = max[2] - min[2];
-    const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
-    return { min, max, center, radius };
   }
-  /**
-   * 渲染 splats
-   * @param pass 渲染通道编码器
-   */
   render(pass) {
     if (this.splatCount === 0 || !this.bindGroup || !this.sorter) {
       return;
     }
-    this.frameCount++;
     this.renderer.device.queue.writeBuffer(
       this.uniformBuffer,
       0,
@@ -6318,63 +5801,23 @@ class GSSplatRenderer {
       farPlane: this.camera.far,
       pixelThreshold: this.pixelCullThreshold
     });
-    const isFirstFrame = this.frameCount === 1;
-    const shouldSort = this.optimizationConfig.enableSorting && (isFirstFrame || this.frameCount % this.optimizationConfig.sortEveryNFrames === 0);
-    if (shouldSort) {
-      this.sorter.sort();
-    }
-    const pipelines = [
-      this.pipelineL0,
-      this.pipelineL1,
-      this.pipelineL2,
-      this.pipelineL3
-    ];
-    const pipeline = pipelines[this.shMode];
-    pass.setPipeline(pipeline);
+    this.sorter.sort();
+    pass.setPipeline(this.pipeline);
     pass.setBindGroup(0, this.bindGroup);
-    if (this.useDrawIndirect) {
-      pass.drawIndirect(this.sorter.getDrawIndirectBuffer(), 0);
-    } else {
-      pass.draw(4, this.splatCount);
-    }
+    pass.drawIndirect(this.sorter.getDrawIndirectBuffer(), 0);
   }
-  /**
-   * 获取 splat 数量
-   */
   getSplatCount() {
     return this.splatCount;
   }
-  /**
-   * 获取点云的 bounding box
-   * @returns BoundingBox 或 null（如果没有点云数据）
-   */
   getBoundingBox() {
     return this.boundingBox;
   }
-  /**
-   * 计算点云的 bounding box
-   * @param splats splat 数组
-   * @returns BoundingBox
-   */
   computeBoundingBox(splats) {
     if (splats.length === 0) {
-      return {
-        min: [0, 0, 0],
-        max: [0, 0, 0],
-        center: [0, 0, 0],
-        radius: 0
-      };
+      return { min: [0, 0, 0], max: [0, 0, 0], center: [0, 0, 0], radius: 0 };
     }
-    const min = [
-      splats[0].mean[0],
-      splats[0].mean[1],
-      splats[0].mean[2]
-    ];
-    const max = [
-      splats[0].mean[0],
-      splats[0].mean[1],
-      splats[0].mean[2]
-    ];
+    const min = [splats[0].mean[0], splats[0].mean[1], splats[0].mean[2]];
+    const max = [splats[0].mean[0], splats[0].mean[1], splats[0].mean[2]];
     for (let i = 1; i < splats.length; i++) {
       const [x, y, z] = splats[i].mean;
       min[0] = Math.min(min[0], x);
@@ -6395,30 +5838,46 @@ class GSSplatRenderer {
     const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
     return { min, max, center, radius };
   }
-  // ============================================
-  // IGSSplatRenderer 接口实现
-  // ============================================
-  /**
-   * 是否支持指定的 SH 模式
-   */
+  computeBoundingBoxFromCompact(data) {
+    if (data.count === 0) {
+      return { min: [0, 0, 0], max: [0, 0, 0], center: [0, 0, 0], radius: 0 };
+    }
+    const positions = data.positions;
+    const min = [positions[0], positions[1], positions[2]];
+    const max = [positions[0], positions[1], positions[2]];
+    for (let i = 1; i < data.count; i++) {
+      const x = positions[i * 3 + 0];
+      const y = positions[i * 3 + 1];
+      const z = positions[i * 3 + 2];
+      min[0] = Math.min(min[0], x);
+      min[1] = Math.min(min[1], y);
+      min[2] = Math.min(min[2], z);
+      max[0] = Math.max(max[0], x);
+      max[1] = Math.max(max[1], y);
+      max[2] = Math.max(max[2], z);
+    }
+    const center = [
+      (min[0] + max[0]) / 2,
+      (min[1] + max[1]) / 2,
+      (min[2] + max[2]) / 2
+    ];
+    const dx = max[0] - min[0];
+    const dy = max[1] - min[1];
+    const dz = max[2] - min[2];
+    const radius = Math.sqrt(dx * dx + dy * dy + dz * dz) / 2;
+    return { min, max, center, radius };
+  }
   supportsSHMode(mode) {
-    return mode >= SHMode$1.L0 && mode <= SHMode$1.L3;
+    return mode >= SHMode.L0 && mode <= SHMode.L3;
   }
-  /**
-   * 获取渲染器能力
-   */
   getCapabilities() {
     return {
-      maxSHMode: SHMode$1.L3,
+      maxSHMode: SHMode.L3,
       supportsRawData: true,
       isMobileOptimized: false,
       maxSplatCount: 0
-      // 无限制（受 GPU 内存限制）
     };
   }
-  /**
-   * 销毁资源
-   */
   destroy() {
     if (this.splatBuffer) {
       this.splatBuffer.destroy();
@@ -7679,20 +7138,20 @@ class GSSplatRendererMobile {
    * 获取当前 SH 模式
    */
   getSHMode() {
-    return SHMode$1.L0;
+    return SHMode.L0;
   }
   /**
    * 是否支持指定的 SH 模式
    */
   supportsSHMode(mode) {
-    return mode === SHMode$1.L0;
+    return mode === SHMode.L0;
   }
   /**
    * 获取渲染器能力
    */
   getCapabilities() {
     return {
-      maxSHMode: SHMode$1.L0,
+      maxSHMode: SHMode.L0,
       supportsRawData: false,
       isMobileOptimized: true,
       maxSplatCount: 0
@@ -7988,11 +7447,189 @@ class SceneManager {
   setMeshRangeColor(startIndex, count, r, g, b, a = 1) {
     return this.meshRenderer.setMeshRangeColor(startIndex, count, r, g, b, a);
   }
-  /**
-   * 销毁场景管理器
-   */
-  destroy() {
-    this.clearSplats();
+  /**
+   * 销毁场景管理器
+   */
+  destroy() {
+    this.clearSplats();
+  }
+}
+class SplatTransformProxy {
+  constructor(renderer, center) {
+    __publicField(this, "position");
+    __publicField(this, "rotation");
+    __publicField(this, "scale");
+    __publicField(this, "renderer");
+    __publicField(this, "center");
+    this.renderer = renderer;
+    this.center = [...center];
+    renderer.setPivot(center[0], center[1], center[2]);
+    const pos = renderer.getPosition();
+    const rot = renderer.getRotation();
+    const scl = renderer.getScale();
+    this.position = [
+      pos[0] + center[0],
+      pos[1] + center[1],
+      pos[2] + center[2]
+    ];
+    this.rotation = [...rot];
+    this.scale = [...scl];
+  }
+  setPosition(x, y, z) {
+    this.position = [x, y, z];
+    this.renderer.setPosition(
+      x - this.center[0],
+      y - this.center[1],
+      z - this.center[2]
+    );
+  }
+  setRotation(x, y, z) {
+    this.rotation = [x, y, z];
+    this.renderer.setRotation(x, y, z);
+  }
+  setScale(x, y, z) {
+    this.scale = [x, y, z];
+    this.renderer.setScale(x, y, z);
+  }
+}
+class MeshGroupProxy {
+  constructor(meshes) {
+    __publicField(this, "position");
+    __publicField(this, "rotation");
+    __publicField(this, "scale");
+    __publicField(this, "meshes");
+    this.meshes = meshes;
+    if (meshes.length > 0) {
+      const firstMesh = meshes[0];
+      this.position = [
+        firstMesh.position[0],
+        firstMesh.position[1],
+        firstMesh.position[2]
+      ];
+      this.rotation = [
+        firstMesh.rotation[0],
+        firstMesh.rotation[1],
+        firstMesh.rotation[2]
+      ];
+      this.scale = [
+        firstMesh.scale[0],
+        firstMesh.scale[1],
+        firstMesh.scale[2]
+      ];
+    } else {
+      this.position = [0, 0, 0];
+      this.rotation = [0, 0, 0];
+      this.scale = [1, 1, 1];
+    }
+  }
+  setPosition(x, y, z) {
+    this.position = [x, y, z];
+    for (const mesh of this.meshes) {
+      mesh.setPosition(x, y, z);
+    }
+  }
+  setRotation(x, y, z) {
+    this.rotation = [x, y, z];
+    for (const mesh of this.meshes) {
+      mesh.setRotation(x, y, z);
+    }
+  }
+  setScale(x, y, z) {
+    this.scale = [x, y, z];
+    for (const mesh of this.meshes) {
+      mesh.setScale(x, y, z);
+    }
+  }
+  /**
+   * 获取组合包围盒
+   */
+  getBoundingBox() {
+    if (this.meshes.length === 0) return null;
+    let combinedMin = null;
+    let combinedMax = null;
+    for (const mesh of this.meshes) {
+      const bbox = mesh.getWorldBoundingBox();
+      if (!bbox) continue;
+      if (combinedMin === null || combinedMax === null) {
+        combinedMin = [...bbox.min];
+        combinedMax = [...bbox.max];
+      } else {
+        combinedMin[0] = Math.min(combinedMin[0], bbox.min[0]);
+        combinedMin[1] = Math.min(combinedMin[1], bbox.min[1]);
+        combinedMin[2] = Math.min(combinedMin[2], bbox.min[2]);
+        combinedMax[0] = Math.max(combinedMax[0], bbox.max[0]);
+        combinedMax[1] = Math.max(combinedMax[1], bbox.max[1]);
+        combinedMax[2] = Math.max(combinedMax[2], bbox.max[2]);
+      }
+    }
+    if (combinedMin === null || combinedMax === null) return null;
+    return { min: combinedMin, max: combinedMax };
+  }
+}
+class SplatBoundingBoxProvider {
+  constructor(renderer) {
+    __publicField(this, "renderer");
+    this.renderer = renderer;
+  }
+  getBoundingBox() {
+    const bbox = this.renderer.getBoundingBox();
+    if (!bbox) return null;
+    const position = this.renderer.getPosition();
+    const rotation = this.renderer.getRotation();
+    const scale = this.renderer.getScale();
+    const pivot = this.renderer.getPivot();
+    const corners = [
+      [bbox.min[0], bbox.min[1], bbox.min[2]],
+      [bbox.max[0], bbox.min[1], bbox.min[2]],
+      [bbox.min[0], bbox.max[1], bbox.min[2]],
+      [bbox.max[0], bbox.max[1], bbox.min[2]],
+      [bbox.min[0], bbox.min[1], bbox.max[2]],
+      [bbox.max[0], bbox.min[1], bbox.max[2]],
+      [bbox.min[0], bbox.max[1], bbox.max[2]],
+      [bbox.max[0], bbox.max[1], bbox.max[2]]
+    ];
+    const [sx, sy, sz] = scale;
+    const [rx, ry, rz] = rotation;
+    const [tx, ty, tz] = position;
+    const [px, py, pz] = pivot;
+    const cx = Math.cos(rx), sx1 = Math.sin(rx);
+    const cy = Math.cos(ry), sy1 = Math.sin(ry);
+    const cz = Math.cos(rz), sz1 = Math.sin(rz);
+    const r00 = cy * cz;
+    const r01 = sx1 * sy1 * cz - cx * sz1;
+    const r02 = cx * sy1 * cz + sx1 * sz1;
+    const r10 = cy * sz1;
+    const r11 = sx1 * sy1 * sz1 + cx * cz;
+    const r12 = cx * sy1 * sz1 - sx1 * cz;
+    const r20 = -sy1;
+    const r21 = sx1 * cy;
+    const r22 = cx * cy;
+    const rs00 = r00 * sx, rs01 = r01 * sy, rs02 = r02 * sz;
+    const rs10 = r10 * sx, rs11 = r11 * sy, rs12 = r12 * sz;
+    const rs20 = r20 * sx, rs21 = r21 * sy, rs22 = r22 * sz;
+    const dpx = px - (rs00 * px + rs01 * py + rs02 * pz);
+    const dpy = py - (rs10 * px + rs11 * py + rs12 * pz);
+    const dpz = pz - (rs20 * px + rs21 * py + rs22 * pz);
+    const finalTx = tx + dpx;
+    const finalTy = ty + dpy;
+    const finalTz = tz + dpz;
+    let minX = Infinity, minY = Infinity, minZ = Infinity;
+    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+    for (const [x, y, z] of corners) {
+      const wx = rs00 * x + rs01 * y + rs02 * z + finalTx;
+      const wy = rs10 * x + rs11 * y + rs12 * z + finalTy;
+      const wz = rs20 * x + rs21 * y + rs22 * z + finalTz;
+      minX = Math.min(minX, wx);
+      minY = Math.min(minY, wy);
+      minZ = Math.min(minZ, wz);
+      maxX = Math.max(maxX, wx);
+      maxY = Math.max(maxY, wy);
+      maxZ = Math.max(maxZ, wz);
+    }
+    return {
+      min: [minX, minY, minZ],
+      max: [maxX, maxY, maxZ]
+    };
   }
 }
 class Vec3 {
@@ -11177,181 +10814,6 @@ class TransformGizmoV2 {
     this.bindGroupLayout = null;
   }
 }
-class SplatTransformProxy {
-  constructor(renderer, center) {
-    __publicField(this, "position");
-    __publicField(this, "rotation");
-    __publicField(this, "scale");
-    __publicField(this, "renderer");
-    __publicField(this, "center");
-    this.renderer = renderer;
-    this.center = [...center];
-    renderer.setPivot(center[0], center[1], center[2]);
-    const pos = renderer.getPosition();
-    const rot = renderer.getRotation();
-    const scl = renderer.getScale();
-    this.position = [
-      pos[0] + center[0],
-      pos[1] + center[1],
-      pos[2] + center[2]
-    ];
-    this.rotation = [...rot];
-    this.scale = [...scl];
-  }
-  setPosition(x, y, z) {
-    this.position = [x, y, z];
-    this.renderer.setPosition(
-      x - this.center[0],
-      y - this.center[1],
-      z - this.center[2]
-    );
-  }
-  setRotation(x, y, z) {
-    this.rotation = [x, y, z];
-    this.renderer.setRotation(x, y, z);
-  }
-  setScale(x, y, z) {
-    this.scale = [x, y, z];
-    this.renderer.setScale(x, y, z);
-  }
-}
-class MeshGroupProxy {
-  constructor(meshes) {
-    __publicField(this, "position");
-    __publicField(this, "rotation");
-    __publicField(this, "scale");
-    __publicField(this, "meshes");
-    this.meshes = meshes;
-    if (meshes.length > 0) {
-      const firstMesh = meshes[0];
-      this.position = [
-        firstMesh.position[0],
-        firstMesh.position[1],
-        firstMesh.position[2]
-      ];
-      this.rotation = [
-        firstMesh.rotation[0],
-        firstMesh.rotation[1],
-        firstMesh.rotation[2]
-      ];
-      this.scale = [
-        firstMesh.scale[0],
-        firstMesh.scale[1],
-        firstMesh.scale[2]
-      ];
-    } else {
-      this.position = [0, 0, 0];
-      this.rotation = [0, 0, 0];
-      this.scale = [1, 1, 1];
-    }
-  }
-  setPosition(x, y, z) {
-    this.position = [x, y, z];
-    for (const mesh of this.meshes) {
-      mesh.setPosition(x, y, z);
-    }
-  }
-  setRotation(x, y, z) {
-    this.rotation = [x, y, z];
-    for (const mesh of this.meshes) {
-      mesh.setRotation(x, y, z);
-    }
-  }
-  setScale(x, y, z) {
-    this.scale = [x, y, z];
-    for (const mesh of this.meshes) {
-      mesh.setScale(x, y, z);
-    }
-  }
-  getBoundingBox() {
-    if (this.meshes.length === 0) return null;
-    let combinedMin = null;
-    let combinedMax = null;
-    for (const mesh of this.meshes) {
-      const bbox = mesh.getWorldBoundingBox();
-      if (!bbox) continue;
-      if (combinedMin === null || combinedMax === null) {
-        combinedMin = [...bbox.min];
-        combinedMax = [...bbox.max];
-      } else {
-        combinedMin[0] = Math.min(combinedMin[0], bbox.min[0]);
-        combinedMin[1] = Math.min(combinedMin[1], bbox.min[1]);
-        combinedMin[2] = Math.min(combinedMin[2], bbox.min[2]);
-        combinedMax[0] = Math.max(combinedMax[0], bbox.max[0]);
-        combinedMax[1] = Math.max(combinedMax[1], bbox.max[1]);
-        combinedMax[2] = Math.max(combinedMax[2], bbox.max[2]);
-      }
-    }
-    if (combinedMin === null || combinedMax === null) return null;
-    return { min: combinedMin, max: combinedMax };
-  }
-}
-class SplatBoundingBoxProvider {
-  constructor(renderer) {
-    __publicField(this, "renderer");
-    this.renderer = renderer;
-  }
-  getBoundingBox() {
-    const bbox = this.renderer.getBoundingBox();
-    if (!bbox) return null;
-    const position = this.renderer.getPosition();
-    const rotation = this.renderer.getRotation();
-    const scale = this.renderer.getScale();
-    const pivot = this.renderer.getPivot();
-    const corners = [
-      [bbox.min[0], bbox.min[1], bbox.min[2]],
-      [bbox.max[0], bbox.min[1], bbox.min[2]],
-      [bbox.min[0], bbox.max[1], bbox.min[2]],
-      [bbox.max[0], bbox.max[1], bbox.min[2]],
-      [bbox.min[0], bbox.min[1], bbox.max[2]],
-      [bbox.max[0], bbox.min[1], bbox.max[2]],
-      [bbox.min[0], bbox.max[1], bbox.max[2]],
-      [bbox.max[0], bbox.max[1], bbox.max[2]]
-    ];
-    const [sx, sy, sz] = scale;
-    const [rx, ry, rz] = rotation;
-    const [tx, ty, tz] = position;
-    const [px, py, pz] = pivot;
-    const cx = Math.cos(rx), sx1 = Math.sin(rx);
-    const cy = Math.cos(ry), sy1 = Math.sin(ry);
-    const cz = Math.cos(rz), sz1 = Math.sin(rz);
-    const r00 = cy * cz;
-    const r01 = sx1 * sy1 * cz - cx * sz1;
-    const r02 = cx * sy1 * cz + sx1 * sz1;
-    const r10 = cy * sz1;
-    const r11 = sx1 * sy1 * sz1 + cx * cz;
-    const r12 = cx * sy1 * sz1 - sx1 * cz;
-    const r20 = -sy1;
-    const r21 = sx1 * cy;
-    const r22 = cx * cy;
-    const rs00 = r00 * sx, rs01 = r01 * sy, rs02 = r02 * sz;
-    const rs10 = r10 * sx, rs11 = r11 * sy, rs12 = r12 * sz;
-    const rs20 = r20 * sx, rs21 = r21 * sy, rs22 = r22 * sz;
-    const dpx = px - (rs00 * px + rs01 * py + rs02 * pz);
-    const dpy = py - (rs10 * px + rs11 * py + rs12 * pz);
-    const dpz = pz - (rs20 * px + rs21 * py + rs22 * pz);
-    const finalTx = tx + dpx;
-    const finalTy = ty + dpy;
-    const finalTz = tz + dpz;
-    let minX = Infinity, minY = Infinity, minZ = Infinity;
-    let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
-    for (const [x, y, z] of corners) {
-      const wx = rs00 * x + rs01 * y + rs02 * z + finalTx;
-      const wy = rs10 * x + rs11 * y + rs12 * z + finalTy;
-      const wz = rs20 * x + rs21 * y + rs22 * z + finalTz;
-      minX = Math.min(minX, wx);
-      minY = Math.min(minY, wy);
-      minZ = Math.min(minZ, wz);
-      maxX = Math.max(maxX, wx);
-      maxY = Math.max(maxY, wy);
-      maxZ = Math.max(maxZ, wz);
-    }
-    return {
-      min: [minX, minY, minZ],
-      max: [maxX, maxY, maxZ]
-    };
-  }
-}
 class GizmoManager {
   constructor(renderer, camera, canvas, controls) {
     __publicField(this, "renderer");
@@ -11511,15 +10973,6 @@ class GizmoManager {
     this.boundingBoxRenderer.destroy();
   }
 }
-function isMobileDevice() {
-  if (typeof navigator === "undefined") return false;
-  const ua = navigator.userAgent || navigator.vendor || window.opera || "";
-  const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(ua.toLowerCase());
-  const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-  const isSmallScreen = window.innerWidth <= 768;
-  const isIPadAsMac = navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
-  return isMobileUA || isIPadAsMac || hasTouch && isSmallScreen;
-}
 class App {
   constructor(canvas) {
     __publicField(this, "canvas");
@@ -11637,7 +11090,6 @@ class App {
       } else {
         gsRenderer = new GSSplatRenderer(this.renderer, this.camera);
         this.useMobileRenderer = false;
-        const tier = gsRenderer.getPerformanceTier();
         const compactData = await this.parsePLYBuffer(buffer, {
           maxSplats: Infinity,
           loadSH: true,
@@ -11974,6 +11426,8 @@ export {
   App,
   BoundingBoxRenderer,
   Camera,
+  DEFAULT_MATERIAL,
+  DEFAULT_OBJ_MATERIAL,
   GLBLoader,
   SHMode as GSSHMode,
   GSSplatRenderer,
@@ -11992,21 +11446,33 @@ export {
   OBJLoader,
   OBJParser,
   OrbitControls,
-  PerformanceTier,
   Renderer,
+  SHMode,
   SceneManager,
   SplatBoundingBoxProvider,
   SplatTransformProxy,
+  TextureCache,
   TransformGizmoV2,
   ViewportGizmo,
   calculateTextureDimensions,
   compactDataToGPUBuffer,
   compressSplatsToTextures,
+  computeBoundingBox$1 as computeBoundingBox,
+  createBoundingBoxFromMinMax,
+  createTextureFromImageBitmap,
   deserializeSplat,
   destroyCompressedTextures,
+  getRecommendedDPR,
+  isMobileDevice,
+  isWebGPUSupported,
   loadPLY,
   loadPLYMobile,
   loadSplat,
-  parsePLYBuffer
+  loadTextureFromBlob,
+  loadTextureFromBuffer,
+  loadTextureFromURL,
+  mergeBoundingBoxes,
+  parsePLYBuffer,
+  transformBoundingBox
 };
 //# sourceMappingURL=3dgs-lib.js.map