@spatialwalk/avatarkit 1.0.0-beta.32 → 1.0.0-beta.34

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.0-beta.34] - 2025-12-16
+
+### ✨ New Features
+- **Avatar Transform API** - Added `setTransform` method to `AvatarView` for controlling avatar position and scale within the canvas. Supports normalized coordinates (-1 to 1) for position and scale factor.
+
 ## [1.0.0-beta.32] - 2025-12-16
 
 ### 🔄 Breaking Changes

package/README.md

@@ -292,6 +292,12 @@ const avatarView = new AvatarView(avatar, container)
 // Wait for first frame to render
 await avatarView.ready // Promise that resolves when the first frame is rendered
 
+// Set avatar transform (position and scale)
+avatarView.setTransform(x, y, scale)
+// - x: Horizontal offset in normalized coordinates (-1 to 1, where -1 = left edge, 0 = center, 1 = right edge)
+// - y: Vertical offset in normalized coordinates (-1 to 1, where -1 = bottom edge, 0 = center, 1 = top edge)
+// - scale: Scale factor (1.0 = original size, 2.0 = double size, 0.5 = half size)
+
 // Cleanup resources (must be called before switching characters)
 avatarView.dispose()
 ```
@@ -389,6 +395,19 @@ avatarView.avatarController.onConversationState = (state: ConversationState) =>
 avatarView.avatarController.onError = (error: Error) => {}
 ```
 
+#### Avatar Transform Methods
+
+```typescript
+// Set avatar transform (position and scale in canvas)
+avatarView.setTransform(x, y, scale)
+// - x: Horizontal offset in normalized coordinates (-1 to 1, where -1 = left edge, 0 = center, 1 = right edge)
+// - y: Vertical offset in normalized coordinates (-1 to 1, where -1 = bottom edge, 0 = center, 1 = top edge)
+// - scale: Scale factor (1.0 = original size, 2.0 = double size, 0.5 = half size)
+// Example:
+avatarView.setTransform(0, 0, 1.0)  // Center, original size
+avatarView.setTransform(0.5, 0, 2.0) // Right half, double size
+```
+
 **Important Notes:**
 - `start()` and `close()` are only available in SDK mode
 - `yieldAudioData()` and `yieldFramesData()` are only available in Host mode

package/dist/{StreamingAudioPlayer-TiKq7LEP.js → StreamingAudioPlayer-D_anvcr1.js}

@@ -1,7 +1,7 @@
 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);
