@heliguy-xyz/splat-viewer 1.0.0-rc.25 → 1.0.0-rc.26

package/dist/web-component/splat-viewer.js

@@ -139526,6 +139526,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    enableStats: false,
 	    autoFocus: true,
 	    maxSplats: 2000000,
+	    previewMode: false,
 	    camera: {
 	        position: { x: 0, y: 0, z: 10 },
 	        target: { x: 0, y: 0, z: 0 },
@@ -139615,6 +139616,10 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    if (enableStats !== null) {
 	        config.enableStats = parseBoolean(enableStats);
 	    }
+	    const previewMode = element.getAttribute('preview-mode');
+	    if (previewMode !== null) {
+	        config.previewMode = parseBoolean(previewMode);
+	    }
 	    // Parse number attributes
 	    const maxSplats = element.getAttribute('max-splats');
 	    if (maxSplats !== null) {
@@ -143168,222 +143173,222 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	const vertexShader$6 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-	const fragmentShader$6 = /* glsl */ `
-    uniform highp usampler2D transformA;                // splat center x, y, z
-    uniform highp usampler2D splatTransform;            // transform palette index
-    uniform sampler2D transformPalette;                 // palette of transforms
-    uniform sampler2D splatState;                       // per-splat state
-    uniform highp ivec3 splat_params;                   // texture width, texture height, num splats
-    uniform highp uint mode;                            // 0: selected, 1: visible
-
-    // calculate min and max for a single column of splats
-    void main(void) {
-
-        vec3 boundMin = vec3(1e6);
-        vec3 boundMax = vec3(-1e6);
-
-        for (int id = 0; id < splat_params.y; id++) {
-            // calculate splatUV
-            ivec2 splatUV = ivec2(gl_FragCoord.x, id);
-
-            // skip out-of-range splats
-            if ((splatUV.x + splatUV.y * splat_params.x) >= splat_params.z) {
-                continue;
-            }
-
-            // read splat state
-            uint state = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
-
-            // skip deleted or locked splats
-            if (((mode == 0u) && (state != 1u)) || ((mode == 1u) && ((state & 4u) != 0u))) {
-                continue;
-            }
-
-            // read splat center
-            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-            // apply optional per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat3x4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-                center = vec4(center, 1.0) * t;
-            }
-
-            boundMin = min(boundMin, mix(center, boundMin, isinf(center)));
-            boundMax = max(boundMax, mix(center, boundMax, isinf(center)));
-        }
-
-        pcFragColor0 = vec4(boundMin, 0.0);
-        pcFragColor1 = vec4(boundMax, 0.0);
-    }
-`;
-
-	const vertexShader$5 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-	const fragmentShader$5 = /* glsl */ `
-    uniform highp usampler2D transformA;            // splat center x, y, z
-    uniform highp usampler2D splatTransform;        // transform palette index
-    uniform sampler2D transformPalette;             // palette of transforms
-    uniform uvec2 splat_params;                     // splat texture width, num splats
-
-    uniform mat4 matrix_model;
-    uniform mat4 matrix_viewProjection;
-
-    uniform uvec2 output_params;                    // output width, height
-
-    // 0: mask, 1: rect, 2: sphere
-    uniform int mode;
-
-    // mask params
-    uniform sampler2D mask;                         // mask in alpha channel
-    uniform vec2 mask_params;                       // mask width, height
-
-    // rect params
-    uniform vec4 rect_params;                       // rect x, y, width, height
-
-    // sphere params
-    uniform vec4 sphere_params;                     // sphere x, y, z, radius
-
-    // box params
-    uniform vec4 box_params;                     // box x, y, z
-    uniform vec4 aabb_params;                    // len x, y, z
-
-    void main(void) {
-        // calculate output id
-        uvec2 outputUV = uvec2(gl_FragCoord);
-        uint outputId = (outputUV.x + outputUV.y * output_params.x) * 4u;
-
-        vec4 clr = vec4(0.0);
-
-        for (uint i = 0u; i < 4u; i++) {
-            uint id = outputId + i;
-
-            if (id >= splat_params.y) {
-                continue;
-            }
-
-            // calculate splatUV
-            ivec2 splatUV = ivec2(
-                int(id % splat_params.x),
-                int(id / splat_params.x)
-            );
-
-            // read splat center
-            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-            // apply optional per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat3x4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-                center = vec4(center, 1.0) * t;
-            }
-
-            // transform to clip space and discard if outside
-            vec3 world = (matrix_model * vec4(center, 1.0)).xyz;
-            vec4 clip = matrix_viewProjection * vec4(world, 1.0);
-            vec3 ndc = clip.xyz / clip.w;
-
-            // skip offscreen fragments
-            if (!any(greaterThan(abs(ndc), vec3(1.0)))) {
-                if (mode == 0) {
-                    // select by mask
-                    ivec2 maskUV = ivec2((ndc.xy * vec2(0.5, -0.5) + 0.5) * mask_params);
-                    clr[i] = texelFetch(mask, maskUV, 0).a < 1.0 ? 0.0 : 1.0;
-                } else if (mode == 1) {
-                    // select by rect
-                    clr[i] = all(greaterThan(ndc.xy * vec2(1.0, -1.0), rect_params.xy)) && all(lessThan(ndc.xy * vec2(1.0, -1.0), rect_params.zw)) ? 1.0 : 0.0;
-                } else if (mode == 2) {
-                    // select by sphere
-                    clr[i] = length(world - sphere_params.xyz) < sphere_params.w ? 1.0 : 0.0;
-                } else if (mode == 3) {
-                    // select by box
-                    vec3 relativePosition = world - box_params.xyz;
-                    bool isInsideCube = true;
-                    if (relativePosition.x < -aabb_params.x || relativePosition.x > aabb_params.x) {
-                        isInsideCube = false;
-                    }
-                    if (relativePosition.y < -aabb_params.y || relativePosition.y > aabb_params.y) {
-                        isInsideCube = false;
-                    }
-                    if (relativePosition.z < -aabb_params.z || relativePosition.z > aabb_params.z) {
-                        isInsideCube = false;
-                    }
-                    clr[i] = isInsideCube ? 1.0 : 0.0;
-                }
-            }
-        }
-
-        gl_FragColor = clr;
-    }
-`;
-
-	const vertexShader$4 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-	const fragmentShader$4 = /* glsl */ `
-    uniform highp usampler2D transformA;            // splat center x, y, z
-    uniform highp usampler2D splatTransform;        // transform palette index
-    uniform sampler2D transformPalette;             // palette of transforms
-    uniform ivec2 splat_params;                     // splat texture width, num splats
-
-    void main(void) {
-        // calculate output id
-        ivec2 splatUV = ivec2(gl_FragCoord);
-
-        // skip if splat index is out of bounds
-        if (splatUV.x + splatUV.y * splat_params.x >= splat_params.y) {
-            discard;
-        }
-
-        // read splat center
-        vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-        // apply optional per-splat transform
-        uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-        if (transformIndex > 0u) {
-            // read transform matrix
-            int u = int(transformIndex % 512u) * 3;
-            int v = int(transformIndex / 512u);
-
-            mat3x4 t;
-            t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-            t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-            t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-            center = vec4(center, 1.0) * t;
-        }
-
-        gl_FragColor = vec4(center, 0.0);
-    }
+	const vertexShader$6 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+	const fragmentShader$6 = /* glsl */ `
+    uniform highp usampler2D transformA;                // splat center x, y, z
+    uniform highp usampler2D splatTransform;            // transform palette index
+    uniform sampler2D transformPalette;                 // palette of transforms
+    uniform sampler2D splatState;                       // per-splat state
+    uniform highp ivec3 splat_params;                   // texture width, texture height, num splats
+    uniform highp uint mode;                            // 0: selected, 1: visible
+
+    // calculate min and max for a single column of splats
+    void main(void) {
+
+        vec3 boundMin = vec3(1e6);
+        vec3 boundMax = vec3(-1e6);
+
+        for (int id = 0; id < splat_params.y; id++) {
+            // calculate splatUV
+            ivec2 splatUV = ivec2(gl_FragCoord.x, id);
+
+            // skip out-of-range splats
+            if ((splatUV.x + splatUV.y * splat_params.x) >= splat_params.z) {
+                continue;
+            }
+
+            // read splat state
+            uint state = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
+
+            // skip deleted or locked splats
+            if (((mode == 0u) && (state != 1u)) || ((mode == 1u) && ((state & 4u) != 0u))) {
+                continue;
+            }
+
+            // read splat center
+            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+            // apply optional per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat3x4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+                center = vec4(center, 1.0) * t;
+            }
+
+            boundMin = min(boundMin, mix(center, boundMin, isinf(center)));
+            boundMax = max(boundMax, mix(center, boundMax, isinf(center)));
+        }
+
+        pcFragColor0 = vec4(boundMin, 0.0);
+        pcFragColor1 = vec4(boundMax, 0.0);
+    }
+`;
+
+	const vertexShader$5 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+	const fragmentShader$5 = /* glsl */ `
+    uniform highp usampler2D transformA;            // splat center x, y, z
+    uniform highp usampler2D splatTransform;        // transform palette index
+    uniform sampler2D transformPalette;             // palette of transforms
+    uniform uvec2 splat_params;                     // splat texture width, num splats
+
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
+
+    uniform uvec2 output_params;                    // output width, height
+
+    // 0: mask, 1: rect, 2: sphere
+    uniform int mode;
+
+    // mask params
+    uniform sampler2D mask;                         // mask in alpha channel
+    uniform vec2 mask_params;                       // mask width, height
+
+    // rect params
+    uniform vec4 rect_params;                       // rect x, y, width, height
+
+    // sphere params
+    uniform vec4 sphere_params;                     // sphere x, y, z, radius
+
+    // box params
+    uniform vec4 box_params;                     // box x, y, z
+    uniform vec4 aabb_params;                    // len x, y, z
+
+    void main(void) {
+        // calculate output id
+        uvec2 outputUV = uvec2(gl_FragCoord);
+        uint outputId = (outputUV.x + outputUV.y * output_params.x) * 4u;
+
+        vec4 clr = vec4(0.0);
+
+        for (uint i = 0u; i < 4u; i++) {
+            uint id = outputId + i;
+
+            if (id >= splat_params.y) {
+                continue;
+            }
+
+            // calculate splatUV
+            ivec2 splatUV = ivec2(
+                int(id % splat_params.x),
+                int(id / splat_params.x)
+            );
+
+            // read splat center
+            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+            // apply optional per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat3x4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+                center = vec4(center, 1.0) * t;
+            }
+
+            // transform to clip space and discard if outside
+            vec3 world = (matrix_model * vec4(center, 1.0)).xyz;
+            vec4 clip = matrix_viewProjection * vec4(world, 1.0);
+            vec3 ndc = clip.xyz / clip.w;
+
+            // skip offscreen fragments
+            if (!any(greaterThan(abs(ndc), vec3(1.0)))) {
+                if (mode == 0) {
+                    // select by mask
+                    ivec2 maskUV = ivec2((ndc.xy * vec2(0.5, -0.5) + 0.5) * mask_params);
+                    clr[i] = texelFetch(mask, maskUV, 0).a < 1.0 ? 0.0 : 1.0;
+                } else if (mode == 1) {
+                    // select by rect
+                    clr[i] = all(greaterThan(ndc.xy * vec2(1.0, -1.0), rect_params.xy)) && all(lessThan(ndc.xy * vec2(1.0, -1.0), rect_params.zw)) ? 1.0 : 0.0;
+                } else if (mode == 2) {
+                    // select by sphere
+                    clr[i] = length(world - sphere_params.xyz) < sphere_params.w ? 1.0 : 0.0;
+                } else if (mode == 3) {
+                    // select by box
+                    vec3 relativePosition = world - box_params.xyz;
+                    bool isInsideCube = true;
+                    if (relativePosition.x < -aabb_params.x || relativePosition.x > aabb_params.x) {
+                        isInsideCube = false;
+                    }
+                    if (relativePosition.y < -aabb_params.y || relativePosition.y > aabb_params.y) {
+                        isInsideCube = false;
+                    }
+                    if (relativePosition.z < -aabb_params.z || relativePosition.z > aabb_params.z) {
+                        isInsideCube = false;
+                    }
+                    clr[i] = isInsideCube ? 1.0 : 0.0;
+                }
+            }
+        }
+
+        gl_FragColor = clr;
+    }
+`;
+
+	const vertexShader$4 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+	const fragmentShader$4 = /* glsl */ `
+    uniform highp usampler2D transformA;            // splat center x, y, z
+    uniform highp usampler2D splatTransform;        // transform palette index
+    uniform sampler2D transformPalette;             // palette of transforms
+    uniform ivec2 splat_params;                     // splat texture width, num splats
+
+    void main(void) {
+        // calculate output id
+        ivec2 splatUV = ivec2(gl_FragCoord);
+
+        // skip if splat index is out of bounds
+        if (splatUV.x + splatUV.y * splat_params.x >= splat_params.y) {
+            discard;
+        }
+
+        // read splat center
+        vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+        // apply optional per-splat transform
+        uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+        if (transformIndex > 0u) {
+            // read transform matrix
+            int u = int(transformIndex % 512u) * 3;
+            int v = int(transformIndex / 512u);
+
+            mat3x4 t;
+            t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+            t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+            t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+            center = vec4(center, 1.0) * t;
+        }
+
+        gl_FragColor = vec4(center, 0.0);
+    }
 `;
 
 	const v1 = new Vec3();
@@ -143420,18 +143425,18 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            attributes: {
 	                vertex_position: SEMANTIC_POSITION
 	            },
-	            vertexGLSL: `
-                attribute vec2 vertex_position;
-                void main(void) {
-                    gl_Position = vec4(vertex_position, 0.0, 1.0);
-                }
+	            vertexGLSL: `
+                attribute vec2 vertex_position;
+                void main(void) {
+                    gl_Position = vec4(vertex_position, 0.0, 1.0);
+                }
             `,
