topazcube 0.1.33 → 0.1.35

package/dist/Renderer.js

@@ -751,6 +751,13 @@ function sphereInCascade(bsphere, cascadeMatrix) {
   if (clipZ + clipRadius < 0 || clipZ - clipRadius > 1) return false;
   return true;
 }
+const BoundingSphere = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  calculateBoundingSphere,
+  calculateShadowBoundingSphere,
+  sphereInCascade,
+  transformBoundingSphere
+}, Symbol.toStringTag, { value: "Module" }));
 var _UID$2 = 30001;
 class Geometry {
   constructor(engine, attributes) {
@@ -1913,6 +1920,7 @@ class Material {
     this.luminanceToAlpha = false;
     this.forceEmissive = false;
     this.specularBoost = 0;
+    this.doubleSided = false;
   }
   /**
    * Get textures array, substituting albedo for emission if forceEmissive is true
@@ -2648,6 +2656,13 @@ class ShadowPass extends BasePass {
     this.noiseAnimated = true;
     this.hizPass = null;
     this._meshBindGroups = /* @__PURE__ */ new WeakMap();
+    this._cameraShadowBuffer = null;
+    this._cameraShadowReadBuffer = null;
+    this._cameraShadowPipeline = null;
+    this._cameraShadowBindGroup = null;
+    this._cameraShadowUniformBuffer = null;
+    this._cameraInShadow = false;
+    this._cameraShadowPending = false;
   }
   /**
    * Set the HiZ pass for occlusion culling of static meshes
@@ -2764,6 +2779,7 @@ class ShadowPass extends BasePass {
     });
     this._createPlaceholderTextures();
     await this._createPipeline();
+    await this._createCameraShadowDetection();
   }
   async _createPipeline() {
     const { device } = this.engine;
@@ -3207,12 +3223,13 @@ class ShadowPass extends BasePass {
    * @param {mat4} cascadeMatrix - Cascade's view-projection matrix
    * @param {Array} lightDir - Normalized light direction (pointing to light)
    * @param {number} groundLevel - Ground plane Y coordinate
+   * @param {Object|null} combinedBsphere - Combined bsphere for skinned models (optional)
    * @returns {{ data: Float32Array, count: number }}
    */
-  _buildCascadeFilteredInstances(geometry, cascadeMatrix, lightDir, groundLevel) {
+  _buildCascadeFilteredInstances(geometry, cascadeMatrix, lightDir, groundLevel, combinedBsphere = null) {
     const instanceStride = 28;
     const visibleIndices = [];
-    const localBsphere = geometry.getBoundingSphere?.();
+    const localBsphere = combinedBsphere || geometry.getBoundingSphere?.();
     for (let i = 0; i < geometry.instanceCount; i++) {
       const offset = i * instanceStride;
       let bsphere = {
@@ -3260,12 +3277,13 @@ class ShadowPass extends BasePass {
    * @param {Array} lightDir - Normalized light direction
    * @param {number} maxDistance - Max shadow distance (min of light radius and spotMaxDistance)
    * @param {number} coneAngle - Half-angle of spotlight cone in radians
+   * @param {Object|null} combinedBsphere - Combined bsphere for skinned models (optional)
    * @returns {{ data: Float32Array, count: number }}
    */
-  _buildFilteredInstances(geometry, lightPos, lightDir, maxDistance, coneAngle) {
+  _buildFilteredInstances(geometry, lightPos, lightDir, maxDistance, coneAngle, combinedBsphere = null) {
     const instanceStride = 28;
     const visibleIndices = [];
-    const localBsphere = geometry.getBoundingSphere?.();
+    const localBsphere = combinedBsphere || geometry.getBoundingSphere?.();
     for (let i = 0; i < geometry.instanceCount; i++) {
       const offset = i * instanceStride;
       let bsphere = {
@@ -3485,6 +3503,10 @@ class ShadowPass extends BasePass {
       console.warn("ShadowPass: No pipeline or meshes", { pipeline: !!this.pipeline, meshes: !!meshes });
       return;
     }
+    this._meshBindGroups = /* @__PURE__ */ new WeakMap();
+    if (this._skinBindGroups) {
+      this._skinBindGroups = /* @__PURE__ */ new WeakMap();
+    }
     let shadowDrawCalls = 0;
     let shadowTriangles = 0;
     let shadowCulledInstances = 0;
@@ -3523,7 +3545,7 @@ class ShadowPass extends BasePass {
         visibleMeshes[name] = mesh;
         continue;
       }
-      const localBsphere = geometry.getBoundingSphere?.();
+      const localBsphere = mesh.combinedBsphere || geometry.getBoundingSphere?.();
       if (!localBsphere || localBsphere.radius <= 0) {
         meshNoBsphere++;
         visibleMeshes[name] = mesh;
@@ -3532,23 +3554,28 @@ class ShadowPass extends BasePass {
       const matrix = geometry.instanceData?.subarray(0, 16);
       const worldBsphere = matrix ? transformBoundingSphere(localBsphere, matrix) : localBsphere;
       const shadowBsphere = mainLightEnabled ? calculateShadowBoundingSphere(worldBsphere, lightDir, groundLevel) : worldBsphere;
-      const dx = shadowBsphere.center[0] - camera.position[0];
-      const dy = shadowBsphere.center[1] - camera.position[1];
-      const dz = shadowBsphere.center[2] - camera.position[2];
-      const distance = Math.sqrt(dx * dx + dy * dy + dz * dz) - shadowBsphere.radius;
+      const skinnedExpansion = this.engine?.settings?.shadow?.skinnedBsphereExpansion ?? 2;
+      const cullBsphere = mesh.hasSkin ? {
+        center: shadowBsphere.center,
+        radius: shadowBsphere.radius * skinnedExpansion
+      } : shadowBsphere;
+      const dx = cullBsphere.center[0] - camera.position[0];
+      const dy = cullBsphere.center[1] - camera.position[1];
+      const dz = cullBsphere.center[2] - camera.position[2];
+      const distance = Math.sqrt(dx * dx + dy * dy + dz * dz) - cullBsphere.radius;
       if (distance > shadowMaxDistance) {
         meshDistanceCulled++;
         continue;
       }
       if (shadowFrustumCullingEnabled && cameraFrustum) {
-        if (!cameraFrustum.testSpherePlanes(shadowBsphere)) {
+        if (!cameraFrustum.testSpherePlanes(cullBsphere)) {
           meshFrustumCulled++;
           continue;
         }
       }
       if (shadowHiZEnabled && this.hizPass) {
         const occluded = this.hizPass.testSphereOcclusion(
-          shadowBsphere,
+          cullBsphere,
           camera.viewProj,
           camera.near,
           camera.far,
@@ -3610,7 +3637,9 @@ class ShadowPass extends BasePass {
               geometry,
               this.cascadeMatrices[cascade],
               lightDir,
-              groundLevel
+              groundLevel,
+              mesh.combinedBsphere
+              // Use combined bsphere for skinned models
             );
             if (filtered.count === 0) {
               cascadeCulledInstances += geometry.instanceCount;
@@ -3729,6 +3758,9 @@ class ShadowPass extends BasePass {
       this.cascadeMatricesData.set(this.cascadeMatrices[i], i * 16);
     }
     device.queue.writeBuffer(this.cascadeMatricesBuffer, 0, this.cascadeMatricesData);
+    if (mainLightEnabled) {
+      this._updateCameraShadowDetection(camera);
+    }
     if (!mainLightEnabled) {
       for (const name in meshes) {
         const mesh = meshes[name];
@@ -3813,7 +3845,9 @@ class ShadowPass extends BasePass {
             lightPos,
             spotLightDir,
             spotShadowMaxDist,
-            coneAngle
+            coneAngle,
+            mesh.combinedBsphere
+            // Use combined bsphere for skinned models
           );
           if (filtered.count === 0) {
             spotCulledInstances += geometry.instanceCount;
@@ -4042,6 +4076,184 @@ class ShadowPass extends BasePass {
   getLastSlotInfo() {
     return this.lastSlotInfo;
   }
+  /**
+   * Get cascade matrices as JavaScript arrays (for CPU-side calculations)
+   */
+  getCascadeMatrices() {
+    return this.cascadeMatrices;
+  }
+  /**
+   * Create resources for camera shadow detection
+   * Uses a compute shader to sample shadow at camera position
+   */
+  async _createCameraShadowDetection() {
+    const { device } = this.engine;
+    this._cameraShadowUniformBuffer = device.createBuffer({
+      label: "Camera Shadow Detection Uniforms",
+      size: 256,
+      // Aligned
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this._cameraShadowBuffer = device.createBuffer({
+      label: "Camera Shadow Result",
+      size: 4,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    });
+    this._cameraShadowReadBuffer = device.createBuffer({
+      label: "Camera Shadow Readback",
+      size: 4,
+      usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
+    });
+    const shaderModule = device.createShaderModule({
+      label: "Camera Shadow Detection Shader",
+      code: `
+                struct Uniforms {
+                    cameraPosition: vec3f,
+                    _pad0: f32,
+                    cascadeMatrix0: mat4x4f,
+                    cascadeMatrix1: mat4x4f,
+                    cascadeMatrix2: mat4x4f,
+                }
+
+                @group(0) @binding(0) var<uniform> uniforms: Uniforms;
+                @group(0) @binding(1) var shadowMap: texture_depth_2d_array;
+                @group(0) @binding(2) var shadowSampler: sampler_comparison;
+                @group(0) @binding(3) var<storage, read_write> result: f32;
+
+                fn sampleShadowCascade(worldPos: vec3f, cascadeMatrix: mat4x4f, cascadeIndex: i32) -> f32 {
+                    let lightSpacePos = cascadeMatrix * vec4f(worldPos, 1.0);
+                    let projCoords = lightSpacePos.xyz / lightSpacePos.w;
+
+                    // Convert to UV space
+                    let uv = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);
+
+                    // Check bounds
+                    if (uv.x < 0.01 || uv.x > 0.99 || uv.y < 0.01 || uv.y > 0.99 ||
+                        projCoords.z < 0.0 || projCoords.z > 1.0) {
+                        return -1.0; // Out of bounds, try next cascade
+                    }
+
+                    let bias = 0.005;
+                    let depth = projCoords.z - bias;
+                    return textureSampleCompareLevel(shadowMap, shadowSampler, uv, cascadeIndex, depth);
+                }
+
+                @compute @workgroup_size(1)
+                fn main() {
+                    let pos = uniforms.cameraPosition;
+
+                    // Sample multiple points around camera (5m sphere)
+                    var totalShadow = 0.0;
+                    var sampleCount = 0.0;
+
+                    let offsets = array<vec3f, 7>(
+                        vec3f(0.0, 0.0, 0.0),   // Center
+                        vec3f(0.0, 3.0, 0.0),   // Above
+                        vec3f(0.0, -2.0, 0.0),  // Below
+                        vec3f(4.0, 0.0, 0.0),   // Right
+                        vec3f(-4.0, 0.0, 0.0),  // Left
+                        vec3f(0.0, 0.0, 4.0),   // Front
+                        vec3f(0.0, 0.0, -4.0),  // Back
+                    );
+
+                    for (var i = 0; i < 7; i++) {
+                        let samplePos = pos + offsets[i];
+
+                        // Try cascade 0 first (closest)
+                        var shadow = sampleShadowCascade(samplePos, uniforms.cascadeMatrix0, 0);
+                        if (shadow < 0.0) {
+                            // Try cascade 1
+                            shadow = sampleShadowCascade(samplePos, uniforms.cascadeMatrix1, 1);
+                        }
+                        if (shadow < 0.0) {
+                            // Try cascade 2
+                            shadow = sampleShadowCascade(samplePos, uniforms.cascadeMatrix2, 2);
+                        }
+
+                        if (shadow >= 0.0) {
+                            totalShadow += shadow;
+                            sampleCount += 1.0;
+                        }
+                    }
+
+                    // Average shadow (0 = all in shadow, 1 = all lit)
+                    // If no valid samples, assume lit
+                    if (sampleCount > 0.0) {
+                        result = totalShadow / sampleCount;
+                    } else {
+                        result = 1.0;
+                    }
+                }
+            `
+    });
+    this._cameraShadowBGL = device.createBindGroupLayout({
+      label: "Camera Shadow Detection BGL",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.COMPUTE, texture: { sampleType: "depth", viewDimension: "2d-array" } },
+        { binding: 2, visibility: GPUShaderStage.COMPUTE, sampler: { type: "comparison" } },
+        { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
+      ]
+    });
+    this._cameraShadowPipeline = await device.createComputePipelineAsync({
+      label: "Camera Shadow Detection Pipeline",
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this._cameraShadowBGL] }),
+      compute: { module: shaderModule, entryPoint: "main" }
+    });
+  }
+  /**
+   * Update camera shadow detection (called during execute)
+   * Dispatches compute shader and starts async readback
+   */
+  _updateCameraShadowDetection(camera) {
+    if (!this._cameraShadowPipeline || !this.directionalShadowMap) return;
+    if (this._cameraShadowPending) return;
+    const { device } = this.engine;
+    const cameraPos = camera.position || [0, 0, 0];
+    const data = new Float32Array(64);
+    data[0] = cameraPos[0];
+    data[1] = cameraPos[1];
+    data[2] = cameraPos[2];
+    data[3] = 0;
+    if (this.cascadeMatrices[0]) data.set(this.cascadeMatrices[0], 4);
+    if (this.cascadeMatrices[1]) data.set(this.cascadeMatrices[1], 20);
+    if (this.cascadeMatrices[2]) data.set(this.cascadeMatrices[2], 36);
+    device.queue.writeBuffer(this._cameraShadowUniformBuffer, 0, data);
+    const bindGroup = device.createBindGroup({
+      layout: this._cameraShadowBGL,
+      entries: [
+        { binding: 0, resource: { buffer: this._cameraShadowUniformBuffer } },
+        { binding: 1, resource: this.directionalShadowMapView },
+        { binding: 2, resource: this.shadowSampler },
+        { binding: 3, resource: { buffer: this._cameraShadowBuffer } }
+      ]
+    });
+    const encoder = device.createCommandEncoder({ label: "Camera Shadow Detection" });
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this._cameraShadowPipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.dispatchWorkgroups(1);
+    pass.end();
+    encoder.copyBufferToBuffer(this._cameraShadowBuffer, 0, this._cameraShadowReadBuffer, 0, 4);
+    device.queue.submit([encoder.finish()]);
+    this._cameraShadowPending = true;
+    this._cameraShadowReadBuffer.mapAsync(GPUMapMode.READ).then(() => {
+      const data2 = new Float32Array(this._cameraShadowReadBuffer.getMappedRange());
+      const shadowValue = data2[0];
+      this._cameraShadowReadBuffer.unmap();
+      this._cameraShadowPending = false;
+      this._cameraInShadow = shadowValue < 0.3;
+    }).catch(() => {
+      this._cameraShadowPending = false;
+    });
+  }
+  /**
+   * Check if camera is in shadow (uses async readback result from previous frames)
+   * @returns {boolean} True if camera is mostly in shadow
+   */
+  isCameraInShadow() {
+    return this._cameraInShadow;
+  }
 }
 class ProbeCapture {
   constructor(engine) {
@@ -5699,8 +5911,10 @@ class Pipeline {
     // Optional tile light indices buffer for tiled lighting
     lightBuffer = null,
     // Optional light storage buffer for tiled lighting
-    noiseTexture = null
+    noiseTexture = null,
     // Optional noise texture for alpha hashing
+    doubleSided = false
+    // Optional: disable backface culling for double-sided materials
   }) {
     let texture = textures[0];
     const { canvas, device, canvasFormat, options } = engine;
@@ -5762,7 +5976,7 @@ class Pipeline {
         geometry.vertexBufferLayout,
         geometry.instanceBufferLayout
       ];
-      pipelineDescriptor.primitive.cullMode = "back";
+      pipelineDescriptor.primitive.cullMode = doubleSided ? "none" : "back";
       pipelineDescriptor.depthStencil = {
         depthWriteEnabled: true,
         depthCompare: "less",
@@ -5990,6 +6204,7 @@ class Pipeline {
     p.tileLightBuffer = tileLightBuffer;
     p.lightBuffer = lightBuffer;
     p.noiseTexture = noiseTexture;
+    p.doubleSided = doubleSided;
     return p;
   }
   static async pipelineFromTextures(engine, pipelineDescriptor, label, textures, uniformBuffer, skin = null, noiseTexture = null) {
@@ -6164,7 +6379,7 @@ class Pipeline {
     }
   }
 }
-var geometry_default = "struct VertexInput {\n    @location(0) position: vec3f,\n    @location(1) uv: vec2f,\n    @location(2) normal: vec3f,\n    @location(3) color: vec4f,\n    @location(4) weights: vec4f,\n    @location(5) joints: vec4u,\n}\n\nstruct VertexOutput {\n    @invariant @builtin(position) position: vec4f,  \n    @location(0) worldPos: vec3f,\n    @location(1) uv: vec2f,\n    @location(2) normal: vec3f,\n    @location(3) viewZ: f32,           \n    @location(4) currClipPos: vec4f,   \n    @location(5) prevClipPos: vec4f,   \n    @location(6) instanceColor: vec4f, \n    @location(7) anchorY: f32,         \n}\n\nstruct Uniforms {\n    viewMatrix: mat4x4f,\n    projectionMatrix: mat4x4f,\n    prevViewProjMatrix: mat4x4f,  \n    mipBias: f32,\n    skinEnabled: f32,  \n    numJoints: f32,    \n    near: f32,         \n    far: f32,          \n    jitterFadeDistance: f32,  \n    jitterOffset: vec2f,      \n    screenSize: vec2f,        \n    emissionFactor: vec4f,\n    clipPlaneY: f32,          \n    clipPlaneEnabled: f32,    \n    clipPlaneDirection: f32,  \n    pixelRounding: f32,       \n    pixelExpansion: f32,      \n    positionRounding: f32,    \n    alphaHashEnabled: f32,    \n    alphaHashScale: f32,      \n    luminanceToAlpha: f32,    \n    noiseSize: f32,           \n    noiseOffsetX: f32,        \n    noiseOffsetY: f32,        \n    cameraPosition: vec3f,    \n    distanceFadeStart: f32,   \n    distanceFadeEnd: f32,     \n    \n    billboardMode: f32,       \n    billboardCameraRight: vec3f,  \n    _pad1: f32,\n    billboardCameraUp: vec3f,     \n    _pad2: f32,\n    billboardCameraForward: vec3f, \n    specularBoost: f32,            \n}\n\nstruct InstanceData {\n    modelMatrix: mat4x4f,\n    posRadius: vec4f,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var albedoTexture: texture_2d<f32>;\n@group(0) @binding(2) var albedoSampler: sampler;\n@group(0) @binding(3) var normalTexture: texture_2d<f32>;\n@group(0) @binding(4) var normalSampler: sampler;\n@group(0) @binding(5) var ambientTexture: texture_2d<f32>;\n@group(0) @binding(6) var ambientSampler: sampler;\n@group(0) @binding(7) var rmTexture: texture_2d<f32>;\n@group(0) @binding(8) var rmSampler: sampler;\n@group(0) @binding(9) var emissionTexture: texture_2d<f32>;\n@group(0) @binding(10) var emissionSampler: sampler;\n@group(0) @binding(11) var jointTexture: texture_2d<f32>;\n@group(0) @binding(12) var jointSampler: sampler;\n@group(0) @binding(13) var prevJointTexture: texture_2d<f32>;  \n@group(0) @binding(14) var noiseTexture: texture_2d<f32>;    \n\nfn sampleNoise(screenPos: vec2f) -> f32 {\n    let noiseSize = i32(uniforms.noiseSize);\n    let noiseOffsetX = i32(uniforms.noiseOffsetX * f32(noiseSize));\n    let noiseOffsetY = i32(uniforms.noiseOffsetY * f32(noiseSize));\n\n    let texCoord = vec2i(\n        (i32(screenPos.x) + noiseOffsetX) % noiseSize,\n        (i32(screenPos.y) + noiseOffsetY) % noiseSize\n    );\n    return textureLoad(noiseTexture, texCoord, 0).r;\n}\n\nfn getJointMatrix(jointIndex: u32) -> mat4x4f {\n    let row = i32(jointIndex);\n    let col0 = textureLoad(jointTexture, vec2i(0, row), 0);\n    let col1 = textureLoad(jointTexture, vec2i(1, row), 0);\n    let col2 = textureLoad(jointTexture, vec2i(2, row), 0);\n    let col3 = textureLoad(jointTexture, vec2i(3, row), 0);\n    return mat4x4f(col0, col1, col2, col3);\n}\n\nfn getPrevJointMatrix(jointIndex: u32) -> mat4x4f {\n    let row = i32(jointIndex);\n    let col0 = textureLoad(prevJointTexture, vec2i(0, row), 0);\n    let col1 = textureLoad(prevJointTexture, vec2i(1, row), 0);\n    let col2 = textureLoad(prevJointTexture, vec2i(2, row), 0);\n    let col3 = textureLoad(prevJointTexture, vec2i(3, row), 0);\n    return mat4x4f(col0, col1, col2, col3);\n}\n\nfn applySkinning(position: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedPos = vec3f(0.0);\n\n    let m0 = getJointMatrix(joints.x);\n    let m1 = getJointMatrix(joints.y);\n    let m2 = getJointMatrix(joints.z);\n    let m3 = getJointMatrix(joints.w);\n\n    skinnedPos += (m0 * vec4f(position, 1.0)).xyz * weights.x;\n    skinnedPos += (m1 * vec4f(position, 1.0)).xyz * weights.y;\n    skinnedPos += (m2 * vec4f(position, 1.0)).xyz * weights.z;\n    skinnedPos += (m3 * vec4f(position, 1.0)).xyz * weights.w;\n\n    return skinnedPos;\n}\n\nfn applySkinningPrev(position: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedPos = vec3f(0.0);\n\n    let m0 = getPrevJointMatrix(joints.x);\n    let m1 = getPrevJointMatrix(joints.y);\n    let m2 = getPrevJointMatrix(joints.z);\n    let m3 = getPrevJointMatrix(joints.w);\n\n    skinnedPos += (m0 * vec4f(position, 1.0)).xyz * weights.x;\n    skinnedPos += (m1 * vec4f(position, 1.0)).xyz * weights.y;\n    skinnedPos += (m2 * vec4f(position, 1.0)).xyz * weights.z;\n    skinnedPos += (m3 * vec4f(position, 1.0)).xyz * weights.w;\n\n    return skinnedPos;\n}\n\nfn applySkinningNormal(normal: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedNormal = vec3f(0.0);\n\n    let m0 = getJointMatrix(joints.x);\n    let m1 = getJointMatrix(joints.y);\n    let m2 = getJointMatrix(joints.z);\n    let m3 = getJointMatrix(joints.w);\n\n    \n    let r0 = mat3x3f(m0[0].xyz, m0[1].xyz, m0[2].xyz);\n    let r1 = mat3x3f(m1[0].xyz, m1[1].xyz, m1[2].xyz);\n    let r2 = mat3x3f(m2[0].xyz, m2[1].xyz, m2[2].xyz);\n    let r3 = mat3x3f(m3[0].xyz, m3[1].xyz, m3[2].xyz);\n\n    skinnedNormal += (r0 * normal) * weights.x;\n    skinnedNormal += (r1 * normal) * weights.y;\n    skinnedNormal += (r2 * normal) * weights.z;\n    skinnedNormal += (r3 * normal) * weights.w;\n\n    return normalize(skinnedNormal);\n}\n\n@vertex\nfn vertexMain(\n    input: VertexInput,\n    @builtin(instance_index) instanceIdx : u32,\n    @location(6) instanceModelMatrix0: vec4f,\n    @location(7) instanceModelMatrix1: vec4f,\n    @location(8) instanceModelMatrix2: vec4f,\n    @location(9) instanceModelMatrix3: vec4f,\n    @location(10) posRadius: vec4f,\n    @location(11) uvTransform: vec4f,     \n    @location(12) instanceColor: vec4f,   \n) -> VertexOutput {\n    var output: VertexOutput;\n\n    \n    let instanceModelMatrix = mat4x4f(\n        instanceModelMatrix0,\n        instanceModelMatrix1,\n        instanceModelMatrix2,\n        instanceModelMatrix3\n    );\n\n    var localPos = input.position;\n    var prevLocalPos = input.position;  \n    var localNormal = input.normal;\n    var billboardWorldPos: vec3f;\n    var useBillboardWorldPos = false;\n\n    \n    if (uniforms.billboardMode > 0.5) {\n        \n        let entityPos = instanceModelMatrix[3].xyz;\n\n        \n        let scaleX = length(instanceModelMatrix[0].xyz);\n        let scaleY = length(instanceModelMatrix[1].xyz);\n\n        if (uniforms.billboardMode < 1.5) {\n            \n            \n            let toCamera = uniforms.cameraPosition - entityPos;\n            let toCameraDist = length(toCamera);\n\n            var right: vec3f;\n            var up: vec3f;\n\n            if (toCameraDist > 0.001) {\n                let forward = toCamera / toCameraDist;\n                \n                right = cross(vec3f(0.0, 1.0, 0.0), forward);\n                let rightLen = length(right);\n                if (rightLen < 0.001) {\n                    \n                    right = uniforms.billboardCameraRight;\n                    up = vec3f(0.0, 0.0, 1.0);  \n                } else {\n                    right = right / rightLen;\n                    \n                    up = cross(forward, right);\n                }\n            } else {\n                right = uniforms.billboardCameraRight;\n                up = vec3f(0.0, 1.0, 0.0);\n            }\n\n            let offset = right * input.position.x * scaleX + up * input.position.y * scaleY;\n            billboardWorldPos = entityPos + offset;\n            useBillboardWorldPos = true;\n            localNormal = vec3f(0.0, 1.0, 0.0);  \n\n        } else if (uniforms.billboardMode < 2.5) {\n            \n            \n            let toCamera = uniforms.cameraPosition - entityPos;\n            let toCameraDist = length(toCamera);\n\n            var right: vec3f;\n            var billUp: vec3f;\n\n            if (toCameraDist > 0.001) {\n                let forward = toCamera / toCameraDist;  \n                \n                right = cross(vec3f(0.0, 1.0, 0.0), forward);\n                let rightLen = length(right);\n                if (rightLen < 0.001) {\n                    \n                    right = uniforms.billboardCameraRight;\n                    billUp = uniforms.billboardCameraUp;\n                } else {\n                    right = right / rightLen;\n                    \n                    billUp = cross(forward, right);\n                }\n            } else {\n                \n                right = uniforms.billboardCameraRight;\n                billUp = uniforms.billboardCameraUp;\n            }\n\n            let offset = right * input.position.x * scaleX + billUp * input.position.y * scaleY;\n            billboardWorldPos = entityPos + offset;\n            useBillboardWorldPos = true;\n            localNormal = vec3f(0.0, 1.0, 0.0);  \n\n        } else {\n            \n            \n            \n            \n            localNormal = vec3f(0.0, 1.0, 0.0);  \n        }\n    }\n\n    \n    if (uniforms.skinEnabled > 0.5) {\n        \n        let weightSum = input.weights.x + input.weights.y + input.weights.z + input.weights.w;\n        if (weightSum > 0.001) {\n            localPos = applySkinning(input.position, input.joints, input.weights);\n            prevLocalPos = applySkinningPrev(input.position, input.joints, input.weights);\n            localNormal = applySkinningNormal(input.normal, input.joints, input.weights);\n        }\n    }\n\n    \n    \n    \n    var worldPos: vec3f;\n    if (useBillboardWorldPos) {\n        worldPos = billboardWorldPos;\n    } else {\n        worldPos = (instanceModelMatrix * vec4f(localPos, 1.0)).xyz;\n    }\n    var viewPos = uniforms.viewMatrix * vec4f(worldPos, 1.0);\n\n    \n    let allowRounding = posRadius.w >= 0.0;\n\n    \n    \n    if (allowRounding && uniforms.positionRounding > 0.0) {\n        let snap = uniforms.positionRounding;\n        viewPos = vec4f(\n            floor(viewPos.x / snap) * snap,\n            floor(viewPos.y / snap) * snap,\n            viewPos.z,\n            viewPos.w\n        );\n    }\n\n    var clipPos = uniforms.projectionMatrix * viewPos;\n\n    \n    \n    \n    var prevWorldPos: vec3f;\n    if (useBillboardWorldPos) {\n        prevWorldPos = billboardWorldPos;  \n    } else {\n        prevWorldPos = (instanceModelMatrix * vec4f(prevLocalPos, 1.0)).xyz;\n    }\n    let prevClipPos = uniforms.prevViewProjMatrix * vec4f(prevWorldPos, 1.0);\n\n    \n    \n    let viewDist = -viewPos.z;  \n    let jitterFade = saturate(1.0 - viewDist / uniforms.jitterFadeDistance);\n\n    \n    \n    let jitterClip = uniforms.jitterOffset * 2.0 / uniforms.screenSize * jitterFade;\n    clipPos.x += jitterClip.x * clipPos.w;\n    clipPos.y += jitterClip.y * clipPos.w;\n\n    \n    \n    if (allowRounding && uniforms.pixelRounding > 0.5) {\n        let gridSize = uniforms.pixelRounding;  \n        let ndc = clipPos.xy / clipPos.w;\n\n        \n        let pixelCoords = (ndc + 1.0) * 0.5 * uniforms.screenSize;\n\n        \n        var snappedPixel = floor(pixelCoords / gridSize) * gridSize;\n\n        \n        if (uniforms.pixelExpansion > 0.0) {\n            let screenCenter = uniforms.screenSize * 0.5;\n            let fromCenter = snappedPixel - screenCenter;\n            snappedPixel += sign(fromCenter) * uniforms.pixelExpansion;\n        }\n\n        \n        let snappedNDC = (snappedPixel / uniforms.screenSize) * 2.0 - 1.0;\n\n        \n        clipPos.x = snappedNDC.x * clipPos.w;\n        clipPos.y = snappedNDC.y * clipPos.w;\n    }\n\n    output.position = clipPos;\n    output.worldPos = worldPos;\n    \n    output.uv = input.uv * uvTransform.zw + uvTransform.xy;\n    output.viewZ = viewDist;\n    output.currClipPos = clipPos;\n    output.prevClipPos = prevClipPos;\n    output.instanceColor = instanceColor;\n\n    \n    \n    \n    \n    if (uniforms.billboardMode > 0.5) {\n        let entityPos = instanceModelMatrix[3].xyz;\n        output.anchorY = entityPos.y;\n    } else {\n        output.anchorY = worldPos.y;  \n    }\n\n    \n    \n    if (uniforms.billboardMode > 0.5) {\n        output.normal = localNormal;  \n    } else {\n        let normalMatrix = mat3x3f(\n            instanceModelMatrix[0].xyz,\n            instanceModelMatrix[1].xyz,\n            instanceModelMatrix[2].xyz\n        );\n        output.normal = normalMatrix * localNormal;\n    }\n    return output;\n}\n\nstruct GBufferOutput {\n    @location(0) albedo: vec4f,\n    @location(1) normal: vec4f,\n    @location(2) arm: vec4f,    \n    @location(3) emission: vec4f,\n    @location(4) velocity: vec2f,  \n    @builtin(frag_depth) depth: f32,  \n}\n\nfn interleavedGradientNoise(screenPos: vec2f) -> f32 {\n    let magic = vec3f(0.06711056, 0.00583715, 52.9829189);\n    return fract(magic.z * fract(dot(screenPos, magic.xy)));\n}\n\nfn screenHash(screenPos: vec2f) -> f32 {\n    let p = fract(screenPos * vec2f(0.1031, 0.1030));\n    let p3 = p.xyx * (p.yxy + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> GBufferOutput {\n    \n    \n    \n    \n    \n    if (uniforms.clipPlaneEnabled > 0.5 && uniforms.billboardMode < 0.5) {\n        let clipDist = (input.worldPos.y - uniforms.clipPlaneY) * uniforms.clipPlaneDirection;\n        if (clipDist < 0.0) {\n            discard;\n        }\n    }\n\n    \n    \n    if (uniforms.distanceFadeEnd > 0.0) {\n        let distToCamera = length(input.worldPos - uniforms.cameraPosition);\n        if (distToCamera >= uniforms.distanceFadeEnd) {\n            discard;  \n        }\n        if (distToCamera > uniforms.distanceFadeStart) {\n            \n            let fadeRange = uniforms.distanceFadeEnd - uniforms.distanceFadeStart;\n            let fadeFactor = 1.0 - (distToCamera - uniforms.distanceFadeStart) / fadeRange;\n            \n            let noise = sampleNoise(input.position.xy);\n            if (fadeFactor < noise) {\n                discard;  \n            }\n        }\n    }\n\n    var output: GBufferOutput;\n\n    \n    let mipBias = uniforms.mipBias; \n    output.albedo = textureSampleBias(albedoTexture, albedoSampler, input.uv, mipBias);\n\n    \n    output.albedo = output.albedo * input.instanceColor;\n\n    \n    \n    if (uniforms.luminanceToAlpha > 0.5) {\n        let luminance = dot(output.albedo.rgb, vec3f(0.299, 0.587, 0.114));\n        if (luminance < 0.004) {\n            discard;  \n        }\n        output.albedo.a = 1.0;  \n    }\n\n    \n    \n    if (uniforms.alphaHashEnabled > 0.5 && uniforms.luminanceToAlpha < 0.5) {\n        let alpha = output.albedo.a * uniforms.alphaHashScale;\n        let noise = sampleNoise(input.position.xy);\n\n        \n        if (alpha < 0.5) {\n            discard;\n        }\n        \n        \n        let remappedAlpha = (alpha - 0.5) * 2.0;\n        if (remappedAlpha < noise) {\n            discard;\n        }\n    }\n\n    \n\n    \n    let nsample = textureSampleBias(normalTexture, normalSampler, input.uv, mipBias).rgb;\n    let tangentNormal = normalize(nsample * 2.0 - 1.0);\n\n    \n    let N = normalize(input.normal);\n    \n    let refVec = select(vec3f(0.0, 1.0, 0.0), vec3f(1.0, 0.0, 0.0), abs(N.y) > 0.9);\n    let T = normalize(cross(N, refVec));\n    let B = cross(N, T);\n    let TBN = mat3x3f(T, B, N);\n\n    \n    let normal = normalize(TBN * tangentNormal);\n    \n    output.normal = vec4f(normal, input.worldPos.y);\n\n    \n    var ambient = textureSampleBias(ambientTexture, ambientSampler, input.uv, mipBias).rgb;\n    if (ambient.r < 0.04) {\n        ambient.r = 1.0;\n    }\n    let rm = textureSampleBias(rmTexture, rmSampler, input.uv, mipBias).rgb;\n    output.arm = vec4f(ambient.r, rm.g, rm.b, uniforms.specularBoost);\n\n    \n    output.emission = textureSampleBias(emissionTexture, emissionSampler, input.uv, mipBias) * uniforms.emissionFactor;\n\n    \n    \n    let currNDC = input.currClipPos.xy / input.currClipPos.w;\n    let prevNDC = input.prevClipPos.xy / input.prevClipPos.w;\n\n    \n    \n    \n    let velocityNDC = currNDC - prevNDC;\n    output.velocity = velocityNDC * uniforms.screenSize * 0.5;\n\n    \n    let near = uniforms.near;\n    let far = uniforms.far;\n    let z = input.viewZ;\n    output.depth = (z - near) / (far - near);\n\n    return output;\n}";
+var geometry_default = "struct VertexInput {\n    @location(0) position: vec3f,\n    @location(1) uv: vec2f,\n    @location(2) normal: vec3f,\n    @location(3) color: vec4f,\n    @location(4) weights: vec4f,\n    @location(5) joints: vec4u,\n}\n\nstruct VertexOutput {\n    @invariant @builtin(position) position: vec4f,  \n    @location(0) worldPos: vec3f,\n    @location(1) uv: vec2f,\n    @location(2) normal: vec3f,\n    @location(3) viewZ: f32,           \n    @location(4) currClipPos: vec4f,   \n    @location(5) prevClipPos: vec4f,   \n    @location(6) instanceColor: vec4f, \n    @location(7) anchorY: f32,         \n}\n\nstruct Uniforms {\n    viewMatrix: mat4x4f,\n    projectionMatrix: mat4x4f,\n    prevViewProjMatrix: mat4x4f,  \n    mipBias: f32,\n    skinEnabled: f32,  \n    numJoints: f32,    \n    near: f32,         \n    far: f32,          \n    jitterFadeDistance: f32,  \n    jitterOffset: vec2f,      \n    screenSize: vec2f,        \n    emissionFactor: vec4f,\n    clipPlaneY: f32,          \n    clipPlaneEnabled: f32,    \n    clipPlaneDirection: f32,  \n    pixelRounding: f32,       \n    pixelExpansion: f32,      \n    positionRounding: f32,    \n    alphaHashEnabled: f32,    \n    alphaHashScale: f32,      \n    luminanceToAlpha: f32,    \n    noiseSize: f32,           \n    noiseOffsetX: f32,        \n    noiseOffsetY: f32,        \n    cameraPosition: vec3f,    \n    distanceFadeStart: f32,   \n    distanceFadeEnd: f32,     \n    \n    billboardMode: f32,       \n    billboardCameraRight: vec3f,  \n    _pad1: f32,\n    billboardCameraUp: vec3f,     \n    _pad2: f32,\n    billboardCameraForward: vec3f, \n    specularBoost: f32,            \n}\n\nstruct InstanceData {\n    modelMatrix: mat4x4f,\n    posRadius: vec4f,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var albedoTexture: texture_2d<f32>;\n@group(0) @binding(2) var albedoSampler: sampler;\n@group(0) @binding(3) var normalTexture: texture_2d<f32>;\n@group(0) @binding(4) var normalSampler: sampler;\n@group(0) @binding(5) var ambientTexture: texture_2d<f32>;\n@group(0) @binding(6) var ambientSampler: sampler;\n@group(0) @binding(7) var rmTexture: texture_2d<f32>;\n@group(0) @binding(8) var rmSampler: sampler;\n@group(0) @binding(9) var emissionTexture: texture_2d<f32>;\n@group(0) @binding(10) var emissionSampler: sampler;\n@group(0) @binding(11) var jointTexture: texture_2d<f32>;\n@group(0) @binding(12) var jointSampler: sampler;\n@group(0) @binding(13) var prevJointTexture: texture_2d<f32>;  \n@group(0) @binding(14) var noiseTexture: texture_2d<f32>;    \n\nfn sampleNoise(screenPos: vec2f) -> f32 {\n    let noiseSize = i32(uniforms.noiseSize);\n    let noiseOffsetX = i32(uniforms.noiseOffsetX * f32(noiseSize));\n    let noiseOffsetY = i32(uniforms.noiseOffsetY * f32(noiseSize));\n\n    let texCoord = vec2i(\n        (i32(screenPos.x) + noiseOffsetX) % noiseSize,\n        (i32(screenPos.y) + noiseOffsetY) % noiseSize\n    );\n    return textureLoad(noiseTexture, texCoord, 0).r;\n}\n\nfn getJointMatrix(jointIndex: u32) -> mat4x4f {\n    let row = i32(jointIndex);\n    let col0 = textureLoad(jointTexture, vec2i(0, row), 0);\n    let col1 = textureLoad(jointTexture, vec2i(1, row), 0);\n    let col2 = textureLoad(jointTexture, vec2i(2, row), 0);\n    let col3 = textureLoad(jointTexture, vec2i(3, row), 0);\n    return mat4x4f(col0, col1, col2, col3);\n}\n\nfn getPrevJointMatrix(jointIndex: u32) -> mat4x4f {\n    let row = i32(jointIndex);\n    let col0 = textureLoad(prevJointTexture, vec2i(0, row), 0);\n    let col1 = textureLoad(prevJointTexture, vec2i(1, row), 0);\n    let col2 = textureLoad(prevJointTexture, vec2i(2, row), 0);\n    let col3 = textureLoad(prevJointTexture, vec2i(3, row), 0);\n    return mat4x4f(col0, col1, col2, col3);\n}\n\nfn applySkinning(position: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedPos = vec3f(0.0);\n\n    let m0 = getJointMatrix(joints.x);\n    let m1 = getJointMatrix(joints.y);\n    let m2 = getJointMatrix(joints.z);\n    let m3 = getJointMatrix(joints.w);\n\n    skinnedPos += (m0 * vec4f(position, 1.0)).xyz * weights.x;\n    skinnedPos += (m1 * vec4f(position, 1.0)).xyz * weights.y;\n    skinnedPos += (m2 * vec4f(position, 1.0)).xyz * weights.z;\n    skinnedPos += (m3 * vec4f(position, 1.0)).xyz * weights.w;\n\n    return skinnedPos;\n}\n\nfn applySkinningPrev(position: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedPos = vec3f(0.0);\n\n    let m0 = getPrevJointMatrix(joints.x);\n    let m1 = getPrevJointMatrix(joints.y);\n    let m2 = getPrevJointMatrix(joints.z);\n    let m3 = getPrevJointMatrix(joints.w);\n\n    skinnedPos += (m0 * vec4f(position, 1.0)).xyz * weights.x;\n    skinnedPos += (m1 * vec4f(position, 1.0)).xyz * weights.y;\n    skinnedPos += (m2 * vec4f(position, 1.0)).xyz * weights.z;\n    skinnedPos += (m3 * vec4f(position, 1.0)).xyz * weights.w;\n\n    return skinnedPos;\n}\n\nfn applySkinningNormal(normal: vec3f, joints: vec4u, weights: vec4f) -> vec3f {\n    var skinnedNormal = vec3f(0.0);\n\n    let m0 = getJointMatrix(joints.x);\n    let m1 = getJointMatrix(joints.y);\n    let m2 = getJointMatrix(joints.z);\n    let m3 = getJointMatrix(joints.w);\n\n    \n    let r0 = mat3x3f(m0[0].xyz, m0[1].xyz, m0[2].xyz);\n    let r1 = mat3x3f(m1[0].xyz, m1[1].xyz, m1[2].xyz);\n    let r2 = mat3x3f(m2[0].xyz, m2[1].xyz, m2[2].xyz);\n    let r3 = mat3x3f(m3[0].xyz, m3[1].xyz, m3[2].xyz);\n\n    skinnedNormal += (r0 * normal) * weights.x;\n    skinnedNormal += (r1 * normal) * weights.y;\n    skinnedNormal += (r2 * normal) * weights.z;\n    skinnedNormal += (r3 * normal) * weights.w;\n\n    return normalize(skinnedNormal);\n}\n\n@vertex\nfn vertexMain(\n    input: VertexInput,\n    @builtin(instance_index) instanceIdx : u32,\n    @location(6) instanceModelMatrix0: vec4f,\n    @location(7) instanceModelMatrix1: vec4f,\n    @location(8) instanceModelMatrix2: vec4f,\n    @location(9) instanceModelMatrix3: vec4f,\n    @location(10) posRadius: vec4f,\n    @location(11) uvTransform: vec4f,     \n    @location(12) instanceColor: vec4f,   \n) -> VertexOutput {\n    var output: VertexOutput;\n\n    \n    let instanceModelMatrix = mat4x4f(\n        instanceModelMatrix0,\n        instanceModelMatrix1,\n        instanceModelMatrix2,\n        instanceModelMatrix3\n    );\n\n    var localPos = input.position;\n    var prevLocalPos = input.position;  \n    var localNormal = input.normal;\n    var billboardWorldPos: vec3f;\n    var useBillboardWorldPos = false;\n\n    \n    if (uniforms.billboardMode > 0.5) {\n        \n        let entityPos = instanceModelMatrix[3].xyz;\n\n        \n        let scaleX = length(instanceModelMatrix[0].xyz);\n        let scaleY = length(instanceModelMatrix[1].xyz);\n\n        if (uniforms.billboardMode < 1.5) {\n            \n            \n            let toCamera = uniforms.cameraPosition - entityPos;\n            let toCameraDist = length(toCamera);\n\n            var right: vec3f;\n            var up: vec3f;\n\n            if (toCameraDist > 0.001) {\n                let forward = toCamera / toCameraDist;\n                \n                right = cross(vec3f(0.0, 1.0, 0.0), forward);\n                let rightLen = length(right);\n                if (rightLen < 0.001) {\n                    \n                    right = uniforms.billboardCameraRight;\n                    up = vec3f(0.0, 0.0, 1.0);  \n                } else {\n                    right = right / rightLen;\n                    \n                    up = cross(forward, right);\n                }\n            } else {\n                right = uniforms.billboardCameraRight;\n                up = vec3f(0.0, 1.0, 0.0);\n            }\n\n            let offset = right * input.position.x * scaleX + up * input.position.y * scaleY;\n            billboardWorldPos = entityPos + offset;\n            useBillboardWorldPos = true;\n            localNormal = vec3f(0.0, 1.0, 0.0);  \n\n        } else if (uniforms.billboardMode < 2.5) {\n            \n            \n            let toCamera = uniforms.cameraPosition - entityPos;\n            let toCameraDist = length(toCamera);\n\n            var right: vec3f;\n            var billUp: vec3f;\n\n            if (toCameraDist > 0.001) {\n                let forward = toCamera / toCameraDist;  \n                \n                right = cross(vec3f(0.0, 1.0, 0.0), forward);\n                let rightLen = length(right);\n                if (rightLen < 0.001) {\n                    \n                    right = uniforms.billboardCameraRight;\n                    billUp = uniforms.billboardCameraUp;\n                } else {\n                    right = right / rightLen;\n                    \n                    billUp = cross(forward, right);\n                }\n            } else {\n                \n                right = uniforms.billboardCameraRight;\n                billUp = uniforms.billboardCameraUp;\n            }\n\n            let offset = right * input.position.x * scaleX + billUp * input.position.y * scaleY;\n            billboardWorldPos = entityPos + offset;\n            useBillboardWorldPos = true;\n            localNormal = vec3f(0.0, 1.0, 0.0);  \n\n        } else {\n            \n            \n            \n            \n            localNormal = vec3f(0.0, 1.0, 0.0);  \n        }\n    }\n\n    \n    if (uniforms.skinEnabled > 0.5) {\n        \n        let weightSum = input.weights.x + input.weights.y + input.weights.z + input.weights.w;\n        if (weightSum > 0.001) {\n            localPos = applySkinning(input.position, input.joints, input.weights);\n            prevLocalPos = applySkinningPrev(input.position, input.joints, input.weights);\n            localNormal = applySkinningNormal(input.normal, input.joints, input.weights);\n        }\n    }\n\n    \n    \n    \n    var worldPos: vec3f;\n    if (useBillboardWorldPos) {\n        worldPos = billboardWorldPos;\n    } else {\n        worldPos = (instanceModelMatrix * vec4f(localPos, 1.0)).xyz;\n    }\n    var viewPos = uniforms.viewMatrix * vec4f(worldPos, 1.0);\n\n    \n    let allowRounding = posRadius.w >= 0.0;\n\n    \n    \n    if (allowRounding && uniforms.positionRounding > 0.0) {\n        let snap = uniforms.positionRounding;\n        viewPos = vec4f(\n            floor(viewPos.x / snap) * snap,\n            floor(viewPos.y / snap) * snap,\n            viewPos.z,\n            viewPos.w\n        );\n    }\n\n    var clipPos = uniforms.projectionMatrix * viewPos;\n\n    \n    \n    \n    var prevWorldPos: vec3f;\n    if (useBillboardWorldPos) {\n        prevWorldPos = billboardWorldPos;  \n    } else {\n        prevWorldPos = (instanceModelMatrix * vec4f(prevLocalPos, 1.0)).xyz;\n    }\n    let prevClipPos = uniforms.prevViewProjMatrix * vec4f(prevWorldPos, 1.0);\n\n    \n    \n    let viewDist = -viewPos.z;  \n    let jitterFade = saturate(1.0 - viewDist / uniforms.jitterFadeDistance);\n\n    \n    \n    let jitterClip = uniforms.jitterOffset * 2.0 / uniforms.screenSize * jitterFade;\n    clipPos.x += jitterClip.x * clipPos.w;\n    clipPos.y += jitterClip.y * clipPos.w;\n\n    \n    \n    if (allowRounding && uniforms.pixelRounding > 0.5) {\n        let gridSize = uniforms.pixelRounding;  \n        let ndc = clipPos.xy / clipPos.w;\n\n        \n        let pixelCoords = (ndc + 1.0) * 0.5 * uniforms.screenSize;\n\n        \n        var snappedPixel = floor(pixelCoords / gridSize) * gridSize;\n\n        \n        if (uniforms.pixelExpansion > 0.0) {\n            let screenCenter = uniforms.screenSize * 0.5;\n            let fromCenter = snappedPixel - screenCenter;\n            snappedPixel += sign(fromCenter) * uniforms.pixelExpansion;\n        }\n\n        \n        let snappedNDC = (snappedPixel / uniforms.screenSize) * 2.0 - 1.0;\n\n        \n        clipPos.x = snappedNDC.x * clipPos.w;\n        clipPos.y = snappedNDC.y * clipPos.w;\n    }\n\n    output.position = clipPos;\n    output.worldPos = worldPos;\n    \n    output.uv = input.uv * uvTransform.zw + uvTransform.xy;\n    output.viewZ = viewDist;\n    output.currClipPos = clipPos;\n    output.prevClipPos = prevClipPos;\n    output.instanceColor = instanceColor;\n\n    \n    \n    \n    \n    if (uniforms.billboardMode > 0.5) {\n        let entityPos = instanceModelMatrix[3].xyz;\n        output.anchorY = entityPos.y;\n    } else {\n        output.anchorY = worldPos.y;  \n    }\n\n    \n    \n    if (uniforms.billboardMode > 0.5) {\n        output.normal = localNormal;  \n    } else {\n        let normalMatrix = mat3x3f(\n            instanceModelMatrix[0].xyz,\n            instanceModelMatrix[1].xyz,\n            instanceModelMatrix[2].xyz\n        );\n        output.normal = normalMatrix * localNormal;\n    }\n    return output;\n}\n\nstruct GBufferOutput {\n    @location(0) albedo: vec4f,\n    @location(1) normal: vec4f,\n    @location(2) arm: vec4f,    \n    @location(3) emission: vec4f,\n    @location(4) velocity: vec2f,  \n    @builtin(frag_depth) depth: f32,  \n}\n\nfn interleavedGradientNoise(screenPos: vec2f) -> f32 {\n    let magic = vec3f(0.06711056, 0.00583715, 52.9829189);\n    return fract(magic.z * fract(dot(screenPos, magic.xy)));\n}\n\nfn screenHash(screenPos: vec2f) -> f32 {\n    let p = fract(screenPos * vec2f(0.1031, 0.1030));\n    let p3 = p.xyx * (p.yxy + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput, @builtin(front_facing) frontFacing: bool) -> GBufferOutput {\n    \n    \n    \n    \n    \n    if (uniforms.clipPlaneEnabled > 0.5 && uniforms.billboardMode < 0.5) {\n        let clipDist = (input.worldPos.y - uniforms.clipPlaneY) * uniforms.clipPlaneDirection;\n        if (clipDist < 0.0) {\n            discard;\n        }\n    }\n\n    \n    \n    if (uniforms.distanceFadeEnd > 0.0) {\n        let distToCamera = length(input.worldPos - uniforms.cameraPosition);\n        if (distToCamera >= uniforms.distanceFadeEnd) {\n            discard;  \n        }\n        if (distToCamera > uniforms.distanceFadeStart) {\n            \n            let fadeRange = uniforms.distanceFadeEnd - uniforms.distanceFadeStart;\n            let fadeFactor = 1.0 - (distToCamera - uniforms.distanceFadeStart) / fadeRange;\n            \n            let noise = sampleNoise(input.position.xy);\n            if (fadeFactor < noise) {\n                discard;  \n            }\n        }\n    }\n\n    var output: GBufferOutput;\n\n    \n    let mipBias = uniforms.mipBias; \n    output.albedo = textureSampleBias(albedoTexture, albedoSampler, input.uv, mipBias);\n\n    \n    output.albedo = output.albedo * input.instanceColor;\n\n    \n    \n    if (uniforms.luminanceToAlpha > 0.5) {\n        let luminance = dot(output.albedo.rgb, vec3f(0.299, 0.587, 0.114));\n        if (luminance < 0.004) {\n            discard;  \n        }\n        output.albedo.a = 1.0;  \n    }\n\n    \n    \n    if (uniforms.alphaHashEnabled > 0.5 && uniforms.luminanceToAlpha < 0.5) {\n        let alpha = output.albedo.a * uniforms.alphaHashScale;\n        let noise = sampleNoise(input.position.xy);\n\n        \n        if (alpha < 0.5) {\n            discard;\n        }\n        \n        \n        let remappedAlpha = (alpha - 0.5) * 2.0;\n        if (remappedAlpha < noise) {\n            discard;\n        }\n    }\n\n    \n\n    \n    let nsample = textureSampleBias(normalTexture, normalSampler, input.uv, mipBias).rgb;\n    let tangentNormal = normalize(nsample * 2.0 - 1.0);\n\n    \n    \n    let dPdx = dpdx(input.worldPos);\n    let dPdy = dpdy(input.worldPos);\n    let dUVdx = dpdx(input.uv);\n    let dUVdy = dpdy(input.uv);\n\n    let N = normalize(input.normal);\n\n    \n    let dp2perp = cross(dPdy, N);\n    let dp1perp = cross(N, dPdx);\n\n    \n    \n    var T = -(dp2perp * dUVdx.x + dp1perp * dUVdy.x);\n    var B = dp2perp * dUVdx.y + dp1perp * dUVdy.y;\n\n    \n    let invmax = inverseSqrt(max(dot(T, T), dot(B, B)));\n    T = T * invmax;\n    B = B * invmax;\n\n    \n    if (length(T) < 0.001 || length(B) < 0.001) {\n        let refVec = select(vec3f(0.0, 1.0, 0.0), vec3f(1.0, 0.0, 0.0), abs(N.y) > 0.9);\n        T = normalize(cross(N, refVec));\n        B = cross(N, T);\n    }\n\n    \n    if (!frontFacing) {\n        T = -T;\n        B = -B;\n    }\n\n    let TBN = mat3x3f(T, B, N);\n\n    \n    let normal = normalize(TBN * tangentNormal);\n    \n    output.normal = vec4f(normal, input.worldPos.y);\n\n    \n    var ambient = textureSampleBias(ambientTexture, ambientSampler, input.uv, mipBias).rgb;\n    if (ambient.r < 0.04) {\n        ambient.r = 1.0;\n    }\n    let rm = textureSampleBias(rmTexture, rmSampler, input.uv, mipBias).rgb;\n    output.arm = vec4f(ambient.r, rm.g, rm.b, uniforms.specularBoost);\n\n    \n    output.emission = textureSampleBias(emissionTexture, emissionSampler, input.uv, mipBias) * uniforms.emissionFactor;\n\n    \n    \n    let currNDC = input.currClipPos.xy / input.currClipPos.w;\n    let prevNDC = input.prevClipPos.xy / input.prevClipPos.w;\n\n    \n    \n    \n    let velocityNDC = currNDC - prevNDC;\n    output.velocity = velocityNDC * uniforms.screenSize * 0.5;\n\n    \n    let near = uniforms.near;\n    let far = uniforms.far;\n    let z = input.viewZ;\n    output.depth = (z - near) / (far - near);\n\n    return output;\n}";
 class GBuffer {
   constructor() {
     this.isGBuffer = true;
@@ -6385,7 +6600,8 @@ class GBufferPass extends BasePass {
     const isSkinned = mesh.hasSkin && mesh.skin;
     const meshId = mesh.uid || mesh.geometry?.uid || "default";
     const forceEmissive = mesh.material?.forceEmissive ? "_emissive" : "";
-    return `${mesh.material.uid}_${meshId}${isSkinned ? "_skinned" : ""}${forceEmissive}`;
+    const doubleSided = mesh.material?.doubleSided ? "_dbl" : "";
+    return `${mesh.material.uid}_${meshId}${isSkinned ? "_skinned" : ""}${forceEmissive}${doubleSided}`;
   }
   /**
    * Check if pipeline is ready for a mesh (non-blocking)
@@ -6425,7 +6641,8 @@ class GBufferPass extends BasePass {
       textures: mesh.material.textures,
       renderTarget: this.gbuffer,
       skin: isSkinned ? mesh.skin : null,
-      noiseTexture: this.noiseTexture
+      noiseTexture: this.noiseTexture,
+      doubleSided: mesh.material?.doubleSided ?? false
     }).then((pipeline) => {
       this.pendingPipelines.delete(key);
       pipeline._warmupFrames = 2;
@@ -6460,7 +6677,8 @@ class GBufferPass extends BasePass {
       textures: mesh.material.textures,
       renderTarget: this.gbuffer,
       skin: isSkinned ? mesh.skin : null,
-      noiseTexture: this.noiseTexture
+      noiseTexture: this.noiseTexture,
+      doubleSided: mesh.material?.doubleSided ?? false
     });
     pipeline._warmupFrames = 2;
     pipelinesMap.set(key, pipeline);
@@ -6483,6 +6701,8 @@ class GBufferPass extends BasePass {
     const prevViewProjMatrix = prevData?.hasValidHistory ? prevData.viewProj : camera.viewProj;
     const emissionFactor = this.settings?.environment?.emissionFactor ?? [1, 1, 1, 4];
     const mipBias = this.settings?.rendering?.mipBias ?? options.mipBias ?? 0;
+    const animationSpeed = this.settings?.animation?.speed ?? 1;
+    const globalAnimTime = performance.now() / 1e3 * animationSpeed;
     stats.drawCalls = 0;
     stats.triangles = 0;
     camera.aspect = canvas.width / canvas.height;
@@ -6491,12 +6711,18 @@ class GBufferPass extends BasePass {
     this._extractCameraVectors(camera.view);
     let commandEncoder = null;
     let passEncoder = null;
+    const updatedSkins = /* @__PURE__ */ new Set();
     if (batches && batches.size > 0) {
       for (const [modelId, batch] of batches) {
         const mesh = batch.mesh;
         if (!mesh) continue;
-        if (batch.hasSkin && batch.skin && !batch.skin.externallyManaged) {
-          batch.skin.update(dt);
+        if (batch.hasSkin && batch.skin && !batch.skin.externallyManaged && !updatedSkins.has(batch.skin)) {
+          if (batch.skin._animStartTime === void 0) {
+            batch.skin._animStartTime = globalAnimTime;
+          }
+          const skinAnimTime = globalAnimTime - batch.skin._animStartTime;
+          batch.skin.updateAtTime(skinAnimTime);
+          updatedSkins.add(batch.skin);
         }
         const pipeline = await this._getOrCreatePipeline(mesh);
         if (pipeline._warmupFrames > 0) {
@@ -6615,8 +6841,13 @@ class GBufferPass extends BasePass {
           pipeline._warmupFrames--;
         }
         this.legacyCullingStats.rendered++;
-        if (mesh.skin && mesh.hasSkin && !mesh.skin.externallyManaged) {
-          mesh.skin.update(dt);
+        if (mesh.skin && mesh.hasSkin && !mesh.skin.externallyManaged && !updatedSkins.has(mesh.skin)) {
+          if (mesh.skin._animStartTime === void 0) {
+            mesh.skin._animStartTime = globalAnimTime;
+          }
+          const skinAnimTime = globalAnimTime - mesh.skin._animStartTime;
+          mesh.skin.updateAtTime(skinAnimTime);
+          updatedSkins.add(mesh.skin);
         }
         if (pipeline.geometry !== mesh.geometry) {
           pipeline.geometry = mesh.geometry;
@@ -7239,9 +7470,21 @@ class LightingPass extends BasePass {
   getOutputTexture() {
     return this.outputTexture;
   }
+  /**
+   * Get the light buffer for volumetric fog
+   */
+  getLightBuffer() {
+    return this.lightBuffer;
+  }
+  /**
+   * Get the current light count
+   */
+  getLightCount() {
+    return this.lights?.length ?? 0;
+  }
 }
 var particle_simulate_default = "const WORKGROUP_SIZE: u32 = 64u;\nconst MAX_EMITTERS: u32 = 16u;\nconst CASCADE_COUNT = 3;\nconst MAX_LIGHTS = 64u;\nconst MAX_SPOT_SHADOWS = 8;\nconst LIGHTING_FADE_TIME: f32 = 0.3;  \n\nconst SPOT_ATLAS_WIDTH: f32 = 2048.0;\nconst SPOT_ATLAS_HEIGHT: f32 = 2048.0;\nconst SPOT_TILE_SIZE: f32 = 512.0;\nconst SPOT_TILES_PER_ROW: i32 = 4;\n\nstruct Particle {\n    position: vec3f,      \n    lifetime: f32,        \n    velocity: vec3f,      \n    maxLifetime: f32,     \n    color: vec4f,         \n    size: vec2f,          \n    rotation: f32,        \n    flags: u32,           \n    lighting: vec3f,      \n    lightingPad: f32,     \n}\n\nstruct Light {\n    enabled: u32,\n    position: vec3f,\n    color: vec4f,\n    direction: vec3f,\n    geom: vec4f, \n    shadowIndex: i32,\n}\n\nstruct CascadeMatrices {\n    matrices: array<mat4x4<f32>, CASCADE_COUNT>,\n}\n\nstruct SpotShadowMatrices {\n    matrices: array<mat4x4<f32>, MAX_SPOT_SHADOWS>,\n}\n\nstruct SpawnRequest {\n    position: vec3f,\n    lifetime: f32,\n    velocity: vec3f,\n    maxLifetime: f32,\n    color: vec4f,\n    startSize: f32,\n    endSize: f32,\n    rotation: f32,        \n    flags: u32,           \n}\n\nstruct EmitterSettings {\n    gravity: vec3f,\n    drag: f32,\n    turbulence: f32,\n    fadeIn: f32,\n    fadeOut: f32,\n    rotationSpeed: f32,\n    startSize: f32,\n    endSize: f32,\n    baseAlpha: f32,\n    padding: f32,\n}\n\nstruct SimulationUniforms {\n    dt: f32,\n    time: f32,\n    maxParticles: u32,\n    emitterCount: u32,\n    \n    cameraPosition: vec3f,\n    shadowBias: f32,\n    lightDir: vec3f,\n    shadowStrength: f32,\n    lightColor: vec4f,\n    ambientColor: vec4f,\n    cascadeSizes: vec4f,\n    lightCount: u32,\n    pad1: u32,\n    pad2: u32,\n    pad3: u32,\n}\n\nstruct Counters {\n    aliveCount: atomic<u32>,\n    nextFreeIndex: atomic<u32>,\n    spawnCount: u32,\n    frameCount: u32,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: SimulationUniforms;\n@group(0) @binding(1) var<storage, read_write> particles: array<Particle>;\n@group(0) @binding(2) var<storage, read_write> counters: Counters;\n@group(0) @binding(3) var<storage, read> spawnRequests: array<SpawnRequest>;\n@group(0) @binding(4) var<storage, read> emitterSettings: array<EmitterSettings>;\n\n@group(0) @binding(5) var<storage, read> emitterRenderSettings: array<EmitterRenderSettings>;\n@group(0) @binding(6) var shadowMapArray: texture_depth_2d_array;\n@group(0) @binding(7) var shadowSampler: sampler_comparison;\n@group(0) @binding(8) var<storage, read> cascadeMatrices: CascadeMatrices;\n@group(0) @binding(9) var<storage, read> lights: array<Light, MAX_LIGHTS>;\n@group(0) @binding(10) var spotShadowAtlas: texture_depth_2d;\n@group(0) @binding(11) var<storage, read> spotMatrices: SpotShadowMatrices;\n\nstruct EmitterRenderSettings {\n    lit: f32,\n    emissive: f32,\n    softness: f32,\n    zOffset: f32,\n}\n\nfn hash(p: vec3f) -> f32 {\n    var p3 = fract(p * 0.1031);\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n}\n\nfn noise3D(p: vec3f) -> vec3f {\n    let i = floor(p);\n    let f = fract(p);\n    let u = f * f * (3.0 - 2.0 * f);\n\n    return vec3f(\n        mix(hash(i), hash(i + vec3f(1.0, 0.0, 0.0)), u.x),\n        mix(hash(i + vec3f(0.0, 1.0, 0.0)), hash(i + vec3f(1.0, 1.0, 0.0)), u.x),\n        mix(hash(i + vec3f(0.0, 0.0, 1.0)), hash(i + vec3f(1.0, 0.0, 1.0)), u.x)\n    ) * 2.0 - 1.0;\n}\n\nfn squircleDistanceXZ(offset: vec2f, size: f32) -> f32 {\n    let normalized = offset / size;\n    let absNorm = abs(normalized);\n    return pow(pow(absNorm.x, 4.0) + pow(absNorm.y, 4.0), 0.25);\n}\n\nfn sampleCascadeShadow(worldPos: vec3f, cascadeIndex: i32) -> f32 {\n    let bias = uniforms.shadowBias;\n    let lightMatrix = cascadeMatrices.matrices[cascadeIndex];\n    let lightSpacePos = lightMatrix * vec4f(worldPos, 1.0);\n    let projCoords = lightSpacePos.xyz / lightSpacePos.w;\n    let shadowUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n    let currentDepth = projCoords.z - bias;\n\n    \n    if (shadowUV.x < 0.0 || shadowUV.x > 1.0 || shadowUV.y < 0.0 || shadowUV.y > 1.0 ||\n        currentDepth < 0.0 || currentDepth > 1.0) {\n        return 1.0;\n    }\n\n    \n    return textureSampleCompareLevel(shadowMapArray, shadowSampler, shadowUV, cascadeIndex, currentDepth);\n}\n\nfn calculateParticleShadow(worldPos: vec3f) -> f32 {\n    let camXZ = vec2f(uniforms.cameraPosition.x, uniforms.cameraPosition.z);\n    let posXZ = vec2f(worldPos.x, worldPos.z);\n    let offsetXZ = posXZ - camXZ;\n\n    let dist0 = squircleDistanceXZ(offsetXZ, uniforms.cascadeSizes.x);\n    let dist1 = squircleDistanceXZ(offsetXZ, uniforms.cascadeSizes.y);\n    let dist2 = squircleDistanceXZ(offsetXZ, uniforms.cascadeSizes.z);\n\n    var shadow = 1.0;\n    if (dist0 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, 0);\n    } else if (dist1 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, 1);\n    } else if (dist2 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, 2);\n    }\n\n    return mix(1.0 - uniforms.shadowStrength, 1.0, shadow);\n}\n\nfn calculateSpotShadow(worldPos: vec3f, slotIndex: i32) -> f32 {\n    if (slotIndex < 0 || slotIndex >= MAX_SPOT_SHADOWS) {\n        return 1.0;\n    }\n\n    let lightMatrix = spotMatrices.matrices[slotIndex];\n    let lightSpacePos = lightMatrix * vec4f(worldPos, 1.0);\n    let w = max(abs(lightSpacePos.w), 0.0001) * sign(lightSpacePos.w + 0.0001);\n    let projCoords = lightSpacePos.xyz / w;\n\n    if (projCoords.z < 0.0 || projCoords.z > 1.0 || abs(projCoords.x) > 1.0 || abs(projCoords.y) > 1.0) {\n        return 1.0;\n    }\n\n    let col = slotIndex % SPOT_TILES_PER_ROW;\n    let row = slotIndex / SPOT_TILES_PER_ROW;\n    let localUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n    let tileOffset = vec2f(f32(col), f32(row)) * SPOT_TILE_SIZE;\n    let atlasUV = (tileOffset + localUV * SPOT_TILE_SIZE) / vec2f(SPOT_ATLAS_WIDTH, SPOT_ATLAS_HEIGHT);\n    let currentDepth = clamp(projCoords.z - uniforms.shadowBias * 3.0, 0.001, 0.999);\n\n    return textureSampleCompareLevel(spotShadowAtlas, shadowSampler, atlasUV, currentDepth);\n}\n\nfn calculateParticleLighting(worldPos: vec3f, emitterIdx: u32) -> vec3f {\n    let renderSettings = emitterRenderSettings[min(emitterIdx, MAX_EMITTERS - 1u)];\n\n    \n    if (renderSettings.lit < 0.5) {\n        return vec3f(renderSettings.emissive);\n    }\n\n    \n    let normal = vec3f(0.0, 1.0, 0.0);\n\n    \n    var lighting = uniforms.ambientColor.rgb * uniforms.ambientColor.a;\n\n    \n    let shadow = calculateParticleShadow(worldPos);\n    let NdotL = max(dot(normal, uniforms.lightDir), 0.0);\n    lighting += uniforms.lightColor.rgb * uniforms.lightColor.a * NdotL * shadow;\n\n    \n    let lightCount = uniforms.lightCount;\n    for (var i = 0u; i < min(lightCount, MAX_LIGHTS); i++) {\n        let light = lights[i];\n        if (light.enabled == 0u) { continue; }\n\n        let lightVec = light.position - worldPos;\n        let dist = length(lightVec);\n        let lightDir = normalize(lightVec);\n        let distanceFade = light.geom.w;\n\n        \n        let radius = max(light.geom.x, 0.001);\n        let attenuation = max(0.0, 1.0 - dist / radius);\n        let attenuationSq = attenuation * attenuation * distanceFade;\n        if (attenuationSq <= 0.001) { continue; }\n\n        \n        let innerCone = light.geom.y;\n        let outerCone = light.geom.z;\n        var spotAttenuation = 1.0;\n        let isSpotlight = outerCone > 0.0;\n        if (isSpotlight) {\n            let spotCos = dot(-lightDir, normalize(light.direction));\n            spotAttenuation = smoothstep(outerCone, innerCone, spotCos);\n        }\n        if (spotAttenuation <= 0.001) { continue; }\n\n        \n        var lightShadow = 1.0;\n        if (isSpotlight && light.shadowIndex >= 0) {\n            lightShadow = calculateSpotShadow(worldPos, light.shadowIndex);\n        }\n\n        \n        let pNdotL = max(dot(normal, lightDir), 0.0);\n        let pIntensity = light.color.a * attenuationSq * spotAttenuation * lightShadow * pNdotL;\n        lighting += pIntensity * light.color.rgb;\n    }\n\n    return lighting * renderSettings.emissive;\n}\n\n@compute @workgroup_size(WORKGROUP_SIZE)\nfn spawn(@builtin(global_invocation_id) globalId: vec3u) {\n    let idx = globalId.x;\n\n    \n    if (idx >= counters.spawnCount) {\n        return;\n    }\n\n    \n    let maxAttempts = 8u;  \n    var particleIdx = 0u;\n    var foundSlot = false;\n\n    for (var attempt = 0u; attempt < maxAttempts; attempt++) {\n        let rawIdx = atomicAdd(&counters.nextFreeIndex, 1u);\n        particleIdx = rawIdx % uniforms.maxParticles;\n\n        \n        let existing = particles[particleIdx];\n        if ((existing.flags & 1u) == 0u || existing.lifetime <= 0.0) {\n            foundSlot = true;\n            break;\n        }\n    }\n\n    \n    if (!foundSlot) {\n        return;\n    }\n\n    \n    let req = spawnRequests[idx];\n\n    \n    var p: Particle;\n    p.position = req.position;\n    p.lifetime = req.lifetime;\n    p.velocity = req.velocity;\n    p.maxLifetime = req.maxLifetime;\n    p.color = req.color;\n    p.size = vec2f(req.startSize, req.startSize);\n    p.rotation = req.rotation;  \n    p.flags = req.flags;\n    \n    p.lighting = uniforms.ambientColor.rgb * uniforms.ambientColor.a;\n    p.lightingPad = 0.0;\n\n    \n    particles[particleIdx] = p;\n\n    \n    atomicAdd(&counters.aliveCount, 1u);\n}\n\n@compute @workgroup_size(WORKGROUP_SIZE)\nfn simulate(@builtin(global_invocation_id) globalId: vec3u) {\n    let idx = globalId.x;\n\n    \n    if (idx >= uniforms.maxParticles) {\n        return;\n    }\n\n    var p = particles[idx];\n\n    \n    if ((p.flags & 1u) == 0u || p.lifetime <= 0.0) {\n        return;\n    }\n\n    \n    let emitterIdx = (p.flags >> 8u) & 0xFFu;\n    let settings = emitterSettings[min(emitterIdx, MAX_EMITTERS - 1u)];\n\n    let dt = uniforms.dt;\n\n    \n    p.lifetime -= dt;\n\n    \n    if (p.lifetime <= 0.0) {\n        p.flags = 0u;  \n        p.lifetime = 0.0;\n        atomicSub(&counters.aliveCount, 1u);\n        particles[idx] = p;\n        return;\n    }\n\n    \n    let lifeProgress = 1.0 - (p.lifetime / p.maxLifetime);\n\n    \n    p.velocity += settings.gravity * dt;\n\n    \n    let dragFactor = 1.0 - settings.drag * dt;\n    p.velocity *= max(dragFactor, 0.0);\n\n    \n    if (settings.turbulence > 0.0) {\n        let noisePos = p.position * 0.5 + vec3f(uniforms.time * 0.1, 0.0, 0.0);\n        let turbulenceForce = noise3D(noisePos + vec3f(p.rotation * 10.0)) * settings.turbulence;\n        p.velocity += turbulenceForce * dt * 10.0;\n    }\n\n    \n    p.position += p.velocity * dt;\n\n    \n    let currentSize = mix(settings.startSize, settings.endSize, lifeProgress);\n    p.size = vec2f(currentSize, currentSize);\n\n    \n    let rotationDir = select(-1.0, 1.0, p.rotation >= 0.0);\n    p.rotation += rotationDir * settings.rotationSpeed * dt;\n\n    \n    var alpha = settings.baseAlpha;\n\n    \n    let fadeInDuration = settings.fadeIn / p.maxLifetime;\n    if (lifeProgress < fadeInDuration && fadeInDuration > 0.0) {\n        alpha *= lifeProgress / fadeInDuration;\n    }\n\n    \n    let fadeOutStart = 1.0 - (settings.fadeOut / p.maxLifetime);\n    if (lifeProgress > fadeOutStart && fadeOutStart < 1.0) {\n        let fadeOutProgress = (lifeProgress - fadeOutStart) / (1.0 - fadeOutStart);\n        alpha *= 1.0 - fadeOutProgress;\n    }\n\n    \n    p.color.a = alpha;\n\n    \n    let targetLighting = calculateParticleLighting(p.position, emitterIdx);\n\n    \n    \n    let lerpFactor = clamp(dt / LIGHTING_FADE_TIME, 0.0, 1.0);\n    p.lighting = mix(p.lighting, targetLighting, lerpFactor);\n\n    \n    particles[idx] = p;\n}\n\n@compute @workgroup_size(1)\nfn resetCounters() {\n    \n    atomicStore(&counters.nextFreeIndex, 0u);\n}";
-var particle_render_default = "const PI = 3.14159265359;\nconst CASCADE_COUNT = 3;\nconst MAX_EMITTERS = 16u;\nconst MAX_LIGHTS = 64u;\nconst MAX_SPOT_SHADOWS = 8;\n\nconst SPOT_ATLAS_WIDTH: f32 = 2048.0;\nconst SPOT_ATLAS_HEIGHT: f32 = 2048.0;\nconst SPOT_TILE_SIZE: f32 = 512.0;\nconst SPOT_TILES_PER_ROW: i32 = 4;\n\nstruct Particle {\n    position: vec3f,\n    lifetime: f32,\n    velocity: vec3f,\n    maxLifetime: f32,\n    color: vec4f,\n    size: vec2f,\n    rotation: f32,    \n    flags: u32,\n    lighting: vec3f,  \n    lightingPad: f32,\n}\n\nstruct Light {\n    enabled: u32,\n    position: vec3f,\n    color: vec4f,\n    direction: vec3f,\n    geom: vec4f, \n    shadowIndex: i32, \n}\n\nstruct EmitterRenderSettings {\n    lit: f32,           \n    emissive: f32,      \n    softness: f32,\n    zOffset: f32,\n}\n\nstruct SpotShadowMatrices {\n    matrices: array<mat4x4<f32>, MAX_SPOT_SHADOWS>,\n}\n\nstruct ParticleUniforms {\n    viewMatrix: mat4x4f,\n    projectionMatrix: mat4x4f,\n    cameraPosition: vec3f,\n    time: f32,\n    cameraRight: vec3f,\n    softness: f32,\n    cameraUp: vec3f,\n    zOffset: f32,\n    screenSize: vec2f,\n    near: f32,\n    far: f32,\n    blendMode: f32,       \n    lit: f32,             \n    shadowBias: f32,\n    shadowStrength: f32,\n    \n    lightDir: vec3f,\n    shadowMapSize: f32,\n    lightColor: vec4f,\n    ambientColor: vec4f,\n    cascadeSizes: vec4f,  \n    \n    envParams: vec4f,     \n    \n    lightParams: vec4u,   \n    \n    fogColor: vec3f,\n    fogEnabled: f32,\n    fogDistances: vec3f,  \n    fogBrightResist: f32,\n    fogAlphas: vec3f,     \n    fogPad1: f32,\n    fogHeightFade: vec2f, \n    fogPad2: vec2f,\n}\n\nstruct CascadeMatrices {\n    matrices: array<mat4x4<f32>, CASCADE_COUNT>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n    @location(1) color: vec4f,\n    @location(2) viewZ: f32,\n    @location(3) linearDepth: f32,  \n    @location(4) lighting: vec3f,   \n    @location(5) @interpolate(flat) emitterIdx: u32,  \n    @location(6) worldPos: vec3f,   \n}\n\n@group(0) @binding(0) var<uniform> uniforms: ParticleUniforms;\n@group(0) @binding(1) var<storage, read> particles: array<Particle>;\n@group(0) @binding(2) var particleTexture: texture_2d<f32>;\n@group(0) @binding(3) var particleSampler: sampler;\n@group(0) @binding(4) var depthTexture: texture_depth_2d;\n@group(0) @binding(5) var shadowMapArray: texture_depth_2d_array;\n@group(0) @binding(6) var shadowSampler: sampler_comparison;\n@group(0) @binding(7) var<storage, read> cascadeMatrices: CascadeMatrices;\n@group(0) @binding(8) var<storage, read> emitterSettings: array<EmitterRenderSettings, MAX_EMITTERS>;\n@group(0) @binding(9) var envMap: texture_2d<f32>;\n@group(0) @binding(10) var envSampler: sampler;\n\n@group(0) @binding(11) var<storage, read> lights: array<Light, MAX_LIGHTS>;\n\n@group(0) @binding(12) var spotShadowAtlas: texture_depth_2d;\n@group(0) @binding(13) var spotShadowSampler: sampler_comparison;\n@group(0) @binding(14) var<storage, read> spotMatrices: SpotShadowMatrices;\n\nfn getQuadVertex(vertexId: u32) -> vec2f {\n    \n    \n    \n    var corners = array<vec2f, 6>(\n        vec2f(-0.5, -0.5),  \n        vec2f(0.5, -0.5),   \n        vec2f(-0.5, 0.5),   \n        vec2f(0.5, -0.5),   \n        vec2f(0.5, 0.5),    \n        vec2f(-0.5, 0.5)    \n    );\n    return corners[vertexId];\n}\n\nfn getQuadUV(vertexId: u32) -> vec2f {\n    var uvs = array<vec2f, 6>(\n        vec2f(0.0, 1.0),  \n        vec2f(1.0, 1.0),  \n        vec2f(0.0, 0.0),  \n        vec2f(1.0, 1.0),  \n        vec2f(1.0, 0.0),  \n        vec2f(0.0, 0.0)   \n    );\n    return uvs[vertexId];\n}\n\n@vertex\nfn vertexMain(\n    @builtin(vertex_index) vertexIndex: u32,\n    @builtin(instance_index) instanceIndex: u32\n) -> VertexOutput {\n    var output: VertexOutput;\n\n    \n    let particle = particles[instanceIndex];\n\n    \n    let emitterIdx = (particle.flags >> 8u) & 0xFFu;\n    output.emitterIdx = emitterIdx;\n\n    \n    if ((particle.flags & 1u) == 0u || particle.lifetime <= 0.0) {\n        \n        output.position = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.uv = vec2f(0.0, 0.0);\n        output.color = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.viewZ = 0.0;\n        output.linearDepth = 0.0;\n        output.lighting = vec3f(0.0);\n        output.worldPos = vec3f(0.0);\n        return output;\n    }\n\n    \n    \n    let particleIsAdditive = (particle.flags & 2u) != 0u;\n    let renderingAdditive = uniforms.blendMode > 0.5;\n    if (particleIsAdditive != renderingAdditive) {\n        \n        output.position = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.uv = vec2f(0.0, 0.0);\n        output.color = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.viewZ = 0.0;\n        output.linearDepth = 0.0;\n        output.lighting = vec3f(0.0);\n        output.worldPos = vec3f(0.0);\n        return output;\n    }\n\n    \n    let localVertexId = vertexIndex % 6u;\n    var quadPos = getQuadVertex(localVertexId);\n    output.uv = getQuadUV(localVertexId);\n\n    \n    let cosR = cos(particle.rotation);\n    let sinR = sin(particle.rotation);\n    let rotatedPos = vec2f(\n        quadPos.x * cosR - quadPos.y * sinR,\n        quadPos.x * sinR + quadPos.y * cosR\n    );\n\n    \n    let particleWorldPos = particle.position;\n\n    \n    let scaledOffset = rotatedPos * particle.size;\n\n    \n    let right = uniforms.cameraRight;\n    let up = uniforms.cameraUp;\n    let billboardPos = particleWorldPos + right * scaledOffset.x + up * scaledOffset.y;\n\n    \n    let toCamera = normalize(uniforms.cameraPosition - particleWorldPos);\n    let offsetPos = billboardPos + toCamera * uniforms.zOffset;\n\n    \n    let viewPos = uniforms.viewMatrix * vec4f(offsetPos, 1.0);\n    output.position = uniforms.projectionMatrix * viewPos;\n    output.viewZ = -viewPos.z;  \n\n    \n    let z = -viewPos.z;  \n    output.linearDepth = (z - uniforms.near) / (uniforms.far - uniforms.near);\n\n    \n    output.lighting = particle.lighting;\n\n    \n    output.color = particle.color;\n\n    \n    output.worldPos = particleWorldPos;\n\n    return output;\n}\n\nfn SphToUV(n: vec3f) -> vec2f {\n    var uv: vec2f;\n    uv.x = atan2(-n.x, n.z);\n    uv.x = (uv.x + PI / 2.0) / (PI * 2.0) + PI * (28.670 / 360.0);\n    uv.y = acos(n.y) / PI;\n    return uv;\n}\n\nfn octEncode(n: vec3f) -> vec2f {\n    var n2 = n / (abs(n.x) + abs(n.y) + abs(n.z));\n    if (n2.y < 0.0) {\n        let signX = select(-1.0, 1.0, n2.x >= 0.0);\n        let signZ = select(-1.0, 1.0, n2.z >= 0.0);\n        n2 = vec3f(\n            (1.0 - abs(n2.z)) * signX,\n            n2.y,\n            (1.0 - abs(n2.x)) * signZ\n        );\n    }\n    return n2.xz * 0.5 + 0.5;\n}\n\nfn getEnvUV(dir: vec3f) -> vec2f {\n    if (uniforms.envParams.z > 0.5) {\n        return octEncode(dir);\n    }\n    return SphToUV(dir);\n}\n\nfn getIBLSample(dir: vec3f, lod: f32) -> vec3f {\n    let envRGBE = textureSampleLevel(envMap, envSampler, getEnvUV(dir), lod);\n    \n    let envColor = envRGBE.rgb * pow(2.0, envRGBE.a * 255.0 - 128.0);\n    return envColor;\n}\n\nfn squircleDistanceXZ(offset: vec2f, size: f32) -> f32 {\n    let normalized = offset / size;\n    let absNorm = abs(normalized);\n    return pow(pow(absNorm.x, 4.0) + pow(absNorm.y, 4.0), 0.25);\n}\n\nfn sampleCascadeShadow(worldPos: vec3f, normal: vec3f, cascadeIndex: i32) -> f32 {\n    let bias = uniforms.shadowBias;\n    let shadowMapSize = uniforms.shadowMapSize;\n\n    \n    let biasedPos = worldPos + normal * bias * 0.5;\n\n    \n    let lightMatrix = cascadeMatrices.matrices[cascadeIndex];\n\n    \n    let lightSpacePos = lightMatrix * vec4f(biasedPos, 1.0);\n    let projCoords = lightSpacePos.xyz / lightSpacePos.w;\n\n    \n    let shadowUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n    let currentDepth = projCoords.z - bias;\n\n    \n    let inBoundsX = shadowUV.x >= 0.0 && shadowUV.x <= 1.0;\n    let inBoundsY = shadowUV.y >= 0.0 && shadowUV.y <= 1.0;\n    let inBoundsZ = currentDepth >= 0.0 && currentDepth <= 1.0;\n\n    if (!inBoundsX || !inBoundsY || !inBoundsZ) {\n        return 1.0;  \n    }\n\n    let clampedUV = clamp(shadowUV, vec2f(0.001), vec2f(0.999));\n    let clampedDepth = clamp(currentDepth, 0.001, 0.999);\n\n    \n    let texelSize = 1.0 / shadowMapSize;\n    var shadow = 0.0;\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(-texelSize, 0.0), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(texelSize, 0.0), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(0.0, -texelSize), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(0.0, texelSize), cascadeIndex, clampedDepth);\n    shadow /= 4.0;\n\n    return shadow;\n}\n\nfn calculateParticleShadow(worldPos: vec3f, normal: vec3f) -> f32 {\n    let shadowStrength = uniforms.shadowStrength;\n\n    \n    let camXZ = vec2f(uniforms.cameraPosition.x, uniforms.cameraPosition.z);\n    let posXZ = vec2f(worldPos.x, worldPos.z);\n    let offsetXZ = posXZ - camXZ;\n\n    \n    let cascade0Size = uniforms.cascadeSizes.x;\n    let cascade1Size = uniforms.cascadeSizes.y;\n    let cascade2Size = uniforms.cascadeSizes.z;\n\n    let dist0 = squircleDistanceXZ(offsetXZ, cascade0Size);\n    let dist1 = squircleDistanceXZ(offsetXZ, cascade1Size);\n    let dist2 = squircleDistanceXZ(offsetXZ, cascade2Size);\n\n    var shadow = 1.0;\n\n    \n    if (dist0 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 0);\n    } else if (dist1 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 1);\n    } else if (dist2 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 2);\n    }\n\n    \n    return mix(1.0 - shadowStrength, 1.0, shadow);\n}\n\nfn calculateSpotShadow(worldPos: vec3f, normal: vec3f, slotIndex: i32) -> f32 {\n    if (slotIndex < 0 || slotIndex >= MAX_SPOT_SHADOWS) {\n        return 1.0;  \n    }\n\n    let bias = uniforms.shadowBias;\n    let normalBias = bias * 2.0;  \n\n    \n    let biasedPos = worldPos + normal * normalBias;\n\n    \n    let lightMatrix = spotMatrices.matrices[slotIndex];\n\n    \n    let lightSpacePos = lightMatrix * vec4f(biasedPos, 1.0);\n\n    \n    let w = max(abs(lightSpacePos.w), 0.0001) * sign(lightSpacePos.w + 0.0001);\n    let projCoords = lightSpacePos.xyz / w;\n\n    \n    if (projCoords.z < 0.0 || projCoords.z > 1.0 ||\n        abs(projCoords.x) > 1.0 || abs(projCoords.y) > 1.0) {\n        return 1.0;  \n    }\n\n    \n    let col = slotIndex % SPOT_TILES_PER_ROW;\n    let row = slotIndex / SPOT_TILES_PER_ROW;\n\n    \n    let localUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n\n    \n    let tileOffset = vec2f(f32(col), f32(row)) * SPOT_TILE_SIZE;\n    let atlasUV = (tileOffset + localUV * SPOT_TILE_SIZE) / vec2f(SPOT_ATLAS_WIDTH, SPOT_ATLAS_HEIGHT);\n\n    \n    let texelSize = 1.0 / SPOT_TILE_SIZE;\n    let currentDepth = clamp(projCoords.z - bias * 3.0, 0.001, 0.999);\n\n    var shadowSample = 0.0;\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(-texelSize, 0.0), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(texelSize, 0.0), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(0.0, -texelSize), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(0.0, texelSize), currentDepth);\n    shadowSample /= 4.0;\n\n    return shadowSample;\n}\n\nfn applyLighting(baseColor: vec3f, lighting: vec3f) -> vec3f {\n    \n    \n    return baseColor * lighting;\n}\n\nstruct FragmentOutput {\n    @location(0) color: vec4f,\n    @builtin(frag_depth) depth: f32,\n}\n\nfn calcSoftFade(fragPos: vec4f, particleLinearDepth: f32) -> f32 {\n    if (uniforms.softness <= 0.0) {\n        return 1.0;\n    }\n\n    \n    let screenPos = vec2i(fragPos.xy);\n    let screenSize = vec2i(uniforms.screenSize);\n\n    \n    if (screenPos.x < 0 || screenPos.x >= screenSize.x ||\n        screenPos.y < 0 || screenPos.y >= screenSize.y) {\n        return 1.0;\n    }\n\n    \n    let sceneDepthNorm = textureLoad(depthTexture, screenPos, 0);\n\n    \n    if (sceneDepthNorm <= 0.0) {\n        return 1.0;\n    }\n\n    \n    let sceneDepth = uniforms.near + sceneDepthNorm * (uniforms.far - uniforms.near);\n    let particleDepth = uniforms.near + particleLinearDepth * (uniforms.far - uniforms.near);\n\n    \n    let depthDiff = sceneDepth - particleDepth;\n    return saturate(depthDiff / uniforms.softness);\n}\n\n@fragment\nfn fragmentMainAlpha(input: VertexOutput) -> FragmentOutput {\n    var output: FragmentOutput;\n\n    \n    let texColor = textureSample(particleTexture, particleSampler, input.uv);\n\n    \n    var alpha = texColor.a * input.color.a;\n\n    \n    alpha *= calcSoftFade(input.position, input.linearDepth);\n\n    \n    if (alpha < 0.001) {\n        discard;\n    }\n\n    \n    let baseColor = texColor.rgb * input.color.rgb;\n    let litColor = applyLighting(baseColor, input.lighting);\n\n    \n    output.color = vec4f(litColor, alpha);\n    output.depth = input.linearDepth;\n    return output;\n}\n\n@fragment\nfn fragmentMainAdditive(input: VertexOutput) -> FragmentOutput {\n    var output: FragmentOutput;\n\n    \n    let texColor = textureSample(particleTexture, particleSampler, input.uv);\n\n    \n    var alpha = texColor.a * input.color.a;\n\n    \n    alpha *= calcSoftFade(input.position, input.linearDepth);\n\n    \n    if (alpha < 0.001) {\n        discard;\n    }\n\n    \n    let baseColor = texColor.rgb * input.color.rgb;\n    let litColor = applyLighting(baseColor, input.lighting);\n\n    \n    \n    let rgb = litColor * alpha;\n    output.color = vec4f(rgb, alpha);\n    output.depth = input.linearDepth;\n    return output;\n}";
+var particle_render_default = "const PI = 3.14159265359;\nconst CASCADE_COUNT = 3;\nconst MAX_EMITTERS = 16u;\nconst MAX_LIGHTS = 64u;\nconst MAX_SPOT_SHADOWS = 8;\n\nconst SPOT_ATLAS_WIDTH: f32 = 2048.0;\nconst SPOT_ATLAS_HEIGHT: f32 = 2048.0;\nconst SPOT_TILE_SIZE: f32 = 512.0;\nconst SPOT_TILES_PER_ROW: i32 = 4;\n\nstruct Particle {\n    position: vec3f,\n    lifetime: f32,\n    velocity: vec3f,\n    maxLifetime: f32,\n    color: vec4f,\n    size: vec2f,\n    rotation: f32,    \n    flags: u32,\n    lighting: vec3f,  \n    lightingPad: f32,\n}\n\nstruct Light {\n    enabled: u32,\n    position: vec3f,\n    color: vec4f,\n    direction: vec3f,\n    geom: vec4f, \n    shadowIndex: i32, \n}\n\nstruct EmitterRenderSettings {\n    lit: f32,           \n    emissive: f32,      \n    softness: f32,\n    zOffset: f32,\n}\n\nstruct SpotShadowMatrices {\n    matrices: array<mat4x4<f32>, MAX_SPOT_SHADOWS>,\n}\n\nstruct ParticleUniforms {\n    viewMatrix: mat4x4f,\n    projectionMatrix: mat4x4f,\n    cameraPosition: vec3f,\n    time: f32,\n    cameraRight: vec3f,\n    softness: f32,\n    cameraUp: vec3f,\n    zOffset: f32,\n    screenSize: vec2f,\n    near: f32,\n    far: f32,\n    blendMode: f32,       \n    lit: f32,             \n    shadowBias: f32,\n    shadowStrength: f32,\n    \n    lightDir: vec3f,\n    shadowMapSize: f32,\n    lightColor: vec4f,\n    ambientColor: vec4f,\n    cascadeSizes: vec4f,  \n    \n    envParams: vec4f,     \n    \n    lightParams: vec4u,   \n    \n    fogColor: vec3f,\n    fogEnabled: f32,\n    fogDistances: vec3f,  \n    fogBrightResist: f32,\n    fogAlphas: vec3f,     \n    fogPad1: f32,\n    fogHeightFade: vec2f, \n    fogDebug: f32,        \n    fogPad2: f32,\n}\n\nstruct CascadeMatrices {\n    matrices: array<mat4x4<f32>, CASCADE_COUNT>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n    @location(1) color: vec4f,\n    @location(2) viewZ: f32,\n    @location(3) linearDepth: f32,  \n    @location(4) lighting: vec3f,   \n    @location(5) @interpolate(flat) emitterIdx: u32,  \n    @location(6) worldPos: vec3f,   \n    @location(7) @interpolate(flat) centerViewZ: f32,  \n}\n\n@group(0) @binding(0) var<uniform> uniforms: ParticleUniforms;\n@group(0) @binding(1) var<storage, read> particles: array<Particle>;\n@group(0) @binding(2) var particleTexture: texture_2d<f32>;\n@group(0) @binding(3) var particleSampler: sampler;\n@group(0) @binding(4) var depthTexture: texture_depth_2d;\n@group(0) @binding(5) var shadowMapArray: texture_depth_2d_array;\n@group(0) @binding(6) var shadowSampler: sampler_comparison;\n@group(0) @binding(7) var<storage, read> cascadeMatrices: CascadeMatrices;\n@group(0) @binding(8) var<storage, read> emitterSettings: array<EmitterRenderSettings, MAX_EMITTERS>;\n@group(0) @binding(9) var envMap: texture_2d<f32>;\n@group(0) @binding(10) var envSampler: sampler;\n\n@group(0) @binding(11) var<storage, read> lights: array<Light, MAX_LIGHTS>;\n\n@group(0) @binding(12) var spotShadowAtlas: texture_depth_2d;\n@group(0) @binding(13) var spotShadowSampler: sampler_comparison;\n@group(0) @binding(14) var<storage, read> spotMatrices: SpotShadowMatrices;\n\nfn getQuadVertex(vertexId: u32) -> vec2f {\n    \n    \n    \n    var corners = array<vec2f, 6>(\n        vec2f(-0.5, -0.5),  \n        vec2f(0.5, -0.5),   \n        vec2f(-0.5, 0.5),   \n        vec2f(0.5, -0.5),   \n        vec2f(0.5, 0.5),    \n        vec2f(-0.5, 0.5)    \n    );\n    return corners[vertexId];\n}\n\nfn getQuadUV(vertexId: u32) -> vec2f {\n    var uvs = array<vec2f, 6>(\n        vec2f(0.0, 1.0),  \n        vec2f(1.0, 1.0),  \n        vec2f(0.0, 0.0),  \n        vec2f(1.0, 1.0),  \n        vec2f(1.0, 0.0),  \n        vec2f(0.0, 0.0)   \n    );\n    return uvs[vertexId];\n}\n\n@vertex\nfn vertexMain(\n    @builtin(vertex_index) vertexIndex: u32,\n    @builtin(instance_index) instanceIndex: u32\n) -> VertexOutput {\n    var output: VertexOutput;\n\n    \n    let particle = particles[instanceIndex];\n\n    \n    let emitterIdx = (particle.flags >> 8u) & 0xFFu;\n    output.emitterIdx = emitterIdx;\n\n    \n    if ((particle.flags & 1u) == 0u || particle.lifetime <= 0.0) {\n        \n        output.position = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.uv = vec2f(0.0, 0.0);\n        output.color = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.viewZ = 0.0;\n        output.linearDepth = 0.0;\n        output.lighting = vec3f(0.0);\n        output.worldPos = vec3f(0.0);\n        output.centerViewZ = 0.0;\n        return output;\n    }\n\n    \n    \n    let particleIsAdditive = (particle.flags & 2u) != 0u;\n    let renderingAdditive = uniforms.blendMode > 0.5;\n\n    if (particleIsAdditive != renderingAdditive) {\n        \n        output.position = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.uv = vec2f(0.0, 0.0);\n        output.color = vec4f(0.0, 0.0, 0.0, 0.0);\n        output.viewZ = 0.0;\n        output.linearDepth = 0.0;\n        output.lighting = vec3f(0.0);\n        output.worldPos = vec3f(0.0);\n        output.centerViewZ = 0.0;\n        return output;\n    }\n\n    \n    let localVertexId = vertexIndex % 6u;\n    var quadPos = getQuadVertex(localVertexId);\n    output.uv = getQuadUV(localVertexId);\n\n    \n    let cosR = cos(particle.rotation);\n    let sinR = sin(particle.rotation);\n    let rotatedPos = vec2f(\n        quadPos.x * cosR - quadPos.y * sinR,\n        quadPos.x * sinR + quadPos.y * cosR\n    );\n\n    \n    let particleWorldPos = particle.position;\n\n    \n    let scaledOffset = rotatedPos * particle.size;\n\n    \n    let right = uniforms.cameraRight;\n    let up = uniforms.cameraUp;\n    let billboardPos = particleWorldPos + right * scaledOffset.x + up * scaledOffset.y;\n\n    \n    let toCamera = normalize(uniforms.cameraPosition - particleWorldPos);\n    let offsetPos = billboardPos + toCamera * uniforms.zOffset;\n\n    \n    let viewPos = uniforms.viewMatrix * vec4f(offsetPos, 1.0);\n    output.position = uniforms.projectionMatrix * viewPos;\n    output.viewZ = -viewPos.z;  \n\n    \n    let z = -viewPos.z;  \n    output.linearDepth = (z - uniforms.near) / (uniforms.far - uniforms.near);\n\n    \n    output.lighting = particle.lighting;\n\n    \n    output.color = particle.color;\n\n    \n    output.worldPos = particleWorldPos;\n\n    \n    \n    \n    output.centerViewZ = output.viewZ;\n\n    return output;\n}\n\nfn SphToUV(n: vec3f) -> vec2f {\n    var uv: vec2f;\n    uv.x = atan2(-n.x, n.z);\n    uv.x = (uv.x + PI / 2.0) / (PI * 2.0) + PI * (28.670 / 360.0);\n    uv.y = acos(n.y) / PI;\n    return uv;\n}\n\nfn octEncode(n: vec3f) -> vec2f {\n    var n2 = n / (abs(n.x) + abs(n.y) + abs(n.z));\n    if (n2.y < 0.0) {\n        let signX = select(-1.0, 1.0, n2.x >= 0.0);\n        let signZ = select(-1.0, 1.0, n2.z >= 0.0);\n        n2 = vec3f(\n            (1.0 - abs(n2.z)) * signX,\n            n2.y,\n            (1.0 - abs(n2.x)) * signZ\n        );\n    }\n    return n2.xz * 0.5 + 0.5;\n}\n\nfn getEnvUV(dir: vec3f) -> vec2f {\n    if (uniforms.envParams.z > 0.5) {\n        return octEncode(dir);\n    }\n    return SphToUV(dir);\n}\n\nfn getIBLSample(dir: vec3f, lod: f32) -> vec3f {\n    let envRGBE = textureSampleLevel(envMap, envSampler, getEnvUV(dir), lod);\n    \n    let envColor = envRGBE.rgb * pow(2.0, envRGBE.a * 255.0 - 128.0);\n    return envColor;\n}\n\nfn squircleDistanceXZ(offset: vec2f, size: f32) -> f32 {\n    let normalized = offset / size;\n    let absNorm = abs(normalized);\n    return pow(pow(absNorm.x, 4.0) + pow(absNorm.y, 4.0), 0.25);\n}\n\nfn sampleCascadeShadow(worldPos: vec3f, normal: vec3f, cascadeIndex: i32) -> f32 {\n    let bias = uniforms.shadowBias;\n    let shadowMapSize = uniforms.shadowMapSize;\n\n    \n    let biasedPos = worldPos + normal * bias * 0.5;\n\n    \n    let lightMatrix = cascadeMatrices.matrices[cascadeIndex];\n\n    \n    let lightSpacePos = lightMatrix * vec4f(biasedPos, 1.0);\n    let projCoords = lightSpacePos.xyz / lightSpacePos.w;\n\n    \n    let shadowUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n    let currentDepth = projCoords.z - bias;\n\n    \n    let inBoundsX = shadowUV.x >= 0.0 && shadowUV.x <= 1.0;\n    let inBoundsY = shadowUV.y >= 0.0 && shadowUV.y <= 1.0;\n    let inBoundsZ = currentDepth >= 0.0 && currentDepth <= 1.0;\n\n    if (!inBoundsX || !inBoundsY || !inBoundsZ) {\n        return 1.0;  \n    }\n\n    let clampedUV = clamp(shadowUV, vec2f(0.001), vec2f(0.999));\n    let clampedDepth = clamp(currentDepth, 0.001, 0.999);\n\n    \n    let texelSize = 1.0 / shadowMapSize;\n    var shadow = 0.0;\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(-texelSize, 0.0), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(texelSize, 0.0), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(0.0, -texelSize), cascadeIndex, clampedDepth);\n    shadow += textureSampleCompareLevel(shadowMapArray, shadowSampler, clampedUV + vec2f(0.0, texelSize), cascadeIndex, clampedDepth);\n    shadow /= 4.0;\n\n    return shadow;\n}\n\nfn calculateParticleShadow(worldPos: vec3f, normal: vec3f) -> f32 {\n    let shadowStrength = uniforms.shadowStrength;\n\n    \n    let camXZ = vec2f(uniforms.cameraPosition.x, uniforms.cameraPosition.z);\n    let posXZ = vec2f(worldPos.x, worldPos.z);\n    let offsetXZ = posXZ - camXZ;\n\n    \n    let cascade0Size = uniforms.cascadeSizes.x;\n    let cascade1Size = uniforms.cascadeSizes.y;\n    let cascade2Size = uniforms.cascadeSizes.z;\n\n    let dist0 = squircleDistanceXZ(offsetXZ, cascade0Size);\n    let dist1 = squircleDistanceXZ(offsetXZ, cascade1Size);\n    let dist2 = squircleDistanceXZ(offsetXZ, cascade2Size);\n\n    var shadow = 1.0;\n\n    \n    if (dist0 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 0);\n    } else if (dist1 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 1);\n    } else if (dist2 < 0.95) {\n        shadow = sampleCascadeShadow(worldPos, normal, 2);\n    }\n\n    \n    return mix(1.0 - shadowStrength, 1.0, shadow);\n}\n\nfn calculateSpotShadow(worldPos: vec3f, normal: vec3f, slotIndex: i32) -> f32 {\n    if (slotIndex < 0 || slotIndex >= MAX_SPOT_SHADOWS) {\n        return 1.0;  \n    }\n\n    let bias = uniforms.shadowBias;\n    let normalBias = bias * 2.0;  \n\n    \n    let biasedPos = worldPos + normal * normalBias;\n\n    \n    let lightMatrix = spotMatrices.matrices[slotIndex];\n\n    \n    let lightSpacePos = lightMatrix * vec4f(biasedPos, 1.0);\n\n    \n    let w = max(abs(lightSpacePos.w), 0.0001) * sign(lightSpacePos.w + 0.0001);\n    let projCoords = lightSpacePos.xyz / w;\n\n    \n    if (projCoords.z < 0.0 || projCoords.z > 1.0 ||\n        abs(projCoords.x) > 1.0 || abs(projCoords.y) > 1.0) {\n        return 1.0;  \n    }\n\n    \n    let col = slotIndex % SPOT_TILES_PER_ROW;\n    let row = slotIndex / SPOT_TILES_PER_ROW;\n\n    \n    let localUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n\n    \n    let tileOffset = vec2f(f32(col), f32(row)) * SPOT_TILE_SIZE;\n    let atlasUV = (tileOffset + localUV * SPOT_TILE_SIZE) / vec2f(SPOT_ATLAS_WIDTH, SPOT_ATLAS_HEIGHT);\n\n    \n    let texelSize = 1.0 / SPOT_TILE_SIZE;\n    let currentDepth = clamp(projCoords.z - bias * 3.0, 0.001, 0.999);\n\n    var shadowSample = 0.0;\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(-texelSize, 0.0), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(texelSize, 0.0), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(0.0, -texelSize), currentDepth);\n    shadowSample += textureSampleCompareLevel(spotShadowAtlas, spotShadowSampler, atlasUV + vec2f(0.0, texelSize), currentDepth);\n    shadowSample /= 4.0;\n\n    return shadowSample;\n}\n\nfn applyLighting(baseColor: vec3f, lighting: vec3f) -> vec3f {\n    \n    \n    return baseColor * lighting;\n}\n\nstruct FragmentOutput {\n    @location(0) color: vec4f,\n    @builtin(frag_depth) depth: f32,\n}\n\nfn calcSoftFade(fragPos: vec4f, particleLinearDepth: f32) -> f32 {\n    if (uniforms.softness <= 0.0) {\n        return 1.0;\n    }\n\n    \n    let screenPos = vec2i(fragPos.xy);\n    let screenSize = vec2i(uniforms.screenSize);\n\n    \n    if (screenPos.x < 0 || screenPos.x >= screenSize.x ||\n        screenPos.y < 0 || screenPos.y >= screenSize.y) {\n        return 1.0;\n    }\n\n    \n    let sceneDepthNorm = textureLoad(depthTexture, screenPos, 0);\n\n    \n    if (sceneDepthNorm <= 0.0) {\n        return 1.0;\n    }\n\n    \n    let sceneDepth = uniforms.near + sceneDepthNorm * (uniforms.far - uniforms.near);\n    let particleDepth = uniforms.near + particleLinearDepth * (uniforms.far - uniforms.near);\n\n    \n    let depthDiff = sceneDepth - particleDepth;\n    return saturate(depthDiff / uniforms.softness);\n}\n\nfn calcFog(cameraDistance: f32, worldPosY: f32) -> f32 {\n    if (uniforms.fogEnabled < 0.5) {\n        return 0.0;\n    }\n\n    \n    var distanceFog: f32;\n    let d0 = uniforms.fogDistances.x;\n    let d1 = uniforms.fogDistances.y;\n    let d2 = uniforms.fogDistances.z;\n    let a0 = uniforms.fogAlphas.x;\n    let a1 = uniforms.fogAlphas.y;\n    let a2 = uniforms.fogAlphas.z;\n\n    if (cameraDistance <= d0) {\n        distanceFog = a0;\n    } else if (cameraDistance <= d1) {\n        let t = (cameraDistance - d0) / max(d1 - d0, 0.001);\n        distanceFog = mix(a0, a1, t);\n    } else if (cameraDistance <= d2) {\n        let t = (cameraDistance - d1) / max(d2 - d1, 0.001);\n        distanceFog = mix(a1, a2, t);\n    } else {\n        distanceFog = a2;\n    }\n\n    \n    let bottomY = uniforms.fogHeightFade.x;\n    let topY = uniforms.fogHeightFade.y;\n    var heightFactor = clamp((worldPosY - bottomY) / max(topY - bottomY, 0.001), 0.0, 1.0);\n    if (worldPosY < bottomY) {\n        heightFactor = 0.0;\n    }\n\n    return distanceFog * (1.0 - heightFactor);\n}\n\nfn applyFog(color: vec3f, cameraDistance: f32, worldPosY: f32) -> vec3f {\n    let fogAlpha = calcFog(cameraDistance, worldPosY);\n    if (fogAlpha <= 0.0) {\n        return color;\n    }\n\n    return mix(color, uniforms.fogColor, fogAlpha);\n}\n\n@fragment\nfn fragmentMainAlpha(input: VertexOutput) -> FragmentOutput {\n    var output: FragmentOutput;\n\n    \n    let texColor = textureSample(particleTexture, particleSampler, input.uv);\n\n    \n    var alpha = texColor.a * input.color.a;\n\n    \n    alpha *= calcSoftFade(input.position, input.linearDepth);\n\n    \n    if (alpha < 0.001) {\n        discard;\n    }\n\n    \n    let baseColor = texColor.rgb * input.color.rgb;\n    let litColor = applyLighting(baseColor, input.lighting);\n\n    \n    let centerViewZ = input.centerViewZ;\n\n    \n    \n    if (uniforms.fogDebug > 0.5) {\n        \n        if (uniforms.fogDebug < 1.5) {\n            let dist = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            output.color = vec4f(vec3f(dist), 1.0);\n        }\n        \n        \n        else if (uniforms.fogDebug < 2.5) {\n            let r = clamp(centerViewZ / 10.0, 0.0, 1.0);\n            let g = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            let b = clamp(centerViewZ / 1000.0, 0.0, 1.0);\n            output.color = vec4f(r, g, b, 1.0);\n        }\n        \n        \n        else if (uniforms.fogDebug < 3.5) {\n            let center = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            let vertex = clamp(input.viewZ / 100.0, 0.0, 1.0);\n            let diff = abs(center - vertex);\n            output.color = vec4f(center, vertex, diff * 10.0, 1.0);\n        }\n        \n        else if (uniforms.fogDebug < 4.5) {\n            let r = clamp(abs(input.worldPos.x) / 100.0, 0.0, 1.0);\n            let g = clamp(abs(input.worldPos.y) / 100.0, 0.0, 1.0);\n            let b = clamp(abs(input.worldPos.z) / 100.0, 0.0, 1.0);\n            output.color = vec4f(r, g, b, 1.0);\n        }\n        \n        else {\n            output.color = vec4f(uniforms.fogColor, 1.0);\n        }\n        output.depth = input.linearDepth;\n        return output;\n    }\n\n    let foggedColor = applyFog(litColor, centerViewZ, input.worldPos.y);\n\n    output.color = vec4f(foggedColor, alpha);\n    output.depth = input.linearDepth;\n    return output;\n}\n\n@fragment\nfn fragmentMainAdditive(input: VertexOutput) -> FragmentOutput {\n    var output: FragmentOutput;\n\n    \n    let texColor = textureSample(particleTexture, particleSampler, input.uv);\n\n    \n    var alpha = texColor.a * input.color.a;\n\n    \n    alpha *= calcSoftFade(input.position, input.linearDepth);\n\n    \n    if (alpha < 0.001) {\n        discard;\n    }\n\n    \n    let baseColor = texColor.rgb * input.color.rgb;\n    let litColor = applyLighting(baseColor, input.lighting);\n\n    \n    let centerViewZ = input.centerViewZ;\n\n    \n    \n    if (uniforms.fogDebug > 0.5) {\n        \n        if (uniforms.fogDebug < 1.5) {\n            let dist = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            output.color = vec4f(vec3f(dist), 1.0);\n        }\n        \n        else if (uniforms.fogDebug < 2.5) {\n            let r = clamp(centerViewZ / 10.0, 0.0, 1.0);\n            let g = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            let b = clamp(centerViewZ / 1000.0, 0.0, 1.0);\n            output.color = vec4f(r, g, b, 1.0);\n        }\n        \n        else if (uniforms.fogDebug < 3.5) {\n            let center = clamp(centerViewZ / 100.0, 0.0, 1.0);\n            let vertex = clamp(input.viewZ / 100.0, 0.0, 1.0);\n            let diff = abs(center - vertex);\n            output.color = vec4f(center, vertex, diff * 10.0, 1.0);\n        }\n        \n        else if (uniforms.fogDebug < 4.5) {\n            let r = clamp(abs(input.worldPos.x) / 100.0, 0.0, 1.0);\n            let g = clamp(abs(input.worldPos.y) / 100.0, 0.0, 1.0);\n            let b = clamp(abs(input.worldPos.z) / 100.0, 0.0, 1.0);\n            output.color = vec4f(r, g, b, 1.0);\n        }\n        \n        else {\n            output.color = vec4f(uniforms.fogColor, 1.0);\n        }\n        output.depth = input.linearDepth;\n        return output;\n    }\n\n    \n    \n    let fogAlpha = calcFog(centerViewZ, input.worldPos.y);\n    let fadedColor = litColor * (1.0 - fogAlpha);\n\n    \n    let rgb = fadedColor * alpha;\n    output.color = vec4f(rgb, alpha);\n    output.depth = input.linearDepth;\n    return output;\n}";
 class ParticlePass extends BasePass {
   constructor(engine = null) {
     super("Particles", engine);
@@ -7779,7 +8022,7 @@ class ParticlePass extends BasePass {
     uniformData[87] = 0;
     uniformData[88] = fogHeightFade[0];
     uniformData[89] = fogHeightFade[1];
-    uniformData[90] = 0;
+    uniformData[90] = fogSettings.debug ?? 0;
     uniformData[91] = 0;
     const emitterRenderData = new Float32Array(16 * 4);
     for (let i = 0; i < Math.min(emitters.length, 16); i++) {
@@ -7822,7 +8065,8 @@ class ParticlePass extends BasePass {
     if (hasAlpha) {
       uniformData[48] = 0;
       device.queue.writeBuffer(this.renderUniformBuffer, 0, uniformData);
-      const renderPass = commandEncoder.beginRenderPass({
+      const alphaEncoder = device.createCommandEncoder({ label: "Particle Alpha Pass" });
+      const renderPass = alphaEncoder.beginRenderPass({
         colorAttachments: [{
           view: this.outputTexture.view,
           loadOp: "load",
@@ -7838,11 +8082,13 @@ class ParticlePass extends BasePass {
       renderPass.setBindGroup(0, renderBindGroup);
       renderPass.draw(6, maxParticles, 0, 0);
       renderPass.end();
+      device.queue.submit([alphaEncoder.finish()]);
     }
     if (hasAdditive) {
       uniformData[48] = 1;
       device.queue.writeBuffer(this.renderUniformBuffer, 0, uniformData);
-      const renderPass = commandEncoder.beginRenderPass({
+      const additiveEncoder = device.createCommandEncoder({ label: "Particle Additive Pass" });
+      const renderPass = additiveEncoder.beginRenderPass({
         colorAttachments: [{
           view: this.outputTexture.view,
           loadOp: "load",
@@ -7858,6 +8104,7 @@ class ParticlePass extends BasePass {
       renderPass.setBindGroup(0, renderBindGroup);
       renderPass.draw(6, maxParticles, 0, 0);
       renderPass.end();
+      device.queue.submit([additiveEncoder.finish()]);
     }
   }
   async _resize(width, height) {
@@ -7899,6 +8146,10 @@ class FogPass extends BasePass {
   get fogBrightResist() {
     return this.settings?.environment?.fog?.brightResist ?? 0.8;
   }
+  get fogDebug() {
+    return this.settings?.environment?.fog?.debug ?? 0;
+  }
+  // 0=off, 1=show fogAlpha, 2=show distance, 3=show heightFactor
   /**
    * Set the input texture (HDR lighting output)
    */
@@ -7975,6 +8226,8 @@ class FogPass extends BasePass {
                     brightResist: f32,           // float 47
                     heightFade: vec2f,           // floats 48-49
                     screenSize: vec2f,           // floats 50-51
+                    debug: f32,                  // float 52: 0=off, 1=fogAlpha, 2=distance, 3=heightFactor
+                    _pad: vec3f,                 // floats 53-55
                 }
 
                 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
@@ -8103,6 +8356,26 @@ class FogPass extends BasePass {
                     let brightnessResist = clamp((luminance - 1.0) / 2.0, 0.0, 1.0);
                     fogAlpha *= (1.0 - brightnessResist * uniforms.brightResist);
 
+                    // Debug output
+                    let debugMode = i32(uniforms.debug);
+                    if (debugMode == 1) {
+                        // Show fog alpha as grayscale
+                        return vec4f(vec3f(fogAlpha), 1.0);
+                    } else if (debugMode == 2) {
+                        // Show distance (normalized to 0-100m range)
+                        let normDist = clamp(cameraDistance / 100.0, 0.0, 1.0);
+                        return vec4f(vec3f(normDist), 1.0);
+                    } else if (debugMode == 3) {
+                        // Show height factor
+                        return vec4f(vec3f(heightFactor), 1.0);
+                    } else if (debugMode == 4) {
+                        // Show distance fog (before height fade)
+                        return vec4f(vec3f(distanceFog), 1.0);
+                    } else if (debugMode == 5) {
+                        // Show the actual fog color being used (to verify it matches particles)
+                        return vec4f(uniforms.fogColor, 1.0);
+                    }
+
                     // Apply fog
                     let foggedColor = mix(color.rgb, uniforms.fogColor, fogAlpha);
 
@@ -8177,6 +8450,7 @@ class FogPass extends BasePass {
     uniformData[49] = heightFade[1];
     uniformData[50] = this.width;
     uniformData[51] = this.height;
+    uniformData[52] = this.fogDebug;
     device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
     const commandEncoder = device.createCommandEncoder({ label: "Fog Pass" });
     const renderPass = commandEncoder.beginRenderPass({
@@ -8575,6 +8849,7 @@ class HiZPass extends BasePass {
     this.screenWidth = 0;
     this.screenHeight = 0;
     this._destroyed = false;
+    this._warmupFramesRemaining = 5;
   }
   /**
    * Set the depth texture to read from (from GBuffer)
@@ -8583,6 +8858,18 @@ class HiZPass extends BasePass {
   setDepthTexture(depth) {
     this.depthTexture = depth;
   }
+  /**
+   * Invalidate occlusion culling data and reset warmup period.
+   * Call this after engine creation, scene loading, or major camera changes
+   * to prevent incorrect occlusion culling with stale data.
+   */
+  invalidate() {
+    this.hasValidHistory = false;
+    this.hizDataReady = false;
+    this._warmupFramesRemaining = 5;
+    vec3$1.set(this.lastCameraPosition, 0, 0, 0);
+    vec3$1.set(this.lastCameraDirection, 0, 0, 0);
+  }
   async _init() {
     const { device, canvas } = this.engine;
     await this._createResources(canvas.width, canvas.height);
@@ -8666,6 +8953,7 @@ class HiZPass extends BasePass {
     this._destroyed = false;
     this.hizDataReady = false;
     this.pendingReadback = null;
+    this._warmupFramesRemaining = 5;
   }
   /**
    * Check if camera has moved significantly, requiring HiZ invalidation
@@ -8699,6 +8987,9 @@ class HiZPass extends BasePass {
     const { device } = this.engine;
     const { camera } = context;
     this._frameCounter++;
+    if (this._warmupFramesRemaining > 0) {
+      this._warmupFramesRemaining--;
+    }
     if (!this.settings?.occlusionCulling?.enabled) {
       return;
     }
@@ -8849,6 +9140,9 @@ class HiZPass extends BasePass {
    */
   testSphereOcclusion(bsphere, viewProj, near, far, cameraPos) {
     this.debugStats.tested++;
+    if (this._warmupFramesRemaining > 0) {
+      return false;
+    }
     if (!this.hizDataReady || !this.hasValidHistory) {
       return false;
     }
@@ -9262,6 +9556,8 @@ class SSGITilePass extends BasePass {
     this.tilePropagateBuffer = null;
     this.tileCountX = 0;
     this.tileCountY = 0;
+    this.renderWidth = 0;
+    this.renderHeight = 0;
     this.prevHDRTexture = null;
     this.emissiveTexture = null;
     this.uniformBuffer = null;
@@ -9290,6 +9586,8 @@ class SSGITilePass extends BasePass {
   }
   async _createResources(width, height) {
     const { device } = this.engine;
+    this.renderWidth = width;
+    this.renderHeight = height;
     this.tileCountX = Math.ceil(width / TILE_SIZE$1);
     this.tileCountY = Math.ceil(height / TILE_SIZE$1);
     const totalTiles = this.tileCountX * this.tileCountY;
@@ -9357,13 +9655,13 @@ class SSGITilePass extends BasePass {
     this._needsRebuild = false;
   }
   async _execute(context) {
-    const { device, canvas } = this.engine;
+    const { device } = this.engine;
     const ssgiSettings = this.settings?.ssgi;
     if (!ssgiSettings?.enabled) {
       return;
     }
     if (this._needsRebuild) {
-      await this._createResources(canvas.width, canvas.height);
+      await this._createResources(this.renderWidth, this.renderHeight);
     }
     if (!this.prevHDRTexture || !this.emissiveTexture) {
       return;
@@ -9371,8 +9669,8 @@ class SSGITilePass extends BasePass {
     if (!this.accumulatePipeline || !this.propagatePipeline) {
       return;
     }
-    const width = canvas.width;
-    const height = canvas.height;
+    const width = this.renderWidth;
+    const height = this.renderHeight;
     const emissiveBoost = ssgiSettings.emissiveBoost ?? 2;
     const maxBrightness = ssgiSettings.maxBrightness ?? 4;
     device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([
@@ -9568,7 +9866,7 @@ class SSGIPass extends BasePass {
     if (!this.pipeline) {
       return;
     }
-    this._updateUniforms(ssgiSettings, canvas.width, canvas.height);
+    this._updateUniforms(ssgiSettings, this.width * 2, this.height * 2);
     const bindGroup = device.createBindGroup({
       label: "ssgiBindGroup",
       layout: this.bindGroupLayout,
@@ -10040,9 +10338,11 @@ class BloomPass extends BasePass {
     const scale = this.bloomScale;
     const bloomWidth = Math.max(1, Math.floor(width * scale));
     const bloomHeight = Math.max(1, Math.floor(height * scale));
+    if (this.bloomWidth !== bloomWidth || this.bloomHeight !== bloomHeight) {
+      console.log(`Bloom: ${width}x${height} -> ${bloomWidth}x${bloomHeight} (scale: ${scale})`);
+    }
     this.bloomWidth = bloomWidth;
     this.bloomHeight = bloomHeight;
-    console.log(`Bloom: ${width}x${height} -> ${bloomWidth}x${bloomHeight} (scale: ${scale})`);
     const createBloomTexture = (label) => {
       const texture = device.createTexture({
         label,
@@ -11011,150 +11311,842 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
     this.pipelineCache.clear();
   }
 }
-var postproc_default = "struct VertexOutput {\n    @builtin(position) position : vec4<f32>,\n    @location(0) uv : vec2<f32>,\n}\n\nstruct Uniforms {\n    canvasSize: vec2f,\n    noiseParams: vec4f,  \n    ditherParams: vec4f, \n    bloomParams: vec4f,  \n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var inputTexture : texture_2d<f32>;\n@group(0) @binding(2) var inputSampler : sampler;\n@group(0) @binding(3) var noiseTexture : texture_2d<f32>;\n@group(0) @binding(4) var noiseSampler : sampler;\n@group(0) @binding(5) var bloomTexture : texture_2d<f32>;\n@group(0) @binding(6) var bloomSampler : sampler;\n@group(0) @binding(7) var guiTexture : texture_2d<f32>;\n@group(0) @binding(8) var guiSampler : sampler;\n\nconst FXAA_EDGE_THRESHOLD: f32 = 0.125;      \nconst FXAA_EDGE_THRESHOLD_MIN: f32 = 0.0156; \nconst FXAA_SUBPIX_QUALITY: f32 = 1.0;        \n\nfn sampleNoise(screenPos: vec2f) -> f32 {\n    let noiseSize = i32(uniforms.noiseParams.x);\n    let noiseOffsetX = i32(uniforms.noiseParams.y * f32(noiseSize));\n    let noiseOffsetY = i32(uniforms.noiseParams.z * f32(noiseSize));\n\n    let texCoord = vec2i(\n        (i32(screenPos.x) + noiseOffsetX) % noiseSize,\n        (i32(screenPos.y) + noiseOffsetY) % noiseSize\n    );\n    return textureLoad(noiseTexture, texCoord, 0).r;\n}\n\nfn rgb2luma(rgb: vec3f) -> f32 {\n    return dot(rgb, vec3f(0.299, 0.587, 0.114));\n}\n\nfn loadPixel(coord: vec2i) -> vec3f {\n    let size = vec2i(textureDimensions(inputTexture, 0));\n    let clampedCoord = clamp(coord, vec2i(0), size - vec2i(1));\n    return textureLoad(inputTexture, clampedCoord, 0).rgb;\n}\n\nfn sampleBilinear(uv: vec2f) -> vec3f {\n    let texSize = vec2f(textureDimensions(inputTexture, 0));\n    let texelPos = uv * texSize - 0.5;\n    let baseCoord = vec2i(floor(texelPos));\n    let frac = fract(texelPos);\n\n    let c00 = loadPixel(baseCoord);\n    let c10 = loadPixel(baseCoord + vec2i(1, 0));\n    let c01 = loadPixel(baseCoord + vec2i(0, 1));\n    let c11 = loadPixel(baseCoord + vec2i(1, 1));\n\n    let c0 = mix(c00, c10, frac.x);\n    let c1 = mix(c01, c11, frac.x);\n    return mix(c0, c1, frac.y);\n}\n\nfn fxaa(uv: vec2f) -> vec3f {\n    let texSize = vec2f(textureDimensions(inputTexture, 0));\n    let pixelCoord = vec2i(uv * texSize);\n\n    \n    let rgbM = loadPixel(pixelCoord);\n    let rgbN = loadPixel(pixelCoord + vec2i(0, -1));\n    let rgbS = loadPixel(pixelCoord + vec2i(0, 1));\n    let rgbW = loadPixel(pixelCoord + vec2i(-1, 0));\n    let rgbE = loadPixel(pixelCoord + vec2i(1, 0));\n    let rgbNW = loadPixel(pixelCoord + vec2i(-1, -1));\n    let rgbNE = loadPixel(pixelCoord + vec2i(1, -1));\n    let rgbSW = loadPixel(pixelCoord + vec2i(-1, 1));\n    let rgbSE = loadPixel(pixelCoord + vec2i(1, 1));\n\n    \n    let lumaM = rgb2luma(rgbM);\n    let lumaN = rgb2luma(rgbN);\n    let lumaS = rgb2luma(rgbS);\n    let lumaW = rgb2luma(rgbW);\n    let lumaE = rgb2luma(rgbE);\n    let lumaNW = rgb2luma(rgbNW);\n    let lumaNE = rgb2luma(rgbNE);\n    let lumaSW = rgb2luma(rgbSW);\n    let lumaSE = rgb2luma(rgbSE);\n\n    \n    let lumaMin = min(lumaM, min(min(lumaN, lumaS), min(lumaW, lumaE)));\n    let lumaMax = max(lumaM, max(max(lumaN, lumaS), max(lumaW, lumaE)));\n    let lumaRange = lumaMax - lumaMin;\n\n    \n    let isEdge = lumaRange >= max(FXAA_EDGE_THRESHOLD_MIN, lumaMax * FXAA_EDGE_THRESHOLD);\n\n    \n    let lumaL = (lumaN + lumaS + lumaW + lumaE) * 0.25;\n    let rangeL = abs(lumaL - lumaM);\n    var blendL = max(0.0, (rangeL / max(lumaRange, 0.0001)) - 0.25) * (1.0 / 0.75);\n    blendL = min(1.0, blendL) * blendL * FXAA_SUBPIX_QUALITY;\n\n    \n    let edgeHorz = abs((lumaNW + lumaNE) - 2.0 * lumaN) +\n                   2.0 * abs((lumaW + lumaE) - 2.0 * lumaM) +\n                   abs((lumaSW + lumaSE) - 2.0 * lumaS);\n    let edgeVert = abs((lumaNW + lumaSW) - 2.0 * lumaW) +\n                   2.0 * abs((lumaN + lumaS) - 2.0 * lumaM) +\n                   abs((lumaNE + lumaSE) - 2.0 * lumaE);\n    let isHorizontal = edgeHorz >= edgeVert;\n\n    \n    let luma1 = select(lumaE, lumaS, isHorizontal);\n    let luma2 = select(lumaW, lumaN, isHorizontal);\n    let gradient1 = abs(luma1 - lumaM);\n    let gradient2 = abs(luma2 - lumaM);\n    let is1Steepest = gradient1 >= gradient2;\n    let gradientScaled = 0.25 * max(gradient1, gradient2);\n\n    \n    let stepSign = select(-1.0, 1.0, is1Steepest);\n    let lumaLocalAverage = 0.5 * (select(luma2, luma1, is1Steepest) + lumaM);\n\n    \n    let searchDir = select(vec2i(0, 1), vec2i(1, 0), isHorizontal);\n\n    let luma1_1 = rgb2luma(loadPixel(pixelCoord - searchDir)) - lumaLocalAverage;\n    let luma2_1 = rgb2luma(loadPixel(pixelCoord + searchDir)) - lumaLocalAverage;\n    let luma1_2 = rgb2luma(loadPixel(pixelCoord - searchDir * 2)) - lumaLocalAverage;\n    let luma2_2 = rgb2luma(loadPixel(pixelCoord + searchDir * 2)) - lumaLocalAverage;\n    let luma1_3 = rgb2luma(loadPixel(pixelCoord - searchDir * 3)) - lumaLocalAverage;\n    let luma2_3 = rgb2luma(loadPixel(pixelCoord + searchDir * 3)) - lumaLocalAverage;\n    let luma1_4 = rgb2luma(loadPixel(pixelCoord - searchDir * 4)) - lumaLocalAverage;\n    let luma2_4 = rgb2luma(loadPixel(pixelCoord + searchDir * 4)) - lumaLocalAverage;\n\n    \n    let reached1_1 = abs(luma1_1) >= gradientScaled;\n    let reached1_2 = abs(luma1_2) >= gradientScaled;\n    let reached1_3 = abs(luma1_3) >= gradientScaled;\n    let reached2_1 = abs(luma2_1) >= gradientScaled;\n    let reached2_2 = abs(luma2_2) >= gradientScaled;\n    let reached2_3 = abs(luma2_3) >= gradientScaled;\n\n    \n    let dist1 = select(select(select(4.0, 3.0, reached1_3), 2.0, reached1_2), 1.0, reached1_1);\n    let dist2 = select(select(select(4.0, 3.0, reached2_3), 2.0, reached2_2), 1.0, reached2_1);\n\n    \n    let lumaEnd1 = select(select(select(luma1_4, luma1_3, reached1_3), luma1_2, reached1_2), luma1_1, reached1_1);\n    let lumaEnd2 = select(select(select(luma2_4, luma2_3, reached2_3), luma2_2, reached2_2), luma2_1, reached2_1);\n\n    \n    let distFinal = min(dist1, dist2);\n    let edgeThickness = dist1 + dist2;\n    let lumaEndCloser = select(lumaEnd2, lumaEnd1, dist1 < dist2);\n    let correctVariation = (lumaEndCloser < 0.0) != (lumaM < lumaLocalAverage);\n    var pixelOffset = select(0.0, -distFinal / max(edgeThickness, 0.0001) + 0.5, correctVariation);\n\n    \n    let finalOffset = max(max(pixelOffset, blendL), 0.5);\n\n    \n    let inverseVP = 1.0 / texSize;\n    var finalUv = uv;\n    let offsetAmount = finalOffset * stepSign;\n    finalUv.x += select(offsetAmount * inverseVP.x, 0.0, isHorizontal);\n    finalUv.y += select(0.0, offsetAmount * inverseVP.y, isHorizontal);\n\n    \n    let offsetColor = sampleBilinear(finalUv);\n\n    \n    \n    let perpDir = select(vec2i(0, 1), vec2i(1, 0), isHorizontal);\n    let perpColor1 = loadPixel(pixelCoord + perpDir);\n    let perpColor2 = loadPixel(pixelCoord - perpDir);\n    let neighborAvg = (perpColor1 + perpColor2) * 0.5;\n\n    \n    let fxaaColor = mix(mix(offsetColor, neighborAvg, 0.7), rgbM, 0.1);\n\n    \n    return select(rgbM, fxaaColor, isEdge);\n}\n\nfn sampleBloom(uv: vec2f, sceneBrightness: f32) -> vec3f {\n    let bloom = textureSample(bloomTexture, bloomSampler, uv).rgb;\n\n    \n    \n    let threshold = 0.5;  \n    let mask = saturate(1.0 - (sceneBrightness - threshold) / (1.0 - threshold));\n\n    return bloom * mask * mask;  \n}\n\nfn aces_tone_map(hdr: vec3<f32>) -> vec3<f32> {\n    let m1 = mat3x3(\n        0.59719, 0.07600, 0.02840,\n        0.35458, 0.90834, 0.13383,\n        0.04823, 0.01566, 0.83777,\n    );\n    let m2 = mat3x3(\n        1.60475, -0.10208, -0.00327,\n        -0.53108,  1.10813, -0.07276,\n        -0.07367, -0.00605,  1.07602,\n    );\n    let v = m1 * hdr;\n    let a = v * (v + 0.0245786) - 0.000090537;\n    let b = v * (0.983729 * v + 0.4329510) + 0.238081;\n    return clamp(m2 * (a / b), vec3(0.0), vec3(1.0));\n}\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {\n    var output : VertexOutput;\n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n    output.position = vec4<f32>(x, y, 0.0, 1.0);\n    output.uv = vec2<f32>((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n    return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {\n    \n    let fxaaEnabled = uniforms.noiseParams.w > 0.5;\n    let fxaaColor = fxaa(input.uv);\n    let directColor = textureSample(inputTexture, inputSampler, input.uv).rgb;\n    var color = select(directColor, fxaaColor, fxaaEnabled);\n\n    \n    \n    if (uniforms.bloomParams.x > 0.5) {\n        let sceneBrightness = rgb2luma(color);\n        let bloom = sampleBloom(input.uv, sceneBrightness);\n        color += bloom * uniforms.bloomParams.y;  \n    }\n\n    var sdr = aces_tone_map(color);\n\n    \n    \n    let gui = textureSample(guiTexture, guiSampler, input.uv);\n    sdr = sdr * (1.0 - gui.a) + gui.rgb;\n\n    \n    \n    if (uniforms.ditherParams.x > 0.5 && uniforms.noiseParams.x > 0.0) {\n        let levels = uniforms.ditherParams.y;\n        let noise = sampleNoise(input.position.xy);\n\n        \n        \n        let dither = noise - 0.5;\n        sdr = floor(sdr * (levels - 1.0) + dither + 0.5) / (levels - 1.0);\n        sdr = clamp(sdr, vec3f(0.0), vec3f(1.0));\n    }\n\n    return vec4<f32>(sdr, 1.0);\n}";
-class PostProcessPass extends BasePass {
+var volumetric_raymarch_default = "const MAX_LIGHTS: u32 = 768u;\nconst MAX_SPOT_SHADOWS: i32 = 16;\nconst SPOT_ATLAS_SIZE: f32 = 2048.0;\nconst SPOT_TILE_SIZE: f32 = 512.0;\nconst SPOT_TILES_PER_ROW: i32 = 4;\n\nstruct Uniforms {\n    inverseProjection: mat4x4f,\n    inverseView: mat4x4f,\n    cameraPosition: vec3f,\n    nearPlane: f32,\n    farPlane: f32,\n    maxSamples: f32,\n    time: f32,\n    fogDensity: f32,\n    fogColor: vec3f,\n    shadowsEnabled: f32,\n    mainLightDir: vec3f,\n    mainLightIntensity: f32,\n    mainLightColor: vec3f,\n    scatterStrength: f32,\n    fogHeightFade: vec2f,\n    maxDistance: f32,\n    lightCount: f32,\n    debugMode: f32,\n    noiseStrength: f32,    \n    noiseAnimated: f32,    \n    mainLightScatter: f32, \n    noiseScale: f32,       \n    mainLightSaturation: f32, \n}\n\nstruct Light {\n    enabled: u32,        \n    _pad0: u32,          \n    _pad1: u32,          \n    _pad2: u32,          \n    position: vec3f,     \n    _pad3: f32,          \n    color: vec4f,        \n    direction: vec3f,    \n    _pad4: f32,          \n    geom: vec4f,         \n    shadowIndex: i32,    \n    _pad5: u32,          \n    _pad6: u32,          \n    _pad7: u32,          \n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var depthTexture: texture_depth_2d;\n@group(0) @binding(2) var cascadeShadowMaps: texture_depth_2d_array;\n@group(0) @binding(3) var shadowSampler: sampler_comparison;\n@group(0) @binding(4) var<storage, read> cascadeMatrices: array<mat4x4f>;\n@group(0) @binding(5) var<storage, read> lights: array<Light, MAX_LIGHTS>;\n@group(0) @binding(6) var spotShadowAtlas: texture_depth_2d;\n@group(0) @binding(7) var<storage, read> spotMatrices: array<mat4x4f, MAX_SPOT_SHADOWS>;\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n    output.position = vec4f(x, y, 0.0, 1.0);\n    output.uv = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n    return output;\n}\n\nfn hash(p: vec3f) -> f32 {\n    var p3 = fract(p * 0.1031);\n    p3 += dot(p3, p3.yzx + 33.33);\n    return fract((p3.x + p3.y) * p3.z);\n}\n\nfn noise3d(p: vec3f) -> f32 {\n    let i = floor(p);\n    let f = fract(p);\n    let u = f * f * (3.0 - 2.0 * f);\n\n    return mix(\n        mix(mix(hash(i + vec3f(0,0,0)), hash(i + vec3f(1,0,0)), u.x),\n            mix(hash(i + vec3f(0,1,0)), hash(i + vec3f(1,1,0)), u.x), u.y),\n        mix(mix(hash(i + vec3f(0,0,1)), hash(i + vec3f(1,0,1)), u.x),\n            mix(hash(i + vec3f(0,1,1)), hash(i + vec3f(1,1,1)), u.x), u.y),\n        u.z\n    );\n}\n\nfn fbm(p: vec3f) -> f32 {\n    var value = 0.0;\n    var amplitude = 0.5;\n    var pos = p;\n    for (var i = 0; i < 3; i++) {\n        value += amplitude * noise3d(pos);\n        pos *= 2.0;\n        amplitude *= 0.5;\n    }\n    return value;\n}\n\nfn getFogDensity(worldPos: vec3f, dist: f32) -> f32 {\n    \n    let heightFade = uniforms.fogHeightFade;\n    var heightMod = 1.0;\n    if (heightFade.y > heightFade.x) {\n        let range = heightFade.y - heightFade.x;\n        let fadeZone = range * 0.1; \n        let topFade = 1.0 - smoothstep(heightFade.y - fadeZone, heightFade.y, worldPos.y);\n        let bottomFade = smoothstep(heightFade.x, heightFade.x + fadeZone, worldPos.y);\n        heightMod = topFade * bottomFade;\n    }\n\n    \n    if (uniforms.noiseStrength < 0.001) {\n        return uniforms.fogDensity * heightMod;\n    }\n\n    \n    let timeOffset = select(0.0, uniforms.time, uniforms.noiseAnimated > 0.5);\n\n    \n    \n    let scale1 = uniforms.noiseScale;        \n    let scale2 = uniforms.noiseScale * 0.32; \n\n    let noisePos = worldPos * scale1 + vec3f(timeOffset * 0.15, timeOffset * 0.02, timeOffset * 0.08);\n    let noiseVal = fbm(noisePos);\n\n    \n    let noisePos2 = worldPos * scale2 + vec3f(timeOffset * 0.05, 0.0, timeOffset * 0.03);\n    let noiseVal2 = fbm(noisePos2);\n\n    \n    let combinedNoise = noiseVal * 0.6 + noiseVal2 * 0.4;\n\n    \n    \n    \n    let noiseRange = combinedNoise * 1.0 + 0.2;  \n    let noiseMapped = mix(1.0, noiseRange, uniforms.noiseStrength);\n\n    return uniforms.fogDensity * heightMod * noiseMapped;\n}\n\nfn sampleShadow(worldPos: vec3f) -> f32 {\n    if (uniforms.shadowsEnabled < 0.5) {\n        return 1.0;\n    }\n\n    \n    for (var cascade = 0; cascade < 3; cascade++) {\n        let lightSpacePos = cascadeMatrices[cascade] * vec4f(worldPos, 1.0);\n        let projCoords = lightSpacePos.xyz / lightSpacePos.w;\n\n        \n        let uv = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n\n        \n        if (uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0 &&\n            projCoords.z >= 0.0 && projCoords.z <= 1.0) {\n\n            let bias = 0.003 * f32(cascade + 1);\n            let depth = projCoords.z - bias;\n            let clampedUV = clamp(uv, vec2f(0.002), vec2f(0.998));\n            let clampedDepth = clamp(depth, 0.001, 0.999);\n\n            return textureSampleCompareLevel(cascadeShadowMaps, shadowSampler, clampedUV, cascade, clampedDepth);\n        }\n    }\n\n    return 1.0;\n}\n\nfn sampleSpotShadow(worldPos: vec3f, slotIndex: i32) -> f32 {\n    if (slotIndex < 0 || slotIndex >= MAX_SPOT_SHADOWS) {\n        return 1.0;\n    }\n\n    \n    let lightMatrix = spotMatrices[slotIndex];\n\n    \n    let lightSpacePos = lightMatrix * vec4f(worldPos, 1.0);\n\n    \n    let w = max(abs(lightSpacePos.w), 0.0001) * sign(lightSpacePos.w + 0.0001);\n    let projCoords = lightSpacePos.xyz / w;\n\n    \n    if (abs(projCoords.x) > 1.0 || abs(projCoords.y) > 1.0 ||\n        projCoords.z < 0.0 || projCoords.z > 1.0) {\n        return 1.0;\n    }\n\n    \n    let col = slotIndex % SPOT_TILES_PER_ROW;\n    let row = slotIndex / SPOT_TILES_PER_ROW;\n\n    \n    let tileUV = vec2f(projCoords.x * 0.5 + 0.5, 0.5 - projCoords.y * 0.5);\n\n    \n    let tileOffsetX = f32(col) * SPOT_TILE_SIZE;\n    let tileOffsetY = f32(row) * SPOT_TILE_SIZE;\n    let atlasUV = vec2f(\n        (tileOffsetX + tileUV.x * SPOT_TILE_SIZE) / SPOT_ATLAS_SIZE,\n        (tileOffsetY + tileUV.y * SPOT_TILE_SIZE) / SPOT_ATLAS_SIZE\n    );\n\n    \n    let bias = 0.005;\n    let depth = clamp(projCoords.z - bias, 0.001, 0.999);\n\n    return textureSampleCompareLevel(spotShadowAtlas, shadowSampler, atlasUV, depth);\n}\n\nfn calculateLightContribution(worldPos: vec3f, light: Light, worldRayDir: vec3f) -> vec3f {\n    let toLight = light.position - worldPos;\n    let dist = length(toLight);\n    let radius = light.geom.x;\n\n    \n    if (dist > radius) {\n        return vec3f(0.0);\n    }\n\n    \n    \n    let normalizedDist = dist / radius;\n\n    \n    \n    let attenuation = 1.0 - smoothstep(0.0, 1.0, normalizedDist);\n\n    \n    let innerCone = light.geom.y;\n    let outerCone = light.geom.z;\n    var spotAttenuation = 1.0;\n    let isSpotlight = outerCone > 0.0;\n\n    if (isSpotlight) {\n        let lightDir = normalize(-toLight);\n        let spotCos = dot(lightDir, normalize(light.direction));\n        spotAttenuation = smoothstep(outerCone, innerCone, spotCos);\n        if (spotAttenuation <= 0.0) {\n            return vec3f(0.0);\n        }\n    }\n\n    \n    var shadow = 1.0;\n    if (isSpotlight && light.shadowIndex >= 0 && uniforms.shadowsEnabled > 0.5) {\n        shadow = sampleSpotShadow(worldPos, light.shadowIndex);\n    }\n\n    \n    let phase = 0.25;  \n\n    \n    let intensity = light.color.a;\n    return light.color.rgb * intensity * attenuation * spotAttenuation * shadow * phase;\n}\n\nfn phaseHG(cosTheta: f32, g: f32) -> f32 {\n    let g2 = g * g;\n    let denom = 1.0 + g2 - 2.0 * g * cosTheta;\n    return (1.0 - g2) / (4.0 * 3.14159 * pow(denom, 1.5));\n}\n\nfn linearizeDepth(depth: f32) -> f32 {\n    let near = uniforms.nearPlane;\n    let far = uniforms.farPlane;\n    return near + depth * (far - near);\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n    let uv = input.uv;\n\n    \n    let DEBUG = i32(uniforms.debugMode);\n\n    \n    \n    var clipUV = uv;\n    clipUV.y = 1.0 - clipUV.y;  \n    let ndc = vec4f(clipUV * 2.0 - 1.0, 0.0, 1.0);\n\n    \n    let viewRay4 = uniforms.inverseProjection * ndc;\n    let viewDir = normalize(viewRay4.xyz / viewRay4.w);\n\n    \n    let worldRayDir = normalize((uniforms.inverseView * vec4f(viewDir, 0.0)).xyz);\n\n    \n    let depthTexSize = vec2f(textureDimensions(depthTexture));\n    let depthCoord = vec2i(uv * depthTexSize);\n    let rawDepth = textureLoad(depthTexture, depthCoord, 0);\n\n    \n    if (DEBUG == 1) {\n        return vec4f(rawDepth, rawDepth, rawDepth, 1.0);\n    }\n\n    \n    if (DEBUG == 2) {\n        return vec4f(worldRayDir * 0.5 + 0.5, 1.0);\n    }\n\n    \n    if (DEBUG == 4) {\n        let vzVis = abs(viewDir.z);\n        return vec4f(vzVis, vzVis, vzVis, 1.0);\n    }\n\n    \n    \n    \n    \n    if (DEBUG == 7) {\n        let numLights = i32(uniforms.lightCount);\n        if (numLights > 0) {\n            let light = lights[0];\n            \n            let camToLightDist = length(light.position - uniforms.cameraPosition);\n            let radius = light.geom.x;\n            \n            return vec4f(\n                clamp(camToLightDist / 50.0, 0.0, 1.0),\n                f32(light.enabled) * 0.5,\n                clamp(radius / 50.0, 0.0, 1.0),\n                1.0\n            );\n        }\n        return vec4f(1.0, 0.0, 0.0, 1.0); \n    }\n\n    \n    \n    if (DEBUG == 8) {\n        let numLights = i32(uniforms.lightCount);\n        if (numLights > 0) {\n            let light = lights[0];\n            \n            return vec4f(\n                (light.position.x + 100.0) / 200.0,\n                (light.position.y + 10.0) / 60.0,\n                (light.position.z + 100.0) / 200.0,\n                1.0\n            );\n        }\n        return vec4f(0.0, 0.0, 0.0, 1.0);\n    }\n\n    \n    var geometryDist = 1000000.0;\n    if (rawDepth < 0.9999) {\n        let linearDepth = linearizeDepth(rawDepth);\n        geometryDist = linearDepth / max(0.001, -viewDir.z) * 0.98;\n    }\n\n    \n    \n    let fogBottom = uniforms.fogHeightFade.x;\n    let fogTop = uniforms.fogHeightFade.y;\n    let camY = uniforms.cameraPosition.y;\n\n    \n    \n    \n    \n    var tStart = 0.0;\n    var tEnd = geometryDist;\n\n    if (abs(worldRayDir.y) > 0.0001) {\n        let tBottom = (fogBottom - camY) / worldRayDir.y;\n        let tTop = (fogTop - camY) / worldRayDir.y;\n\n        \n        let tEnter = min(tBottom, tTop);\n        let tExit = max(tBottom, tTop);\n\n        \n        if (camY < fogBottom || camY > fogTop) {\n            tStart = max(0.0, tEnter);\n        }\n\n        \n        tEnd = min(tEnd, max(0.0, tExit));\n    } else {\n        \n        if (camY < fogBottom || camY > fogTop) {\n            return vec4f(0.0);  \n        }\n    }\n\n    \n    if (tStart >= tEnd || (tEnd - tStart) < 0.5) {\n        return vec4f(0.0);\n    }\n\n    \n    \n    if (DEBUG == 9) {\n        let rayLength = tEnd - tStart;\n        return vec4f(tStart / 50.0, tEnd / 50.0, rayLength / 50.0, 1.0);\n    }\n\n    \n    \n    if (DEBUG == 10) {\n        let numLights = i32(uniforms.lightCount);\n        if (numLights > 0) {\n            let light = lights[0];\n            let radius = light.geom.x;\n            var minDist = 9999.0;\n            var hitCount = 0.0;\n            let rayLength = tEnd - tStart;\n            for (var ti = 0; ti < 20; ti++) {\n                let testT = tStart + rayLength * f32(ti) / 20.0;\n                let testPos = uniforms.cameraPosition + worldRayDir * testT;\n                let dist = length(light.position - testPos);\n                minDist = min(minDist, dist);\n                if (dist < radius) {\n                    hitCount += 1.0;\n                }\n            }\n            \n            return vec4f(minDist / 50.0, hitCount / 20.0, radius / 50.0, 1.0);\n        }\n        return vec4f(1.0, 0.0, 0.0, 1.0);\n    }\n\n    \n    if (DEBUG == 3) {\n        let samplePos = uniforms.cameraPosition + worldRayDir * min(10.0, tEnd);\n        let n = getFogDensity(samplePos, 10.0);\n        return vec4f(n, n, n, 1.0);\n    }\n\n    \n    if (DEBUG == 5) {\n        let worldPos = uniforms.cameraPosition + worldRayDir * min(5.0, tEnd);\n        return vec4f(fract(worldPos * 0.1), 1.0);\n    }\n\n    \n    \n    let numSamples = i32(uniforms.maxSamples);\n    let fNumSamples = f32(numSamples);\n\n    \n    let jitter = fract(sin(dot(input.position.xy, vec2f(12.9898, 78.233))) * 43758.5453);\n\n    var accumulatedColor = vec3f(0.0);\n    var accumulatedMainLight = vec3f(0.0);  \n    var accumulatedShadow = 0.0;  \n    var shadowWeight = 0.0;  \n    var accumulatedAlpha = 0.0;\n\n    \n    let lightDir = normalize(uniforms.mainLightDir);\n    let viewToLight = dot(worldRayDir, lightDir);\n    \n    let hgPhase = phaseHG(viewToLight, 0.6);\n    let phase = max(0.4, hgPhase);  \n\n    \n\n    let rayLength = tEnd - tStart;\n    let minStepSize = 0.25;  \n    let maxStepSize = 2.0;   \n    let stepSize = clamp(rayLength / fNumSamples, minStepSize, maxStepSize);\n    \n\n    \n    var t = tStart + jitter * stepSize;\n\n    \n    var debugMaxLight = vec3f(0.0);\n    var debugLightHits = 0.0;\n\n    for (var i = 0; i < numSamples; i++) {\n        \n        if (t > tEnd) { break; }\n\n        let samplePos = uniforms.cameraPosition + worldRayDir * t;\n\n        \n        t += stepSize;\n\n        \n        let density = getFogDensity(samplePos, t);\n        \n        \n        if (density <= 0.0) { continue; }\n\n        \n        \n        var mainLighting = vec3f(0.0);\n        var pointLighting = vec3f(0.0);\n\n        \n        if (uniforms.mainLightIntensity > 0.0) {\n            let rawShadow = sampleShadow(samplePos);\n\n            \n            let weight = density * stepSize;\n            accumulatedShadow += rawShadow * weight;\n            shadowWeight += weight;\n\n            \n            mainLighting = uniforms.mainLightColor * uniforms.mainLightIntensity * phase * uniforms.mainLightScatter;\n        }\n\n        \n        let numLights = i32(uniforms.lightCount);\n        for (var li = 0; li < numLights; li++) {\n            let light = lights[li];\n            if (light.enabled == 0u) { continue; }\n\n            let contrib = calculateLightContribution(samplePos, light, worldRayDir);\n            pointLighting += contrib;\n\n            \n            if (length(contrib) > 0.001) {\n                debugLightHits += 1.0;\n                debugMaxLight = max(debugMaxLight, contrib);\n            }\n        }\n\n        \n        let pointColor = pointLighting * uniforms.scatterStrength * uniforms.fogColor;\n        let mainColor = mainLighting * uniforms.fogColor;\n\n        \n        \n        \n        let rawSampleAlpha = density * stepSize;\n        let sampleAlpha = min(rawSampleAlpha, 0.03);  \n\n        \n        let colorWeight = rawSampleAlpha * (1.0 - accumulatedAlpha);\n        accumulatedColor += pointColor * colorWeight;\n        accumulatedMainLight += mainColor * colorWeight;\n        accumulatedAlpha += sampleAlpha * (1.0 - accumulatedAlpha);\n    }\n\n    \n    accumulatedAlpha = min(accumulatedAlpha, 1.0);\n\n    \n    let avgShadow = select(1.0, accumulatedShadow / shadowWeight, shadowWeight > 0.001);\n\n    \n    \n    \n    let contrastShadow = smoothstep(0.25, 0.75, avgShadow);\n    \n    let finalShadow = mix(avgShadow, contrastShadow, 0.88);\n\n    \n    let sat = uniforms.mainLightSaturation;\n    let saturatedShadow = sat * (1.0 - exp(-finalShadow * 3.0 / max(sat, 0.01)));\n\n    \n    accumulatedColor += accumulatedMainLight * saturatedShadow;\n\n    \n    \n    if (DEBUG == 11) {\n        return vec4f(length(debugMaxLight), debugLightHits / 100.0, 0.0, 1.0);\n    }\n\n    \n    \n    if (DEBUG == 12) {\n        let distMarched = t - tStart;\n        let iterCount = distMarched / stepSize;\n        return vec4f(distMarched / 50.0, iterCount / fNumSamples, accumulatedAlpha, 1.0);\n    }\n\n    \n    \n    if (DEBUG == 13) {\n        let numLights = i32(uniforms.lightCount);\n        if (numLights > 0) {\n            let light = lights[0];\n            let radius = light.geom.x;\n            var minDistToLight = 9999.0;\n            var closestT = 0.0;\n            let testRayLen = t - tStart; \n            for (var ti = 0; ti < 32; ti++) {\n                let testT = tStart + testRayLen * f32(ti) / 32.0;\n                let testPos = uniforms.cameraPosition + worldRayDir * testT;\n                let distToLight = length(light.position - testPos);\n                if (distToLight < minDistToLight) {\n                    minDistToLight = distToLight;\n                    closestT = testT;\n                }\n            }\n            \n            \n            \n            return vec4f(minDistToLight / radius, closestT / 50.0, radius / 50.0, 1.0);\n        }\n        return vec4f(1.0, 0.0, 0.0, 1.0);\n    }\n\n    \n    if (DEBUG == 6) {\n        return vec4f(accumulatedColor, 1.0);\n    }\n\n    return vec4f(accumulatedColor, accumulatedAlpha);\n}";
+var volumetric_blur_default = "struct Uniforms {\n    direction: vec2f,\n    texelSize: vec2f,\n    radius: f32,\n    _pad0: f32,\n    _pad1: f32,\n    _pad2: f32,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var inputTexture: texture_2d<f32>;\n@group(0) @binding(2) var inputSampler: sampler;\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n\n    output.position = vec4f(x, y, 0.0, 1.0);\n    output.uv = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n\n    return output;\n}\n\nfn gaussian(x: f32, sigma: f32) -> f32 {\n    return exp(-(x * x) / (2.0 * sigma * sigma));\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n    let uv = input.uv;\n    let radius = uniforms.radius;\n    let sigma = radius / 3.0;  \n\n    \n    var color = textureSample(inputTexture, inputSampler, uv);\n    var totalWeight = 1.0;\n\n    \n    let stepSize = 1.5;\n    let numSamples = i32(ceil(radius / stepSize));\n\n    \n    let dir = uniforms.direction * uniforms.texelSize;\n\n    \n    for (var i = 1; i <= numSamples; i++) {\n        let offset = f32(i) * stepSize;\n        let weight = gaussian(offset, sigma);\n\n        \n        let uvPos = uv + dir * offset;\n        let samplePos = textureSample(inputTexture, inputSampler, uvPos);\n        color += samplePos * weight;\n\n        \n        let uvNeg = uv - dir * offset;\n        let sampleNeg = textureSample(inputTexture, inputSampler, uvNeg);\n        color += sampleNeg * weight;\n\n        totalWeight += weight * 2.0;\n    }\n\n    \n    color /= totalWeight;\n\n    return color;\n}";
+var volumetric_composite_default = "struct Uniforms {\n    canvasSize: vec2f,\n    renderSize: vec2f,\n    texelSize: vec2f,\n    \n    brightnessThreshold: f32,  \n    minVisibility: f32,        \n    skyBrightness: f32,        \n    _pad: f32,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var sceneTexture: texture_2d<f32>;\n@group(0) @binding(2) var fogTexture: texture_2d<f32>;\n@group(0) @binding(3) var linearSampler: sampler;\n@group(0) @binding(4) var depthTexture: texture_depth_2d;\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n\n    output.position = vec4f(x, y, 0.0, 1.0);\n    output.uv = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n\n    return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n    let uv = input.uv;\n\n    \n    let sceneColor = textureSample(sceneTexture, linearSampler, uv).rgb;\n\n    \n    let fog = textureSample(fogTexture, linearSampler, uv);\n\n    \n    let depthCoord = vec2i(input.position.xy);\n    let depth = textureLoad(depthTexture, depthCoord, 0);\n\n    \n    var luminance = dot(sceneColor, vec3f(0.299, 0.587, 0.114));\n\n    \n    \n    let isSky = depth > 0.9999;\n    if (isSky) {\n        luminance = max(luminance, uniforms.skyBrightness);\n    }\n\n    \n    \n    let threshold = uniforms.brightnessThreshold;\n    let minVis = uniforms.minVisibility;\n\n    \n    \n    \n    \n    let falloff = 1.0 / (1.0 + luminance / max(threshold, 0.01));\n    let fogVisibility = mix(minVis, 1.0, falloff);\n\n    \n    let finalColor = sceneColor + fog.rgb * fogVisibility;\n\n    return vec4f(finalColor, 1.0);\n}";
+class VolumetricFogPass extends BasePass {
   constructor(engine = null) {
-    super("PostProcess", engine);
-    this.pipeline = null;
+    super("VolumetricFog", engine);
+    this.raymarchPipeline = null;
+    this.blurHPipeline = null;
+    this.blurVPipeline = null;
+    this.compositePipeline = null;
+    this.raymarchBGL = null;
+    this.blurBGL = null;
+    this.compositeBGL = null;
+    this.raymarchTexture = null;
+    this.blurTempTexture = null;
+    this.blurredTexture = null;
+    this.outputTexture = null;
+    this.raymarchUniformBuffer = null;
+    this.blurHUniformBuffer = null;
+    this.blurVUniformBuffer = null;
+    this.compositeUniformBuffer = null;
+    this.linearSampler = null;
     this.inputTexture = null;
-    this.bloomTexture = null;
-    this.dummyBloomTexture = null;
-    this.noiseTexture = null;
-    this.noiseSize = 64;
-    this.noiseAnimated = true;
-    this.guiCanvas = null;
-    this.guiTexture = null;
-    this.guiSampler = null;
+    this.gbuffer = null;
+    this.shadowPass = null;
+    this.lightingPass = null;
+    this.canvasWidth = 0;
+    this.canvasHeight = 0;
+    this.renderWidth = 0;
+    this.renderHeight = 0;
+    this._currentMainLightScatter = null;
+    this._lastUpdateTime = 0;
+    this._cameraInShadowSmooth = 0;
+    this._skyVisible = true;
+    this._skyCheckPending = false;
+    this._lastSkyCheckTime = 0;
   }
-  // Convenience getter for exposure setting
-  get exposure() {
-    return this.settings?.environment?.exposure ?? 1.6;
+  // Settings getters
+  get volumetricSettings() {
+    return this.settings?.volumetricFog ?? {};
   }
-  // Convenience getter for fxaa setting
-  get fxaa() {
-    return this.settings?.rendering?.fxaa ?? true;
+  get fogSettings() {
+    return this.settings?.fog ?? {};
   }
-  // Convenience getter for dithering settings
-  get ditheringEnabled() {
-    return this.settings?.dithering?.enabled ?? true;
+  get isVolumetricEnabled() {
+    return this.volumetricSettings.enabled ?? false;
   }
-  get colorLevels() {
-    return this.settings?.dithering?.colorLevels ?? 32;
+  get resolution() {
+    return this.volumetricSettings.resolution ?? 0.25;
   }
-  // Convenience getters for bloom settings
-  get bloomEnabled() {
-    return this.settings?.bloom?.enabled ?? true;
+  get maxSamples() {
+    return this.volumetricSettings.maxSamples ?? 32;
   }
-  get bloomIntensity() {
-    return this.settings?.bloom?.intensity ?? 1;
+  get blurRadius() {
+    return this.volumetricSettings.blurRadius ?? 4;
   }
-  get bloomRadius() {
-    return this.settings?.bloom?.radius ?? 5;
+  get fogDensity() {
+    return this.volumetricSettings.density ?? this.volumetricSettings.densityMultiplier ?? 0.5;
+  }
+  get scatterStrength() {
+    return this.volumetricSettings.scatterStrength ?? 1;
+  }
+  get maxDistance() {
+    return this.volumetricSettings.maxDistance ?? 20;
+  }
+  get heightRange() {
+    return this.volumetricSettings.heightRange ?? [-5, 20];
+  }
+  get shadowsEnabled() {
+    return this.volumetricSettings.shadowsEnabled ?? true;
+  }
+  get noiseStrength() {
+    return this.volumetricSettings.noiseStrength ?? 1;
+  }
+  // 0 = uniform fog, 1 = full noise
+  get noiseAnimated() {
+    return this.volumetricSettings.noiseAnimated ?? true;
+  }
+  get noiseScale() {
+    return this.volumetricSettings.noiseScale ?? 0.25;
+  }
+  // Noise frequency (higher = finer detail)
+  get mainLightScatter() {
+    return this.volumetricSettings.mainLightScatter ?? 1;
+  }
+  // Scatter when camera in light
+  get mainLightScatterDark() {
+    return this.volumetricSettings.mainLightScatterDark ?? 3;
+  }
+  // Scatter when camera in shadow
+  get mainLightSaturation() {
+    return this.volumetricSettings.mainLightSaturation ?? 1;
+  }
+  // Max brightness cap
+  // Brightness-based attenuation (fog less visible over bright surfaces)
+  get brightnessThreshold() {
+    return this.volumetricSettings.brightnessThreshold ?? 1;
+  }
+  // Scene luminance where fog starts fading
+  get minVisibility() {
+    return this.volumetricSettings.minVisibility ?? 0.15;
+  }
+  // Minimum fog visibility over very bright surfaces
+  get skyBrightness() {
+    return this.volumetricSettings.skyBrightness ?? 5;
+  }
+  // Virtual brightness for sky (far depth)
+  // Debug mode: 0=normal, 1=depth, 2=ray dir, 3=noise, 4=viewDir.z, 5=worldPos, 6=accum, 7=light dist, 8=light pos
+  get debugMode() {
+    return this.volumetricSettings.debug ?? 0;
   }
-  /**
-   * Set the input texture (HDR image from LightingPass)
-   * @param {Texture} texture - Input HDR texture
-   */
   setInputTexture(texture) {
-    if (this.inputTexture !== texture) {
-      this.inputTexture = texture;
-      this._needsRebuild = true;
-    }
+    this.inputTexture = texture;
   }
-  /**
-   * Set the bloom texture (from BloomPass)
-   * @param {Object} bloomTexture - Bloom texture with mip levels
-   */
-  setBloomTexture(bloomTexture) {
-    if (this.bloomTexture !== bloomTexture) {
-      this.bloomTexture = bloomTexture;
-      this._needsRebuild = true;
-    }
+  setGBuffer(gbuffer) {
+    this.gbuffer = gbuffer;
   }
-  /**
-   * Set the noise texture for dithering
-   * @param {Texture} texture - Noise texture (blue noise or bayer dither)
-   * @param {number} size - Texture size
-   * @param {boolean} animated - Whether to animate noise offset each frame
-   */
-  setNoise(texture, size = 64, animated = true) {
-    this.noiseTexture = texture;
-    this.noiseSize = size;
-    this.noiseAnimated = animated;
-    this._needsRebuild = true;
+  setShadowPass(shadowPass) {
+    this.shadowPass = shadowPass;
   }
-  /**
-   * Set the GUI canvas for overlay rendering
-   * @param {HTMLCanvasElement} canvas - 2D canvas with GUI content
-   */
-  setGuiCanvas(canvas) {
-    this.guiCanvas = canvas;
+  setLightingPass(lightingPass) {
+    this.lightingPass = lightingPass;
+  }
+  getOutputTexture() {
+    return this.outputTexture;
+  }
+  // Unused setters (kept for API compatibility)
+  setHiZPass() {
   }
   async _init() {
     const { device } = this.engine;
-    const dummyTexture = device.createTexture({
-      label: "Dummy Bloom Texture",
-      size: [1, 1, 1],
-      format: "rgba16float",
-      mipLevelCount: 1,
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
-    });
-    device.queue.writeTexture(
-      { texture: dummyTexture },
-      new Float32Array([0, 0, 0, 0]).buffer,
-      { bytesPerRow: 8 },
-      { width: 1, height: 1 }
-    );
-    const dummySampler = device.createSampler({
-      label: "Dummy Bloom Sampler",
+    this.linearSampler = device.createSampler({
+      label: "Volumetric Linear Sampler",
       minFilter: "linear",
-      magFilter: "linear"
+      magFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
     });
-    this.dummyBloomTexture = {
-      texture: dummyTexture,
-      view: dummyTexture.createView(),
-      sampler: dummySampler,
-      mipCount: 1
-    };
-    this.guiSampler = device.createSampler({
-      label: "GUI Sampler",
-      minFilter: "linear",
-      magFilter: "linear"
+    this.fallbackShadowSampler = device.createSampler({
+      label: "Volumetric Fallback Shadow Sampler",
+      compare: "less"
     });
-    const dummyGuiTexture = device.createTexture({
-      label: "Dummy GUI Texture",
+    this.fallbackCascadeShadowMap = device.createTexture({
+      label: "Volumetric Fallback Cascade Shadow",
+      size: [1, 1, 3],
+      format: "depth32float",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
+    });
+    const identityMatrix = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+    const matrixData = new Float32Array(16 * 3);
+    for (let i = 0; i < 3; i++) matrixData.set(identityMatrix, i * 16);
+    this.fallbackCascadeMatrices = device.createBuffer({
+      label: "Volumetric Fallback Cascade Matrices",
+      size: 16 * 4 * 3,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    device.queue.writeBuffer(this.fallbackCascadeMatrices, 0, matrixData);
+    this.fallbackLightsBuffer = device.createBuffer({
+      label: "Volumetric Fallback Lights",
+      size: 768 * 96,
+      // MAX_LIGHTS * 96 bytes per light
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.fallbackSpotShadowAtlas = device.createTexture({
+      label: "Volumetric Fallback Spot Shadow Atlas",
       size: [1, 1, 1],
-      format: "rgba8unorm",
-      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+      format: "depth32float",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
     });
-    device.queue.writeTexture(
-      { texture: dummyGuiTexture },
-      new Uint8Array([0, 0, 0, 0]),
-      { bytesPerRow: 4 },
-      { width: 1, height: 1 }
-    );
-    this.dummyGuiTexture = {
-      texture: dummyGuiTexture,
-      view: dummyGuiTexture.createView(),
-      sampler: this.guiSampler
-    };
+    const spotMatrixData = new Float32Array(16 * 16);
+    for (let i = 0; i < 16; i++) spotMatrixData.set(identityMatrix, i * 16);
+    this.fallbackSpotMatrices = device.createBuffer({
+      label: "Volumetric Fallback Spot Matrices",
+      size: 16 * 4 * 16,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    device.queue.writeBuffer(this.fallbackSpotMatrices, 0, spotMatrixData);
+    await this._createResources(this.engine.canvas.width, this.engine.canvas.height);
   }
-  /**
-   * Build or rebuild the pipeline
-   */
-  async _buildPipeline() {
-    if (!this.inputTexture) {
-      return;
-    }
-    const textures = [this.inputTexture];
-    if (this.noiseTexture) {
-      textures.push(this.noiseTexture);
-    }
-    const effectiveBloomTexture = this.bloomTexture || this.dummyBloomTexture;
-    textures.push(effectiveBloomTexture);
-    const effectiveGuiTexture = this.guiTexture || this.dummyGuiTexture;
-    textures.push(effectiveGuiTexture);
-    const hasBloom = this.bloomTexture && this.bloomEnabled;
+  async _createResources(width, height) {
+    const { device } = this.engine;
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+    this.renderWidth = Math.max(1, Math.floor(width * this.resolution));
+    this.renderHeight = Math.max(1, Math.floor(height * this.resolution));
+    this._destroyTextures();
+    this.raymarchTexture = this._create2DTexture("Raymarch Output", this.renderWidth, this.renderHeight);
+    this.blurTempTexture = this._create2DTexture("Blur Temp", this.renderWidth, this.renderHeight);
+    this.blurredTexture = this._create2DTexture("Blurred Fog", this.renderWidth, this.renderHeight);
+    this.outputTexture = await Texture.renderTarget(this.engine, "rgba16float", width, height);
+    this.raymarchUniformBuffer = this._createUniformBuffer("Raymarch Uniforms", 256);
+    this.blurHUniformBuffer = this._createUniformBuffer("Blur H Uniforms", 32);
+    this.blurVUniformBuffer = this._createUniformBuffer("Blur V Uniforms", 32);
+    this.compositeUniformBuffer = this._createUniformBuffer("Composite Uniforms", 48);
+    await this._createPipelines();
+  }
+  _create2DTexture(label, width, height) {
+    const texture = this.engine.device.createTexture({
+      label,
+      size: [width, height, 1],
+      format: "rgba16float",
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+    });
+    return { texture, view: texture.createView(), width, height };
+  }
+  _createUniformBuffer(label, size) {
+    return this.engine.device.createBuffer({
+      label,
+      size,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+  }
+  async _createPipelines() {
+    const { device } = this.engine;
+    const raymarchModule = device.createShaderModule({
+      label: "Volumetric Raymarch Shader",
+      code: volumetric_raymarch_default
+    });
+    this.raymarchBGL = device.createBindGroupLayout({
+      label: "Volumetric Raymarch BGL",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth", viewDimension: "2d-array" } },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
+        { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+        // cascade matrices
+        { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } },
+        // lights
+        { binding: 6, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+        // spot shadow atlas
+        { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "read-only-storage" } }
+        // spot matrices
+      ]
+    });
+    this.raymarchPipeline = await device.createRenderPipelineAsync({
+      label: "Volumetric Raymarch Pipeline",
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.raymarchBGL] }),
+      vertex: { module: raymarchModule, entryPoint: "vertexMain" },
+      fragment: {
+        module: raymarchModule,
+        entryPoint: "fragmentMain",
+        targets: [{ format: "rgba16float" }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+    const blurModule = device.createShaderModule({
+      label: "Volumetric Blur Shader",
+      code: volumetric_blur_default
+    });
+    this.blurBGL = device.createBindGroupLayout({
+      label: "Volumetric Blur BGL",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } }
+      ]
+    });
+    const blurPipelineDesc = {
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.blurBGL] }),
+      vertex: { module: blurModule, entryPoint: "vertexMain" },
+      fragment: {
+        module: blurModule,
+        entryPoint: "fragmentMain",
+        targets: [{ format: "rgba16float" }]
+      },
+      primitive: { topology: "triangle-list" }
+    };
+    this.blurHPipeline = await device.createRenderPipelineAsync({ ...blurPipelineDesc, label: "Volumetric Blur H" });
+    this.blurVPipeline = await device.createRenderPipelineAsync({ ...blurPipelineDesc, label: "Volumetric Blur V" });
+    const compositeModule = device.createShaderModule({
+      label: "Volumetric Composite Shader",
+      code: volumetric_composite_default
+    });
+    this.compositeBGL = device.createBindGroupLayout({
+      label: "Volumetric Composite BGL",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } }
+      ]
+    });
+    this.compositePipeline = await device.createRenderPipelineAsync({
+      label: "Volumetric Composite Pipeline",
+      layout: device.createPipelineLayout({ bindGroupLayouts: [this.compositeBGL] }),
+      vertex: { module: compositeModule, entryPoint: "vertexMain" },
+      fragment: {
+        module: compositeModule,
+        entryPoint: "fragmentMain",
+        targets: [{ format: "rgba16float" }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+  }
+  async _execute(context) {
+    if (!this.isVolumetricEnabled) return;
+    if (!this.inputTexture || !this.gbuffer) return;
+    const { device } = this.engine;
+    const { camera, mainLight, lights } = context;
+    const time = performance.now() / 1e3;
+    this._updateAdaptiveScatter(camera, mainLight, time);
+    const lightCount = lights?.length ?? this.lightingPass?.lightCount ?? 0;
+    const commandEncoder = device.createCommandEncoder({ label: "Volumetric Fog Pass" });
+    this._updateRaymarchUniforms(camera, mainLight, time, lightCount);
+    const raymarchBindGroup = this._createRaymarchBindGroup();
+    if (raymarchBindGroup) {
+      const raymarchPass = commandEncoder.beginRenderPass({
+        label: "Volumetric Raymarch",
+        colorAttachments: [{
+          view: this.raymarchTexture.view,
+          loadOp: "clear",
+          storeOp: "store",
+          clearValue: { r: 0, g: 0, b: 0, a: 0 }
+        }]
+      });
+      raymarchPass.setPipeline(this.raymarchPipeline);
+      raymarchPass.setBindGroup(0, raymarchBindGroup);
+      raymarchPass.draw(3);
+      raymarchPass.end();
+    }
+    this._updateBlurUniforms(this.blurHUniformBuffer, 1, 0);
+    this._updateBlurUniforms(this.blurVUniformBuffer, 0, 1);
+    const blurHBindGroup = this._createBlurBindGroup(this.raymarchTexture, this.blurHUniformBuffer);
+    const blurHPass = commandEncoder.beginRenderPass({
+      label: "Volumetric Blur H",
+      colorAttachments: [{
+        view: this.blurTempTexture.view,
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: { r: 0, g: 0, b: 0, a: 0 }
+      }]
+    });
+    blurHPass.setPipeline(this.blurHPipeline);
+    blurHPass.setBindGroup(0, blurHBindGroup);
+    blurHPass.draw(3);
+    blurHPass.end();
+    const blurVBindGroup = this._createBlurBindGroup(this.blurTempTexture, this.blurVUniformBuffer);
+    const blurVPass = commandEncoder.beginRenderPass({
+      label: "Volumetric Blur V",
+      colorAttachments: [{
+        view: this.blurredTexture.view,
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: { r: 0, g: 0, b: 0, a: 0 }
+      }]
+    });
+    blurVPass.setPipeline(this.blurVPipeline);
+    blurVPass.setBindGroup(0, blurVBindGroup);
+    blurVPass.draw(3);
+    blurVPass.end();
+    this._updateCompositeUniforms();
+    const compositeBindGroup = this._createCompositeBindGroup();
+    if (compositeBindGroup) {
+      const compositePass = commandEncoder.beginRenderPass({
+        label: "Volumetric Composite",
+        colorAttachments: [{
+          view: this.outputTexture.view,
+          loadOp: "clear",
+          storeOp: "store",
+          clearValue: { r: 0, g: 0, b: 0, a: 1 }
+        }]
+      });
+      compositePass.setPipeline(this.compositePipeline);
+      compositePass.setBindGroup(0, compositeBindGroup);
+      compositePass.draw(3);
+      compositePass.end();
+    }
+    device.queue.submit([commandEncoder.finish()]);
+  }
+  /**
+   * Update adaptive main light scatter based on camera shadow state and sky visibility
+   * Smoothly transitions between light/dark scatter values
+   * Only uses dark scatter if camera is in shadow AND there's something overhead (no sky)
+   */
+  _updateAdaptiveScatter(camera, mainLight, currentTime) {
+    if (this._currentMainLightScatter === null) {
+      this._currentMainLightScatter = this.mainLightScatter;
+    }
+    const deltaTime = this._lastUpdateTime > 0 ? currentTime - this._lastUpdateTime : 0.016;
+    this._lastUpdateTime = currentTime;
+    let cameraInShadow = false;
+    if (this.shadowPass && this.shadowsEnabled && mainLight?.enabled !== false) {
+      const cameraPos = camera.position || [0, 0, 0];
+      cameraInShadow = this._isCameraInShadow(cameraPos);
+      if (!this._skyCheckPending && currentTime - this._lastSkyCheckTime > 0.5) {
+        this._checkSkyVisibility(cameraPos);
+      }
+    }
+    const inDarkArea = cameraInShadow && !this._skyVisible;
+    const targetShadowState = inDarkArea ? 1 : 0;
+    const transitionSpeed = inDarkArea ? 1 / 5 : 1 / 1;
+    const t = 1 - Math.exp(-transitionSpeed * deltaTime * 3);
+    this._cameraInShadowSmooth += (targetShadowState - this._cameraInShadowSmooth) * t;
+    this._cameraInShadowSmooth = Math.max(0, Math.min(1, this._cameraInShadowSmooth));
+    const lightScatter = this.mainLightScatter;
+    const darkScatter = this.mainLightScatterDark;
+    this._currentMainLightScatter = lightScatter + (darkScatter - lightScatter) * this._cameraInShadowSmooth;
+  }
+  /**
+   * Check if sky is visible above the camera using raycaster
+   * This is async and updates _skyVisible when complete
+   */
+  _checkSkyVisibility(cameraPos) {
+    const raycaster = this.engine?.raycaster;
+    if (!raycaster) return;
+    this._skyCheckPending = true;
+    this._lastSkyCheckTime = this._lastUpdateTime;
+    const skyCheckDistance = this.volumetricSettings.skyCheckDistance ?? 100;
+    const debugSkyCheck = this.volumetricSettings.debugSkyCheck ?? false;
+    raycaster.cast(
+      cameraPos,
+      [0, 1, 0],
+      // Straight up
+      skyCheckDistance,
+      (result) => {
+        this._skyVisible;
+        this._skyVisible = !result.hit;
+        this._skyCheckPending = false;
+        if (debugSkyCheck) {
+          const pos = cameraPos.map((v) => v.toFixed(1)).join(", ");
+          if (result.hit) {
+            console.log(`Sky check from [${pos}]: HIT ${result.meshName || result.candidateId} at dist=${result.distance?.toFixed(1)}`);
+          } else {
+            console.log(`Sky check from [${pos}]: NO HIT (sky visible)`);
+          }
+        }
+      },
+      { backfaces: true, debug: debugSkyCheck }
+      // Need backfaces to hit ceilings from below
+    );
+  }
+  /**
+   * Check if camera position is in shadow
+   * Uses the shadow pass's isCameraInShadow method if available,
+   * otherwise falls back to checking fog height bounds
+   */
+  _isCameraInShadow(cameraPos) {
+    if (typeof this.shadowPass?.isCameraInShadow === "function") {
+      return this.shadowPass.isCameraInShadow(cameraPos);
+    }
+    const heightRange = this.heightRange;
+    const fogBottom = heightRange[0];
+    const fogTop = heightRange[1];
+    const lowerThird = fogBottom + (fogTop - fogBottom) * 0.33;
+    if (cameraPos[1] < lowerThird) {
+      return true;
+    }
+    const mainLightDir = this.engine?.settings?.mainLight?.direction;
+    if (mainLightDir) {
+      const sunAngle = mainLightDir[1];
+      if (sunAngle > 0.7) {
+        return true;
+      }
+    }
+    return false;
+  }
+  _updateRaymarchUniforms(camera, mainLight, time, lightCount) {
+    const { device } = this.engine;
+    if (!camera.iProj || !camera.iView) {
+      console.warn("VolumetricFogPass: Camera missing iProj or iView matrices");
+      return;
+    }
+    const invProj = camera.iProj;
+    const invView = camera.iView;
+    const cameraPos = camera.position || [0, 0, 0];
+    const mainLightEnabled = mainLight?.enabled !== false;
+    const mainLightDir = mainLight?.direction ?? [-1, 1, -0.5];
+    const mainLightColor = mainLight?.color ?? [1, 0.95, 0.9];
+    const mainLightIntensity = mainLightEnabled ? mainLight?.intensity ?? 1 : 0;
+    const fogColor = this.fogSettings.color ?? [0.8, 0.85, 0.9];
+    const heightFade = this.heightRange;
+    const shadowsEnabled = this.shadowsEnabled && this.shadowPass != null;
+    const data = new Float32Array(64);
+    let offset = 0;
+    data.set(invProj, offset);
+    offset += 16;
+    data.set(invView, offset);
+    offset += 16;
+    data[offset++] = cameraPos[0];
+    data[offset++] = cameraPos[1];
+    data[offset++] = cameraPos[2];
+    data[offset++] = camera.near ?? 0.1;
+    data[offset++] = camera.far ?? 1e3;
+    data[offset++] = this.maxSamples;
+    data[offset++] = time;
+    data[offset++] = this.fogDensity;
+    data[offset++] = fogColor[0];
+    data[offset++] = fogColor[1];
+    data[offset++] = fogColor[2];
+    data[offset++] = shadowsEnabled ? 1 : 0;
+    data[offset++] = mainLightDir[0];
+    data[offset++] = mainLightDir[1];
+    data[offset++] = mainLightDir[2];
+    data[offset++] = mainLightIntensity;
+    data[offset++] = mainLightColor[0];
+    data[offset++] = mainLightColor[1];
+    data[offset++] = mainLightColor[2];
+    data[offset++] = this.scatterStrength;
+    data[offset++] = heightFade[0];
+    data[offset++] = heightFade[1];
+    data[offset++] = this.maxDistance;
+    data[offset++] = lightCount;
+    data[offset++] = this.debugMode;
+    data[offset++] = this.noiseStrength;
+    data[offset++] = this.noiseAnimated ? 1 : 0;
+    data[offset++] = this._currentMainLightScatter;
+    data[offset++] = this.noiseScale;
+    data[offset++] = this.mainLightSaturation;
+    device.queue.writeBuffer(this.raymarchUniformBuffer, 0, data);
+  }
+  _updateBlurUniforms(buffer, dirX, dirY) {
+    const data = new Float32Array([
+      dirX,
+      dirY,
+      1 / this.renderWidth,
+      1 / this.renderHeight,
+      this.blurRadius,
+      0,
+      0,
+      0
+    ]);
+    this.engine.device.queue.writeBuffer(buffer, 0, data);
+  }
+  _updateCompositeUniforms() {
+    const data = new Float32Array([
+      this.canvasWidth,
+      this.canvasHeight,
+      this.renderWidth,
+      this.renderHeight,
+      1 / this.canvasWidth,
+      1 / this.canvasHeight,
+      this.brightnessThreshold,
+      this.minVisibility,
+      this.skyBrightness,
+      0,
+      // skyBrightness + padding
+      0,
+      0
+      // extra padding to 48 bytes
+    ]);
+    this.engine.device.queue.writeBuffer(this.compositeUniformBuffer, 0, data);
+  }
+  _createRaymarchBindGroup() {
+    const { device } = this.engine;
+    const depthTexture = this.gbuffer?.depth;
+    if (!depthTexture) return null;
+    const cascadeShadows = this.shadowPass?.getShadowMap?.() ?? this.fallbackCascadeShadowMap;
+    const cascadeMatrices = this.shadowPass?.getCascadeMatricesBuffer?.() ?? this.fallbackCascadeMatrices;
+    const shadowSampler = this.shadowPass?.getShadowSampler?.() ?? this.fallbackShadowSampler;
+    const lightsBuffer = this.lightingPass?.getLightBuffer?.() ?? this.fallbackLightsBuffer;
+    const spotShadowAtlas = this.shadowPass?.getSpotShadowAtlasView?.() ?? this.fallbackSpotShadowAtlas.createView();
+    const spotMatrices = this.shadowPass?.getSpotMatricesBuffer?.() ?? this.fallbackSpotMatrices;
+    return device.createBindGroup({
+      label: "Volumetric Raymarch Bind Group",
+      layout: this.raymarchBGL,
+      entries: [
+        { binding: 0, resource: { buffer: this.raymarchUniformBuffer } },
+        { binding: 1, resource: depthTexture.texture.createView({ aspect: "depth-only" }) },
+        { binding: 2, resource: cascadeShadows.createView({ dimension: "2d-array", aspect: "depth-only" }) },
+        { binding: 3, resource: shadowSampler },
+        { binding: 4, resource: { buffer: cascadeMatrices } },
+        { binding: 5, resource: { buffer: lightsBuffer } },
+        { binding: 6, resource: spotShadowAtlas },
+        { binding: 7, resource: { buffer: spotMatrices } }
+      ]
+    });
+  }
+  _createBlurBindGroup(inputTexture, uniformBuffer) {
+    return this.engine.device.createBindGroup({
+      label: "Volumetric Blur Bind Group",
+      layout: this.blurBGL,
+      entries: [
+        { binding: 0, resource: { buffer: uniformBuffer } },
+        { binding: 1, resource: inputTexture.view },
+        { binding: 2, resource: this.linearSampler }
+      ]
+    });
+  }
+  _createCompositeBindGroup() {
+    if (!this.inputTexture) return null;
+    const depthTexture = this.gbuffer?.depth;
+    if (!depthTexture) return null;
+    return this.engine.device.createBindGroup({
+      label: "Volumetric Composite Bind Group",
+      layout: this.compositeBGL,
+      entries: [
+        { binding: 0, resource: { buffer: this.compositeUniformBuffer } },
+        { binding: 1, resource: this.inputTexture.view },
+        { binding: 2, resource: this.blurredTexture.view },
+        { binding: 3, resource: this.linearSampler },
+        { binding: 4, resource: depthTexture.texture.createView({ aspect: "depth-only" }) }
+      ]
+    });
+  }
+  _destroyTextures() {
+    const textures = [this.raymarchTexture, this.blurTempTexture, this.blurredTexture, this.outputTexture];
+    for (const tex of textures) {
+      if (tex?.texture) tex.texture.destroy();
+    }
+    this.raymarchTexture = null;
+    this.blurTempTexture = null;
+    this.blurredTexture = null;
+    this.outputTexture = null;
+  }
+  async _resize(width, height) {
+    await this._createResources(width, height);
+  }
+  _destroy() {
+    this._destroyTextures();
+    const buffers = [this.raymarchUniformBuffer, this.blurHUniformBuffer, this.blurVUniformBuffer, this.compositeUniformBuffer];
+    for (const buf of buffers) {
+      if (buf) buf.destroy();
+    }
+    this.raymarchPipeline = null;
+    this.blurHPipeline = null;
+    this.blurVPipeline = null;
+    this.compositePipeline = null;
+  }
+}
+var postproc_default = "struct VertexOutput {\n    @builtin(position) position : vec4<f32>,\n    @location(0) uv : vec2<f32>,\n}\n\nstruct Uniforms {\n    canvasSize: vec2f,\n    noiseParams: vec4f,  \n    ditherParams: vec4f, \n    bloomParams: vec4f,  \n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var inputTexture : texture_2d<f32>;\n@group(0) @binding(2) var inputSampler : sampler;\n@group(0) @binding(3) var noiseTexture : texture_2d<f32>;\n@group(0) @binding(4) var noiseSampler : sampler;\n@group(0) @binding(5) var bloomTexture : texture_2d<f32>;\n@group(0) @binding(6) var bloomSampler : sampler;\n@group(0) @binding(7) var guiTexture : texture_2d<f32>;\n@group(0) @binding(8) var guiSampler : sampler;\n\nconst FXAA_EDGE_THRESHOLD: f32 = 0.125;      \nconst FXAA_EDGE_THRESHOLD_MIN: f32 = 0.0156; \nconst FXAA_SUBPIX_QUALITY: f32 = 1.0;        \n\nfn sampleNoise(screenPos: vec2f) -> f32 {\n    let noiseSize = i32(uniforms.noiseParams.x);\n    let noiseOffsetX = i32(uniforms.noiseParams.y * f32(noiseSize));\n    let noiseOffsetY = i32(uniforms.noiseParams.z * f32(noiseSize));\n\n    let texCoord = vec2i(\n        (i32(screenPos.x) + noiseOffsetX) % noiseSize,\n        (i32(screenPos.y) + noiseOffsetY) % noiseSize\n    );\n    return textureLoad(noiseTexture, texCoord, 0).r;\n}\n\nfn rgb2luma(rgb: vec3f) -> f32 {\n    return dot(rgb, vec3f(0.299, 0.587, 0.114));\n}\n\nfn loadPixel(coord: vec2i) -> vec3f {\n    let size = vec2i(textureDimensions(inputTexture, 0));\n    let clampedCoord = clamp(coord, vec2i(0), size - vec2i(1));\n    return textureLoad(inputTexture, clampedCoord, 0).rgb;\n}\n\nfn sampleBilinear(uv: vec2f) -> vec3f {\n    let texSize = vec2f(textureDimensions(inputTexture, 0));\n    let texelPos = uv * texSize - 0.5;\n    let baseCoord = vec2i(floor(texelPos));\n    let frac = fract(texelPos);\n\n    let c00 = loadPixel(baseCoord);\n    let c10 = loadPixel(baseCoord + vec2i(1, 0));\n    let c01 = loadPixel(baseCoord + vec2i(0, 1));\n    let c11 = loadPixel(baseCoord + vec2i(1, 1));\n\n    let c0 = mix(c00, c10, frac.x);\n    let c1 = mix(c01, c11, frac.x);\n    return mix(c0, c1, frac.y);\n}\n\nfn fxaa(uv: vec2f) -> vec3f {\n    let texSize = vec2f(textureDimensions(inputTexture, 0));\n    let pixelCoord = vec2i(uv * texSize);\n\n    \n    let rgbM = loadPixel(pixelCoord);\n    let rgbN = loadPixel(pixelCoord + vec2i(0, -1));\n    let rgbS = loadPixel(pixelCoord + vec2i(0, 1));\n    let rgbW = loadPixel(pixelCoord + vec2i(-1, 0));\n    let rgbE = loadPixel(pixelCoord + vec2i(1, 0));\n    let rgbNW = loadPixel(pixelCoord + vec2i(-1, -1));\n    let rgbNE = loadPixel(pixelCoord + vec2i(1, -1));\n    let rgbSW = loadPixel(pixelCoord + vec2i(-1, 1));\n    let rgbSE = loadPixel(pixelCoord + vec2i(1, 1));\n\n    \n    let lumaM = rgb2luma(rgbM);\n    let lumaN = rgb2luma(rgbN);\n    let lumaS = rgb2luma(rgbS);\n    let lumaW = rgb2luma(rgbW);\n    let lumaE = rgb2luma(rgbE);\n    let lumaNW = rgb2luma(rgbNW);\n    let lumaNE = rgb2luma(rgbNE);\n    let lumaSW = rgb2luma(rgbSW);\n    let lumaSE = rgb2luma(rgbSE);\n\n    \n    let lumaMin = min(lumaM, min(min(lumaN, lumaS), min(lumaW, lumaE)));\n    let lumaMax = max(lumaM, max(max(lumaN, lumaS), max(lumaW, lumaE)));\n    let lumaRange = lumaMax - lumaMin;\n\n    \n    let isEdge = lumaRange >= max(FXAA_EDGE_THRESHOLD_MIN, lumaMax * FXAA_EDGE_THRESHOLD);\n\n    \n    let lumaL = (lumaN + lumaS + lumaW + lumaE) * 0.25;\n    let rangeL = abs(lumaL - lumaM);\n    var blendL = max(0.0, (rangeL / max(lumaRange, 0.0001)) - 0.25) * (1.0 / 0.75);\n    blendL = min(1.0, blendL) * blendL * FXAA_SUBPIX_QUALITY;\n\n    \n    let edgeHorz = abs((lumaNW + lumaNE) - 2.0 * lumaN) +\n                   2.0 * abs((lumaW + lumaE) - 2.0 * lumaM) +\n                   abs((lumaSW + lumaSE) - 2.0 * lumaS);\n    let edgeVert = abs((lumaNW + lumaSW) - 2.0 * lumaW) +\n                   2.0 * abs((lumaN + lumaS) - 2.0 * lumaM) +\n                   abs((lumaNE + lumaSE) - 2.0 * lumaE);\n    let isHorizontal = edgeHorz >= edgeVert;\n\n    \n    let luma1 = select(lumaE, lumaS, isHorizontal);\n    let luma2 = select(lumaW, lumaN, isHorizontal);\n    let gradient1 = abs(luma1 - lumaM);\n    let gradient2 = abs(luma2 - lumaM);\n    let is1Steepest = gradient1 >= gradient2;\n    let gradientScaled = 0.25 * max(gradient1, gradient2);\n\n    \n    let stepSign = select(-1.0, 1.0, is1Steepest);\n    let lumaLocalAverage = 0.5 * (select(luma2, luma1, is1Steepest) + lumaM);\n\n    \n    let searchDir = select(vec2i(0, 1), vec2i(1, 0), isHorizontal);\n\n    let luma1_1 = rgb2luma(loadPixel(pixelCoord - searchDir)) - lumaLocalAverage;\n    let luma2_1 = rgb2luma(loadPixel(pixelCoord + searchDir)) - lumaLocalAverage;\n    let luma1_2 = rgb2luma(loadPixel(pixelCoord - searchDir * 2)) - lumaLocalAverage;\n    let luma2_2 = rgb2luma(loadPixel(pixelCoord + searchDir * 2)) - lumaLocalAverage;\n    let luma1_3 = rgb2luma(loadPixel(pixelCoord - searchDir * 3)) - lumaLocalAverage;\n    let luma2_3 = rgb2luma(loadPixel(pixelCoord + searchDir * 3)) - lumaLocalAverage;\n    let luma1_4 = rgb2luma(loadPixel(pixelCoord - searchDir * 4)) - lumaLocalAverage;\n    let luma2_4 = rgb2luma(loadPixel(pixelCoord + searchDir * 4)) - lumaLocalAverage;\n\n    \n    let reached1_1 = abs(luma1_1) >= gradientScaled;\n    let reached1_2 = abs(luma1_2) >= gradientScaled;\n    let reached1_3 = abs(luma1_3) >= gradientScaled;\n    let reached2_1 = abs(luma2_1) >= gradientScaled;\n    let reached2_2 = abs(luma2_2) >= gradientScaled;\n    let reached2_3 = abs(luma2_3) >= gradientScaled;\n\n    \n    let dist1 = select(select(select(4.0, 3.0, reached1_3), 2.0, reached1_2), 1.0, reached1_1);\n    let dist2 = select(select(select(4.0, 3.0, reached2_3), 2.0, reached2_2), 1.0, reached2_1);\n\n    \n    let lumaEnd1 = select(select(select(luma1_4, luma1_3, reached1_3), luma1_2, reached1_2), luma1_1, reached1_1);\n    let lumaEnd2 = select(select(select(luma2_4, luma2_3, reached2_3), luma2_2, reached2_2), luma2_1, reached2_1);\n\n    \n    let distFinal = min(dist1, dist2);\n    let edgeThickness = dist1 + dist2;\n    let lumaEndCloser = select(lumaEnd2, lumaEnd1, dist1 < dist2);\n    let correctVariation = (lumaEndCloser < 0.0) != (lumaM < lumaLocalAverage);\n    var pixelOffset = select(0.0, -distFinal / max(edgeThickness, 0.0001) + 0.5, correctVariation);\n\n    \n    let finalOffset = max(max(pixelOffset, blendL), 0.5);\n\n    \n    let inverseVP = 1.0 / texSize;\n    var finalUv = uv;\n    let offsetAmount = finalOffset * stepSign;\n    finalUv.x += select(offsetAmount * inverseVP.x, 0.0, isHorizontal);\n    finalUv.y += select(0.0, offsetAmount * inverseVP.y, isHorizontal);\n\n    \n    let offsetColor = sampleBilinear(finalUv);\n\n    \n    \n    let perpDir = select(vec2i(0, 1), vec2i(1, 0), isHorizontal);\n    let perpColor1 = loadPixel(pixelCoord + perpDir);\n    let perpColor2 = loadPixel(pixelCoord - perpDir);\n    let neighborAvg = (perpColor1 + perpColor2) * 0.5;\n\n    \n    let fxaaColor = mix(mix(offsetColor, neighborAvg, 0.7), rgbM, 0.1);\n\n    \n    return select(rgbM, fxaaColor, isEdge);\n}\n\nfn sampleBloom(uv: vec2f, sceneBrightness: f32) -> vec3f {\n    let bloom = textureSample(bloomTexture, bloomSampler, uv).rgb;\n\n    \n    \n    let threshold = 0.5;  \n    let mask = saturate(1.0 - (sceneBrightness - threshold) / (1.0 - threshold));\n\n    return bloom * mask * mask;  \n}\n\nfn aces_tone_map(hdr: vec3<f32>) -> vec3<f32> {\n    let m1 = mat3x3(\n        0.59719, 0.07600, 0.02840,\n        0.35458, 0.90834, 0.13383,\n        0.04823, 0.01566, 0.83777,\n    );\n    let m2 = mat3x3(\n        1.60475, -0.10208, -0.00327,\n        -0.53108,  1.10813, -0.07276,\n        -0.07367, -0.00605,  1.07602,\n    );\n    let v = m1 * hdr;\n    let a = v * (v + 0.0245786) - 0.000090537;\n    let b = v * (0.983729 * v + 0.4329510) + 0.238081;\n    return clamp(m2 * (a / b), vec3(0.0), vec3(1.0));\n}\n\nfn reinhard_tone_map(hdr: vec3<f32>) -> vec3<f32> {\n    return hdr / (hdr + vec3(1.0));\n}\n\nfn linear_tone_map(hdr: vec3<f32>) -> vec3<f32> {\n    return clamp(hdr, vec3(0.0), vec3(1.0));\n}\n\nfn apply_tone_map(hdr: vec3<f32>, mode: i32) -> vec3<f32> {\n    if (mode == 1) {\n        return reinhard_tone_map(hdr);\n    } else if (mode == 2) {\n        return linear_tone_map(hdr);\n    }\n    return aces_tone_map(hdr);  \n}\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {\n    var output : VertexOutput;\n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n    output.position = vec4<f32>(x, y, 0.0, 1.0);\n    output.uv = vec2<f32>((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n    return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {\n    \n    let fxaaEnabled = uniforms.noiseParams.w > 0.5;\n    let fxaaColor = fxaa(input.uv);\n    let directColor = textureSample(inputTexture, inputSampler, input.uv).rgb;\n    var color = select(directColor, fxaaColor, fxaaEnabled);\n\n    \n    \n    if (uniforms.bloomParams.x > 0.5) {\n        let sceneBrightness = rgb2luma(color);\n        let bloom = sampleBloom(input.uv, sceneBrightness);\n        color += bloom * uniforms.bloomParams.y;  \n    }\n\n    let tonemapMode = i32(uniforms.ditherParams.z);\n    var sdr = apply_tone_map(color, tonemapMode);\n\n    \n    \n    let gui = textureSample(guiTexture, guiSampler, input.uv);\n    sdr = sdr * (1.0 - gui.a) + gui.rgb;\n\n    \n    \n    if (uniforms.ditherParams.x > 0.5 && uniforms.noiseParams.x > 0.0) {\n        let levels = uniforms.ditherParams.y;\n        let noise = sampleNoise(input.position.xy);\n\n        \n        \n        let dither = noise - 0.5;\n        sdr = floor(sdr * (levels - 1.0) + dither + 0.5) / (levels - 1.0);\n        sdr = clamp(sdr, vec3f(0.0), vec3f(1.0));\n    }\n\n    return vec4<f32>(sdr, 1.0);\n}";
+class PostProcessPass extends BasePass {
+  constructor(engine = null) {
+    super("PostProcess", engine);
+    this.pipeline = null;
+    this.inputTexture = null;
+    this.bloomTexture = null;
+    this.dummyBloomTexture = null;
+    this.noiseTexture = null;
+    this.noiseSize = 64;
+    this.noiseAnimated = true;
+    this.guiCanvas = null;
+    this.guiTexture = null;
+    this.guiSampler = null;
+    this.intermediateTexture = null;
+    this._outputWidth = 0;
+    this._outputHeight = 0;
+    this._lastOutputToTexture = false;
+    this._resizeWidth = 0;
+    this._resizeHeight = 0;
+  }
+  // Convenience getter for exposure setting
+  get exposure() {
+    return this.settings?.environment?.exposure ?? 1.6;
+  }
+  // Convenience getter for fxaa setting
+  get fxaa() {
+    return this.settings?.rendering?.fxaa ?? true;
+  }
+  // Convenience getter for dithering settings
+  get ditheringEnabled() {
+    return this.settings?.dithering?.enabled ?? true;
+  }
+  get colorLevels() {
+    return this.settings?.dithering?.colorLevels ?? 32;
+  }
+  // Tonemap mode: 0=ACES, 1=Reinhard, 2=None/Linear
+  get tonemapMode() {
+    return this.settings?.rendering?.tonemapMode ?? 0;
+  }
+  // Convenience getters for bloom settings
+  get bloomEnabled() {
+    return this.settings?.bloom?.enabled ?? true;
+  }
+  get bloomIntensity() {
+    return this.settings?.bloom?.intensity ?? 1;
+  }
+  get bloomRadius() {
+    return this.settings?.bloom?.radius ?? 5;
+  }
+  // CRT settings (determines if we output to intermediate texture)
+  get crtEnabled() {
+    return this.settings?.crt?.enabled ?? false;
+  }
+  get crtUpscaleEnabled() {
+    return this.settings?.crt?.upscaleEnabled ?? false;
+  }
+  get shouldOutputToTexture() {
+    return this.crtEnabled || this.crtUpscaleEnabled;
+  }
+  /**
+   * Set the input texture (HDR image from LightingPass)
+   * @param {Texture} texture - Input HDR texture
+   */
+  setInputTexture(texture) {
+    if (this.inputTexture !== texture) {
+      this.inputTexture = texture;
+      this._needsRebuild = true;
+    }
+  }
+  /**
+   * Set the bloom texture (from BloomPass)
+   * @param {Object} bloomTexture - Bloom texture with mip levels
+   */
+  setBloomTexture(bloomTexture) {
+    if (this.bloomTexture !== bloomTexture) {
+      this.bloomTexture = bloomTexture;
+      this._needsRebuild = true;
+    }
+  }
+  /**
+   * Set the noise texture for dithering
+   * @param {Texture} texture - Noise texture (blue noise or bayer dither)
+   * @param {number} size - Texture size
+   * @param {boolean} animated - Whether to animate noise offset each frame
+   */
+  setNoise(texture, size = 64, animated = true) {
+    this.noiseTexture = texture;
+    this.noiseSize = size;
+    this.noiseAnimated = animated;
+    this._needsRebuild = true;
+  }
+  /**
+   * Set the GUI canvas for overlay rendering
+   * @param {HTMLCanvasElement} canvas - 2D canvas with GUI content
+   */
+  setGuiCanvas(canvas) {
+    this.guiCanvas = canvas;
+  }
+  /**
+   * Get the output texture (for CRT pass to use)
+   * Returns null if outputting directly to canvas
+   */
+  getOutputTexture() {
+    return this.shouldOutputToTexture ? this.intermediateTexture : null;
+  }
+  /**
+   * Create or resize the intermediate texture for CRT
+   */
+  async _createIntermediateTexture(width, height) {
+    if (!this.shouldOutputToTexture) {
+      if (this.intermediateTexture?.texture) {
+        this.intermediateTexture.texture.destroy();
+        this.intermediateTexture = null;
+      }
+      return;
+    }
+    if (this._outputWidth === width && this._outputHeight === height && this.intermediateTexture) {
+      return;
+    }
+    const { device } = this.engine;
+    if (this.intermediateTexture?.texture) {
+      this.intermediateTexture.texture.destroy();
+    }
+    const texture = device.createTexture({
+      label: "PostProcess Intermediate",
+      size: [width, height, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+    });
+    const sampler = device.createSampler({
+      label: "PostProcess Intermediate Sampler",
+      minFilter: "nearest",
+      magFilter: "nearest"
+    });
+    this.intermediateTexture = {
+      texture,
+      view: texture.createView(),
+      sampler,
+      width,
+      height,
+      format: "rgba8unorm"
+      // Required by Pipeline.create()
+    };
+    this._outputWidth = width;
+    this._outputHeight = height;
+    this._needsRebuild = true;
+    console.log(`PostProcessPass: Created intermediate texture ${width}x${height} for CRT`);
+  }
+  async _init() {
+    const { device } = this.engine;
+    const dummyTexture = device.createTexture({
+      label: "Dummy Bloom Texture",
+      size: [1, 1, 1],
+      format: "rgba16float",
+      mipLevelCount: 1,
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    device.queue.writeTexture(
+      { texture: dummyTexture },
+      new Float32Array([0, 0, 0, 0]).buffer,
+      { bytesPerRow: 8 },
+      { width: 1, height: 1 }
+    );
+    const dummySampler = device.createSampler({
+      label: "Dummy Bloom Sampler",
+      minFilter: "linear",
+      magFilter: "linear"
+    });
+    this.dummyBloomTexture = {
+      texture: dummyTexture,
+      view: dummyTexture.createView(),
+      sampler: dummySampler,
+      mipCount: 1
+    };
+    this.guiSampler = device.createSampler({
+      label: "GUI Sampler",
+      minFilter: "linear",
+      magFilter: "linear"
+    });
+    const dummyGuiTexture = device.createTexture({
+      label: "Dummy GUI Texture",
+      size: [1, 1, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    device.queue.writeTexture(
+      { texture: dummyGuiTexture },
+      new Uint8Array([0, 0, 0, 0]),
+      { bytesPerRow: 4 },
+      { width: 1, height: 1 }
+    );
+    this.dummyGuiTexture = {
+      texture: dummyGuiTexture,
+      view: dummyGuiTexture.createView(),
+      sampler: this.guiSampler
+    };
+  }
+  /**
+   * Build or rebuild the pipeline
+   */
+  async _buildPipeline() {
+    if (!this.inputTexture) {
+      return;
+    }
+    const textures = [this.inputTexture];
+    if (this.noiseTexture) {
+      textures.push(this.noiseTexture);
+    }
+    const effectiveBloomTexture = this.bloomTexture || this.dummyBloomTexture;
+    textures.push(effectiveBloomTexture);
+    const effectiveGuiTexture = this.guiTexture || this.dummyGuiTexture;
+    textures.push(effectiveGuiTexture);
+    const hasBloom = this.bloomTexture && this.bloomEnabled;
+    const renderTarget = this.shouldOutputToTexture && this.intermediateTexture ? this.intermediateTexture : null;
     this.pipeline = await Pipeline.create(this.engine, {
       label: "postProcess",
       wgslSource: postproc_default,
@@ -11162,75 +12154,662 @@ class PostProcessPass extends BasePass {
       textures,
       uniforms: () => ({
         noiseParams: [this.noiseSize, this.noiseAnimated ? Math.random() : 0, this.noiseAnimated ? Math.random() : 0, this.fxaa ? 1 : 0],
-        ditherParams: [this.ditheringEnabled ? 1 : 0, this.colorLevels, 0, 0],
+        ditherParams: [this.ditheringEnabled ? 1 : 0, this.colorLevels, this.tonemapMode, 0],
         bloomParams: [hasBloom ? 1 : 0, this.bloomIntensity, this.bloomRadius, effectiveBloomTexture?.mipCount ?? 1]
-      })
-      // No renderTarget = output to canvas
+      }),
+      renderTarget
+    });
+    this._needsRebuild = false;
+  }
+  async _execute(context) {
+    const { device, canvas } = this.engine;
+    const needsOutputToTexture = this.shouldOutputToTexture;
+    const hasIntermediateTexture = !!this.intermediateTexture;
+    if (needsOutputToTexture !== this._lastOutputToTexture) {
+      this._lastOutputToTexture = needsOutputToTexture;
+      this._needsRebuild = true;
+      if (needsOutputToTexture && !hasIntermediateTexture) {
+        const w = this._resizeWidth || canvas.width;
+        const h = this._resizeHeight || canvas.height;
+        await this._createIntermediateTexture(w, h);
+      } else if (!needsOutputToTexture && hasIntermediateTexture) {
+        if (this.intermediateTexture?.texture) {
+          this.intermediateTexture.texture.destroy();
+          this.intermediateTexture = null;
+        }
+      }
+    }
+    if (this.guiCanvas && this.guiCanvas.width > 0 && this.guiCanvas.height > 0) {
+      const needsNewTexture = !this.guiTexture || this.guiTexture.width !== this.guiCanvas.width || this.guiTexture.height !== this.guiCanvas.height;
+      if (needsNewTexture) {
+        if (this.guiTexture?.texture) {
+          this.guiTexture.texture.destroy();
+        }
+        const texture = device.createTexture({
+          label: "GUI Texture",
+          size: [this.guiCanvas.width, this.guiCanvas.height, 1],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        this.guiTexture = {
+          texture,
+          view: texture.createView(),
+          sampler: this.guiSampler,
+          width: this.guiCanvas.width,
+          height: this.guiCanvas.height
+        };
+        this._needsRebuild = true;
+      }
+      device.queue.copyExternalImageToTexture(
+        { source: this.guiCanvas },
+        { texture: this.guiTexture.texture },
+        [this.guiCanvas.width, this.guiCanvas.height]
+      );
+    }
+    if (this._needsRebuild) {
+      await this._buildPipeline();
+    }
+    if (!this.pipeline || this._needsRebuild) {
+      console.warn("PostProcessPass: Pipeline not ready");
+      return;
+    }
+    const hasBloom = this.bloomTexture && this.bloomEnabled;
+    const effectiveBloomTexture = this.bloomTexture || this.dummyBloomTexture;
+    this.pipeline.uniformValues.set({
+      noiseParams: [this.noiseSize, this.noiseAnimated ? Math.random() : 0, this.noiseAnimated ? Math.random() : 0, this.fxaa ? 1 : 0],
+      ditherParams: [this.ditheringEnabled ? 1 : 0, this.colorLevels, this.tonemapMode, 0],
+      bloomParams: [hasBloom ? 1 : 0, this.bloomIntensity, this.bloomRadius, effectiveBloomTexture?.mipCount ?? 1]
+    });
+    this.pipeline.render();
+  }
+  async _resize(width, height) {
+    this._resizeWidth = width;
+    this._resizeHeight = height;
+    await this._createIntermediateTexture(width, height);
+    this._needsRebuild = true;
+  }
+  _destroy() {
+    this.pipeline = null;
+    if (this.dummyBloomTexture?.texture) {
+      this.dummyBloomTexture.texture.destroy();
+      this.dummyBloomTexture = null;
+    }
+    if (this.guiTexture?.texture) {
+      this.guiTexture.texture.destroy();
+      this.guiTexture = null;
+    }
+    if (this.dummyGuiTexture?.texture) {
+      this.dummyGuiTexture.texture.destroy();
+      this.dummyGuiTexture = null;
+    }
+    if (this.intermediateTexture?.texture) {
+      this.intermediateTexture.texture.destroy();
+      this.intermediateTexture = null;
+    }
+  }
+}
+var crt_default = "struct VertexOutput {\n    @builtin(position) position: vec4f,\n    @location(0) uv: vec2f,\n}\n\nstruct Uniforms {\n    canvasSize: vec2f,          \n    inputSize: vec2f,           \n    renderSize: vec2f,          \n\n    \n    curvature: f32,             \n    cornerRadius: f32,          \n    zoom: f32,                  \n    _padGeom: f32,\n\n    \n    scanlineIntensity: f32,     \n    scanlineWidth: f32,         \n    scanlineBrightBoost: f32,   \n    scanlineHeight: f32,        \n\n    \n    convergence: vec3f,\n    _pad2: f32,\n\n    \n    maskType: f32,              \n    maskIntensity: f32,         \n    maskScale: f32,             \n    maskCompensation: f32,      \n\n    \n    vignetteIntensity: f32,\n    vignetteSize: f32,\n\n    \n    blurSize: f32,              \n\n    \n    crtEnabled: f32,            \n    upscaleEnabled: f32,        \n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n@group(0) @binding(1) var inputTexture: texture_2d<f32>;\n@group(0) @binding(2) var inputSampler: sampler;        \n@group(0) @binding(3) var nearestSampler: sampler;      \n@group(0) @binding(4) var phosphorMask: texture_2d<f32>;\n@group(0) @binding(5) var phosphorSampler: sampler;\n\nconst PI: f32 = 3.14159265359;\n\nfn applyBarrelDistortion(uv: vec2f, curvature: f32) -> vec2f {\n    \n    let centered = uv - 0.5;\n\n    \n    let r2 = dot(centered, centered);\n\n    \n    let distorted = centered * (1.0 + curvature * r2);\n\n    return distorted + 0.5;\n}\n\nfn getCornerMask(uv: vec2f, radius: f32) -> f32 {\n    \n    let d = abs(uv - 0.5) * 2.0;\n\n    \n    let corner = max(d.x, d.y);\n    let roundedCorner = length(max(d - (1.0 - radius), vec2f(0.0)));\n\n    \n    let mask = 1.0 - smoothstep(1.0 - radius * 0.5, 1.0, max(corner, roundedCorner));\n\n    return mask;\n}\n\nfn applyScanlines(color: vec3f, scanlinePos: f32, intensity: f32, width: f32, brightBoost: f32) -> vec3f {\n    if (intensity <= 0.0) {\n        return color;\n    }\n\n    \n    \n    let pos = fract(scanlinePos);\n\n    \n    \n    let distFromCenter = abs(pos - 0.5);\n\n    \n    let brightness = dot(color, vec3f(0.299, 0.587, 0.114));\n\n    \n    \n    \n    let baseWidth = width;\n    let brightWidening = brightBoost * brightness * (1.0 - width);\n    let effectiveWidth = clamp(baseWidth + brightWidening, 0.0, 1.0);\n\n    \n    \n    \n    let sigma = mix(0.08, 0.8, effectiveWidth);\n    let gaussian = exp(-0.5 * pow(distFromCenter / sigma, 2.0));\n\n    \n    let scanline = clamp(gaussian, 0.0, 1.0);\n    let darkening = mix(1.0, scanline, intensity);\n\n    return color * darkening;\n}\n\nfn sampleWithConvergence(uv: vec2f, convergence: vec3f, texelSize: vec2f) -> vec3f {\n    \n    \n    let offsetR = vec2f(convergence.r * texelSize.x, 0.0);\n    let offsetG = vec2f(convergence.g * texelSize.x, 0.0);\n    let offsetB = vec2f(convergence.b * texelSize.x, 0.0);\n\n    let r = textureSampleLevel(inputTexture, inputSampler, uv + offsetR, 0.0).r;\n    let g = textureSampleLevel(inputTexture, inputSampler, uv + offsetG, 0.0).g;\n    let b = textureSampleLevel(inputTexture, inputSampler, uv + offsetB, 0.0).b;\n\n    return vec3f(r, g, b);\n}\n\nfn applyPhosphorMask(color: vec3f, screenPos: vec2f, maskType: f32, intensity: f32, scale: f32) -> vec3f {\n    if (intensity <= 0.0 || maskType < 0.5) {\n        return color;\n    }\n\n    \n    \n    \n    let maskUV = screenPos / (3.0 * scale);\n    let mask = textureSampleLevel(phosphorMask, phosphorSampler, maskUV, 0.0).rgb;\n\n    \n    \n    return mix(color, color * mask, intensity);\n}\n\nfn proceduralApertureGrille(screenX: f32, scale: f32) -> vec3f {\n    let phase = fract(screenX / (3.0 * scale));\n\n    \n    var mask = vec3f(0.0);\n    if (phase < 0.333) {\n        mask = vec3f(1.0, 0.2, 0.2);  \n    } else if (phase < 0.666) {\n        mask = vec3f(0.2, 1.0, 0.2);  \n    } else {\n        mask = vec3f(0.2, 0.2, 1.0);  \n    }\n\n    return mask;\n}\n\nfn proceduralSlotMask(screenPos: vec2f, scale: f32, scanlineHeight: f32) -> vec3f {\n    \n    let cellWidth = 3.0 * scale;\n    let cellHeight = max(scanlineHeight, 1.0);\n    let cellPos = fract(vec2f(screenPos.x / cellWidth, screenPos.y / cellHeight));\n\n    \n    var adjusted = cellPos;\n    if (fract(screenPos.y / (cellHeight * 2.0)) > 0.5) {\n        adjusted.x = fract(adjusted.x + 0.5);\n    }\n\n    \n    var mask = vec3f(0.0);\n    if (adjusted.x < 0.333) {\n        mask = vec3f(1.0, 0.1, 0.1);\n    } else if (adjusted.x < 0.666) {\n        mask = vec3f(0.1, 1.0, 0.1);\n    } else {\n        mask = vec3f(0.1, 0.1, 1.0);\n    }\n\n    \n    mask *= smoothstep(0.0, 0.15, cellPos.y) * smoothstep(1.0, 0.85, cellPos.y);\n\n    return mask;\n}\n\nfn proceduralShadowMask(screenPos: vec2f, scale: f32) -> vec3f {\n    let cellSize = 2.0 * scale;\n    let cell = floor(screenPos / cellSize);\n    let cellPos = fract(screenPos / cellSize);\n\n    \n    let rowOffset = select(0.0, 0.5, fract(cell.y * 0.5) > 0.25);\n    let adjustedX = fract(cellPos.x + rowOffset);\n\n    \n    let dist = length(cellPos - 0.5) * 2.0;\n    let circle = 1.0 - smoothstep(0.6, 0.8, dist);\n\n    \n    let phase = fract((cell.x + rowOffset) / 3.0);\n    var mask = vec3f(0.1);\n    if (phase < 0.333) {\n        mask = vec3f(1.0, 0.1, 0.1) * circle;\n    } else if (phase < 0.666) {\n        mask = vec3f(0.1, 1.0, 0.1) * circle;\n    } else {\n        mask = vec3f(0.1, 0.1, 1.0) * circle;\n    }\n\n    return max(mask, vec3f(0.1));\n}\n\nfn applyVignette(color: vec3f, uv: vec2f, intensity: f32, size: f32) -> vec3f {\n    if (intensity <= 0.0) {\n        return color;\n    }\n\n    \n    let centered = uv - 0.5;\n    let dist = length(centered);\n\n    \n    let vignette = 1.0 - smoothstep(size * 0.5, size, dist);\n    let darkening = mix(1.0 - intensity, 1.0, vignette);\n\n    return color * darkening;\n}\n\nfn sampleWithHorizontalBlur(uv: vec2f, blurSize: f32, texelSize: vec2f) -> vec3f {\n    if (blurSize <= 0.0) {\n        return textureSampleLevel(inputTexture, inputSampler, uv, 0.0).rgb;\n    }\n\n    \n    \n    let w0 = 0.0625;\n    let w1 = 0.25;\n    let w2 = 0.375;\n\n    let offset = blurSize * texelSize.x;\n\n    let c0 = textureSampleLevel(inputTexture, inputSampler, uv + vec2f(-2.0 * offset, 0.0), 0.0).rgb;\n    let c1 = textureSampleLevel(inputTexture, inputSampler, uv + vec2f(-1.0 * offset, 0.0), 0.0).rgb;\n    let c2 = textureSampleLevel(inputTexture, inputSampler, uv, 0.0).rgb;\n    let c3 = textureSampleLevel(inputTexture, inputSampler, uv + vec2f(1.0 * offset, 0.0), 0.0).rgb;\n    let c4 = textureSampleLevel(inputTexture, inputSampler, uv + vec2f(2.0 * offset, 0.0), 0.0).rgb;\n\n    return c0 * w0 + c1 * w1 + c2 * w2 + c3 * w1 + c4 * w0;\n}\n\nfn sampleWithBlurAndConvergence(uv: vec2f, convergence: vec3f, blurSize: f32, texelSize: vec2f) -> vec3f {\n    if (blurSize <= 0.0) {\n        \n        let offsetR = vec2f(convergence.r * texelSize.x, 0.0);\n        let offsetG = vec2f(convergence.g * texelSize.x, 0.0);\n        let offsetB = vec2f(convergence.b * texelSize.x, 0.0);\n        let r = textureSampleLevel(inputTexture, inputSampler, uv + offsetR, 0.0).r;\n        let g = textureSampleLevel(inputTexture, inputSampler, uv + offsetG, 0.0).g;\n        let b = textureSampleLevel(inputTexture, inputSampler, uv + offsetB, 0.0).b;\n        return vec3f(r, g, b);\n    }\n\n    \n    let w0 = 0.0625;\n    let w1 = 0.25;\n    let w2 = 0.375;\n    let offset = blurSize * texelSize.x;\n\n    \n    var r = 0.0;\n    var g = 0.0;\n    var b = 0.0;\n\n    for (var i = -2; i <= 2; i++) {\n        let weight = select(select(w1, w2, i == 0), w0, abs(i) == 2);\n        let blurOffset = f32(i) * offset;\n\n        r += textureSampleLevel(inputTexture, inputSampler, uv + vec2f(convergence.r * texelSize.x + blurOffset, 0.0), 0.0).r * weight;\n        g += textureSampleLevel(inputTexture, inputSampler, uv + vec2f(convergence.g * texelSize.x + blurOffset, 0.0), 0.0).g * weight;\n        b += textureSampleLevel(inputTexture, inputSampler, uv + vec2f(convergence.b * texelSize.x + blurOffset, 0.0), 0.0).b * weight;\n    }\n\n    return vec3f(r, g, b);\n}\n\n@vertex\nfn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    \n    let x = f32(vertexIndex & 1u) * 4.0 - 1.0;\n    let y = f32(vertexIndex >> 1u) * 4.0 - 1.0;\n    output.position = vec4f(x, y, 0.0, 1.0);\n    output.uv = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);\n\n    return output;\n}\n\n@fragment\nfn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n    \n    let pixelPos = input.position.xy;\n    var uv = input.uv;\n\n    \n    let crtEnabled = uniforms.crtEnabled > 0.5;\n\n    \n    \n    if (!crtEnabled && uniforms.upscaleEnabled < 0.5) {\n        return textureSampleLevel(inputTexture, nearestSampler, uv, 0.0);\n    }\n\n    \n    var distortedUV = uv;\n    var cornerMask = 1.0;\n\n    if (crtEnabled && uniforms.curvature > 0.0) {\n        \n        var zoomedUV = uv;\n        if (uniforms.zoom > 1.0) {\n            let centered = uv - 0.5;\n            zoomedUV = centered / uniforms.zoom + 0.5;\n        }\n        distortedUV = applyBarrelDistortion(zoomedUV, uniforms.curvature);\n        cornerMask = getCornerMask(distortedUV, uniforms.cornerRadius);\n\n        \n        \n        if (distortedUV.x < 0.0 || distortedUV.x > 1.0 ||\n            distortedUV.y < 0.0 || distortedUV.y > 1.0) {\n            return vec4f(0.0, 0.0, 0.0, 1.0);\n        }\n    }\n\n    \n    let texelSize = 1.0 / uniforms.inputSize;\n\n    \n    var color: vec3f;\n    if (crtEnabled) {\n        let hasConvergence = any(uniforms.convergence != vec3f(0.0));\n        if (hasConvergence) {\n            \n            color = sampleWithBlurAndConvergence(distortedUV, uniforms.convergence, uniforms.blurSize, texelSize);\n        } else {\n            \n            color = sampleWithHorizontalBlur(distortedUV, uniforms.blurSize, texelSize);\n        }\n    } else {\n        \n        \n        let hasUpscaling = uniforms.inputSize.x > uniforms.canvasSize.x + 0.5 ||\n                           uniforms.inputSize.y > uniforms.canvasSize.y + 0.5;\n\n        if (hasUpscaling) {\n            \n            color = textureSampleLevel(inputTexture, inputSampler, distortedUV, 0.0).rgb;\n        } else {\n            \n            \n            color = textureSampleLevel(inputTexture, nearestSampler, distortedUV, 0.0).rgb;\n        }\n    }\n\n    \n    if (crtEnabled) {\n        \n        \n        let scanlinePos = pixelPos.y / max(uniforms.scanlineHeight, 1.0);\n\n        \n        color = applyScanlines(\n            color,\n            scanlinePos,\n            uniforms.scanlineIntensity,\n            uniforms.scanlineWidth,\n            uniforms.scanlineBrightBoost\n        );\n\n        \n        if (uniforms.maskType > 0.5 && uniforms.maskIntensity > 0.0) {\n            var mask: vec3f;\n            let maskPos = pixelPos / uniforms.maskScale;\n            if (uniforms.maskType < 1.5) {\n                \n                mask = proceduralApertureGrille(maskPos.x, 1.0);\n            } else if (uniforms.maskType < 2.5) {\n                \n                mask = proceduralSlotMask(maskPos, 1.0, uniforms.scanlineHeight / uniforms.maskScale);\n            } else {\n                \n                mask = proceduralShadowMask(maskPos, 1.0);\n            }\n\n            \n            let maskedColor = color * mask;\n            color = mix(color, maskedColor, uniforms.maskIntensity);\n            color *= uniforms.maskCompensation;\n        }\n\n        \n        color = applyVignette(color, uv, uniforms.vignetteIntensity, uniforms.vignetteSize);\n\n        \n        color *= cornerMask;\n    }\n\n    return vec4f(color, 1.0);\n}";
+class CRTPass extends BasePass {
+  constructor(engine = null) {
+    super("CRT", engine);
+    this.pipeline = null;
+    this.inputTexture = null;
+    this.upscaledTexture = null;
+    this.upscaledWidth = 0;
+    this.upscaledHeight = 0;
+    this.linearSampler = null;
+    this.nearestSampler = null;
+    this.phosphorMaskTexture = null;
+    this.canvasWidth = 0;
+    this.canvasHeight = 0;
+    this.renderWidth = 0;
+    this.renderHeight = 0;
+  }
+  // Settings getters
+  get crtSettings() {
+    return this.engine?.settings?.crt ?? {};
+  }
+  get crtEnabled() {
+    return this.crtSettings.enabled ?? false;
+  }
+  get upscaleEnabled() {
+    return this.crtSettings.upscaleEnabled ?? false;
+  }
+  get upscaleTarget() {
+    return this.crtSettings.upscaleTarget ?? 4;
+  }
+  get maxTextureSize() {
+    return this.crtSettings.maxTextureSize ?? 4096;
+  }
+  // Geometry
+  get curvature() {
+    return this.crtSettings.curvature ?? 0.03;
+  }
+  get cornerRadius() {
+    return this.crtSettings.cornerRadius ?? 0.03;
+  }
+  get zoom() {
+    return this.crtSettings.zoom ?? 1;
+  }
+  // Scanlines
+  get scanlineIntensity() {
+    return this.crtSettings.scanlineIntensity ?? 0.25;
+  }
+  get scanlineWidth() {
+    return this.crtSettings.scanlineWidth ?? 0.5;
+  }
+  get scanlineBrightBoost() {
+    return this.crtSettings.scanlineBrightBoost ?? 1;
+  }
+  get scanlineHeight() {
+    return this.crtSettings.scanlineHeight ?? 3;
+  }
+  // pixels per scanline
+  // Convergence
+  get convergence() {
+    return this.crtSettings.convergence ?? [0.5, 0, -0.5];
+  }
+  // Phosphor mask
+  get maskType() {
+    const type = this.crtSettings.maskType ?? "aperture";
+    switch (type) {
+      case "none":
+        return 0;
+      case "aperture":
+        return 1;
+      case "slot":
+        return 2;
+      case "shadow":
+        return 3;
+      default:
+        return 1;
+    }
+  }
+  get maskIntensity() {
+    return this.crtSettings.maskIntensity ?? 0.15;
+  }
+  get maskScale() {
+    return this.crtSettings.maskScale ?? 1;
+  }
+  // Vignette
+  get vignetteIntensity() {
+    return this.crtSettings.vignetteIntensity ?? 0.15;
+  }
+  get vignetteSize() {
+    return this.crtSettings.vignetteSize ?? 0.4;
+  }
+  // Blur
+  get blurSize() {
+    return this.crtSettings.blurSize ?? 0.5;
+  }
+  /**
+   * Calculate brightness compensation for phosphor mask
+   * Pre-computed on CPU to avoid per-pixel calculation in shader
+   * @param {number} maskType - 0=none, 1=aperture, 2=slot, 3=shadow
+   * @param {number} intensity - mask intensity 0-1
+   * @returns {number} compensation multiplier
+   */
+  _calculateMaskCompensation(maskType, intensity) {
+    if (maskType < 0.5 || intensity <= 0) {
+      return 1;
+    }
+    let darkening;
+    let useLinearOnly = false;
+    if (maskType < 1.5) {
+      darkening = 0.25;
+    } else if (maskType < 2.5) {
+      darkening = 0.27;
+    } else {
+      darkening = 0.82;
+      useLinearOnly = true;
+    }
+    const linearComp = 1 / Math.max(1 - intensity * darkening, 0.1);
+    if (useLinearOnly) {
+      return linearComp;
+    }
+    const expComp = Math.exp(intensity * darkening);
+    const t = Math.max(0, Math.min(1, (intensity - 0.4) / 0.2));
+    const blendFactor = t * t * (3 - 2 * t);
+    return linearComp * (1 - blendFactor) + expComp * blendFactor;
+  }
+  /**
+   * Set the input texture (from PostProcessPass intermediate output)
+   * @param {Object} texture - Input texture object
+   */
+  setInputTexture(texture) {
+    if (this.inputTexture !== texture) {
+      this.inputTexture = texture;
+      this._needsRebuild = true;
+      this._blitPipeline = null;
+    }
+  }
+  /**
+   * Set the render size (before upscaling)
+   * @param {number} width - Render width
+   * @param {number} height - Render height
+   */
+  setRenderSize(width, height) {
+    if (this.renderWidth !== width || this.renderHeight !== height) {
+      this.renderWidth = width;
+      this.renderHeight = height;
+      this._needsUpscaleRebuild = true;
+    }
+  }
+  /**
+   * Calculate the upscaled texture size
+   * @returns {{width: number, height: number, scale: number}}
+   */
+  _calculateUpscaledSize() {
+    const renderW = this.renderWidth || this.canvasWidth;
+    const renderH = this.renderHeight || this.canvasHeight;
+    const maxSize = this.maxTextureSize;
+    let scale = this.upscaleTarget;
+    while (scale > 1 && (renderW * scale > maxSize || renderH * scale > maxSize)) {
+      scale--;
+    }
+    const maxCanvasScale = 2;
+    while (scale > 1 && (renderW * scale > this.canvasWidth * maxCanvasScale || renderH * scale > this.canvasHeight * maxCanvasScale)) {
+      scale--;
+    }
+    scale = Math.max(scale, 1);
+    const targetW = renderW * scale;
+    const targetH = renderH * scale;
+    return { width: targetW, height: targetH, scale };
+  }
+  /**
+   * Check if actual upscaling is needed
+   * Returns true only if the upscaled texture would be larger than the input
+   */
+  _needsUpscaling() {
+    if (!this.upscaleEnabled) return false;
+    const { scale } = this._calculateUpscaledSize();
+    return scale > 1;
+  }
+  async _init() {
+    const { device } = this.engine;
+    this.linearSampler = device.createSampler({
+      label: "CRT Linear Sampler",
+      minFilter: "linear",
+      magFilter: "linear",
+      addressModeU: "mirror-repeat",
+      addressModeV: "mirror-repeat"
     });
-    this._needsRebuild = false;
+    this.nearestSampler = device.createSampler({
+      label: "CRT Nearest Sampler",
+      minFilter: "nearest",
+      magFilter: "nearest",
+      addressModeU: "mirror-repeat",
+      addressModeV: "mirror-repeat"
+    });
+    await this._createPhosphorMaskTexture();
   }
-  async _execute(context) {
+  /**
+   * Create phosphor mask texture
+   * This is a simple procedural texture for the aperture grille pattern
+   */
+  async _createPhosphorMaskTexture() {
     const { device } = this.engine;
-    if (this.guiCanvas && this.guiCanvas.width > 0 && this.guiCanvas.height > 0) {
-      const needsNewTexture = !this.guiTexture || this.guiTexture.width !== this.guiCanvas.width || this.guiTexture.height !== this.guiCanvas.height;
-      if (needsNewTexture) {
-        if (this.guiTexture?.texture) {
-          this.guiTexture.texture.destroy();
+    const size = 6;
+    const data = new Uint8Array(size * 2 * 4);
+    for (let y = 0; y < 2; y++) {
+      for (let x = 0; x < size; x++) {
+        const idx = (y * size + x) * 4;
+        const phase = x % 3;
+        if (phase === 0) {
+          data[idx] = 255;
+          data[idx + 1] = 50;
+          data[idx + 2] = 50;
+        } else if (phase === 1) {
+          data[idx] = 50;
+          data[idx + 1] = 255;
+          data[idx + 2] = 50;
+        } else {
+          data[idx] = 50;
+          data[idx + 1] = 50;
+          data[idx + 2] = 255;
         }
-        const texture = device.createTexture({
-          label: "GUI Texture",
-          size: [this.guiCanvas.width, this.guiCanvas.height, 1],
-          format: "rgba8unorm",
-          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
-        });
-        this.guiTexture = {
-          texture,
-          view: texture.createView(),
-          sampler: this.guiSampler,
-          width: this.guiCanvas.width,
-          height: this.guiCanvas.height
-        };
-        this._needsRebuild = true;
+        data[idx + 3] = 255;
       }
-      device.queue.copyExternalImageToTexture(
-        { source: this.guiCanvas },
-        { texture: this.guiTexture.texture },
-        [this.guiCanvas.width, this.guiCanvas.height]
-      );
     }
-    if (this._needsRebuild) {
-      await this._buildPipeline();
+    const texture = device.createTexture({
+      label: "Phosphor Mask",
+      size: [size, 2, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    device.queue.writeTexture(
+      { texture },
+      data,
+      { bytesPerRow: size * 4 },
+      { width: size, height: 2 }
+    );
+    const sampler = device.createSampler({
+      label: "Phosphor Mask Sampler",
+      minFilter: "nearest",
+      magFilter: "nearest",
+      addressModeU: "repeat",
+      addressModeV: "repeat"
+    });
+    this.phosphorMaskTexture = {
+      texture,
+      view: texture.createView(),
+      sampler
+    };
+  }
+  /**
+   * Create or resize the upscaled texture
+   */
+  async _createUpscaledTexture() {
+    const { device } = this.engine;
+    const { width, height, scale } = this._calculateUpscaledSize();
+    if (this.upscaledWidth === width && this.upscaledHeight === height) {
+      return;
     }
-    if (!this.pipeline || this._needsRebuild) {
-      console.warn("PostProcessPass: Pipeline not ready");
+    if (this.upscaledTexture?.texture) {
+      this.upscaledTexture.texture.destroy();
+    }
+    const texture = device.createTexture({
+      label: "CRT Upscaled Texture",
+      size: [width, height, 1],
+      format: "rgba8unorm",
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST
+    });
+    this.upscaledTexture = {
+      texture,
+      view: texture.createView(),
+      width,
+      height,
+      scale,
+      format: "rgba8unorm"
+    };
+    this.upscaledWidth = width;
+    this.upscaledHeight = height;
+    console.log(`CRTPass: Created upscaled texture ${width}x${height} (${scale.toFixed(1)}x)`);
+    this._needsRebuild = true;
+    this._blitPipeline = null;
+  }
+  /**
+   * Build or rebuild the CRT pipeline
+   */
+  async _buildPipeline() {
+    if (!this.inputTexture && !this.upscaledTexture) {
       return;
     }
-    const hasBloom = this.bloomTexture && this.bloomEnabled;
-    const effectiveBloomTexture = this.bloomTexture || this.dummyBloomTexture;
-    this.pipeline.uniformValues.set({
-      noiseParams: [this.noiseSize, this.noiseAnimated ? Math.random() : 0, this.noiseAnimated ? Math.random() : 0, this.fxaa ? 1 : 0],
-      ditherParams: [this.ditheringEnabled ? 1 : 0, this.colorLevels, 0, 0],
-      bloomParams: [hasBloom ? 1 : 0, this.bloomIntensity, this.bloomRadius, effectiveBloomTexture?.mipCount ?? 1]
+    const { device } = this.engine;
+    const needsUpscaling = this._needsUpscaling();
+    const effectiveInput = (this.crtEnabled || this.upscaleEnabled) && needsUpscaling && this.upscaledTexture ? this.upscaledTexture : this.inputTexture;
+    if (!effectiveInput) return;
+    const bindGroupLayout = device.createBindGroupLayout({
+      label: "CRT Bind Group Layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        { binding: 4, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 5, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } }
+      ]
     });
-    this.pipeline.render();
+    const uniformBuffer = device.createBuffer({
+      label: "CRT Uniforms",
+      size: 128,
+      // Padded for alignment
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const bindGroup = device.createBindGroup({
+      label: "CRT Bind Group",
+      layout: bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: uniformBuffer } },
+        { binding: 1, resource: effectiveInput.view },
+        { binding: 2, resource: this.linearSampler },
+        { binding: 3, resource: this.nearestSampler },
+        { binding: 4, resource: this.phosphorMaskTexture.view },
+        { binding: 5, resource: this.phosphorMaskTexture.sampler }
+      ]
+    });
+    const pipelineLayout = device.createPipelineLayout({
+      label: "CRT Pipeline Layout",
+      bindGroupLayouts: [bindGroupLayout]
+    });
+    const shaderModule = device.createShaderModule({
+      label: "CRT Shader",
+      code: crt_default
+    });
+    const pipeline = device.createRenderPipeline({
+      label: "CRT Pipeline",
+      layout: pipelineLayout,
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fragmentMain",
+        targets: [{
+          format: navigator.gpu.getPreferredCanvasFormat()
+        }]
+      },
+      primitive: {
+        topology: "triangle-list"
+      }
+    });
+    this.pipeline = {
+      pipeline,
+      bindGroup,
+      uniformBuffer
+    };
+    this._pipelineInputTexture = this.inputTexture;
+    this._pipelineUpscaledTexture = needsUpscaling ? this.upscaledTexture : null;
+    this._needsRebuild = false;
+  }
+  /**
+   * Upscale the input texture using nearest-neighbor filtering
+   */
+  _upscaleInput() {
+    if (!this.inputTexture || !this.upscaledTexture) return;
+    const { device } = this.engine;
+    const commandEncoder = device.createCommandEncoder({ label: "CRT Upscale" });
+    if (this.inputTexture.width === this.upscaledTexture.width && this.inputTexture.height === this.upscaledTexture.height) {
+      commandEncoder.copyTextureToTexture(
+        { texture: this.inputTexture.texture },
+        { texture: this.upscaledTexture.texture },
+        [this.inputTexture.width, this.inputTexture.height]
+      );
+    } else {
+      if (!this._blitPipeline || this._blitInputTexture !== this.inputTexture) {
+        this._createBlitPipeline();
+      }
+      if (this._blitPipeline) {
+        const renderPass = commandEncoder.beginRenderPass({
+          colorAttachments: [{
+            view: this.upscaledTexture.view,
+            loadOp: "clear",
+            storeOp: "store",
+            clearValue: { r: 0, g: 0, b: 0, a: 1 }
+          }]
+        });
+        renderPass.setPipeline(this._blitPipeline.pipeline);
+        renderPass.setBindGroup(0, this._blitPipeline.bindGroup);
+        renderPass.draw(3, 1, 0, 0);
+        renderPass.end();
+      }
+    }
+    device.queue.submit([commandEncoder.finish()]);
+  }
+  /**
+   * Create a simple nearest-neighbor blit pipeline
+   */
+  _createBlitPipeline() {
+    if (!this.inputTexture) return;
+    const { device } = this.engine;
+    this._blitInputTexture = this.inputTexture;
+    const blitShader = `
+            struct VertexOutput {
+                @builtin(position) position: vec4f,
+                @location(0) uv: vec2f,
+            }
+
+            @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+            @group(0) @binding(1) var inputSampler: sampler;
+
+            @vertex
+            fn vertexMain(@builtin(vertex_index) idx: u32) -> VertexOutput {
+                var output: VertexOutput;
+                let x = f32(idx & 1u) * 4.0 - 1.0;
+                let y = f32(idx >> 1u) * 4.0 - 1.0;
+                output.position = vec4f(x, y, 0.0, 1.0);
+                output.uv = vec2f((x + 1.0) * 0.5, (1.0 - y) * 0.5);
+                return output;
+            }
+
+            @fragment
+            fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+                return textureSample(inputTexture, inputSampler, input.uv);
+            }
+        `;
+    const shaderModule = device.createShaderModule({
+      label: "Blit Shader",
+      code: blitShader
+    });
+    const bindGroupLayout = device.createBindGroupLayout({
+      label: "Blit Bind Group Layout",
+      entries: [
+        { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } }
+      ]
+    });
+    const bindGroup = device.createBindGroup({
+      label: "Blit Bind Group",
+      layout: bindGroupLayout,
+      entries: [
+        { binding: 0, resource: this.inputTexture.view },
+        { binding: 1, resource: this.nearestSampler }
+      ]
+    });
+    const pipeline = device.createRenderPipeline({
+      label: "Blit Pipeline",
+      layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }),
+      vertex: {
+        module: shaderModule,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: "fragmentMain",
+        targets: [{ format: "rgba8unorm" }]
+      },
+      primitive: { topology: "triangle-list" }
+    });
+    this._blitPipeline = { pipeline, bindGroup };
+  }
+  async _execute(context) {
+    const { device, canvas } = this.engine;
+    const needsUpscaling = this._needsUpscaling();
+    const effectiveUpscaledTexture = needsUpscaling ? this.upscaledTexture : null;
+    if (this.pipeline && (this._pipelineInputTexture !== this.inputTexture || this._pipelineUpscaledTexture !== effectiveUpscaledTexture)) {
+      this._needsRebuild = true;
+      this._blitPipeline = null;
+    }
+    if (!this.crtEnabled && !this.upscaleEnabled) {
+      if (!this.inputTexture) return;
+      if (this._needsRebuild || !this.pipeline) {
+        await this._buildPipeline();
+      }
+    } else {
+      if (needsUpscaling) {
+        if (this._needsUpscaleRebuild) {
+          await this._createUpscaledTexture();
+          this._needsUpscaleRebuild = false;
+        }
+        if (this.inputTexture && this.upscaledTexture) {
+          this._upscaleInput();
+        }
+      }
+      if (this._needsRebuild || !this.pipeline) {
+        await this._buildPipeline();
+      }
+    }
+    if (!this.pipeline) return;
+    const uniformData = new Float32Array(32);
+    uniformData[0] = this.canvasWidth;
+    uniformData[1] = this.canvasHeight;
+    const inputW = needsUpscaling && this.upscaledTexture ? this.upscaledTexture.width : this.inputTexture?.width || this.canvasWidth;
+    const inputH = needsUpscaling && this.upscaledTexture ? this.upscaledTexture.height : this.inputTexture?.height || this.canvasHeight;
+    uniformData[2] = inputW;
+    uniformData[3] = inputH;
+    const renderW = this.renderWidth || this.canvasWidth;
+    const renderH = this.renderHeight || this.canvasHeight;
+    uniformData[4] = renderW;
+    uniformData[5] = renderH;
+    if (!this._loggedDimensions) {
+      const renderScale = renderW > 0 ? (renderW / this.canvasWidth).toFixed(2) : "?";
+      const upscaleInfo = needsUpscaling ? `upscale=${this.upscaledTexture?.scale || "?"}x` : "no-upscale (direct)";
+      console.log(`CRT: canvas=${this.canvasWidth}x${this.canvasHeight}, render=${renderW}x${renderH} (scale ${renderScale}), input=${inputW}x${inputH}, ${upscaleInfo}`);
+      console.log(`CRT: Scanlines use fragment coords (${this.canvasHeight}px), should repeat every ${this.scanlineHeight}px = ${Math.floor(this.canvasHeight / this.scanlineHeight)} scanlines`);
+      this._loggedDimensions = true;
+    }
+    uniformData[6] = this.curvature;
+    uniformData[7] = this.cornerRadius;
+    uniformData[8] = this.zoom;
+    uniformData[9] = 0;
+    uniformData[10] = this.scanlineIntensity;
+    uniformData[11] = this.scanlineWidth;
+    uniformData[12] = this.scanlineBrightBoost;
+    uniformData[13] = this.scanlineHeight;
+    uniformData[14] = 0;
+    uniformData[15] = 0;
+    const conv = this.convergence;
+    uniformData[16] = conv[0];
+    uniformData[17] = conv[1];
+    uniformData[18] = conv[2];
+    uniformData[19] = 0;
+    uniformData[20] = this.maskType;
+    uniformData[21] = this.maskIntensity;
+    uniformData[22] = this.maskScale;
+    const maskCompensation = this._calculateMaskCompensation(this.maskType, this.maskIntensity);
+    uniformData[23] = maskCompensation;
+    uniformData[24] = this.vignetteIntensity;
+    uniformData[25] = this.vignetteSize;
+    uniformData[26] = this.blurSize;
+    uniformData[27] = this.crtEnabled ? 1 : 0;
+    uniformData[28] = this.upscaleEnabled ? 1 : 0;
+    device.queue.writeBuffer(this.pipeline.uniformBuffer, 0, uniformData);
+    const commandEncoder = device.createCommandEncoder({ label: "CRT Render" });
+    const canvasTexture = this.engine.context.getCurrentTexture();
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [{
+        view: canvasTexture.createView(),
+        loadOp: "clear",
+        storeOp: "store",
+        clearValue: { r: 0, g: 0, b: 0, a: 1 }
+      }]
+    });
+    renderPass.setPipeline(this.pipeline.pipeline);
+    renderPass.setBindGroup(0, this.pipeline.bindGroup);
+    renderPass.draw(3, 1, 0, 0);
+    renderPass.end();
+    device.queue.submit([commandEncoder.finish()]);
   }
   async _resize(width, height) {
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+    this._needsUpscaleRebuild = true;
     this._needsRebuild = true;
+    this._loggedDimensions = false;
   }
   _destroy() {
-    this.pipeline = null;
-    if (this.dummyBloomTexture?.texture) {
-      this.dummyBloomTexture.texture.destroy();
-      this.dummyBloomTexture = null;
+    if (this.pipeline?.uniformBuffer) {
+      this.pipeline.uniformBuffer.destroy();
     }
-    if (this.guiTexture?.texture) {
-      this.guiTexture.texture.destroy();
-      this.guiTexture = null;
+    if (this.upscaledTexture?.texture) {
+      this.upscaledTexture.texture.destroy();
     }
-    if (this.dummyGuiTexture?.texture) {
-      this.dummyGuiTexture.texture.destroy();
-      this.dummyGuiTexture = null;
+    if (this.phosphorMaskTexture?.texture) {
+      this.phosphorMaskTexture.texture.destroy();
     }
+    this.pipeline = null;
+    this._blitPipeline = null;
   }
 }
 class AmbientCapturePass extends BasePass {
@@ -13394,8 +14973,10 @@ class RenderGraph {
       // Pass 11: Forward transparent objects
       particles: null,
       // Pass 12: GPU particle rendering
-      postProcess: null
+      postProcess: null,
       // Pass 13: Tone mapping + bloom composite
+      crt: null
+      // Pass 14: CRT effect (optional)
     };
     this.historyManager = null;
     this.cullingSystem = new CullingSystem(engine);
@@ -13468,7 +15049,9 @@ class RenderGraph {
     this.passes.transparent = new TransparentPass(this.engine);
     this.passes.particles = new ParticlePass(this.engine);
     this.passes.fog = new FogPass(this.engine);
+    this.passes.volumetricFog = new VolumetricFogPass(this.engine);
     this.passes.postProcess = new PostProcessPass(this.engine);
+    this.passes.crt = new CRTPass(this.engine);
     const { canvas } = this.engine;
     this.historyManager = new HistoryBufferManager(this.engine);
     start = performance.now();
@@ -13520,9 +15103,15 @@ class RenderGraph {
     await this.passes.fog.initialize();
     timings.push({ name: "init:fog", time: performance.now() - start });
     start = performance.now();
+    await this.passes.volumetricFog.initialize();
+    timings.push({ name: "init:volumetricFog", time: performance.now() - start });
+    start = performance.now();
     await this.passes.postProcess.initialize();
     timings.push({ name: "init:postProcess", time: performance.now() - start });
     start = performance.now();
+    await this.passes.crt.initialize();
+    timings.push({ name: "init:crt", time: performance.now() - start });
+    start = performance.now();
     this.passes.reflection.setFallbackEnvironment(environmentMap, this.environmentEncoding);
     this.passes.lighting.setEnvironmentMap(environmentMap, this.environmentEncoding);
     await this.passes.lighting.setGBuffer(this.passes.gbuffer.getGBuffer());
@@ -13586,11 +15175,16 @@ class RenderGraph {
     this.passes.particles.setShadowPass(this.passes.shadow);
     this.passes.particles.setEnvironmentMap(environmentMap, this.environmentEncoding);
     this.passes.particles.setLightingPass(this.passes.lighting);
+    this.passes.volumetricFog.setGBuffer(this.passes.gbuffer.getGBuffer());
+    this.passes.volumetricFog.setShadowPass(this.passes.shadow);
+    this.passes.volumetricFog.setLightingPass(this.passes.lighting);
+    this.passes.volumetricFog.setHiZPass(this.passes.hiz);
     this.passes.postProcess.setInputTexture(this.passes.lighting.getOutputTexture());
     this.passes.postProcess.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
     if (this.engine?.guiCanvas) {
       this.passes.postProcess.setGuiCanvas(this.engine.guiCanvas);
     }
+    this.invalidateOcclusionCulling();
   }
   /**
    * Render a frame using the new entity/asset system
@@ -13843,10 +15437,6 @@ class RenderGraph {
       this.passes.transparent.distanceFadeStart = transparentMaxDist * transparentFadeStart;
       await this.passes.transparent.execute(passContext);
     }
-    if (this.passes.particles && this.particleSystem.getActiveEmitters().length > 0) {
-      this.passes.particles.setOutputTexture(hdrSource);
-      await this.passes.particles.execute(passContext);
-    }
     const fogEnabled = this.engine?.settings?.environment?.fog?.enabled;
     if (this.passes.fog && fogEnabled) {
       this.passes.fog.setInputTexture(hdrSource);
@@ -13857,6 +15447,20 @@ class RenderGraph {
         hdrSource = fogOutput;
       }
     }
+    if (this.passes.particles && this.particleSystem.getActiveEmitters().length > 0) {
+      this.passes.particles.setOutputTexture(hdrSource);
+      await this.passes.particles.execute(passContext);
+    }
+    const volumetricFogEnabled = this.engine?.settings?.volumetricFog?.enabled;
+    if (this.passes.volumetricFog && volumetricFogEnabled) {
+      this.passes.volumetricFog.setInputTexture(hdrSource);
+      this.passes.volumetricFog.setGBuffer(gbuffer);
+      await this.passes.volumetricFog.execute(passContext);
+      const volFogOutput = this.passes.volumetricFog.getOutputTexture();
+      if (volFogOutput && volFogOutput !== hdrSource) {
+        hdrSource = volFogOutput;
+      }
+    }
     const bloomEnabled = this.engine?.settings?.bloom?.enabled;
     if (this.passes.bloom && bloomEnabled) {
       this.passes.bloom.setInputTexture(hdrSource);
@@ -13867,6 +15471,19 @@ class RenderGraph {
     }
     this.passes.postProcess.setInputTexture(hdrSource);
     await this.passes.postProcess.execute(passContext);
+    const crtEnabled = this.engine?.settings?.crt?.enabled;
+    const crtUpscaleEnabled = this.engine?.settings?.crt?.upscaleEnabled;
+    if (crtEnabled || crtUpscaleEnabled) {
+      const postProcessOutput = this.passes.postProcess.getOutputTexture();
+      if (postProcessOutput) {
+        this.passes.crt.setInputTexture(postProcessOutput);
+        this.passes.crt.setRenderSize(
+          this.passes.gbuffer.getGBuffer()?.depth?.width || canvas.width,
+          this.passes.gbuffer.getGBuffer()?.depth?.height || canvas.height
+        );
+        await this.passes.crt.execute(passContext);
+      }
+    }
     this.historyManager.swap(camera);
     this._lastRenderContext = {
       meshes,
@@ -13931,6 +15548,40 @@ class RenderGraph {
         }
       }
       const asset = assetManager.get(modelId);
+      if (asset?.meshNames && !asset.mesh) {
+        for (const meshName of asset.meshNames) {
+          const submeshId = assetManager.createModelId(modelId, meshName);
+          const submeshAsset = assetManager.get(submeshId);
+          if (!submeshAsset?.mesh) continue;
+          if (submeshAsset.hasSkin && submeshAsset.skin) {
+            for (const item of entities) {
+              const entity = item.entity;
+              const animation = entity.animation || "default";
+              const phase = entity.phase || 0;
+              const quantizedPhase = Math.floor(phase / 0.05) * 0.05;
+              const key = `${submeshId}|${animation}|${quantizedPhase.toFixed(2)}`;
+              if (!skinnedInstancedGroups.has(key)) {
+                skinnedInstancedGroups.set(key, {
+                  modelId: submeshId,
+                  animation,
+                  phase: quantizedPhase,
+                  asset: submeshAsset,
+                  entities: []
+                });
+              }
+              skinnedInstancedGroups.get(key).entities.push(item);
+            }
+          } else {
+            if (!nonSkinnedGroups.has(submeshId)) {
+              nonSkinnedGroups.set(submeshId, { asset: submeshAsset, entities: [] });
+            }
+            for (const item of entities) {
+              nonSkinnedGroups.get(submeshId).entities.push(item);
+            }
+          }
+        }
+        continue;
+      }
       if (!asset?.mesh) continue;
       if (asset.hasSkin && asset.skin) {
         for (const item of entities) {
@@ -14028,7 +15679,8 @@ class RenderGraph {
       geometry._instanceDataDirty = true;
       updatedMeshes.add(meshName);
     }
-    const globalTime = performance.now() / 1e3;
+    const animationSpeed = this.engine?.settings?.animation?.speed ?? 1;
+    const globalTime = performance.now() / 1e3 * animationSpeed;
     for (const { id: entityId, entity, asset, modelId } of skinnedIndividualEntities) {
       const entityAnimation = entity.animation || "default";
       const entityPhase = entity.phase || 0;
@@ -14071,7 +15723,9 @@ class RenderGraph {
           material: asset.mesh.material,
           skin: individualSkin2,
           hasSkin: true,
-          uid: `individual_${entityId}`
+          uid: `individual_${entityId}`,
+          // Use asset's combined bsphere for culling (all skinned submeshes share one sphere)
+          combinedBsphere: asset.bsphere || null
         };
         cached = {
           skin: individualSkin2,
@@ -14200,7 +15854,9 @@ class RenderGraph {
           material: asset.mesh.material,
           skin: clonedSkin2,
           hasSkin: true,
-          uid: asset.mesh.uid + "_phase_" + key.replace(/[^a-zA-Z0-9]/g, "_")
+          uid: asset.mesh.uid + "_phase_" + key.replace(/[^a-zA-Z0-9]/g, "_"),
+          // Use asset's combined bsphere for culling (all skinned submeshes share one sphere)
+          combinedBsphere: asset.bsphere || null
         };
         cached = { skin: clonedSkin2, mesh: phaseMesh2, geometry: phaseGeometry2 };
         this._skinnedPhaseCache.set(key, cached);
@@ -14335,45 +15991,62 @@ class RenderGraph {
   }
   /**
    * Handle window resize
-   * @param {number} width - New width
-   * @param {number} height - New height
+   * @param {number} width - Canvas width (full device pixels)
+   * @param {number} height - Canvas height (full device pixels)
+   * @param {number} renderScale - Scale for internal rendering (1.0 = full resolution)
    */
-  async resize(width, height) {
+  async resize(width, height, renderScale = 1) {
     const timings = [];
     performance.now();
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+    const renderWidth = Math.max(1, Math.round(width * renderScale));
+    const renderHeight = Math.max(1, Math.round(height * renderScale));
+    this.renderWidth = renderWidth;
+    this.renderHeight = renderHeight;
+    this.renderScale = renderScale;
     const autoScale = this.engine?.settings?.rendering?.autoScale;
     let effectScale = 1;
     if (autoScale && !autoScale.enabled && autoScale.enabledForEffects) {
-      if (height > (autoScale.maxHeight ?? 1536)) {
+      if (renderHeight > (autoScale.maxHeight ?? 1536)) {
         effectScale = autoScale.scaleFactor ?? 0.5;
         if (!this._effectScaleWarned) {
-          console.log(`Effect auto-scale: Reducing effect resolution by ${effectScale} (height: ${height}px > ${autoScale.maxHeight}px)`);
+          console.log(`Effect auto-scale: Reducing effect resolution by ${effectScale} (height: ${renderHeight}px > ${autoScale.maxHeight}px)`);
           this._effectScaleWarned = true;
         }
       } else if (this._effectScaleWarned) {
-        console.log(`Effect auto-scale: Restoring full effect resolution (height: ${height}px <= ${autoScale.maxHeight}px)`);
+        console.log(`Effect auto-scale: Restoring full effect resolution (height: ${renderHeight}px <= ${autoScale.maxHeight}px)`);
         this._effectScaleWarned = false;
       }
     }
-    const scaledPasses = /* @__PURE__ */ new Set(["bloom", "ao", "ssgi", "planarReflection"]);
-    const effectWidth = Math.max(1, Math.floor(width * effectScale));
-    const effectHeight = Math.max(1, Math.floor(height * effectScale));
+    const fullResPasses = /* @__PURE__ */ new Set(["crt"]);
+    const effectScaledPasses = /* @__PURE__ */ new Set(["bloom", "ao", "planarReflection"]);
+    const effectWidth = Math.max(1, Math.floor(renderWidth * effectScale));
+    const effectHeight = Math.max(1, Math.floor(renderHeight * effectScale));
     this.effectWidth = effectWidth;
     this.effectHeight = effectHeight;
     this.effectScale = effectScale;
     for (const passName in this.passes) {
       if (this.passes[passName]) {
         const start2 = performance.now();
-        const useScaled = scaledPasses.has(passName) && effectScale < 1;
-        const w = useScaled ? effectWidth : width;
-        const h = useScaled ? effectHeight : height;
+        let w, h;
+        if (fullResPasses.has(passName)) {
+          w = width;
+          h = height;
+        } else if (effectScaledPasses.has(passName) && effectScale < 1) {
+          w = effectWidth;
+          h = effectHeight;
+        } else {
+          w = renderWidth;
+          h = renderHeight;
+        }
         await this.passes[passName].resize(w, h);
         timings.push({ name: `pass:${passName}`, time: performance.now() - start2 });
       }
     }
     if (this.historyManager) {
       const start2 = performance.now();
-      await this.historyManager.resize(width, height);
+      await this.historyManager.resize(renderWidth, renderHeight);
       timings.push({ name: "historyManager", time: performance.now() - start2 });
     }
     let start = performance.now();
@@ -14392,8 +16065,18 @@ class RenderGraph {
       this.passes.lighting.setHiZPass(this.passes.hiz);
       this.passes.transparent.setHiZPass(this.passes.hiz);
       this.passes.shadow.setHiZPass(this.passes.hiz);
+      if (this.passes.volumetricFog) {
+        this.passes.volumetricFog.setHiZPass(this.passes.hiz);
+      }
     }
     timings.push({ name: "rewire:hiz", time: performance.now() - start });
+    if (this.passes.volumetricFog) {
+      start = performance.now();
+      this.passes.volumetricFog.setGBuffer(this.passes.gbuffer.getGBuffer());
+      this.passes.volumetricFog.setShadowPass(this.passes.shadow);
+      this.passes.volumetricFog.setLightingPass(this.passes.lighting);
+      timings.push({ name: "rewire:volumetricFog", time: performance.now() - start });
+    }
     start = performance.now();
     this.passes.shadow.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
     timings.push({ name: "rewire:shadow.setNoise", time: performance.now() - start });
@@ -14771,8 +16454,18 @@ class RenderGraph {
    * @param {string} passName - Name of pass
    * @returns {BasePass} The pass instance
    */
-  getPass(passName) {
-    return this.passes[passName];
+  getPass(passName) {
+    return this.passes[passName];
+  }
+  /**
+   * Invalidate occlusion culling data and reset warmup period.
+   * Call this after scene loading or major camera changes to prevent
+   * incorrect occlusion culling with stale depth buffer data.
+   */
+  invalidateOcclusionCulling() {
+    if (this.passes.hiz) {
+      this.passes.hiz.invalidate();
+    }
   }
   /**
    * Load noise texture based on settings
@@ -14910,6 +16603,38 @@ class RenderGraph {
       height: 8
     };
   }
+  /**
+   * Reload noise texture and update all passes that use it
+   * Called when noise settings change at runtime
+   */
+  async reloadNoiseTexture() {
+    if (this.noiseTexture?.texture) {
+      this.noiseTexture.texture.destroy();
+    }
+    await this._loadNoiseTexture();
+    if (this.passes.gbuffer) {
+      this.passes.gbuffer.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.shadow) {
+      this.passes.shadow.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.lighting) {
+      this.passes.lighting.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.ao) {
+      this.passes.ao.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.transparent) {
+      this.passes.transparent.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.postProcess) {
+      this.passes.postProcess.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    if (this.passes.renderPost) {
+      this.passes.renderPost.setNoise(this.noiseTexture, this.noiseSize, this.noiseAnimated);
+    }
+    console.log(`RenderGraph: Reloaded noise texture (${this.engine?.settings?.noise?.type || "bluenoise"})`);
+  }
   /**
    * Destroy all resources
    */
@@ -15537,6 +17262,7 @@ class Joint {
 function expandTriangles(attributes, expansion) {
   const positions = attributes.position;
   const normals = attributes.normal;
+  const tangents = attributes.tangent;
   const uvs = attributes.uv;
   const indices = attributes.indices;
   const weights = attributes.weights;
@@ -15545,6 +17271,7 @@ function expandTriangles(attributes, expansion) {
   const triCount = indices.length / 3;
   const newPositions = new Float32Array(triCount * 3 * 3);
   const newNormals = normals ? new Float32Array(triCount * 3 * 3) : null;
+  const newTangents = tangents ? new Float32Array(triCount * 3 * 4) : null;
   const newUvs = uvs ? new Float32Array(triCount * 3 * 2) : null;
   const newWeights = weights ? new Float32Array(triCount * 3 * 4) : null;
   const newJoints = joints ? new Uint16Array(triCount * 3 * 4) : null;
@@ -15580,6 +17307,12 @@ function expandTriangles(attributes, expansion) {
         newNormals[newIdx * 3 + 1] = normals[origIdx * 3 + 1];
         newNormals[newIdx * 3 + 2] = normals[origIdx * 3 + 2];
       }
+      if (newTangents) {
+        newTangents[newIdx * 4 + 0] = tangents[origIdx * 4 + 0];
+        newTangents[newIdx * 4 + 1] = tangents[origIdx * 4 + 1];
+        newTangents[newIdx * 4 + 2] = tangents[origIdx * 4 + 2];
+        newTangents[newIdx * 4 + 3] = tangents[origIdx * 4 + 3];
+      }
       if (newUvs) {
         newUvs[newIdx * 2 + 0] = uvs[origIdx * 2 + 0];
         newUvs[newIdx * 2 + 1] = uvs[origIdx * 2 + 1];
@@ -15602,6 +17335,7 @@ function expandTriangles(attributes, expansion) {
   return {
     position: newPositions,
     normal: newNormals,
+    tangent: newTangents,
     uv: newUvs,
     indices: newIndices,
     weights: newWeights,
@@ -15817,6 +17551,7 @@ async function loadGltfData(engine, url, options = {}) {
       let attrs = {
         position: getAccessor(attributes.POSITION),
         normal: getAccessor(attributes.NORMAL),
+        tangent: getAccessor(attributes.TANGENT),
         uv: getAccessor(attributes.TEXCOORD_0),
         indices: getAccessor(primitive.indices),
         weights: getAccessor(attributes.WEIGHTS_0),
@@ -15935,6 +17670,9 @@ async function loadGltf(engine, url, options = {}) {
       const transmission = mesh.material.extensions.KHR_materials_transmission;
       material.opacity = 1 - (transmission.transmissionFactor ?? 0);
     }
+    if (mesh.material.doubleSided) {
+      material.doubleSided = true;
+    }
     const nmesh = new Mesh(geometry, material, name);
     if (mesh.skinIndex !== void 0 && mesh.skinIndex !== null && skins[mesh.skinIndex]) {
       nmesh.skin = skins[mesh.skinIndex];
@@ -16444,6 +18182,22 @@ class AssetManager {
       try {
         const result = await loadGltf(this.engine, path, options);
         const meshNames = Object.keys(result.meshes);
+        let combinedBsphere = null;
+        const hasAnySkin = Object.values(result.meshes).some((m) => m.hasSkin);
+        if (hasAnySkin) {
+          const allPositions = [];
+          for (const mesh of Object.values(result.meshes)) {
+            if (mesh.geometry?.attributes?.position) {
+              const positions = mesh.geometry.attributes.position;
+              for (let i = 0; i < positions.length; i += 3) {
+                allPositions.push(positions[i], positions[i + 1], positions[i + 2]);
+              }
+            }
+          }
+          if (allPositions.length > 0) {
+            combinedBsphere = calculateBoundingSphere(new Float32Array(allPositions));
+          }
+        }
         this.assets[path] = {
           gltf: result,
           meshes: result.meshes,
@@ -16451,12 +18205,17 @@ class AssetManager {
           animations: result.animations,
           nodes: result.nodes,
           meshNames,
+          bsphere: combinedBsphere,
+          // Combined bsphere for parent path entities
+          hasSkin: hasAnySkin,
+          // Flag for skinned model detection
           ready: true,
           loading: false
         };
         for (const meshName of meshNames) {
-          const modelId = this.createModelId(path, meshName);
-          await this._registerMesh(path, meshName, result.meshes[meshName]);
+          const mesh = result.meshes[meshName];
+          const bsphere = hasAnySkin && combinedBsphere ? combinedBsphere : null;
+          await this._registerMesh(path, meshName, mesh, bsphere);
         }
         this._triggerReady(path);
         return this.assets[path];
@@ -16472,10 +18231,14 @@ class AssetManager {
   }
   /**
    * Register a mesh asset (internal)
+   * @param {string} path - GLTF file path
+   * @param {string} meshName - Mesh name
+   * @param {Object} mesh - Mesh object
+   * @param {Object|null} overrideBsphere - Optional bounding sphere (for skinned mesh combined sphere)
    */
-  async _registerMesh(path, meshName, mesh) {
+  async _registerMesh(path, meshName, mesh, overrideBsphere = null) {
     const modelId = this.createModelId(path, meshName);
-    const bsphere = calculateBoundingSphere(mesh.geometry.attributes.position);
+    const bsphere = overrideBsphere || calculateBoundingSphere(mesh.geometry.attributes.position);
     this.assets[modelId] = {
       mesh,
       geometry: mesh.geometry,
@@ -16672,19 +18435,20 @@ class DebugUI {
     this._addStyles();
     this._createStatsFolder();
     this._createRenderingFolder();
-    this._createAOFolder();
-    this._createShadowFolder();
-    this._createMainLightFolder();
+    this._createCameraFolder();
     this._createEnvironmentFolder();
     this._createLightingFolder();
-    this._createCullingFolder();
-    this._createSSGIFolder();
-    this._createBloomFolder();
+    this._createMainLightFolder();
+    this._createShadowFolder();
     this._createPlanarReflectionFolder();
+    this._createAOFolder();
     this._createAmbientCaptureFolder();
-    this._createNoiseFolder();
+    this._createSSGIFolder();
+    this._createVolumetricFogFolder();
+    this._createBloomFolder();
+    this._createTonemapFolder();
     this._createDitheringFolder();
-    this._createCameraFolder();
+    this._createCRTFolder();
     this._createDebugFolder();
     for (const folder of Object.values(this.folders)) {
       folder.close();
@@ -16828,6 +18592,33 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
         this.gui.domElement.style.display = "none";
       }
     });
+    if (s.culling) {
+      const cullFolder = folder.addFolder("Culling");
+      cullFolder.add(s.culling, "frustumEnabled").name("Frustum Culling");
+      if (s.occlusionCulling) {
+        cullFolder.add(s.occlusionCulling, "enabled").name("Occlusion Culling");
+        cullFolder.add(s.occlusionCulling, "threshold", 0.1, 2, 0.1).name("Occlusion Threshold");
+      }
+      if (s.culling.planarReflection) {
+        const prFolder = cullFolder.addFolder("Planar Reflection");
+        prFolder.add(s.culling.planarReflection, "frustum").name("Frustum Culling");
+        prFolder.add(s.culling.planarReflection, "maxDistance", 10, 200, 10).name("Max Distance");
+        prFolder.add(s.culling.planarReflection, "maxSkinned", 0, 100, 1).name("Max Skinned");
+        prFolder.add(s.culling.planarReflection, "minPixelSize", 0, 16, 1).name("Min Pixel Size");
+        prFolder.close();
+      }
+      cullFolder.close();
+    }
+    if (s.noise) {
+      const noiseFolder = folder.addFolder("Noise");
+      noiseFolder.add(s.noise, "type", ["bluenoise", "bayer8"]).name("Type").onChange(() => {
+        if (this.engine.renderer?.renderGraph) {
+          this.engine.renderer.renderGraph.reloadNoiseTexture();
+        }
+      });
+      noiseFolder.add(s.noise, "animated").name("Animated");
+      noiseFolder.close();
+    }
   }
   _createAOFolder() {
     const s = this.engine.settings;
@@ -16906,6 +18697,8 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
       fogFolder.add(s.environment.fog.heightFade, "0", -100, 100, 1).name("Bottom Y");
       fogFolder.add(s.environment.fog.heightFade, "1", -50, 200, 5).name("Top Y");
       fogFolder.add(s.environment.fog, "brightResist", 0, 1, 0.05).name("Bright Resist");
+      if (s.environment.fog.debug === void 0) s.environment.fog.debug = 0;
+      fogFolder.add(s.environment.fog, "debug", 0, 10, 1).name("Debug Mode");
     }
   }
   _createLightingFolder() {
@@ -16922,25 +18715,6 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
       folder.add(s.lighting, "specularBoostRoughnessCutoff", 0.1, 1, 0.05).name("Boost Roughness Cutoff");
     }
   }
-  _createCullingFolder() {
-    const s = this.engine.settings;
-    if (!s.culling) return;
-    const folder = this.gui.addFolder("Culling");
-    this.folders.culling = folder;
-    folder.add(s.culling, "frustumEnabled").name("Frustum Culling");
-    if (s.occlusionCulling) {
-      folder.add(s.occlusionCulling, "enabled").name("Occlusion Culling");
-      folder.add(s.occlusionCulling, "threshold", 0.1, 2, 0.1).name("Occlusion Threshold");
-    }
-    if (s.culling.planarReflection) {
-      const prFolder = folder.addFolder("Planar Reflection");
-      prFolder.add(s.culling.planarReflection, "frustum").name("Frustum Culling");
-      prFolder.add(s.culling.planarReflection, "maxDistance", 10, 200, 10).name("Max Distance");
-      prFolder.add(s.culling.planarReflection, "maxSkinned", 0, 100, 1).name("Max Skinned");
-      prFolder.add(s.culling.planarReflection, "minPixelSize", 0, 16, 1).name("Min Pixel Size");
-      prFolder.close();
-    }
-  }
   _createSSGIFolder() {
     const s = this.engine.settings;
     if (!s.ssgi) return;
@@ -16953,6 +18727,57 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
     folder.add(s.ssgi, "sampleRadius", 0.5, 4, 0.5).name("Sample Radius");
     folder.add(s.ssgi, "saturateLevel", 0.1, 2, 0.1).name("Saturate Level");
   }
+  _createVolumetricFogFolder() {
+    const s = this.engine.settings;
+    if (!s.volumetricFog) return;
+    const vf = s.volumetricFog;
+    if (vf.density === void 0 && vf.densityMultiplier === void 0) vf.density = 0.5;
+    if (vf.scatterStrength === void 0) vf.scatterStrength = 1;
+    if (!vf.heightRange) vf.heightRange = [-5, 20];
+    if (vf.resolution === void 0) vf.resolution = 0.25;
+    if (vf.maxSamples === void 0) vf.maxSamples = 32;
+    if (vf.blurRadius === void 0) vf.blurRadius = 4;
+    if (vf.noiseStrength === void 0) vf.noiseStrength = 1;
+    if (vf.noiseScale === void 0) vf.noiseScale = 0.25;
+    if (vf.noiseAnimated === void 0) vf.noiseAnimated = true;
+    if (vf.shadowsEnabled === void 0) vf.shadowsEnabled = true;
+    if (vf.mainLightScatter === void 0) vf.mainLightScatter = 1;
+    if (vf.mainLightScatterDark === void 0) vf.mainLightScatterDark = 3;
+    if (vf.mainLightSaturation === void 0) vf.mainLightSaturation = 1;
+    if (vf.brightnessThreshold === void 0) vf.brightnessThreshold = 1;
+    if (vf.minVisibility === void 0) vf.minVisibility = 0.15;
+    if (vf.skyBrightness === void 0) vf.skyBrightness = 5;
+    if (vf.debug === void 0) vf.debug = 0;
+    const folder = this.gui.addFolder("Volumetric Fog");
+    this.folders.volumetricFog = folder;
+    folder.add(vf, "enabled").name("Enabled");
+    if (vf.density !== void 0) {
+      folder.add(vf, "density", 0, 2, 0.05).name("Density");
+    } else if (vf.densityMultiplier !== void 0) {
+      folder.add(vf, "densityMultiplier", 0, 2, 0.05).name("Density");
+    }
+    folder.add(vf, "scatterStrength", 0, 10, 0.1).name("Scatter (Lights)");
+    folder.add(vf, "mainLightScatter", 0, 5, 0.1).name("Sun Scatter (Light)");
+    folder.add(vf, "mainLightScatterDark", 0, 10, 0.1).name("Sun Scatter (Dark)");
+    folder.add(vf, "mainLightSaturation", 0, 1, 0.01).name("Sun Saturation");
+    folder.add(vf, "brightnessThreshold", 0.1, 5, 0.1).name("Bright Threshold");
+    folder.add(vf, "minVisibility", 0, 1, 0.05).name("Min Visibility");
+    folder.add(vf, "skyBrightness", 0, 10, 0.5).name("Sky Brightness");
+    folder.add(vf.heightRange, "0", -50, 50, 1).name("Height Bottom");
+    folder.add(vf.heightRange, "1", -10, 100, 1).name("Height Top");
+    const qualityFolder = folder.addFolder("Quality");
+    qualityFolder.add(vf, "resolution", 0.125, 0.5, 0.125).name("Resolution");
+    qualityFolder.add(vf, "maxSamples", 16, 128, 8).name("Max Samples");
+    qualityFolder.add(vf, "blurRadius", 0, 8, 1).name("Blur Radius");
+    qualityFolder.close();
+    const noiseFolder = folder.addFolder("Noise");
+    noiseFolder.add(vf, "noiseStrength", 0, 1, 0.1).name("Strength");
+    noiseFolder.add(vf, "noiseScale", 0.05, 1, 0.05).name("Scale (Detail)");
+    noiseFolder.add(vf, "noiseAnimated").name("Animated");
+    noiseFolder.close();
+    folder.add(vf, "shadowsEnabled").name("Shadows");
+    folder.add(vf, "debug", 0, 12, 1).name("Debug Mode");
+  }
   _createBloomFolder() {
     const s = this.engine.settings;
     if (!s.bloom) return;
@@ -16969,6 +18794,14 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
       folder.add(s.bloom, "scale", 0.25, 1, 0.25).name("Resolution Scale");
     }
   }
+  _createTonemapFolder() {
+    const s = this.engine.settings;
+    if (!s.rendering) return;
+    if (s.rendering.tonemapMode === void 0) s.rendering.tonemapMode = 0;
+    const folder = this.gui.addFolder("Tone Mapping");
+    this.folders.tonemap = folder;
+    folder.add(s.rendering, "tonemapMode", { "ACES": 0, "Reinhard": 1, "None (Linear)": 2 }).name("Mode");
+  }
   _createPlanarReflectionFolder() {
     const s = this.engine.settings;
     if (!s.planarReflection) return;
@@ -16984,7 +18817,7 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
   _createAmbientCaptureFolder() {
     const s = this.engine.settings;
     if (!s.ambientCapture) return;
-    const folder = this.gui.addFolder("Ambient Capture");
+    const folder = this.gui.addFolder("Probe GI (Ambient Capture)");
     this.folders.ambientCapture = folder;
     folder.add(s.ambientCapture, "enabled").name("Enabled");
     folder.add(s.ambientCapture, "intensity", 0, 2, 0.05).name("Intensity");
@@ -16992,14 +18825,6 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
     folder.add(s.ambientCapture, "emissiveBoost", 0, 10, 0.1).name("Emissive Boost");
     folder.add(s.ambientCapture, "saturateLevel", 0, 2, 0.05).name("Saturate Level");
   }
-  _createNoiseFolder() {
-    const s = this.engine.settings;
-    if (!s.noise) return;
-    const folder = this.gui.addFolder("Noise");
-    this.folders.noise = folder;
-    folder.add(s.noise, "type", ["bluenoise", "bayer8"]).name("Type");
-    folder.add(s.noise, "animated").name("Animated");
-  }
   _createDitheringFolder() {
     const s = this.engine.settings;
     if (!s.dithering) return;
@@ -17008,6 +18833,40 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
     folder.add(s.dithering, "enabled").name("Enabled");
     folder.add(s.dithering, "colorLevels", 4, 256, 1).name("Color Levels");
   }
+  _createCRTFolder() {
+    const s = this.engine.settings;
+    if (!s.crt) return;
+    const folder = this.gui.addFolder("CRT Effect");
+    this.folders.crt = folder;
+    folder.add(s.crt, "enabled").name("CRT Enabled");
+    folder.add(s.crt, "upscaleEnabled").name("Upscale Only");
+    folder.add(s.crt, "upscaleTarget", 1, 8, 1).name("Upscale Target");
+    const geomFolder = folder.addFolder("Geometry");
+    geomFolder.add(s.crt, "curvature", 0, 0.25, 5e-3).name("Curvature");
+    geomFolder.add(s.crt, "cornerRadius", 0, 0.2, 5e-3).name("Corner Radius");
+    geomFolder.add(s.crt, "zoom", 1, 1.25, 5e-3).name("Zoom");
+    geomFolder.close();
+    const scanFolder = folder.addFolder("Scanlines");
+    scanFolder.add(s.crt, "scanlineIntensity", 0, 1, 0.05).name("Intensity");
+    scanFolder.add(s.crt, "scanlineWidth", 0, 1, 0.05).name("Width");
+    scanFolder.add(s.crt, "scanlineBrightBoost", 0, 2, 0.05).name("Bright Boost");
+    scanFolder.add(s.crt, "scanlineHeight", 1, 10, 1).name("Height (px)");
+    scanFolder.close();
+    const convFolder = folder.addFolder("RGB Convergence");
+    convFolder.add(s.crt.convergence, "0", -3, 3, 0.1).name("Red X Offset");
+    convFolder.add(s.crt.convergence, "1", -3, 3, 0.1).name("Green X Offset");
+    convFolder.add(s.crt.convergence, "2", -3, 3, 0.1).name("Blue X Offset");
+    convFolder.close();
+    const maskFolder = folder.addFolder("Phosphor Mask");
+    maskFolder.add(s.crt, "maskType", ["none", "aperture", "slot", "shadow"]).name("Type");
+    maskFolder.add(s.crt, "maskIntensity", 0, 1, 0.05).name("Intensity");
+    maskFolder.close();
+    const vigFolder = folder.addFolder("Vignette");
+    vigFolder.add(s.crt, "vignetteIntensity", 0, 1, 0.05).name("Intensity");
+    vigFolder.add(s.crt, "vignetteSize", 0.1, 1, 0.05).name("Size");
+    vigFolder.close();
+    folder.add(s.crt, "blurSize", 0, 8, 0.1).name("H-Blur (px)");
+  }
   _createCameraFolder() {
     const s = this.engine.settings;
     if (!s.camera) return;
@@ -17087,6 +18946,619 @@ Lights: ${fmt(visibleLights)} (occ:${fmt(lightOccCulled)})`;
     } : { r: 1, g: 1, b: 1 };
   }
 }
+class Raycaster {
+  constructor(engine) {
+    this.engine = engine;
+    this.worker = null;
+    this._pendingCallbacks = /* @__PURE__ */ new Map();
+    this._nextRequestId = 0;
+    this._initialized = false;
+  }
+  async initialize() {
+    const workerCode = this._getWorkerCode();
+    const blob = new Blob([workerCode], { type: "application/javascript" });
+    const workerUrl = URL.createObjectURL(blob);
+    this.worker = new Worker(workerUrl);
+    this.worker.onmessage = this._handleWorkerMessage.bind(this);
+    this.worker.onerror = (e) => console.error("Raycaster worker error:", e);
+    this._initialized = true;
+    URL.revokeObjectURL(workerUrl);
+  }
+  /**
+   * Cast a ray and get the closest intersection
+   * @param {Array|vec3} origin - Ray start point [x, y, z]
+   * @param {Array|vec3} direction - Ray direction (will be normalized)
+   * @param {number} maxDistance - Maximum ray length
+   * @param {Function} callback - Called with result: { hit, distance, point, normal, entity, mesh, triangleIndex }
+   * @param {Object} options - Optional settings
+   * @param {Array} options.entities - Specific entities to test (default: all scene entities)
+   * @param {Array} options.meshes - Specific meshes to test (default: all scene meshes)
+   * @param {boolean} options.backfaces - Test backfaces (default: false)
+   * @param {Array} options.exclude - Entities/meshes to exclude
+   */
+  cast(origin, direction, maxDistance, callback, options = {}) {
+    if (!this._initialized) {
+      console.warn("Raycaster not initialized");
+      callback({ hit: false, error: "not initialized" });
+      return;
+    }
+    const ray = {
+      origin: Array.from(origin),
+      direction: this._normalize(Array.from(direction)),
+      maxDistance
+    };
+    const candidates = this._collectCandidates(ray, options);
+    if (candidates.length === 0) {
+      callback({ hit: false });
+      return;
+    }
+    const requestId = this._nextRequestId++;
+    this._pendingCallbacks.set(requestId, { callback, candidates });
+    this.worker.postMessage({
+      type: "raycast",
+      requestId,
+      ray,
+      debug: options.debug ?? false,
+      candidates: candidates.map((c) => ({
+        id: c.id,
+        vertices: c.vertices,
+        indices: c.indices,
+        matrix: c.matrix,
+        backfaces: options.backfaces ?? false
+      }))
+    });
+  }
+  /**
+   * Cast a ray upward from a position to check for sky visibility
+   * Useful for determining if camera is under cover
+   * @param {Array|vec3} position - Position to test from
+   * @param {number} maxDistance - How far to check (default: 100)
+   * @param {Function} callback - Called with { hitSky: boolean, distance?: number, entity?: object }
+   */
+  castToSky(position, maxDistance, callback) {
+    this.cast(
+      position,
+      [0, 1, 0],
+      // Straight up
+      maxDistance ?? 100,
+      (result) => {
+        callback({
+          hitSky: !result.hit,
+          distance: result.distance,
+          entity: result.entity,
+          mesh: result.mesh
+        });
+      }
+    );
+  }
+  /**
+   * Cast a ray from screen coordinates (mouse picking)
+   * @param {number} screenX - Screen X coordinate
+   * @param {number} screenY - Screen Y coordinate
+   * @param {Object} camera - Camera with projection/view matrices
+   * @param {Function} callback - Called with intersection result
+   * @param {Object} options - Cast options
+   */
+  castFromScreen(screenX, screenY, camera, callback, options = {}) {
+    const { width, height } = this.engine.canvas;
+    const ndcX = screenX / width * 2 - 1;
+    const ndcY = 1 - screenY / height * 2;
+    const invViewProj = mat4$1.create();
+    mat4$1.multiply(invViewProj, camera.proj, camera.view);
+    mat4$1.invert(invViewProj, invViewProj);
+    const nearPoint = this._unproject([ndcX, ndcY, 0], invViewProj);
+    const farPoint = this._unproject([ndcX, ndcY, 1], invViewProj);
+    const direction = [
+      farPoint[0] - nearPoint[0],
+      farPoint[1] - nearPoint[1],
+      farPoint[2] - nearPoint[2]
+    ];
+    const maxDistance = options.maxDistance ?? camera.far ?? 1e3;
+    this.cast(nearPoint, direction, maxDistance, callback, options);
+  }
+  /**
+   * Collect candidate geometries that pass bounding sphere test
+   */
+  _collectCandidates(ray, options) {
+    const candidates = [];
+    const exclude = new Set(options.exclude ?? []);
+    const debug = options.debug;
+    const entities = options.entities ?? this._getAllEntities();
+    const assetManager = this.engine.assetManager;
+    for (const entity of entities) {
+      if (exclude.has(entity)) continue;
+      if (!entity.model) continue;
+      const asset = assetManager?.get(entity.model);
+      if (!asset?.geometry) continue;
+      const bsphere = this._getEntityBoundingSphere(entity);
+      if (!bsphere) continue;
+      if (this._raySphereIntersect(ray, bsphere)) {
+        const geometryData = this._extractGeometry(asset.geometry);
+        if (geometryData) {
+          const matrix = entity._matrix ?? mat4$1.create();
+          candidates.push({
+            id: entity.id ?? entity.name ?? `entity_${candidates.length}`,
+            type: "entity",
+            entity,
+            asset,
+            vertices: geometryData.vertices,
+            indices: geometryData.indices,
+            matrix: Array.from(matrix),
+            bsphereDistance: this._raySphereDistance(ray, bsphere)
+          });
+        }
+      }
+    }
+    const meshes = options.meshes ?? this._getAllMeshes();
+    let debugStats = debug ? { total: 0, noGeom: 0, noBsphere: 0, noData: 0, sphereMiss: 0, candidates: 0 } : null;
+    for (const [name, mesh] of Object.entries(meshes)) {
+      if (exclude.has(mesh)) continue;
+      if (!mesh.geometry) {
+        if (debug) debugStats.noGeom++;
+        continue;
+      }
+      const bsphere = this._getMeshBoundingSphere(mesh);
+      if (!bsphere) {
+        if (debug) debugStats.noBsphere++;
+        continue;
+      }
+      const geometryData = this._extractGeometry(mesh.geometry);
+      if (!geometryData) {
+        if (debug) debugStats.noData++;
+        continue;
+      }
+      if (debug) debugStats.total++;
+      let instanceCount = mesh.geometry.instanceCount ?? 0;
+      if (instanceCount === 0) {
+        if (mesh.geometry.instanceData) {
+          instanceCount = mesh.static ? mesh.geometry.maxInstances ?? 1 : 1;
+        } else {
+          instanceCount = 1;
+        }
+      }
+      for (let i = 0; i < instanceCount; i++) {
+        const matrix = this._getInstanceMatrix(mesh.geometry, i);
+        const instanceBsphere = this._transformBoundingSphere(bsphere, matrix);
+        if (this._raySphereIntersect(ray, instanceBsphere)) {
+          if (debug) debugStats.candidates++;
+          candidates.push({
+            id: `${name}_${i}`,
+            type: "mesh",
+            mesh,
+            meshName: name,
+            instanceIndex: i,
+            vertices: geometryData.vertices,
+            indices: geometryData.indices,
+            matrix: Array.from(matrix),
+            bsphereDistance: this._raySphereDistance(ray, instanceBsphere)
+          });
+        } else {
+          if (debug) debugStats.sphereMiss++;
+        }
+      }
+    }
+    if (debug && debugStats) {
+      console.log(`Raycaster: meshes=${debugStats.total}, sphereHit=${debugStats.candidates}, sphereMiss=${debugStats.sphereMiss}`);
+      if (candidates.length > 0 && candidates.length < 50) {
+        const candInfo = candidates.map((c) => {
+          const m = c.matrix;
+          const pos = [m[12], m[13], m[14]];
+          return `${c.id}@[${pos.map((v) => v.toFixed(1)).join(",")}]`;
+        }).join(", ");
+        console.log(`Candidates: ${candInfo}`);
+      }
+    }
+    candidates.sort((a, b) => a.bsphereDistance - b.bsphereDistance);
+    return candidates;
+  }
+  _getAllEntities() {
+    const entities = this.engine.entities;
+    if (!entities) return [];
+    return Object.values(entities);
+  }
+  _getAllMeshes() {
+    return this.engine.meshes ?? {};
+  }
+  _getEntityBoundingSphere(entity) {
+    if (entity._bsphere && entity._bsphere.radius > 0) {
+      return {
+        center: Array.from(entity._bsphere.center),
+        radius: entity._bsphere.radius
+      };
+    }
+    const geometry = entity.mesh?.geometry;
+    if (!geometry) return null;
+    const localBsphere = geometry.getBoundingSphere?.();
+    if (!localBsphere || localBsphere.radius <= 0) return null;
+    const matrix = entity._matrix ?? entity.matrix ?? mat4$1.create();
+    return this._transformBoundingSphere(localBsphere, matrix);
+  }
+  _getMeshBoundingSphere(mesh) {
+    const geometry = mesh.geometry;
+    if (!geometry) return null;
+    return geometry.getBoundingSphere?.() ?? null;
+  }
+  _transformBoundingSphere(bsphere, matrix) {
+    const center = vec3$1.create();
+    vec3$1.transformMat4(center, bsphere.center, matrix);
+    const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1] + matrix[2] * matrix[2]);
+    const scaleY = Math.sqrt(matrix[4] * matrix[4] + matrix[5] * matrix[5] + matrix[6] * matrix[6]);
+    const scaleZ = Math.sqrt(matrix[8] * matrix[8] + matrix[9] * matrix[9] + matrix[10] * matrix[10]);
+    const maxScale = Math.max(scaleX, scaleY, scaleZ);
+    return {
+      center: Array.from(center),
+      radius: bsphere.radius * maxScale
+    };
+  }
+  _getInstanceMatrix(geometry, instanceIndex) {
+    if (!geometry.instanceData) {
+      return mat4$1.create();
+    }
+    const stride = 28;
+    const offset = instanceIndex * stride;
+    if (offset + 16 > geometry.instanceData.length) {
+      return mat4$1.create();
+    }
+    const matrix = mat4$1.create();
+    for (let i = 0; i < 16; i++) {
+      matrix[i] = geometry.instanceData[offset + i];
+    }
+    return matrix;
+  }
+  _extractGeometry(geometry) {
+    if (!geometry.vertexArray || !geometry.indexArray) {
+      return null;
+    }
+    const stride = 20;
+    const vertexCount = geometry.vertexArray.length / stride;
+    const vertices = new Float32Array(vertexCount * 3);
+    for (let i = 0; i < vertexCount; i++) {
+      vertices[i * 3] = geometry.vertexArray[i * stride];
+      vertices[i * 3 + 1] = geometry.vertexArray[i * stride + 1];
+      vertices[i * 3 + 2] = geometry.vertexArray[i * stride + 2];
+    }
+    return {
+      vertices,
+      indices: geometry.indexArray
+    };
+  }
+  /**
+   * Ray-sphere intersection test
+   * Returns true if ray intersects sphere within maxDistance
+   * Handles case where ray origin is inside the sphere
+   */
+  _raySphereIntersect(ray, sphere) {
+    const oc = [
+      ray.origin[0] - sphere.center[0],
+      ray.origin[1] - sphere.center[1],
+      ray.origin[2] - sphere.center[2]
+    ];
+    const distToCenter = Math.sqrt(oc[0] * oc[0] + oc[1] * oc[1] + oc[2] * oc[2]);
+    if (distToCenter < sphere.radius) {
+      return true;
+    }
+    const a = this._dot(ray.direction, ray.direction);
+    const b = 2 * this._dot(oc, ray.direction);
+    const c = this._dot(oc, oc) - sphere.radius * sphere.radius;
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) return false;
+    const sqrtDisc = Math.sqrt(discriminant);
+    const t1 = (-b - sqrtDisc) / (2 * a);
+    const t2 = (-b + sqrtDisc) / (2 * a);
+    if (t1 >= 0 && t1 <= ray.maxDistance) return true;
+    if (t2 >= 0 && t2 <= ray.maxDistance) return true;
+    return false;
+  }
+  /**
+   * Get distance to sphere along ray (for sorting)
+   */
+  _raySphereDistance(ray, sphere) {
+    const oc = [
+      ray.origin[0] - sphere.center[0],
+      ray.origin[1] - sphere.center[1],
+      ray.origin[2] - sphere.center[2]
+    ];
+    const a = this._dot(ray.direction, ray.direction);
+    const b = 2 * this._dot(oc, ray.direction);
+    const c = this._dot(oc, oc) - sphere.radius * sphere.radius;
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) return Infinity;
+    const t = (-b - Math.sqrt(discriminant)) / (2 * a);
+    return Math.max(0, t);
+  }
+  _handleWorkerMessage(event) {
+    const { type, requestId, result } = event.data;
+    if (type === "raycastResult") {
+      const pending = this._pendingCallbacks.get(requestId);
+      if (pending) {
+        this._pendingCallbacks.delete(requestId);
+        if (result.hit && pending.candidates) {
+          const candidate = pending.candidates.find((c) => c.id === result.candidateId);
+          if (candidate) {
+            result.entity = candidate.entity;
+            result.mesh = candidate.mesh;
+            result.meshName = candidate.meshName;
+            result.instanceIndex = candidate.instanceIndex;
+          }
+        }
+        pending.callback(result);
+      }
+    }
+  }
+  _normalize(v) {
+    const len = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
+    if (len === 0) return [0, 0, 1];
+    return [v[0] / len, v[1] / len, v[2] / len];
+  }
+  _dot(a, b) {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+  }
+  /**
+   * Get perpendicular distance from a point to a ray
+   */
+  _pointToRayDistance(point, ray) {
+    const op = [
+      point[0] - ray.origin[0],
+      point[1] - ray.origin[1],
+      point[2] - ray.origin[2]
+    ];
+    const t = this._dot(op, ray.direction);
+    const closest = [
+      ray.origin[0] + ray.direction[0] * t,
+      ray.origin[1] + ray.direction[1] * t,
+      ray.origin[2] + ray.direction[2] * t
+    ];
+    const dx = point[0] - closest[0];
+    const dy = point[1] - closest[1];
+    const dz = point[2] - closest[2];
+    return Math.sqrt(dx * dx + dy * dy + dz * dz);
+  }
+  _unproject(ndc, invViewProj) {
+    const x = ndc[0];
+    const y = ndc[1];
+    const z = ndc[2];
+    const w = invViewProj[3] * x + invViewProj[7] * y + invViewProj[11] * z + invViewProj[15];
+    return [
+      (invViewProj[0] * x + invViewProj[4] * y + invViewProj[8] * z + invViewProj[12]) / w,
+      (invViewProj[1] * x + invViewProj[5] * y + invViewProj[9] * z + invViewProj[13]) / w,
+      (invViewProj[2] * x + invViewProj[6] * y + invViewProj[10] * z + invViewProj[14]) / w
+    ];
+  }
+  /**
+   * Generate Web Worker code as string
+   */
+  _getWorkerCode() {
+    return `
+// Raycaster Web Worker
+// Performs triangle intersection tests off the main thread
+
+self.onmessage = function(event) {
+    const { type, requestId, ray, candidates, debug } = event.data
+
+    if (type === 'raycast') {
+        const result = raycastTriangles(ray, candidates, debug)
+        self.postMessage({ type: 'raycastResult', requestId, result })
+    }
+}
+
+function raycastTriangles(ray, candidates, debug) {
+    let closestHit = null
+    let closestDistance = ray.maxDistance
+    let debugInfo = debug ? { totalTris: 0, testedCandidates: 0, scales: [] } : null
+
+    for (const candidate of candidates) {
+        if (debug) debugInfo.testedCandidates++
+        const result = testCandidate(ray, candidate, closestDistance, debug ? debugInfo : null)
+
+        if (result && result.distance < closestDistance) {
+            closestDistance = result.distance
+            closestHit = {
+                hit: true,
+                distance: result.distance,
+                point: result.point,
+                normal: result.normal,
+                triangleIndex: result.triangleIndex,
+                candidateId: candidate.id,
+                localT: result.localT,
+                scale: result.scale
+            }
+        }
+    }
+
+    if (debug) {
+        let msg = 'Worker: candidates=' + debugInfo.testedCandidates + ', triangles=' + debugInfo.totalTris
+        if (closestHit) {
+            msg += ', hit=' + closestHit.distance.toFixed(2) + ' (localT=' + closestHit.localT.toFixed(2) + ', scale=' + closestHit.scale.toFixed(2) + ')'
+        } else {
+            msg += ', hit=none'
+        }
+        console.log(msg)
+    }
+
+    return closestHit ?? { hit: false }
+}
+
+function testCandidate(ray, candidate, maxDistance, debugInfo) {
+    const { vertices, indices, matrix, backfaces } = candidate
+
+    // Compute inverse matrix for transforming ray to local space
+    const invMatrix = invertMatrix4(matrix)
+
+    // Transform ray to local space
+    const localOrigin = transformPoint(ray.origin, invMatrix)
+    const localDir = transformDirection(ray.direction, invMatrix)
+
+    // Calculate the scale factor of the transformation (for correct distance)
+    const dirScale = Math.sqrt(localDir[0]*localDir[0] + localDir[1]*localDir[1] + localDir[2]*localDir[2])
+    const localDirNorm = [localDir[0]/dirScale, localDir[1]/dirScale, localDir[2]/dirScale]
+
+    let closestHit = null
+    let closestT = maxDistance
+
+    // Test each triangle
+    const triangleCount = indices.length / 3
+    if (debugInfo) debugInfo.totalTris += triangleCount
+    for (let i = 0; i < triangleCount; i++) {
+        const i0 = indices[i * 3]
+        const i1 = indices[i * 3 + 1]
+        const i2 = indices[i * 3 + 2]
+
+        const v0 = [vertices[i0 * 3], vertices[i0 * 3 + 1], vertices[i0 * 3 + 2]]
+        const v1 = [vertices[i1 * 3], vertices[i1 * 3 + 1], vertices[i1 * 3 + 2]]
+        const v2 = [vertices[i2 * 3], vertices[i2 * 3 + 1], vertices[i2 * 3 + 2]]
+
+        const hit = rayTriangleIntersect(localOrigin, localDirNorm, v0, v1, v2, backfaces)
+
+        if (hit && hit.t > 0) {
+            // Transform hit point and normal back to world space
+            const worldPoint = transformPoint(hit.point, matrix)
+
+            // Calculate world-space distance (local t may be wrong due to matrix scale)
+            const worldDist = Math.sqrt(
+                (worldPoint[0] - ray.origin[0]) ** 2 +
+                (worldPoint[1] - ray.origin[1]) ** 2 +
+                (worldPoint[2] - ray.origin[2]) ** 2
+            )
+
+            if (worldDist < closestT) {
+                closestT = worldDist
+                const worldNormal = transformDirection(hit.normal, matrix)
+
+                closestHit = {
+                    distance: worldDist,
+                    point: worldPoint,
+                    normal: normalize(worldNormal),
+                    triangleIndex: i,
+                    localT: hit.t,
+                    scale: dirScale
+                }
+            }
+        }
+    }
+
+    return closestHit
+}
+
+// Möller–Trumbore intersection algorithm
+function rayTriangleIntersect(origin, dir, v0, v1, v2, backfaces) {
+    const EPSILON = 0.0000001
+
+    const edge1 = sub(v1, v0)
+    const edge2 = sub(v2, v0)
+    const h = cross(dir, edge2)
+    const a = dot(edge1, h)
+
+    // Check if ray is parallel to triangle
+    if (a > -EPSILON && a < EPSILON) return null
+
+    // Check backface
+    if (!backfaces && a < 0) return null
+
+    const f = 1.0 / a
+    const s = sub(origin, v0)
+    const u = f * dot(s, h)
+
+    if (u < 0.0 || u > 1.0) return null
+
+    const q = cross(s, edge1)
+    const v = f * dot(dir, q)
+
+    if (v < 0.0 || u + v > 1.0) return null
+
+    const t = f * dot(edge2, q)
+
+    if (t > EPSILON) {
+        const point = [
+            origin[0] + dir[0] * t,
+            origin[1] + dir[1] * t,
+            origin[2] + dir[2] * t
+        ]
+        const normal = normalize(cross(edge1, edge2))
+        return { t, point, normal, u, v }
+    }
+
+    return null
+}
+
+// Matrix and vector utilities
+function invertMatrix4(m) {
+    const inv = new Array(16)
+
+    inv[0] = m[5]*m[10]*m[15] - m[5]*m[11]*m[14] - m[9]*m[6]*m[15] + m[9]*m[7]*m[14] + m[13]*m[6]*m[11] - m[13]*m[7]*m[10]
+    inv[4] = -m[4]*m[10]*m[15] + m[4]*m[11]*m[14] + m[8]*m[6]*m[15] - m[8]*m[7]*m[14] - m[12]*m[6]*m[11] + m[12]*m[7]*m[10]
+    inv[8] = m[4]*m[9]*m[15] - m[4]*m[11]*m[13] - m[8]*m[5]*m[15] + m[8]*m[7]*m[13] + m[12]*m[5]*m[11] - m[12]*m[7]*m[9]
+    inv[12] = -m[4]*m[9]*m[14] + m[4]*m[10]*m[13] + m[8]*m[5]*m[14] - m[8]*m[6]*m[13] - m[12]*m[5]*m[10] + m[12]*m[6]*m[9]
+    inv[1] = -m[1]*m[10]*m[15] + m[1]*m[11]*m[14] + m[9]*m[2]*m[15] - m[9]*m[3]*m[14] - m[13]*m[2]*m[11] + m[13]*m[3]*m[10]
+    inv[5] = m[0]*m[10]*m[15] - m[0]*m[11]*m[14] - m[8]*m[2]*m[15] + m[8]*m[3]*m[14] + m[12]*m[2]*m[11] - m[12]*m[3]*m[10]
+    inv[9] = -m[0]*m[9]*m[15] + m[0]*m[11]*m[13] + m[8]*m[1]*m[15] - m[8]*m[3]*m[13] - m[12]*m[1]*m[11] + m[12]*m[3]*m[9]
+    inv[13] = m[0]*m[9]*m[14] - m[0]*m[10]*m[13] - m[8]*m[1]*m[14] + m[8]*m[2]*m[13] + m[12]*m[1]*m[10] - m[12]*m[2]*m[9]
+    inv[2] = m[1]*m[6]*m[15] - m[1]*m[7]*m[14] - m[5]*m[2]*m[15] + m[5]*m[3]*m[14] + m[13]*m[2]*m[7] - m[13]*m[3]*m[6]
+    inv[6] = -m[0]*m[6]*m[15] + m[0]*m[7]*m[14] + m[4]*m[2]*m[15] - m[4]*m[3]*m[14] - m[12]*m[2]*m[7] + m[12]*m[3]*m[6]
+    inv[10] = m[0]*m[5]*m[15] - m[0]*m[7]*m[13] - m[4]*m[1]*m[15] + m[4]*m[3]*m[13] + m[12]*m[1]*m[7] - m[12]*m[3]*m[5]
+    inv[14] = -m[0]*m[5]*m[14] + m[0]*m[6]*m[13] + m[4]*m[1]*m[14] - m[4]*m[2]*m[13] - m[12]*m[1]*m[6] + m[12]*m[2]*m[5]
+    inv[3] = -m[1]*m[6]*m[11] + m[1]*m[7]*m[10] + m[5]*m[2]*m[11] - m[5]*m[3]*m[10] - m[9]*m[2]*m[7] + m[9]*m[3]*m[6]
+    inv[7] = m[0]*m[6]*m[11] - m[0]*m[7]*m[10] - m[4]*m[2]*m[11] + m[4]*m[3]*m[10] + m[8]*m[2]*m[7] - m[8]*m[3]*m[6]
+    inv[11] = -m[0]*m[5]*m[11] + m[0]*m[7]*m[9] + m[4]*m[1]*m[11] - m[4]*m[3]*m[9] - m[8]*m[1]*m[7] + m[8]*m[3]*m[5]
+    inv[15] = m[0]*m[5]*m[10] - m[0]*m[6]*m[9] - m[4]*m[1]*m[10] + m[4]*m[2]*m[9] + m[8]*m[1]*m[6] - m[8]*m[2]*m[5]
+
+    let det = m[0]*inv[0] + m[1]*inv[4] + m[2]*inv[8] + m[3]*inv[12]
+    if (det === 0) return m // Return original if singular
+
+    det = 1.0 / det
+    for (let i = 0; i < 16; i++) inv[i] *= det
+
+    return inv
+}
+
+function transformPoint(p, m) {
+    const w = m[3]*p[0] + m[7]*p[1] + m[11]*p[2] + m[15]
+    return [
+        (m[0]*p[0] + m[4]*p[1] + m[8]*p[2] + m[12]) / w,
+        (m[1]*p[0] + m[5]*p[1] + m[9]*p[2] + m[13]) / w,
+        (m[2]*p[0] + m[6]*p[1] + m[10]*p[2] + m[14]) / w
+    ]
+}
+
+function transformDirection(d, m) {
+    return [
+        m[0]*d[0] + m[4]*d[1] + m[8]*d[2],
+        m[1]*d[0] + m[5]*d[1] + m[9]*d[2],
+        m[2]*d[0] + m[6]*d[1] + m[10]*d[2]
+    ]
+}
+
+function normalize(v) {
+    const len = Math.sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2])
+    if (len === 0) return [0, 0, 1]
+    return [v[0]/len, v[1]/len, v[2]/len]
+}
+
+function dot(a, b) {
+    return a[0]*b[0] + a[1]*b[1] + a[2]*b[2]
+}
+
+function cross(a, b) {
+    return [
+        a[1]*b[2] - a[2]*b[1],
+        a[2]*b[0] - a[0]*b[2],
+        a[0]*b[1] - a[1]*b[0]
+    ]
+}
+
+function sub(a, b) {
+    return [a[0]-b[0], a[1]-b[1], a[2]-b[2]]
+}
+`;
+  }
+  destroy() {
+    if (this.worker) {
+      this.worker.terminate();
+      this.worker = null;
+    }
+    this._pendingCallbacks.clear();
+    this._initialized = false;
+  }
+}
 function fail(engine, msg, data) {
   if (engine?.canvas) {
     engine.canvas.style.display = "none";
@@ -17152,7 +19624,7 @@ const DEFAULT_SETTINGS = {
     renderScale: 1,
     // Render resolution multiplier (1.5-2.0 for supersampling AA)
     autoScale: {
-      enabled: false,
+      enabled: true,
       // Auto-reduce renderScale for high resolutions
       enabledForEffects: true,
       // Auto scale effects at high resolutions (when main autoScale disabled)
@@ -17177,8 +19649,10 @@ const DEFAULT_SETTINGS = {
     // Enable alpha hashing/dithering for cutout transparency (global default)
     alphaHashScale: 1,
     // Scale factor for alpha hash threshold (higher = more opaque)
-    luminanceToAlpha: false
+    luminanceToAlpha: false,
     // Derive alpha from color luminance (for old game assets where black=transparent)
+    tonemapMode: 0
+    // 0=ACES, 1=Reinhard, 2=None (linear clamp)
   },
   // Noise settings for dithering, jittering, etc.
   noise: {
@@ -17225,13 +19699,14 @@ const DEFAULT_SETTINGS = {
     exposure: 1.6,
     fog: {
       enabled: true,
-      color: [0.8, 0.85, 0.9],
-      distances: [6, 15, 50],
+      color: [100 / 255, 135 / 255, 170 / 255],
+      distances: [0, 15, 50],
       alpha: [0, 0.5, 0.9],
       heightFade: [-2, 185],
       // [bottomY, topY] - full fog at bottomY, zero at topY
-      brightResist: 0.2
+      brightResist: 0,
       // How much bright/emissive colors resist fog (0-1)
+      debug: 0
     }
   },
   // Main directional light
@@ -17261,6 +19736,8 @@ const DEFAULT_SETTINGS = {
     surfaceBias: 0,
     // Scale shadow projection larger (0.01 = 1% larger)
     strength: 1
+    //frustum: false,
+    //hiZ: false,
   },
   // Ambient Occlusion settings
   ao: {
@@ -17368,6 +19845,54 @@ const DEFAULT_SETTINGS = {
     saturateLevel: 0.5
     // Logarithmic saturation level for indirect light
   },
+  // Volumetric Fog (light scattering through particles)
+  volumetricFog: {
+    enabled: false,
+    // Disabled by default (performance impact)
+    resolution: 0.125,
+    // 1/4 render resolution for ray marching
+    maxSamples: 32,
+    // Ray march samples (8-32)
+    blurRadius: 8,
+    // Gaussian blur radius
+    densityMultiplier: 1,
+    // Multiplies base fog density
+    scatterStrength: 0.35,
+    // Light scattering intensity
+    mainLightScatter: 1.4,
+    // Main directional light scattering boost
+    mainLightScatterDark: 5,
+    // Main directional light scattering boost
+    mainLightSaturation: 0.15,
+    // Main light color saturation in fog
+    maxFogOpacity: 0.3,
+    // Maximum fog opacity (0-1)
+    heightRange: [-2, 8],
+    // [bottom, top] Y bounds for fog (low ground fog)
+    windDirection: [1, 0, 0.2],
+    // Wind direction for fog animation
+    windSpeed: 0.5,
+    // Wind speed multiplier
+    noiseScale: 0.9,
+    // 3D noise frequency (higher = finer detail)
+    noiseStrength: 0.8,
+    // Noise intensity (0 = uniform, 1 = full variation)
+    noiseOctaves: 6,
+    // Noise detail layers
+    noiseEnabled: true,
+    // Enable 3D noise (disable for debug)
+    lightingEnabled: true,
+    // Light fog from scene lights
+    shadowsEnabled: true,
+    // Apply shadows to fog
+    brightnessThreshold: 0.8,
+    // Scene luminance where fog starts fading (like bloom)
+    minVisibility: 0.15,
+    // Minimum fog visibility over bright surfaces (0-1)
+    skyBrightness: 1.2
+    // Virtual brightness for sky pixels (depth at far plane)
+    //debugSkyCheck: true
+  },
   // Planar Reflections (alternative to SSR for water/floor)
   planarReflection: {
     enabled: true,
@@ -17423,15 +19948,68 @@ const DEFAULT_SETTINGS = {
     // FPS threshold for auto-disable
     disableDelay: 3
     // Seconds below threshold before disabling
+  },
+  // CRT effect (retro monitor simulation)
+  crt: {
+    enabled: false,
+    // Enable CRT effect (geometry, scanlines, etc.)
+    upscaleEnabled: false,
+    // Enable upscaling (pixelated look) even when CRT disabled
+    upscaleTarget: 4,
+    // Target upscale multiplier (4x render resolution)
+    maxTextureSize: 4096,
+    // Max upscaled texture dimension
+    // Geometry distortion
+    curvature: 0.14,
+    // Screen curvature amount (0-0.15)
+    cornerRadius: 0.055,
+    // Rounded corner radius (0-0.1)
+    zoom: 1.06,
+    // Zoom to compensate for curvature shrinkage
+    // Scanlines (electron beam simulation - Gaussian profile)
+    scanlineIntensity: 0.4,
+    // Scanline effect strength (0-1)
+    scanlineWidth: 0,
+    // Beam width (0=thin/center only, 1=no gap)
+    scanlineBrightBoost: 0.8,
+    // Bright pixels widen beam to fill gaps (0-1)
+    scanlineHeight: 5,
+    // Scanline height in canvas pixels
+    // RGB convergence error (color channel misalignment)
+    convergence: [0.79, 0, -0.77],
+    // RGB X offset in source pixels
+    // Phosphor mask
+    maskType: "aperture",
+    // 'aperture', 'slot', 'shadow', 'none'
+    maskIntensity: 0.25,
+    // Mask strength (0-1)
+    maskScale: 1,
+    // Mask size multiplier
+    // Vignette (edge darkening)
+    vignetteIntensity: 0.54,
+    // Edge darkening strength (0-1)
+    vignetteSize: 0.85,
+    // Vignette size (larger = more visible)
+    // Horizontal blur (beam softness)
+    blurSize: 0.79
+    // Horizontal blur in pixels (0-2)
   }
 };
 async function createWebGPUContext(engine, canvasId) {
   try {
     let configureContext = function() {
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      const renderScale = engine.renderScale || 1;
-      canvas.width = Math.floor(canvas.clientWidth * devicePixelRatio * renderScale) | 0;
-      canvas.height = Math.floor(canvas.clientHeight * devicePixelRatio * renderScale) | 0;
+      let pixelWidth, pixelHeight;
+      if (engine._devicePixelSize) {
+        pixelWidth = engine._devicePixelSize.width;
+        pixelHeight = engine._devicePixelSize.height;
+      } else {
+        const devicePixelRatio = window.devicePixelRatio || 1;
+        pixelWidth = Math.round(canvas.clientWidth * devicePixelRatio);
+        pixelHeight = Math.round(canvas.clientHeight * devicePixelRatio);
+      }
+      canvas.width = pixelWidth;
+      canvas.height = pixelHeight;
+      engine._canvasPixelSize = { width: pixelWidth, height: pixelHeight };
       context.configure({
         device,
         format: canvasFormat,
@@ -17604,9 +20182,34 @@ class Engine {
       this.stats.avg_fps = 60;
       this.stats.avg_dt_render = 0.1;
       requestAnimationFrame(() => this._frame());
-      window.addEventListener("resize", () => {
-        this.needsResize = true;
-      });
+      this._devicePixelSize = null;
+      try {
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            if (entry.devicePixelContentBoxSize) {
+              const size = entry.devicePixelContentBoxSize[0];
+              this._devicePixelSize = {
+                width: size.inlineSize,
+                height: size.blockSize
+              };
+            } else if (entry.contentBoxSize) {
+              const size = entry.contentBoxSize[0];
+              const dpr = window.devicePixelRatio || 1;
+              this._devicePixelSize = {
+                width: Math.round(size.inlineSize * dpr),
+                height: Math.round(size.blockSize * dpr)
+              };
+            }
+            this.needsResize = true;
+          }
+        });
+        resizeObserver.observe(this.canvas, { box: "device-pixel-content-box" });
+      } catch (e) {
+        console.log("ResizeObserver device-pixel-content-box not supported, falling back to window resize");
+        window.addEventListener("resize", () => {
+          this.needsResize = true;
+        });
+      }
       setInterval(() => {
         if (this.needsResize && !this._resizing) {
           this.needsResize = false;
@@ -17726,11 +20329,19 @@ class Engine {
    * @param {Array} options.position - Optional position offset [x, y, z]
    * @param {Array} options.rotation - Optional rotation offset [x, y, z] in radians
    * @param {number} options.scale - Optional uniform scale multiplier
+   * @param {boolean} options.doubleSided - Optional: force all materials to be double-sided
    * @returns {Promise<Object>} Object containing { meshes, nodes, skins, animations }
    */
   async loadScene(url, options = {}) {
     const result = await loadGltf(this, url, options);
     const { meshes, nodes } = result;
+    if (options.doubleSided) {
+      for (const mesh of Object.values(meshes)) {
+        if (mesh.material) {
+          mesh.material.doubleSided = true;
+        }
+      }
+    }
     for (const node of nodes) {
       if (!node.parent) {
         node.updateMatrix(null);
@@ -17750,6 +20361,23 @@ class Engine {
         [scl, scl, scl]
       );
     }
+    let combinedBsphere = null;
+    const hasAnySkin = Object.values(meshes).some((m) => m.hasSkin);
+    if (hasAnySkin) {
+      const allPositions = [];
+      for (const mesh of Object.values(meshes)) {
+        const positions = mesh.geometry?.attributes?.position;
+        if (positions) {
+          for (let i = 0; i < positions.length; i += 3) {
+            allPositions.push(positions[i], positions[i + 1], positions[i + 2]);
+          }
+        }
+      }
+      if (allPositions.length > 0) {
+        const { calculateBoundingSphere: calculateBoundingSphere2 } = await Promise.resolve().then(() => BoundingSphere);
+        combinedBsphere = calculateBoundingSphere2(new Float32Array(allPositions));
+      }
+    }
     for (const [name, mesh] of Object.entries(meshes)) {
       let meshNode = null;
       if (mesh.nodeIndex !== null && mesh.nodeIndex !== void 0) {
@@ -17762,7 +20390,7 @@ class Engine {
       if (options.position || options.rotation || options.scale) {
         mat4.multiply(worldMatrix, rootTransform, worldMatrix);
       }
-      const localBsphere = mesh.geometry.getBoundingSphere?.();
+      const localBsphere = hasAnySkin && combinedBsphere ? combinedBsphere : mesh.geometry.getBoundingSphere?.();
       let worldCenter = [0, 0, 0];
       let worldRadius = 1;
       if (localBsphere && localBsphere.radius > 0) {
@@ -17777,6 +20405,9 @@ class Engine {
         const scaleZ = Math.sqrt(worldMatrix[8] ** 2 + worldMatrix[9] ** 2 + worldMatrix[10] ** 2);
         worldRadius = localBsphere.radius * Math.max(scaleX, scaleY, scaleZ);
       }
+      if (hasAnySkin && combinedBsphere) {
+        mesh.combinedBsphere = combinedBsphere;
+      }
       mesh.addInstance(worldCenter, worldRadius);
       mesh.updateInstance(0, worldMatrix);
       mesh.static = true;
@@ -17845,6 +20476,16 @@ class Engine {
   getEntity(id) {
     return this.entityManager.get(id);
   }
+  /**
+   * Invalidate occlusion culling data and reset warmup period.
+   * Call this after scene loading or major camera teleportation to prevent
+   * incorrect occlusion culling with stale depth buffer data.
+   */
+  invalidateOcclusionCulling() {
+    if (this.renderer) {
+      this.renderer.invalidateOcclusionCulling();
+    }
+  }
   async _create() {
     let camera = new Camera(this);
     camera.updateMatrix();
@@ -17867,6 +20508,8 @@ class Engine {
   }
   async _after_create() {
     this.renderer = await RenderGraph.create(this, this.environment, this.environmentEncoding);
+    this.raycaster = new Raycaster(this);
+    await this.raycaster.initialize();
   }
   _update(dt) {
     this._updateInput();
@@ -17922,7 +20565,7 @@ class Engine {
       this.guiCanvas.height = canvas.height;
       this.guiCtx.clearRect(0, 0, canvas.width, canvas.height);
     }
-    await this.renderer.resize(canvas.width, canvas.height);
+    await this.renderer.resize(canvas.width, canvas.height, this.renderScale);
     this.resize();
     await new Promise((resolve) => setTimeout(resolve, 16));
     this._resizing = false;
@@ -18176,6 +20819,7 @@ export {
   Mesh,
   ParticleEmitter,
   ParticleSystem,
+  Raycaster,
   RenderGraph,
   Texture,
   fail