-import { A as APP_CONFIG, e as errorToMessage, l as logEvent, a as logger } from "./index-CFQb9r1N.js";
+import { A as APP_CONFIG, e as errorToMessage, l as logEvent, a as logger } from "./index-D8QhzqfR.js";
 class StreamingAudioPlayer {
   constructor(options) {
     __publicField(this, "audioContext", null);

package/dist/core/AvatarView.d.ts

@@ -61,4 +61,5 @@ export declare class AvatarView {
     get isOpaque(): boolean;
     set isOpaque(value: boolean);
     setBackgroundImage(image: HTMLImageElement | string | null): void;
+    setTransform(x: number, y: number, scale: number): void;
 }

package/dist/{index-CFQb9r1N.js → index-D8QhzqfR.js}

@@ -2977,7 +2977,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-TiKq7LEP.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-D_anvcr1.js");
     this.streamingPlayer = new StreamingAudioPlayer({
       sampleRate: APP_CONFIG.audio.sampleRate,
       channelCount: 1,
@@ -4378,7 +4378,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.32");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.34");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 class EventEmitter {
@@ -6328,6 +6328,8 @@ function reorderPackedData(packedData, sortOrder) {
 }
 const fragmentShaderSource = "#version 300 es\nprecision highp float;\n\nin vec2 v_relativePosition;\nin vec4 v_color;\n\nout vec4 fragColor;\n\nconst float BOUNDS_RADIUS = 3.0;\nconst float BOUNDS_RADIUS_SQUARED = BOUNDS_RADIUS * BOUNDS_RADIUS;\n\nfloat splatFragmentAlpha(vec2 relativePosition, float splatAlpha) {\n    // ✅ 修复：完全匹配MetalSplatter的计算方式\n    float negativeMagnitudeSquared = -dot(relativePosition, relativePosition);\n\n    // 边界检查：超出椭圆边界的点被剔除\n    if (negativeMagnitudeSquared < -BOUNDS_RADIUS_SQUARED) {\n        return 0.0;\n    }\n\n    // ✅ 修复：高斯衰减，使用MetalSplatter的公式 exp(0.5 * negative)\n    return exp(0.5 * negativeMagnitudeSquared) * splatAlpha;\n}\n\nvoid main() {\n    float alpha = splatFragmentAlpha(v_relativePosition, v_color.a);\n\n    // ✅ 优化：提前丢弃几乎透明的片段（提升性能和质量，对齐 Android SDK）\n    if (alpha < 0.001) {\n        discard;\n    }\n\n    // 预乘 alpha 输出（匹配 premultipliedAlpha: true）\n    // 颜色值需要乘以 alpha，这样 WebGL 才能正确混合\n    fragColor = vec4(v_color.rgb * alpha, alpha);\n}";
 const vertexShaderSource = "#version 300 es\nprecision highp float;\n\n// 基础四边形顶点属性（共享4个顶点）\nlayout(location = 0) in vec2 a_quadVertex;      // (-1,-1), (-1,1), (1,-1), (1,1)\n\n// 实例化属性（每个splat实例）\nlayout(location = 1) in vec3 a_position;        // splat中心位置\nlayout(location = 2) in vec4 a_color;           // RGBA颜色\nlayout(location = 3) in vec3 a_covA;            // 协方差矩阵上三角\nlayout(location = 4) in vec3 a_covB;            // 协方差矩阵下三角\n\n// Uniform变量\nuniform mat4 u_viewMatrix;\nuniform mat4 u_projectionMatrix;\nuniform vec2 u_screenSize;\nuniform int u_enableFrustumCulling;\n\n// 输出到片段着色器\nout vec2 v_relativePosition;\nout vec4 v_color;\n\n// 常量定义\nconst float BOUNDS_RADIUS = 3.0;\n\n/**\n * 计算2D协方差矩阵（复刻Metal版本）\n */\nvec3 calcCovariance2D(vec3 viewPos, vec3 cov3Da, vec3 cov3Db, mat4 viewMatrix, mat4 projectionMatrix, vec2 screenSize) {\n    float invViewPosZ = 1.0 / viewPos.z;\n    float invViewPosZSquared = invViewPosZ * invViewPosZ;\n\n    // FOV限制\n    float tanHalfFovX = 1.0 / projectionMatrix[0][0];\n    float tanHalfFovY = 1.0 / projectionMatrix[1][1];\n    float limX = 1.3 * tanHalfFovX;\n    float limY = 1.3 * tanHalfFovY;\n\n    viewPos.x = clamp(viewPos.x * invViewPosZ, -limX, limX) * viewPos.z;\n    viewPos.y = clamp(viewPos.y * invViewPosZ, -limY, limY) * viewPos.z;\n\n    // 焦距计算\n    float focalX = screenSize.x * projectionMatrix[0][0] / 2.0;\n    float focalY = screenSize.y * projectionMatrix[1][1] / 2.0;\n\n    // 雅可比矩阵 J\n    mat3 J = mat3(\n        focalX * invViewPosZ, 0.0, 0.0,\n        0.0, focalY * invViewPosZ, 0.0,\n        -(focalX * viewPos.x) * invViewPosZSquared, -(focalY * viewPos.y) * invViewPosZSquared, 0.0\n    );\n\n    // 视图变换矩阵 W (仅旋转部分) - 对齐 Android SDK，不使用转置\n    mat3 W = mat3(viewMatrix[0].xyz, viewMatrix[1].xyz, viewMatrix[2].xyz);\n\n    // 投影变换 T = J * W\n    mat3 T = J * W;\n\n    // 3D协方差矩阵 Vrk\n    mat3 Vrk = mat3(\n        cov3Da.x, cov3Da.y, cov3Da.z,\n        cov3Da.y, cov3Db.x, cov3Db.y,\n        cov3Da.z, cov3Db.y, cov3Db.z\n    );\n\n    // 2D协方差矩阵\n    mat3 cov = T * Vrk * transpose(T);\n\n    // 低通滤波器\n    cov[0][0] += 0.3;\n    cov[1][1] += 0.3;\n\n    return vec3(cov[0][0], cov[0][1], cov[1][1]);\n}\n\n/**\n * 分解协方差矩阵\n */\nvoid decomposeCovariance(vec3 cov2D, out vec2 v1, out vec2 v2) {\n    float a = cov2D.x;\n    float b = cov2D.y;\n    float d = cov2D.z;\n\n    float det = a * d - b * b;\n    float trace = a + d;\n\n    float mean = 0.5 * trace;\n    float dist = max(0.1, sqrt(mean * mean - det));\n\n    // 特征值\n    float lambda1 = mean + dist;\n    float lambda2 = mean - dist;\n\n    // 确保特征值为正\n    lambda1 = max(lambda1, 0.01);\n    lambda2 = max(lambda2, 0.01);\n\n    // 特征向量 - 完全复刻MetalSplatter的算法\n    vec2 eigenvector1;\n    if (abs(b) < 1e-6) {\n        eigenvector1 = (a > d) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n    } else {\n        // ✅ 修复：使用MetalSplatter的公式 (b, d - lambda2) 而不是 (b, lambda1 - a)\n        eigenvector1 = normalize(vec2(b, d - lambda2));\n    }\n\n    // ✅ 修复：正交特征向量，使用MetalSplatter的方向 (y, -x) 而不是 (-y, x)\n    vec2 eigenvector2 = vec2(eigenvector1.y, -eigenvector1.x);\n\n    v1 = eigenvector1 * sqrt(lambda1);\n    v2 = eigenvector2 * sqrt(lambda2);\n}\n\nvoid main() {\n    // 直接使用原始位置数据，不进行硬编码缩放\n    vec3 scaledPosition = a_position;\n\n    // 转换到视图空间\n    vec4 viewPosition4 = u_viewMatrix * vec4(scaledPosition, 1.0);\n    vec3 viewPosition3 = viewPosition4.xyz;\n\n    // 计算2D协方差矩阵\n    vec3 cov2D = calcCovariance2D(viewPosition3, a_covA, a_covB, u_viewMatrix, u_projectionMatrix, u_screenSize);\n\n    // 分解协方差矩阵\n    vec2 axis1, axis2;\n    decomposeCovariance(cov2D, axis1, axis2);\n\n    // 投影到屏幕空间\n    vec4 projectedCenter = u_projectionMatrix * viewPosition4;\n\n    // 视锥体剔除（对齐MetalSplatter边界，可调试禁用）\n    if (u_enableFrustumCulling == 1) {\n        float bounds = 1.2 * projectedCenter.w;\n        if (projectedCenter.z < 0.0 ||\n            projectedCenter.z > projectedCenter.w ||\n            projectedCenter.x < -bounds ||\n            projectedCenter.x > bounds ||\n            projectedCenter.y < -bounds ||\n            projectedCenter.y > bounds) {\n            // 剔除到屏幕外\n            gl_Position = vec4(1.0, 1.0, 0.0, 1.0);\n            return;\n        }\n    }\n\n    // 使用实例化的四边形顶点\n    vec2 relativeCoord = a_quadVertex;\n\n    // 计算椭圆变换后的相对位置（像素单位）\n    vec2 ellipseRelativePos = relativeCoord.x * axis1 + relativeCoord.y * axis2;\n\n    // 计算屏幕空间偏移\n    vec2 screenSizeFloat = u_screenSize;\n    vec2 projectedScreenDelta = ellipseRelativePos * 2.0 * BOUNDS_RADIUS / screenSizeFloat;\n\n    // 最终顶点位置\n    gl_Position = vec4(\n        projectedCenter.x + projectedScreenDelta.x * projectedCenter.w,\n        projectedCenter.y + projectedScreenDelta.y * projectedCenter.w,\n        projectedCenter.z,\n        projectedCenter.w\n    );\n\n    // 传递标准化坐标给片段着色器（椭圆内[-1,1]范围）\n    v_relativePosition = relativeCoord * BOUNDS_RADIUS;\n    v_color = a_color;\n}";
+const blitVertexShaderSource = "#version 300 es\nprecision highp float;\n\n// 全屏四边形顶点（NDC坐标）\nin vec2 a_position;\nin vec2 a_texCoord;\n\nout vec2 v_texCoord;\n\nuniform vec2 u_offset; // 屏幕空间偏移（NDC坐标）\nuniform float u_scale; // 缩放因子\n\nvoid main() {\n  // 以中心为基准的缩放和偏移\n  // NDC 坐标范围是 [-1, 1]，中心是 (0, 0)\n  // 1. 先缩放（以中心为基准，所以直接缩放即可）\n  // 2. 然后应用偏移\n  vec2 pos = a_position * u_scale + u_offset;\n  gl_Position = vec4(pos, 0.0, 1.0);\n  // WebGL framebuffer 纹理坐标不需要翻转（framebuffer 的纹理坐标系统与屏幕坐标一致）\n  v_texCoord = a_texCoord;\n}\n\n";
+const blitFragmentShaderSource = "#version 300 es\nprecision highp float;\n\nin vec2 v_texCoord;\nout vec4 fragColor;\n\nuniform sampler2D u_texture;\n\nvoid main() {\n  fragColor = texture(u_texture, v_texCoord);\n}\n\n";
 class WebGLRenderer {
   constructor(canvas, backgroundColor, alpha = true) {
     __publicField(this, "canvas");
@@ -6342,6 +6344,16 @@ class WebGLRenderer {
     __publicField(this, "splatCount");
     __publicField(this, "isInitialized");
     __publicField(this, "splatBufferSize");
+    __publicField(this, "framebuffer", null);
+    __publicField(this, "renderTexture", null);
+    __publicField(this, "depthBuffer", null);
+    __publicField(this, "framebufferWidth", 0);
+    __publicField(this, "framebufferHeight", 0);
+    __publicField(this, "blitShaderProgram", null);
+    __publicField(this, "blitUniformLocations", { offset: null, scale: null, texture: null });
+    __publicField(this, "blitAttributeLocations", { position: 0, texCoord: 0 });
+    __publicField(this, "blitQuadBuffer", null);
+    __publicField(this, "blitVAO", null);
     __publicField(this, "alpha");
     this.canvas = canvas;
     this.backgroundColor = backgroundColor || [0, 0, 0, 0];
@@ -6374,6 +6386,7 @@ class WebGLRenderer {
       this.setupShaderLocations();
       this.setupWebGLState();
       this.createBuffers();
+      this.createBlitShader(gl);
       this.isInitialized = true;
     } catch (error) {
       logger.error(`WebGLRenderer initialize failed: ${error instanceof Error ? error.message : String(error)}`);
@@ -6521,22 +6534,28 @@ class WebGLRenderer {
     );
     gl.vertexAttribDivisor(this.attributeLocations.covB, 1);
   }
-  render(viewMatrix, projectionMatrix, screenSize) {
+  render(viewMatrix, projectionMatrix, screenSize, transform) {
     if (!this.isInitialized || this.splatCount === 0) {
       return;
     }
     const gl = this.gl;
     if (!gl)
       throw new Error("WebGL context not initialized");
-    gl.viewport(0, 0, screenSize[0], screenSize[1]);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    gl.useProgram(this.shaderProgram);
-    gl.uniformMatrix4fv(this.uniformLocations.viewMatrix, false, viewMatrix);
-    gl.uniformMatrix4fv(this.uniformLocations.projectionMatrix, false, projectionMatrix);
-    gl.uniform2fv(this.uniformLocations.screenSize, screenSize);
-    gl.uniform1i(this.uniformLocations.enableFrustumCulling, 1);
-    this.setupVertexAttributes();
-    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, this.splatCount);
+    const [width, height] = screenSize;
+    const needsTransform = transform && (transform.x !== 0 || transform.y !== 0 || transform.scale !== 1);
+    if (needsTransform) {
+      if (!this.framebuffer || this.framebufferWidth !== width || this.framebufferHeight !== height) {
+        this.createFramebuffer(width, height);
+      }
+      gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+      this.render3DGS(gl, viewMatrix, projectionMatrix, screenSize, width, height);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, width, height);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+      this.blitToScreen(transform);
+    } else {
+      this.render3DGS(gl, viewMatrix, projectionMatrix, screenSize, width, height);
+    }
   }
   createShaderProgram(gl) {
     const vertexShader = gl.createShader(gl.VERTEX_SHADER);
@@ -6593,6 +6612,174 @@ class WebGLRenderer {
       );
     }
   }
+  render3DGS(gl, viewMatrix, projectionMatrix, screenSize, width, height) {
+    gl.viewport(0, 0, width, height);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.disable(gl.DEPTH_TEST);
+    gl.depthMask(true);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.useProgram(this.shaderProgram);
+    gl.uniformMatrix4fv(this.uniformLocations.viewMatrix, false, viewMatrix);
+    gl.uniformMatrix4fv(this.uniformLocations.projectionMatrix, false, projectionMatrix);
+    gl.uniform2fv(this.uniformLocations.screenSize, screenSize);
+    gl.uniform1i(this.uniformLocations.enableFrustumCulling, 1);
+    this.setupVertexAttributes();
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, this.splatCount);
+  }
+  createFramebuffer(width, height) {
+    const gl = this.gl;
+    if (!gl)
+      return;
+    if (this.framebuffer) {
+      gl.deleteFramebuffer(this.framebuffer);
+    }
+    if (this.renderTexture) {
+      gl.deleteTexture(this.renderTexture);
+    }
+    if (this.depthBuffer) {
+      gl.deleteRenderbuffer(this.depthBuffer);
+    }
+    this.renderTexture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.renderTexture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.depthBuffer = gl.createRenderbuffer();
+    gl.bindRenderbuffer(gl.RENDERBUFFER, this.depthBuffer);
+    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT24, width, height);
+    this.framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.renderTexture, 0);
+    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.depthBuffer);
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    if (status !== gl.FRAMEBUFFER_COMPLETE) {
+      const statusName = {
+        [gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT]: "INCOMPLETE_ATTACHMENT",
+        [gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT]: "INCOMPLETE_MISSING_ATTACHMENT",
+        [gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS]: "INCOMPLETE_DIMENSIONS",
+        [gl.FRAMEBUFFER_UNSUPPORTED]: "UNSUPPORTED"
+      }[status] || `UNKNOWN(${status})`;
+      logger.error(`[WebGLRenderer] Framebuffer incomplete: ${statusName}`);
+      throw new Error(`Framebuffer incomplete: ${statusName}`);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    this.framebufferWidth = width;
+    this.framebufferHeight = height;
+  }
+  createBlitShader(gl) {
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    if (!vertexShader)
+      throw new Error("Failed to create blit vertex shader");
+    gl.shaderSource(vertexShader, blitVertexShaderSource);
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(vertexShader);
+      gl.deleteShader(vertexShader);
+      throw new Error(`Blit vertex shader compilation failed: ${info}`);
+    }
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragmentShader) {
+      gl.deleteShader(vertexShader);
+      throw new Error("Failed to create blit fragment shader");
+    }
+    gl.shaderSource(fragmentShader, blitFragmentShaderSource);
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+      const info = gl.getShaderInfoLog(fragmentShader);
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      throw new Error(`Blit fragment shader compilation failed: ${info}`);
+    }
+    this.blitShaderProgram = gl.createProgram();
+    if (!this.blitShaderProgram) {
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      throw new Error("Failed to create blit shader program");
+    }
+    gl.attachShader(this.blitShaderProgram, vertexShader);
+    gl.attachShader(this.blitShaderProgram, fragmentShader);
+    gl.linkProgram(this.blitShaderProgram);
+    if (!gl.getProgramParameter(this.blitShaderProgram, gl.LINK_STATUS)) {
+      const info = gl.getProgramInfoLog(this.blitShaderProgram);
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      gl.deleteProgram(this.blitShaderProgram);
+      this.blitShaderProgram = null;
+      throw new Error(`Blit shader program linking failed: ${info}`);
+    }
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+    this.blitUniformLocations.offset = gl.getUniformLocation(this.blitShaderProgram, "u_offset");
+    this.blitUniformLocations.scale = gl.getUniformLocation(this.blitShaderProgram, "u_scale");
+    this.blitUniformLocations.texture = gl.getUniformLocation(this.blitShaderProgram, "u_texture");
+    this.blitAttributeLocations.position = gl.getAttribLocation(this.blitShaderProgram, "a_position");
+    this.blitAttributeLocations.texCoord = gl.getAttribLocation(this.blitShaderProgram, "a_texCoord");
+    if (!this.blitUniformLocations.offset || !this.blitUniformLocations.scale || !this.blitUniformLocations.texture) {
+      throw new Error("[WebGLRenderer] Failed to get blit shader uniform locations");
+    }
+    if (this.blitAttributeLocations.position === -1 || this.blitAttributeLocations.texCoord === -1) {
+      throw new Error("[WebGLRenderer] Failed to get blit shader attribute locations");
+    }
+    this.blitVAO = gl.createVertexArray();
+    gl.bindVertexArray(this.blitVAO);
+    const quadData = new Float32Array([
+      -1,
+      -1,
+      0,
+      0,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      1,
+      1
+    ]);
+    this.blitQuadBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.blitQuadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, quadData, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(this.blitAttributeLocations.position);
+    gl.vertexAttribPointer(this.blitAttributeLocations.position, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(this.blitAttributeLocations.texCoord);
+    gl.vertexAttribPointer(this.blitAttributeLocations.texCoord, 2, gl.FLOAT, false, 16, 8);
+    gl.bindVertexArray(null);
+  }
+  blitToScreen(transform) {
+    const gl = this.gl;
+    if (!gl || !this.blitShaderProgram || !this.renderTexture || !this.blitVAO) {
+      logger.error(`[WebGLRenderer] Blit failed: gl=${!!gl}, shader=${!!this.blitShaderProgram}, texture=${!!this.renderTexture}, VAO=${!!this.blitVAO}`);
+      return;
+    }
+    gl.useProgram(this.blitShaderProgram);
+    const wasBlendEnabled = gl.isEnabled(gl.BLEND);
+    const wasDepthTestEnabled = gl.isEnabled(gl.DEPTH_TEST);
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.BLEND);
+    gl.bindVertexArray(this.blitVAO);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.renderTexture);
+    gl.uniform1i(this.blitUniformLocations.texture, 0);
+    const offsetXNDC = transform.x;
+    const offsetYNDC = -transform.y;
+    gl.uniform2f(this.blitUniformLocations.offset, offsetXNDC, offsetYNDC);
+    gl.uniform1f(this.blitUniformLocations.scale, transform.scale);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    gl.bindVertexArray(null);
+    if (wasDepthTestEnabled) {
+      gl.enable(gl.DEPTH_TEST);
+    }
+    if (wasBlendEnabled) {
+      gl.enable(gl.BLEND);
+    }
+  }
   dispose() {
     if (!this.gl)
       return;
@@ -6601,8 +6788,22 @@ class WebGLRenderer {
       gl.deleteBuffer(this.splatBuffer);
     if (this.quadVertexBuffer)
       gl.deleteBuffer(this.quadVertexBuffer);
+    if (this.blitQuadBuffer)
+      gl.deleteBuffer(this.blitQuadBuffer);
+    if (this.framebuffer)
+      gl.deleteFramebuffer(this.framebuffer);
+    if (this.renderTexture)
+      gl.deleteTexture(this.renderTexture);
+    if (this.depthBuffer)
+      gl.deleteRenderbuffer(this.depthBuffer);
+    if (this.shaderProgram)
+      gl.deleteProgram(this.shaderProgram);
+    if (this.blitShaderProgram)
+      gl.deleteProgram(this.blitShaderProgram);
     if (this.vertexArray)
       gl.deleteVertexArray(this.vertexArray);
+    if (this.blitVAO)
+      gl.deleteVertexArray(this.blitVAO);
     if (this.shaderProgram)
       gl.deleteProgram(this.shaderProgram);
     try {
@@ -6617,6 +6818,7 @@ class WebGLRenderer {
   }
 }
 const renderShaderCode = "/**\n * WebGPU 3DGS 渲染着色器\n *\n * 实例化渲染：每个 splat 绘制一个四边形\n * 对应 WebGL 版本的 GLSL 着色器\n */\n\n// ============ Uniform Bindings ============\n\nstruct Uniforms {\n  viewMatrix: mat4x4f,\n  projectionMatrix: mat4x4f,\n  screenSize: vec2f,\n  enableFrustumCulling: u32,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n\n// ============ Storage Buffer Bindings (间接索引渲染) ============\n\n@group(1) @binding(0) var<storage, read> sortIndices: array<u32>;\n@group(1) @binding(1) var<storage, read> splatData: array<f32>;\n\n// ============ Vertex Shader ============\n\nstruct VertexInput {\n  // 共享四边形顶点 (per-vertex)\n  @location(0) quadVertex: vec2f,\n}\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) relativePosition: vec2f,\n  @location(1) color: vec4f,\n}\n\n// 常量定义\nconst BOUNDS_RADIUS: f32 = 3.0;\n\n/**\n * 计算2D协方差矩阵（复刻 WebGL 版本）\n */\nfn calcCovariance2D(\n  viewPos: vec3f,\n  cov3Da: vec3f,\n  cov3Db: vec3f,\n  viewMatrix: mat4x4f,\n  projectionMatrix: mat4x4f,\n  screenSize: vec2f\n) -> vec3f {\n  let invViewPosZ = 1.0 / viewPos.z;\n  let invViewPosZSquared = invViewPosZ * invViewPosZ;\n\n  // FOV 限制\n  let tanHalfFovX = 1.0 / projectionMatrix[0][0];\n  let tanHalfFovY = 1.0 / projectionMatrix[1][1];\n  let limX = 1.3 * tanHalfFovX;\n  let limY = 1.3 * tanHalfFovY;\n\n  var clampedViewPos = viewPos;\n  clampedViewPos.x = clamp(viewPos.x * invViewPosZ, -limX, limX) * viewPos.z;\n  clampedViewPos.y = clamp(viewPos.y * invViewPosZ, -limY, limY) * viewPos.z;\n\n  // 焦距计算\n  let focalX = screenSize.x * projectionMatrix[0][0] / 2.0;\n  let focalY = screenSize.y * projectionMatrix[1][1] / 2.0;\n\n  // 雅可比矩阵 J\n  let J = mat3x3f(\n    focalX * invViewPosZ, 0.0, -(focalX * clampedViewPos.x) * invViewPosZSquared,\n    0.0, focalY * invViewPosZ, -(focalY * clampedViewPos.y) * invViewPosZSquared,\n    0.0, 0.0, 0.0\n  );\n\n  // 视图变换矩阵 W (仅旋转部分) - 对齐 Android SDK，不使用转置\n  let W = mat3x3f(\n    viewMatrix[0].xyz,\n    viewMatrix[1].xyz,\n    viewMatrix[2].xyz\n  );\n\n  // 投影变换 T = J * W\n  let T = J * W;\n\n  // 3D 协方差矩阵 Vrk（对称矩阵）\n  let Vrk = mat3x3f(\n    cov3Da.x, cov3Da.y, cov3Da.z,\n    cov3Da.y, cov3Db.x, cov3Db.y,\n    cov3Da.z, cov3Db.y, cov3Db.z\n  );\n\n  // 2D 协方差矩阵: cov = T * Vrk * T^T\n  let cov = T * Vrk * transpose(T);\n\n  // 低通滤波器\n  var result = vec3f(cov[0][0], cov[0][1], cov[1][1]);\n  result.x += 0.3;\n  result.z += 0.3;\n\n  return result;\n}\n\n/**\n * 分解协方差矩阵\n */\nfn decomposeCovariance(cov2D: vec3f) -> array<vec2f, 2> {\n  let a = cov2D.x;\n  let b = cov2D.y;\n  let d = cov2D.z;\n\n  let det = a * d - b * b;\n  let trace = a + d;\n\n  let mean = 0.5 * trace;\n  let dist = max(0.1, sqrt(mean * mean - det));\n\n  // 特征值\n  var lambda1 = mean + dist;\n  var lambda2 = mean - dist;\n\n  // 确保特征值为正\n  lambda1 = max(lambda1, 0.01);\n  lambda2 = max(lambda2, 0.01);\n\n  // 特征向量（复刻 WebGL MetalSplatter 算法）\n  var eigenvector1: vec2f;\n  if (abs(b) < 1e-6) {\n    eigenvector1 = select(vec2f(0.0, 1.0), vec2f(1.0, 0.0), a > d);\n  } else {\n    eigenvector1 = normalize(vec2f(b, d - lambda2));\n  }\n\n  // 正交特征向量\n  let eigenvector2 = vec2f(eigenvector1.y, -eigenvector1.x);\n\n  let v1 = eigenvector1 * sqrt(lambda1);\n  let v2 = eigenvector2 * sqrt(lambda2);\n\n  return array<vec2f, 2>(v1, v2);\n}\n\n@vertex\nfn vertexMain(\n  input: VertexInput,\n  @builtin(instance_index) instanceIndex: u32\n) -> VertexOutput {\n  var output: VertexOutput;\n\n  // 🚀 间接索引：通过排序索引读取实际数据\n  let sortedIdx = sortIndices[instanceIndex];\n  let dataOffset = sortedIdx * 13u;\n\n  // 从 storage buffer 读取 splat 数据\n  let position = vec3f(\n    splatData[dataOffset + 0u],\n    splatData[dataOffset + 1u],\n    splatData[dataOffset + 2u]\n  );\n  let color = vec4f(\n    splatData[dataOffset + 3u],\n    splatData[dataOffset + 4u],\n    splatData[dataOffset + 5u],\n    splatData[dataOffset + 6u]\n  );\n  let covA = vec3f(\n    splatData[dataOffset + 7u],\n    splatData[dataOffset + 8u],\n    splatData[dataOffset + 9u]\n  );\n  let covB = vec3f(\n    splatData[dataOffset + 10u],\n    splatData[dataOffset + 11u],\n    splatData[dataOffset + 12u]\n  );\n\n  // 转换到视图空间\n  let viewPosition4 = uniforms.viewMatrix * vec4f(position, 1.0);\n  let viewPosition3 = viewPosition4.xyz;\n\n  // 计算 2D 协方差矩阵\n  let cov2D = calcCovariance2D(\n    viewPosition3,\n    covA,\n    covB,\n    uniforms.viewMatrix,\n    uniforms.projectionMatrix,\n    uniforms.screenSize\n  );\n\n  // 分解协方差矩阵\n  let axes = decomposeCovariance(cov2D);\n  let axis1 = axes[0];\n  let axis2 = axes[1];\n\n  // 投影到屏幕空间\n  let projectedCenter = uniforms.projectionMatrix * viewPosition4;\n\n  // 视锥体剔除\n  if (uniforms.enableFrustumCulling == 1u) {\n    let bounds = 1.2 * projectedCenter.w;\n    if (projectedCenter.z < 0.0 ||\n        projectedCenter.z > projectedCenter.w ||\n        projectedCenter.x < -bounds ||\n        projectedCenter.x > bounds ||\n        projectedCenter.y < -bounds ||\n        projectedCenter.y > bounds) {\n      // 剔除到屏幕外\n      output.position = vec4f(2.0, 2.0, 0.0, 1.0);\n      output.relativePosition = vec2f(0.0);\n      output.color = vec4f(0.0);\n      return output;\n    }\n  }\n\n  // 使用实例化的四边形顶点\n  let relativeCoord = input.quadVertex;\n\n  // 计算椭圆变换后的相对位置（像素单位）\n  let ellipseRelativePos = relativeCoord.x * axis1 + relativeCoord.y * axis2;\n\n  // 计算屏幕空间偏移\n  let projectedScreenDelta = ellipseRelativePos * 2.0 * BOUNDS_RADIUS / uniforms.screenSize;\n\n  // 最终顶点位置\n  output.position = vec4f(\n    projectedCenter.x + projectedScreenDelta.x * projectedCenter.w,\n    projectedCenter.y + projectedScreenDelta.y * projectedCenter.w,\n    projectedCenter.z,\n    projectedCenter.w\n  );\n\n  // 传递给 fragment shader\n  output.relativePosition = relativeCoord * BOUNDS_RADIUS;\n  output.color = color;\n\n  return output;\n}\n\n// ============ Fragment Shader ============\n\nconst BOUNDS_RADIUS_SQUARED: f32 = BOUNDS_RADIUS * BOUNDS_RADIUS;\n\nfn splatFragmentAlpha(relativePosition: vec2f, splatAlpha: f32) -> f32 {\n  // 复刻 WebGL MetalSplatter 计算方式\n  let negativeMagnitudeSquared = -dot(relativePosition, relativePosition);\n\n  // 边界检查：超出椭圆边界的点被剔除\n  if (negativeMagnitudeSquared < -BOUNDS_RADIUS_SQUARED) {\n    return 0.0;\n  }\n\n  // 高斯衰减\n  return exp(0.5 * negativeMagnitudeSquared) * splatAlpha;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n  let alpha = splatFragmentAlpha(input.relativePosition, input.color.a);\n\n  // ✅ 优化：提前丢弃几乎透明的片段（提升性能和质量，对齐 Android SDK）\n  if (alpha < 0.001) {\n    discard;\n  }\n\n  // 预乘 alpha 输出（匹配 alphaMode: 'premultiplied'）\n  return vec4f(input.color.rgb * alpha, alpha);\n}\n";
+const blitShaderCode = "/**\n * WebGPU Blit Shader\n * 用于将 render texture 绘制到屏幕，应用 transform\n */\n\nstruct BlitUniforms {\n  offset: vec2f,  // 屏幕空间偏移（NDC坐标）\n  scale: f32,     // 缩放因子\n}\n\n@group(0) @binding(0) var<uniform> blitUniforms: BlitUniforms;\n@group(1) @binding(0) var texture: texture_2d<f32>;\n@group(1) @binding(1) var textureSampler: sampler;\n\nstruct VertexInput {\n  @location(0) position: vec2f,\n  @location(1) texCoord: vec2f,\n}\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) texCoord: vec2f,\n}\n\n@vertex\nfn vertexMain(input: VertexInput) -> VertexOutput {\n  var output: VertexOutput;\n  // 应用缩放和偏移\n  let pos = input.position * blitUniforms.scale + blitUniforms.offset;\n  output.position = vec4f(pos, 0.0, 1.0);\n  // WebGPU framebuffer 纹理坐标需要翻转 Y 轴\n  // framebuffer 的内容是从上到下存储的，但纹理坐标 (0,0) 在左上角，所以需要翻转\n  output.texCoord = vec2f(input.texCoord.x, 1.0 - input.texCoord.y);\n  return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n  return textureSample(texture, textureSampler, input.texCoord);\n}\n\n";
 class WebGPURenderer {
   constructor(canvas, backgroundColor, alpha = true) {
     __publicField(this, "canvas");
@@ -6624,6 +6826,7 @@ class WebGPURenderer {
     __publicField(this, "device", null);
     __publicField(this, "context", null);
     __publicField(this, "renderPipeline", null);
+    __publicField(this, "renderTexturePipeline", null);
     __publicField(this, "quadVertexBuffer", null);
     __publicField(this, "uniformBuffer", null);
     __publicField(this, "uniformBindGroup", null);
@@ -6635,6 +6838,15 @@ class WebGPURenderer {
     __publicField(this, "splatCount", 0);
     __publicField(this, "presentationFormat", "bgra8unorm");
     __publicField(this, "alpha");
+    __publicField(this, "renderTexture", null);
+    __publicField(this, "renderTextureView", null);
+    __publicField(this, "depthTexture", null);
+    __publicField(this, "framebufferWidth", 0);
+    __publicField(this, "framebufferHeight", 0);
+    __publicField(this, "blitPipeline", null);
+    __publicField(this, "blitUniformBuffer", null);
+    __publicField(this, "blitQuadBuffer", null);
+    __publicField(this, "blitSampler", null);
     this.canvas = canvas;
     this.backgroundColor = backgroundColor || [0, 0, 0, 0];
     this.alpha = alpha;
@@ -6660,6 +6872,7 @@ class WebGPURenderer {
     this.createUniformBuffer();
     this.createQuadVertexBuffer();
     await this.createRenderPipeline();
+    await this.createBlitPipeline();
   }
   createUniformBuffer() {
     if (!this.device)
@@ -6787,6 +7000,182 @@ class WebGPURenderer {
         }
       ]
     });
+    this.renderTexturePipeline = this.device.createRenderPipeline({
+      label: "3DGS Render Texture Pipeline",
+      layout: pipelineLayout,
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vertexMain",
+        buffers: vertexBufferLayouts
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fragmentMain",
+        targets: [
+          {
+            format: "rgba16float",
+            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",
+        stripIndexFormat: void 0
+      },
+      depthStencil: {
+        format: "depth24plus",
+        depthWriteEnabled: false,
+        depthCompare: "always"
+      }
+    });
+  }
+  async createBlitPipeline() {
+    if (!this.device)
+      return;
+    const blitShaderModule = this.device.createShaderModule({
+      label: "Blit Shader",
+      code: blitShaderCode
+    });
+    this.blitUniformBuffer = this.device.createBuffer({
+      label: "Blit Uniform Buffer",
+      size: 16,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const blitUniformBindGroupLayout = this.device.createBindGroupLayout({
+      label: "Blit Uniform Bind Group Layout",
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX,
+          buffer: { type: "uniform" }
+        }
+      ]
+    });
+    const blitTextureBindGroupLayout = this.device.createBindGroupLayout({
+      label: "Blit Texture Bind Group Layout",
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {}
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: {}
+        }
+      ]
+    });
+    const blitPipelineLayout = this.device.createPipelineLayout({
+      label: "Blit Pipeline Layout",
+      bindGroupLayouts: [blitUniformBindGroupLayout, blitTextureBindGroupLayout]
+    });
+    this.blitSampler = this.device.createSampler({
+      label: "Blit Sampler",
+      magFilter: "linear",
+      minFilter: "linear"
+    });
+    const quadData = new Float32Array([
+      -1,
+      -1,
+      0,
+      0,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      -1,
+      1,
+      0,
+      1,
+      1,
+      1,
+      1
+    ]);
+    this.blitQuadBuffer = this.device.createBuffer({
+      label: "Blit Quad Buffer",
+      size: quadData.byteLength,
+      usage: GPUBufferUsage.VERTEX,
+      mappedAtCreation: true
+    });
+    new Float32Array(this.blitQuadBuffer.getMappedRange()).set(quadData);
+    this.blitQuadBuffer.unmap();
+    this.blitPipeline = this.device.createRenderPipeline({
+      label: "Blit Pipeline",
+      layout: blitPipelineLayout,
+      vertex: {
+        module: blitShaderModule,
+        entryPoint: "vertexMain",
+        buffers: [
+          {
+            arrayStride: 16,
+            stepMode: "vertex",
+            attributes: [
+              {
+                shaderLocation: 0,
+                offset: 0,
+                format: "float32x2"
+              },
+              {
+                shaderLocation: 1,
+                offset: 8,
+                format: "float32x2"
+              }
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: blitShaderModule,
+        entryPoint: "fragmentMain",
+        targets: [
+          {
+            format: this.presentationFormat,
+            blend: void 0
+          }
+        ]
+      },
+      primitive: {
+        topology: "triangle-strip"
+      }
+    });
+  }
+  createRenderTexture(width, height) {
+    if (!this.device)
+      return;
+    if (this.renderTexture) {
+      this.renderTexture.destroy();
+    }
+    if (this.depthTexture) {
+      this.depthTexture.destroy();
+    }
+    this.renderTexture = this.device.createTexture({
+      label: "Render Texture",
+      size: [width, height],
+      format: "rgba16float",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+    this.renderTextureView = this.renderTexture.createView();
+    this.depthTexture = this.device.createTexture({
+      label: "Depth Texture",
+      size: [width, height],
+      format: "depth24plus",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    this.framebufferWidth = width;
+    this.framebufferHeight = height;
   }
   loadSplatsFromPackedData(packedData, pointCount, sortOrder) {
     if (!this.device)
@@ -6854,18 +7243,119 @@ class WebGPURenderer {
       }
     }
   }
-  render(viewMatrix, projectionMatrix, screenSize) {
-    if (!this.device || !this.context || !this.renderPipeline)
+  render(viewMatrix, projectionMatrix, screenSize, transform) {
+    if (!this.device || !this.context || !this.renderPipeline || !this.renderTexturePipeline)
       return;
     if (this.splatCount === 0 || !this.storageBindGroup)
       return;
+    const [width, height] = screenSize;
+    const needsTransform = transform && (transform.x !== 0 || transform.y !== 0 || transform.scale !== 1);
     this.updateUniforms(viewMatrix, projectionMatrix, screenSize);
-    const textureView = this.context.getCurrentTexture().createView();
     const commandEncoder = this.device.createCommandEncoder({
       label: "Render Command Encoder"
     });
-    const renderPass = commandEncoder.beginRenderPass({
-      label: "Render Pass",
+    if (needsTransform) {
+      if (!this.renderTexture || this.framebufferWidth !== width || this.framebufferHeight !== height) {
+        this.createRenderTexture(width, height);
+      }
+      const renderPass = commandEncoder.beginRenderPass({
+        label: "Render to Texture Pass",
+        colorAttachments: [
+          {
+            view: this.renderTextureView,
+            clearValue: {
+              r: this.backgroundColor[0],
+              g: this.backgroundColor[1],
+              b: this.backgroundColor[2],
+              a: this.backgroundColor[3]
+            },
+            loadOp: "clear",
+            storeOp: "store"
+          }
+        ],
+        depthStencilAttachment: {
+          view: this.depthTexture.createView(),
+          depthLoadOp: "clear",
+          depthStoreOp: "store",
+          depthClearValue: 1
+        }
+      });
+      renderPass.setPipeline(this.renderTexturePipeline);
+      renderPass.setBindGroup(0, this.uniformBindGroup);
+      renderPass.setBindGroup(1, this.storageBindGroup);
+      renderPass.setVertexBuffer(0, this.quadVertexBuffer);
+      renderPass.draw(4, this.splatCount);
+      renderPass.end();
+      this.blitToScreen(commandEncoder, transform);
+    } else {
+      const textureView = this.context.getCurrentTexture().createView();
+      const renderPass = commandEncoder.beginRenderPass({
+        label: "Render Pass",
+        colorAttachments: [
+          {
+            view: textureView,
+            clearValue: {
+              r: this.backgroundColor[0],
+              g: this.backgroundColor[1],
+              b: this.backgroundColor[2],
+              a: this.backgroundColor[3]
+            },
+            loadOp: "clear",
+            storeOp: "store"
+          }
+        ]
+      });
+      renderPass.setPipeline(this.renderPipeline);
+      renderPass.setBindGroup(0, this.uniformBindGroup);
+      renderPass.setBindGroup(1, this.storageBindGroup);
+      renderPass.setVertexBuffer(0, this.quadVertexBuffer);
+      renderPass.draw(4, this.splatCount);
+      renderPass.end();
+    }
+    this.device.queue.submit([commandEncoder.finish()]);
+  }
+  blitToScreen(commandEncoder, transform) {
+    if (!this.device || !this.blitPipeline || !this.renderTextureView || !this.blitQuadBuffer || !this.blitUniformBuffer || !this.blitSampler) {
+      logger.error(`[WebGPURenderer] Blit failed: device=${!!this.device}, pipeline=${!!this.blitPipeline}, texture=${!!this.renderTextureView}, buffer=${!!this.blitQuadBuffer}, uniform=${!!this.blitUniformBuffer}, sampler=${!!this.blitSampler}`);
+      return;
+    }
+    const offsetXNDC = transform.x;
+    const offsetYNDC = -transform.y;
+    const uniformData = new ArrayBuffer(16);
+    const float32View = new Float32Array(uniformData);
+    float32View[0] = offsetXNDC;
+    float32View[1] = offsetYNDC;
+    float32View[2] = transform.scale;
+    this.device.queue.writeBuffer(this.blitUniformBuffer, 0, uniformData);
+    const blitUniformBindGroupLayout = this.blitPipeline.getBindGroupLayout(0);
+    const blitTextureBindGroupLayout = this.blitPipeline.getBindGroupLayout(1);
+    const blitUniformBindGroup = this.device.createBindGroup({
+      label: "Blit Uniform Bind Group",
+      layout: blitUniformBindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.blitUniformBuffer }
+        }
+      ]
+    });
+    const blitTextureBindGroup = this.device.createBindGroup({
+      label: "Blit Texture Bind Group",
+      layout: blitTextureBindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: this.renderTextureView
+        },
+        {
+          binding: 1,
+          resource: this.blitSampler
+        }
+      ]
+    });
+    const textureView = this.context.getCurrentTexture().createView();
+    const blitPass = commandEncoder.beginRenderPass({
+      label: "Blit Pass",
       colorAttachments: [
         {
           view: textureView,
@@ -6880,13 +7370,12 @@ class WebGPURenderer {
         }
       ]
     });
-    renderPass.setPipeline(this.renderPipeline);
-    renderPass.setBindGroup(0, this.uniformBindGroup);
-    renderPass.setBindGroup(1, this.storageBindGroup);
-    renderPass.setVertexBuffer(0, this.quadVertexBuffer);
-    renderPass.draw(4, this.splatCount);
-    renderPass.end();
-    this.device.queue.submit([commandEncoder.finish()]);
+    blitPass.setPipeline(this.blitPipeline);
+    blitPass.setBindGroup(0, blitUniformBindGroup);
+    blitPass.setBindGroup(1, blitTextureBindGroup);
+    blitPass.setVertexBuffer(0, this.blitQuadBuffer);
+    blitPass.draw(4);
+    blitPass.end();
   }
   updateUniforms(viewMatrix, projectionMatrix, screenSize) {
     if (!this.device || !this.uniformBuffer)
@@ -6905,21 +7394,33 @@ class WebGPURenderer {
     this.backgroundColor = backgroundColor;
   }
   dispose() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     (_a = this.sortIndexBuffer) == null ? void 0 : _a.destroy();
     (_b = this.splatDataBuffer) == null ? void 0 : _b.destroy();
     (_c = this.quadVertexBuffer) == null ? void 0 : _c.destroy();
     (_d = this.uniformBuffer) == null ? void 0 : _d.destroy();
-    (_e = this.device) == null ? void 0 : _e.destroy();
+    (_e = this.renderTexture) == null ? void 0 : _e.destroy();
+    (_f = this.depthTexture) == null ? void 0 : _f.destroy();
+    (_g = this.blitUniformBuffer) == null ? void 0 : _g.destroy();
+    (_h = this.blitQuadBuffer) == null ? void 0 : _h.destroy();
+    (_i = this.device) == null ? void 0 : _i.destroy();
     this.sortIndexBuffer = null;
     this.splatDataBuffer = null;
     this.quadVertexBuffer = null;
     this.uniformBuffer = null;
     this.uniformBindGroup = null;
     this.storageBindGroup = null;
+    this.renderTexture = null;
+    this.renderTextureView = null;
+    this.depthTexture = null;
+    this.blitUniformBuffer = null;
+    this.blitQuadBuffer = null;
+    this.blitPipeline = null;
+    this.blitSampler = null;
     this.device = null;
     this.context = null;
     this.renderPipeline = null;
+    this.renderTexturePipeline = null;
   }
 }
 class RenderSystem {
@@ -6942,6 +7443,9 @@ class RenderSystem {
     __publicField(this, "originalPackedData", null);
     __publicField(this, "renderTime", 0);
     __publicField(this, "sortTime", 0);
+    __publicField(this, "offsetX", 0);
+    __publicField(this, "offsetY", 0);
+    __publicField(this, "scale", 1);
     this.options = options;
     this.canvas = options.canvas;
     this.backgroundColor = options.backgroundColor || [0, 0, 0, 0];
@@ -7010,11 +7514,21 @@ class RenderSystem {
     this.renderer.render(
       this.viewMatrix,
       this.projectionMatrix,
-      [this.canvas.width, this.canvas.height]
+      [this.canvas.width, this.canvas.height],
+      this.offsetX !== 0 || this.offsetY !== 0 || this.scale !== 1 ? { x: this.offsetX, y: this.offsetY, scale: this.scale } : void 0
     );
     const renderTime = performance.now() - startRender;
     this.renderTime = renderTime;
   }
+  setTransform(x, y, scale = 1) {
+    logger.log(`[RenderSystem] Setting transform: x=${x}, y=${y}, scale=${scale}`);
+    this.offsetX = x;
+    this.offsetY = y;
+    this.scale = scale;
+  }
+  getTransform() {
+    return { x: this.offsetX, y: this.offsetY, scale: this.scale };
+  }
   updateCamera(params) {
     Object.assign(this.camera, params);
     this.updateCameraAspect();
@@ -7930,6 +8444,16 @@ class AvatarView {
       img.src = imageUrl;
     }
   }
+  setTransform(x, y, scale) {
+    if (!this.renderSystem) {
+      throw new Error("Render system not initialized");
+    }
+    logger.log(`[AvatarView] Setting transform: x=${x}, y=${y}, scale=${scale}`);
+    this.renderSystem.setTransform(x, y, scale);
+    if (this.isInitialized && this.renderSystem) {
+      this.renderSystem.renderFrame();
+    }
+  }
 }
 export {
   APP_CONFIG as A,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, c, f, d, j, g, C, i, D, E, k, h, L, R, S, m } from "./index-CFQb9r1N.js";
+import { b, c, f, d, j, g, C, i, D, E, k, h, L, R, S, m } from "./index-D8QhzqfR.js";
 export {
   b as Avatar,
   c as AvatarController,

package/dist/renderer/renderer.d.ts

@@ -1,7 +1,12 @@
+export interface Transform {
+    x: number;
+    y: number;
+    scale: number;
+}
 export interface I3DGSRenderer {
     initialize: () => Promise<void>;
     loadSplatsFromPackedData: (packedData: Float32Array, pointCount: number, sortOrder?: Uint32Array) => void;
-    render: (viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number]) => void;
+    render: (viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number], transform?: Transform) => void;
     dispose: () => void;
 }
 export type RenderBackend = 'webgl' | 'webgpu';

package/dist/renderer/webgl/webglRenderer.d.ts

@@ -1,4 +1,4 @@
-import { I3DGSRenderer } from '../renderer';
+import { I3DGSRenderer, Transform } from '../renderer';
 export declare class WebGLRenderer implements I3DGSRenderer {
     private canvas;
     private backgroundColor;
@@ -12,6 +12,16 @@ export declare class WebGLRenderer implements I3DGSRenderer {
     private splatCount;
     private isInitialized;
     private splatBufferSize;
+    private framebuffer;
+    private renderTexture;
+    private depthBuffer;
+    private framebufferWidth;
+    private framebufferHeight;
+    private blitShaderProgram;
+    private blitUniformLocations;
+    private blitAttributeLocations;
+    private blitQuadBuffer;
+    private blitVAO;
     constructor(canvas: HTMLCanvasElement, backgroundColor?: [number, number, number, number], alpha?: boolean);
     private alpha;
     initialize(): Promise<void>;
@@ -22,8 +32,12 @@ export declare class WebGLRenderer implements I3DGSRenderer {
     loadSplatsFromPackedData(packedData: Float32Array, pointCount: number, _sortOrder?: Uint32Array): void;
     private uploadToGPU;
     private setupVertexAttributes;
-    render(viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number]): void;
+    render(viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number], transform?: Transform): void;
     private createShaderProgram;
     updateBackgroundColor(backgroundColor: [number, number, number, number]): void;
+    private render3DGS;
+    private createFramebuffer;
+    private createBlitShader;
+    private blitToScreen;
     dispose(): void;
 }

package/dist/renderer/webgpu/webgpuRenderer.d.ts

@@ -1,10 +1,11 @@
-import { I3DGSRenderer } from '../renderer';
+import { I3DGSRenderer, Transform } from '../renderer';
 export declare class WebGPURenderer implements I3DGSRenderer {
     private canvas;
     private backgroundColor;
     private device;
     private context;
     private renderPipeline;
+    private renderTexturePipeline;
     private quadVertexBuffer;
     private uniformBuffer;
     private uniformBindGroup;
@@ -16,13 +17,25 @@ export declare class WebGPURenderer implements I3DGSRenderer {
     private splatCount;
     private presentationFormat;
     private alpha;
+    private renderTexture;
+    private renderTextureView;
+    private depthTexture;
+    private framebufferWidth;
+    private framebufferHeight;
+    private blitPipeline;
+    private blitUniformBuffer;
+    private blitQuadBuffer;
+    private blitSampler;
     constructor(canvas: HTMLCanvasElement, backgroundColor?: [number, number, number, number], alpha?: boolean);
     initialize(): Promise<void>;
     private createUniformBuffer;
     private createQuadVertexBuffer;
     private createRenderPipeline;
+    private createBlitPipeline;
+    private createRenderTexture;
     loadSplatsFromPackedData(packedData: Float32Array, pointCount: number, sortOrder?: Uint32Array): void;
-    render(viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number]): void;
+    render(viewMatrix: Float32Array, projectionMatrix: Float32Array, screenSize: [number, number], transform?: Transform): void;
+    private blitToScreen;
     private updateUniforms;
     updateBackgroundColor(backgroundColor: [number, number, number, number]): void;
     dispose(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spatialwalk/avatarkit",
   "type": "module",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.34",
   "packageManager": "pnpm@10.18.2",
   "description": "SPAvatar SDK - 3D Gaussian Splatting Avatar Rendering SDK",
   "author": "SPAvatar Team",