-	            fragmentGLSL: `
-                uniform sampler2D colorTex;
-                void main(void) {
-                    ivec2 texel = ivec2(gl_FragCoord.xy);
-                    gl_FragColor = texelFetch(colorTex, texel, 0);
-                }
+	            fragmentGLSL: `
+                uniform sampler2D colorTex;
+                void main(void) {
+                    ivec2 texel = ivec2(gl_FragCoord.xy);
+                    gl_FragColor = texelFetch(colorTex, texel, 0);
+                }
             `
 	        });
 	        // intersection test
@@ -144670,176 +144675,176 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	const vertexShader$3 = /* glsl*/ `
-    uniform vec3 near_origin;
-    uniform vec3 near_x;
-    uniform vec3 near_y;
-
-    uniform vec3 far_origin;
-    uniform vec3 far_x;
-    uniform vec3 far_y;
-
-    attribute vec2 vertex_position;
-
-    varying vec3 worldFar;
-    varying vec3 worldNear;
-
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-
-        vec2 p = vertex_position * 0.5 + 0.5;
-        worldNear = near_origin + near_x * p.x + near_y * p.y;
-        worldFar = far_origin + far_x * p.x + far_y * p.y;
-    }
-`;
-	const fragmentShader$3 = /* glsl*/ `
-    uniform vec3 view_position;
-    uniform mat4 matrix_viewProjection;
-    uniform sampler2D blueNoiseTex32;
-
-    uniform int plane;  // 0: x (yz), 1: y (xz), 2: z (xy)
-
-    vec4 planes[3] = vec4[3](
-        vec4(1.0, 0.0, 0.0, 0.0),
-        vec4(0.0, 1.0, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0)
-    );
-
-    vec3 colors[3] = vec3[3](
-        vec3(1.0, 0.2, 0.2),
-        vec3(0.2, 1.0, 0.2),
-        vec3(0.2, 0.2, 1.0)
-    );
-
-    int axis0[3] = int[3](1, 0, 0);
-    int axis1[3] = int[3](2, 2, 1);
-
-    varying vec3 worldNear;
-    varying vec3 worldFar;
-
-    bool intersectPlane(inout float t, vec3 pos, vec3 dir, vec4 plane) {
-        float d = dot(dir, plane.xyz);
-        if (abs(d) < 1e-06) {
-            return false;
-        }
-
-        float n = -(dot(pos, plane.xyz) + plane.w) / d;
-        if (n < 0.0) {
-            return false;
-        }
-
-        t = n;
-
-        return true;
-    }
-
-    // https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8#1e7c
-    float pristineGrid(in vec2 uv, in vec2 ddx, in vec2 ddy, vec2 lineWidth) {
-        vec2 uvDeriv = vec2(length(vec2(ddx.x, ddy.x)), length(vec2(ddx.y, ddy.y)));
-        bvec2 invertLine = bvec2(lineWidth.x > 0.5, lineWidth.y > 0.5);
-        vec2 targetWidth = vec2(
-            invertLine.x ? 1.0 - lineWidth.x : lineWidth.x,
-            invertLine.y ? 1.0 - lineWidth.y : lineWidth.y
-        );
-        vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
-        vec2 lineAA = uvDeriv * 1.5;
-        vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
-        gridUV.x = invertLine.x ? gridUV.x : 1.0 - gridUV.x;
-        gridUV.y = invertLine.y ? gridUV.y : 1.0 - gridUV.y;
-        vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
-
-        grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
-        grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
-        grid2.x = invertLine.x ? 1.0 - grid2.x : grid2.x;
-        grid2.y = invertLine.y ? 1.0 - grid2.y : grid2.y;
-
-        return mix(grid2.x, 1.0, grid2.y);
-    }
-
-    float calcDepth(vec3 p) {
-        vec4 v = matrix_viewProjection * vec4(p, 1.0);
-        return (v.z / v.w) * 0.5 + 0.5;
-    }
-
-    bool writeDepth(float alpha) {
-        vec2 uv = fract(gl_FragCoord.xy / 32.0);
-        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
-        return alpha > noise;
-    }
-
-    void main(void) {
-        vec3 p = worldNear;
-        vec3 v = normalize(worldFar - worldNear);
-
-        // intersect ray with the world xz plane
-        float t;
-        if (!intersectPlane(t, p, v, planes[plane])) {
-            discard;
-        }
-
-        // calculate grid intersection
-        vec3 worldPos = p + v * t;
-        vec2 pos = plane == 0 ? worldPos.yz : (plane == 1 ? worldPos.xz : worldPos.xy);
-        vec2 ddx = dFdx(pos);
-        vec2 ddy = dFdy(pos);
-
-        float epsilon = 1.0 / 255.0;
-
-        // calculate fade
-        float fade = 1.0 - smoothstep(400.0, 1000.0, length(worldPos - view_position));
-        if (fade < epsilon) {
-            discard;
-        }
-
-        vec2 levelPos;
-        float levelSize;
-        float levelAlpha;
-
-        // 10m grid with colored main axes
-        levelPos = pos * 0.1;
-        levelSize = 2.0 / 1000.0;
-        levelAlpha = pristineGrid(levelPos, ddx * 0.1, ddy * 0.1, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            vec3 color;
-            vec2 loc = abs(levelPos);
-            if (loc.x < levelSize) {
-                if (loc.y < levelSize) {
-                    color = vec3(1.0);
-                } else {
-                    color = colors[axis1[plane]];
-                }
-            } else if (loc.y < levelSize) {
-                color = colors[axis0[plane]];
-            } else {
-                color = vec3(0.9);
-            }
-            gl_FragColor = vec4(color, levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        // 1m grid
-        levelPos = pos;
-        levelSize = 1.0 / 100.0;
-        levelAlpha = pristineGrid(levelPos, ddx, ddy, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            gl_FragColor = vec4(vec3(0.7), levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        // 0.1m grid
-        levelPos = pos * 10.0;
-        levelSize = 1.0 / 100.0;
-        levelAlpha = pristineGrid(levelPos, ddx * 10.0, ddy * 10.0, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            gl_FragColor = vec4(vec3(0.7), levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        discard;
-    }
+	const vertexShader$3 = /* glsl*/ `
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
+
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    attribute vec2 vertex_position;
+
+    varying vec3 worldFar;
+    varying vec3 worldNear;
+
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+
+        vec2 p = vertex_position * 0.5 + 0.5;
+        worldNear = near_origin + near_x * p.x + near_y * p.y;
+        worldFar = far_origin + far_x * p.x + far_y * p.y;
+    }
+`;
+	const fragmentShader$3 = /* glsl*/ `
+    uniform vec3 view_position;
+    uniform mat4 matrix_viewProjection;
+    uniform sampler2D blueNoiseTex32;
+
+    uniform int plane;  // 0: x (yz), 1: y (xz), 2: z (xy)
+
+    vec4 planes[3] = vec4[3](
+        vec4(1.0, 0.0, 0.0, 0.0),
+        vec4(0.0, 1.0, 0.0, 0.0),
+        vec4(0.0, 0.0, 1.0, 0.0)
+    );
+
+    vec3 colors[3] = vec3[3](
+        vec3(1.0, 0.2, 0.2),
+        vec3(0.2, 1.0, 0.2),
+        vec3(0.2, 0.2, 1.0)
+    );
+
+    int axis0[3] = int[3](1, 0, 0);
+    int axis1[3] = int[3](2, 2, 1);
+
+    varying vec3 worldNear;
+    varying vec3 worldFar;
+
+    bool intersectPlane(inout float t, vec3 pos, vec3 dir, vec4 plane) {
+        float d = dot(dir, plane.xyz);
+        if (abs(d) < 1e-06) {
+            return false;
+        }
+
+        float n = -(dot(pos, plane.xyz) + plane.w) / d;
+        if (n < 0.0) {
+            return false;
+        }
+
+        t = n;
+
+        return true;
+    }
+
+    // https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8#1e7c
+    float pristineGrid(in vec2 uv, in vec2 ddx, in vec2 ddy, vec2 lineWidth) {
+        vec2 uvDeriv = vec2(length(vec2(ddx.x, ddy.x)), length(vec2(ddx.y, ddy.y)));
+        bvec2 invertLine = bvec2(lineWidth.x > 0.5, lineWidth.y > 0.5);
+        vec2 targetWidth = vec2(
+            invertLine.x ? 1.0 - lineWidth.x : lineWidth.x,
+            invertLine.y ? 1.0 - lineWidth.y : lineWidth.y
+        );
+        vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
+        vec2 lineAA = uvDeriv * 1.5;
+        vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
+        gridUV.x = invertLine.x ? gridUV.x : 1.0 - gridUV.x;
+        gridUV.y = invertLine.y ? gridUV.y : 1.0 - gridUV.y;
+        vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+
+        grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
+        grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
+        grid2.x = invertLine.x ? 1.0 - grid2.x : grid2.x;
+        grid2.y = invertLine.y ? 1.0 - grid2.y : grid2.y;
+
+        return mix(grid2.x, 1.0, grid2.y);
+    }
+
+    float calcDepth(vec3 p) {
+        vec4 v = matrix_viewProjection * vec4(p, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
+
+    bool writeDepth(float alpha) {
+        vec2 uv = fract(gl_FragCoord.xy / 32.0);
+        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
+        return alpha > noise;
+    }
+
+    void main(void) {
+        vec3 p = worldNear;
+        vec3 v = normalize(worldFar - worldNear);
+
+        // intersect ray with the world xz plane
+        float t;
+        if (!intersectPlane(t, p, v, planes[plane])) {
+            discard;
+        }
+
+        // calculate grid intersection
+        vec3 worldPos = p + v * t;
+        vec2 pos = plane == 0 ? worldPos.yz : (plane == 1 ? worldPos.xz : worldPos.xy);
+        vec2 ddx = dFdx(pos);
+        vec2 ddy = dFdy(pos);
+
+        float epsilon = 1.0 / 255.0;
+
+        // calculate fade
+        float fade = 1.0 - smoothstep(400.0, 1000.0, length(worldPos - view_position));
+        if (fade < epsilon) {
+            discard;
+        }
+
+        vec2 levelPos;
+        float levelSize;
+        float levelAlpha;
+
+        // 10m grid with colored main axes
+        levelPos = pos * 0.1;
+        levelSize = 2.0 / 1000.0;
+        levelAlpha = pristineGrid(levelPos, ddx * 0.1, ddy * 0.1, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            vec3 color;
+            vec2 loc = abs(levelPos);
+            if (loc.x < levelSize) {
+                if (loc.y < levelSize) {
+                    color = vec3(1.0);
+                } else {
+                    color = colors[axis1[plane]];
+                }
+            } else if (loc.y < levelSize) {
+                color = colors[axis0[plane]];
+            } else {
+                color = vec3(0.9);
+            }
+            gl_FragColor = vec4(color, levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        // 1m grid
+        levelPos = pos;
+        levelSize = 1.0 / 100.0;
+        levelAlpha = pristineGrid(levelPos, ddx, ddy, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            gl_FragColor = vec4(vec3(0.7), levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        // 0.1m grid
+        levelPos = pos * 10.0;
+        levelSize = 1.0 / 100.0;
+        levelAlpha = pristineGrid(levelPos, ddx * 10.0, ddy * 10.0, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            gl_FragColor = vec4(vec3(0.7), levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        discard;
+    }
 `;
 
 	const resolve = (scope, values) => {
@@ -144910,36 +144915,36 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	const vertexShader$2 = /* glsl*/ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-	const fragmentShader$2 = /* glsl*/ `
-    uniform sampler2D outlineTexture;
-    uniform float alphaCutoff;
-    uniform vec4 clr;
-
-    void main(void) {
-        ivec2 texel = ivec2(gl_FragCoord.xy);
-
-        // skip solid pixels
-        if (texelFetch(outlineTexture, texel, 0).a > alphaCutoff) {
-            discard;
-        }
-
-        for (int x = -2; x <= 2; x++) {
-            for (int y = -2; y <= 2; y++) {
-                if ((x != 0) && (y != 0) && (texelFetch(outlineTexture, texel + ivec2(x, y), 0).a > alphaCutoff)) {
-                    gl_FragColor = clr;
-                    return;
-                }
-            }
-        }
-
-        discard;
-    }
+	const vertexShader$2 = /* glsl*/ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+	const fragmentShader$2 = /* glsl*/ `
+    uniform sampler2D outlineTexture;
+    uniform float alphaCutoff;
+    uniform vec4 clr;
+
+    void main(void) {
+        ivec2 texel = ivec2(gl_FragCoord.xy);
+
+        // skip solid pixels
+        if (texelFetch(outlineTexture, texel, 0).a > alphaCutoff) {
+            discard;
+        }
+
+        for (int x = -2; x <= 2; x++) {
+            for (int y = -2; y <= 2; y++) {
+                if ((x != 0) && (y != 0) && (texelFetch(outlineTexture, texel + ivec2(x, y), 0).a > alphaCutoff)) {
+                    gl_FragColor = clr;
+                    return;
+                }
+            }
+        }
+
+        discard;
+    }
 `;
 
 	class Outline extends Element$1 {
@@ -145257,72 +145262,72 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	const vertexShader$1 = /* glsl */ `
-    attribute uint vertex_id;
-
-    uniform mat4 matrix_model;
-    uniform mat4 matrix_viewProjection;
-
-    uniform sampler2D splatState;
-    uniform highp usampler2D splatPosition;
-    uniform highp usampler2D splatTransform;        // per-splat index into transform palette
-    uniform sampler2D transformPalette;             // palette of transform matrices
-
-    uniform uvec2 texParams;
-
-    uniform float splatSize;
-    uniform vec4 selectedClr;
-    uniform vec4 unselectedClr;
-
-    varying vec4 varying_color;
-
-    // calculate the current splat index and uv
-    ivec2 calcSplatUV(uint index, uint width) {
-        return ivec2(int(index % width), int(index / width));
-    }
-
-    void main(void) {
-        ivec2 splatUV = calcSplatUV(vertex_id, texParams.x);
-        uint splatState = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
-
-        if ((splatState & 6u) != 0u) {
-            // deleted or locked (4 or 2)
-            gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
-            gl_PointSize = 0.0;
-        } else {
-            mat4 model = matrix_model;
-        
-            // handle per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-                t[3] = vec4(0.0, 0.0, 0.0, 1.0);
-
-                model = matrix_model * transpose(t);
-            }
-
-            varying_color = (splatState == 1u) ? selectedClr : unselectedClr;
-
-            vec3 center = uintBitsToFloat(texelFetch(splatPosition, splatUV, 0).xyz);
-
-            gl_Position = matrix_viewProjection * model * vec4(center, 1.0);
-            gl_PointSize = splatSize;
-        }
-    }
-`;
-	const fragmentShader$1 = /* glsl */ `
-    varying vec4 varying_color;
-
-    void main(void) {
-        gl_FragColor = varying_color;
-    }
+	const vertexShader$1 = /* glsl */ `
+    attribute uint vertex_id;
+
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
+
+    uniform sampler2D splatState;
+    uniform highp usampler2D splatPosition;
+    uniform highp usampler2D splatTransform;        // per-splat index into transform palette
+    uniform sampler2D transformPalette;             // palette of transform matrices
+
+    uniform uvec2 texParams;
+
+    uniform float splatSize;
+    uniform vec4 selectedClr;
+    uniform vec4 unselectedClr;
+
+    varying vec4 varying_color;
+
+    // calculate the current splat index and uv
+    ivec2 calcSplatUV(uint index, uint width) {
+        return ivec2(int(index % width), int(index / width));
+    }
+
+    void main(void) {
+        ivec2 splatUV = calcSplatUV(vertex_id, texParams.x);
+        uint splatState = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
+
+        if ((splatState & 6u) != 0u) {
+            // deleted or locked (4 or 2)
+            gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+            gl_PointSize = 0.0;
+        } else {
+            mat4 model = matrix_model;
+        
+            // handle per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+                t[3] = vec4(0.0, 0.0, 0.0, 1.0);
+
+                model = matrix_model * transpose(t);
+            }
+
+            varying_color = (splatState == 1u) ? selectedClr : unselectedClr;
+
+            vec3 center = uintBitsToFloat(texelFetch(splatPosition, splatUV, 0).xyz);
+
+            gl_Position = matrix_viewProjection * model * vec4(center, 1.0);
+            gl_PointSize = splatSize;
+        }
+    }
+`;
+	const fragmentShader$1 = /* glsl */ `
+    varying vec4 varying_color;
+
+    void main(void) {
+        gl_FragColor = varying_color;
+    }
 `;
 
 	class SplatOverlay extends Element$1 {
@@ -145411,19 +145416,19 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	const vertexShader = /* glsl*/ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
+	const vertexShader = /* glsl*/ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
 `;
-	const fragmentShader = /* glsl*/ `
-    uniform sampler2D blitTexture;
-    void main(void) {
-        ivec2 texel = ivec2(gl_FragCoord.xy);
-
-        gl_FragColor = texelFetch(blitTexture, texel, 0);
-    }
+	const fragmentShader = /* glsl*/ `
+    uniform sampler2D blitTexture;
+    void main(void) {
+        ivec2 texel = ivec2(gl_FragCoord.xy);
+
+        gl_FragColor = texelFetch(blitTexture, texel, 0);
+    }
 `;
 
 	class Underlay extends Element$1 {
@@ -147700,6 +147705,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        };
 	        this.enableStats = false;
 	        this.autoFocus = true;
+	        this.previewMode = false;
 	        this.isLoading = false;
 	        this.hasModel = false;
 	        this.error = null;
@@ -147752,6 +147758,11 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        this.canvas = options.canvas || null;
 	        this.enableStats = options.enableStats || false;
 	        this.autoFocus = options.autoFocus !== false;
+	        this.previewMode = options.previewMode || false;
+	        // In preview mode, always enable auto-focus
+	        if (this.previewMode) {
+	            this.autoFocus = true;
+	        }
 	        this._navigationCubeConfig = options.navigationCube || null;
 	        if (options.onStatsUpdate !== undefined) {
 	            this._onStatsUpdate = options.onStatsUpdate;
@@ -147782,11 +147793,20 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        const emitEvent = (type, detail) => {
 	            this.emit({ type, detail });
 	        };
-	        this._supersplat = new SupersplatAdapter(this.canvas, this._navigationCubeConfig, emitEvent);
+	        this._supersplat = new SupersplatAdapter(this.canvas, 
+	        // Disable navigation cube in preview mode
+	        this.previewMode ? null : this._navigationCubeConfig, emitEvent);
 	        this._supersplatReady = this._supersplat.init();
 	        this._supersplatReady
 	            ?.then(() => {
-	            this._setupFlyCameraForSupersplat();
+	            // Disable camera controls in preview mode
+	            if (this.previewMode && this._supersplat) {
+	                this._supersplat.setCameraControlsEnabled?.(false);
+	            }
+	            // Only set up fly camera if not in preview mode
+	            if (!this.previewMode) {
+	                this._setupFlyCameraForSupersplat();
+	            }
 	        })
 	            .catch(error => {
 	            console.error('SplatViewerCore.init: Failed to set up fly camera for supersplat path', error);
@@ -147825,7 +147845,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        // SuperSplat's PCApp omits ScriptComponentSystem, so `addComponent('script')`
 	        // will not produce `camera.script.create()`. We keep the attempt (in case
 	        // the underlying app changes), but also support a controller-based fallback.
-	        if (cameraAny && !cameraAny.script && typeof cameraAny.addComponent === 'function') {
+	        if (cameraAny &&
+	            !cameraAny.script &&
+	            typeof cameraAny.addComponent === 'function') {
 	            try {
 	                cameraAny.addComponent('script');
 	            }
@@ -147851,7 +147873,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            // Prefer script-based fly when available; fallback to controller otherwise.
 	            const canCreateScript = typeof cameraAny?.script?.create === 'function';
 	            if (canCreateScript) {
-	                const created = cameraAny.script.create('flyCamera', { attributes: flyAttributes });
+	                const created = cameraAny.script.create('flyCamera', {
+	                    attributes: flyAttributes,
+	                });
 	                this._fly = created;
 	                if (this._fly) {
 	                    ;
@@ -149715,6 +149739,11 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    // Camera Mode / Fly Camera API
 	    // ==========================================
 	    setCameraMode(mode) {
+	        // Prevent camera mode changes in preview mode
+	        if (this.previewMode) {
+	            console.warn('SplatViewerCore.setCameraMode: Camera controls are disabled in preview mode');
+	            return;
+	        }
 	        // supersplat-core path: manage mode switching explicitly (camera entity is updated by supersplat-core each frame)
 	        if (this._supersplat) {
 	            const prev = this._cameraMode;
@@ -149744,7 +149773,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                        try {
 	                            const pos = this.entities.camera?.getPosition?.();
 	                            if (pos) {
-	                                const posVec = pos.clone ? pos.clone() : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
+	                                const posVec = pos.clone
+	                                    ? pos.clone()
+	                                    : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
 	                                this.entities.camera?.setPosition?.(posVec);
 	                            }
 	                            const euler = this.entities.camera?.getEulerAngles?.();
@@ -149967,8 +149998,8 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            panSensitivity: 1.0,
 	            zoomSensitivity: 0.1,
 	        };
-	        // Add navigation cube configuration if available
-	        if (this._navigationCubeConfig) {
+	        // Add navigation cube configuration if available (but not in preview mode)
+	        if (this._navigationCubeConfig && !this.previewMode) {
 	            orbitAttributes.enableNavigationCube =
 	                this._navigationCubeConfig.enabled || false;
 	            this.entities.camera._navigationCubeConfig =
@@ -149983,48 +150014,57 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                detail: { type: interactionType },
 	            });
 	        };
+	        // Disable camera controls in preview mode
+	        if (this.previewMode && this._orbit) {
+	            const orbitAny = this._orbit;
+	            if (typeof orbitAny.setEnabled === 'function') {
+	                orbitAny.setEnabled(false);
+	            }
+	        }
 	        this.entities.camera.setPosition(0, 0, 10);
 	        this.entities.camera.lookAt(Vec3.ZERO);
 	        // ==============================
-	        // Setup fly camera (disabled by default)
+	        // Setup fly camera (disabled by default, skipped in preview mode)
 	        // ==============================
-	        try {
-	            registerFlyCameraScript();
-	            // Ensure script component exists (created above)
-	            const flyAttributes = {
-	                moveSpeed: DEFAULT_FLY_CAMERA_CONFIG.moveSpeed,
-	                fastSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.fastSpeedMultiplier,
-	                slowSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.slowSpeedMultiplier,
-	                lookSensitivity: DEFAULT_FLY_CAMERA_CONFIG.lookSensitivity,
-	                invertY: DEFAULT_FLY_CAMERA_CONFIG.invertY,
-	                keyBindings: DEFAULT_FLY_CAMERA_CONFIG.keyBindings,
-	                smoothing: DEFAULT_FLY_CAMERA_CONFIG.smoothing,
-	                friction: DEFAULT_FLY_CAMERA_CONFIG.friction,
-	                enableCollision: DEFAULT_FLY_CAMERA_CONFIG.enableCollision,
-	                minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
-	                maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
-	            };
-	            this._fly = this.entities.camera.script.create('flyCamera', {
-	                attributes: flyAttributes,
-	            });
-	            // Wire event emission to core
-	            if (this._fly) {
-	                ;
-	                this._fly.emitFlyEvent = (type, detail) => {
-	                    this.emit({ type: type, detail });
+	        if (!this.previewMode) {
+	            try {
+	                registerFlyCameraScript();
+	                // Ensure script component exists (created above)
+	                const flyAttributes = {
+	                    moveSpeed: DEFAULT_FLY_CAMERA_CONFIG.moveSpeed,
+	                    fastSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.fastSpeedMultiplier,
+	                    slowSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.slowSpeedMultiplier,
+	                    lookSensitivity: DEFAULT_FLY_CAMERA_CONFIG.lookSensitivity,
+	                    invertY: DEFAULT_FLY_CAMERA_CONFIG.invertY,
+	                    keyBindings: DEFAULT_FLY_CAMERA_CONFIG.keyBindings,
+	                    smoothing: DEFAULT_FLY_CAMERA_CONFIG.smoothing,
+	                    friction: DEFAULT_FLY_CAMERA_CONFIG.friction,
+	                    enableCollision: DEFAULT_FLY_CAMERA_CONFIG.enableCollision,
+	                    minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
+	                    maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
 	                };
+	                this._fly = this.entities.camera.script.create('flyCamera', {
+	                    attributes: flyAttributes,
+	                });
+	                // Wire event emission to core
+	                if (this._fly) {
+	                    ;
+	                    this._fly.emitFlyEvent = (type, detail) => {
+	                        this.emit({ type: type, detail });
+	                    };
+	                }
+	                // Deactivate fly by default; orbit is the initial mode
+	                if (this._fly?.deactivate) {
+	                    this._fly.deactivate();
+	                }
+	                // Initialize camera mode manager
+	                this._cameraModeManager = new CameraModeManager(this.app, this.entities.camera, this._orbit, this._fly, (eventType, detail) => {
+	                    this.emit({ type: eventType, detail });
+	                }, 'orbit');
 	            }
-	            // Deactivate fly by default; orbit is the initial mode
-	            if (this._fly?.deactivate) {
-	                this._fly.deactivate();
+	            catch (e) {
+	                console.warn('Failed to set up fly camera', e);
 	            }
-	            // Initialize camera mode manager
-	            this._cameraModeManager = new CameraModeManager(this.app, this.entities.camera, this._orbit, this._fly, (eventType, detail) => {
-	                this.emit({ type: eventType, detail });
-	            }, 'orbit');
-	        }
-	        catch (e) {
-	            console.warn('Failed to set up fly camera', e);
 	        }
 	    }
 	    _setupStats() {
@@ -150269,6 +150309,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            'enable-stats',
 	            'auto-focus',
 	            'max-splats',
+	            'preview-mode',
 	            'camera-position',
 	            'camera-target',
 	            'orbit-sensitivity',
@@ -150299,6 +150340,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    get autoFocus() {
 	        return this.hasAttribute('auto-focus');
 	    }
+	    get previewMode() {
+	        return this.hasAttribute('preview-mode');
+	    }
 	    get maxSplats() {
 	        return this.getAttribute('max-splats');
 	    }
@@ -150376,6 +150420,14 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            this.removeAttribute('auto-focus');
 	        }
 	    }
+	    set previewMode(value) {
+	        if (value) {
+	            this.setAttribute('preview-mode', '');
+	        }
+	        else {
+	            this.removeAttribute('preview-mode');
+	        }
+	    }
 	    set maxSplats(value) {
 	        if (value === null) {
 	            this.removeAttribute('max-splats');
@@ -150557,6 +150609,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                return value.length > 0;
 	            case 'enable-stats':
 	            case 'auto-focus':
+	            case 'preview-mode':
 	            case 'enable-navigation-cube':
 	                // Boolean attributes - any value is valid
 	                return true;
@@ -151503,7 +151556,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        if (!this._core) {
 	            throw new Error('SplatViewerElement: Core not initialized. Call connectedCallback first.');
 	        }
-	        return this._core.selectSplatsInSphere(center, radius, modelId, addToSelection);
+	        return this._core.selectSplatsInSphere(new Vec3(center.x, center.y, center.z), radius, modelId, addToSelection);
 	    }
 	    clearSplatSelection() {
 	        if (!this._core) {