reze-engine 0.3.6 → 0.3.8

package/dist/pool-scene.js

@@ -1,1122 +0,0 @@
-// Pool scene renderer - full raymarched pool scene from pool.html
-export class PoolScene {
-    constructor(device, format, sampleCount, cameraUniformBuffer, config = {}) {
-        this.startTime = performance.now();
-        this.waterHeightTextureSize = 512; // Resolution of height map texture
-        this.waterPlaneSize = 300.0; // Size of the water plane in world units
-        this.waterPlaneSubdivisions = 128; // Number of subdivisions for the plane
-        this.moonRadius = 0.05; // Moon angular radius for shader-based rendering
-        this.device = device;
-        this.format = format;
-        this.sampleCount = sampleCount;
-        this.cameraUniformBuffer = cameraUniformBuffer;
-        this.config = {
-            cloudSharpness: config.cloudSharpness ?? 0.001,
-            windSpeed: config.windSpeed ?? [-43.0, 32.0],
-            bumpFactor: config.bumpFactor ?? 0.05,
-            bumpDistance: config.bumpDistance ?? 70.0,
-            skyColor: config.skyColor ?? [0.08, 0.08, 0.12],
-            moonlightColor: config.moonlightColor ?? [0.4, 0.4, 0.2],
-            skyByMoonlightColor: config.skyByMoonlightColor ?? [0.4, 0.2, 0.87],
-            waterColor: config.waterColor ?? [0.12, 0.13, 0.16],
-            exposure: config.exposure ?? 0.9,
-            epsilon: config.epsilon ?? 0.01,
-            marchSteps: config.marchSteps ?? 100,
-            moonPosition: config.moonPosition ?? [0, 1, 10],
-        };
-        this.moonPosition = this.config.moonPosition;
-        this.createWaterHeightTexture();
-        this.createPipeline();
-        this.createComputePipeline();
-        this.createUniformBuffer();
-        this.createWaterPlane();
-        this.createWaterPlanePipeline();
-    }
-    createWaterHeightTexture() {
-        // Create texture for water height map (RGBA16Float is filterable, we use R channel for height)
-        this.waterHeightTexture = this.device.createTexture({
-            size: [this.waterHeightTextureSize, this.waterHeightTextureSize, 1],
-            format: "rgba16float",
-            usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
-        });
-        this.waterHeightTextureView = this.waterHeightTexture.createView();
-        // Create sampler for reading the height map
-        this.waterHeightSampler = this.device.createSampler({
-            magFilter: "linear",
-            minFilter: "linear",
-            addressModeU: "repeat",
-            addressModeV: "repeat",
-        });
-    }
-    createComputePipeline() {
-        const computeShaderCode = `
-      struct Uniforms {
-        time: f32,
-        _padding1: f32,
-        resolution: vec2<f32>,
-        modelPos: vec3<f32>,
-        _padding2: f32,
-        worldBounds: vec4<f32>, // minX, minZ, maxX, maxZ
-      };
-
-      @group(0) @binding(0) var<uniform> uniforms: Uniforms;
-      @group(0) @binding(1) var heightMap: texture_storage_2d<rgba16float, write>;
-
-      // Math matrices (column-major)
-      const m: mat3x3<f32> = mat3x3<f32>(
-        vec3<f32>(0.00, -0.90, -0.60),
-        vec3<f32>(0.90, 0.36, -0.48),
-        vec3<f32>(-0.60, -0.48, 0.34)
-      );
-
-      const mr: mat2x2<f32> = mat2x2<f32>(
-        0.84147, 0.54030,
-        0.54030, -0.84147
-      );
-
-      // Hash function
-      fn hash(n: f32) -> f32 {
-        return fract(sin(n) * 43758.5453);
-      }
-
-      fn hash3(p: vec3<f32>) -> f32 {
-        var p3 = fract(p * 0.1031);
-        p3 += dot(p3, p3.yzx + 33.33);
-        return fract((p3.x + p3.y) * p3.z);
-      }
-
-      fn noise3(x: vec3<f32>) -> f32 {
-        let p = floor(x);
-        var f = fract(x);
-        f = f * f * (3.0 - 2.0 * f);
-        
-        let n = p.x + p.y * 57.0 + 113.0 * p.z;
-        return mix(
-          mix(mix(hash3(p), hash3(p + vec3<f32>(1.0, 0.0, 0.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 0.0)), hash3(p + vec3<f32>(1.0, 1.0, 0.0)), f.x), f.y),
-          mix(mix(hash3(p + vec3<f32>(0.0, 0.0, 1.0)), hash3(p + vec3<f32>(1.0, 0.0, 1.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 1.0)), hash3(p + vec3<f32>(1.0, 1.0, 1.0)), f.x), f.y), f.z
-        );
-      }
-
-      fn fbm3(p: vec3<f32>) -> f32 {
-        var f: f32 = 0.0;
-        var p_var = p;
-        f = 0.5000 * noise3(p_var);
-        p_var = m * p_var * 2.02;
-        f += 0.2500 * noise3(p_var);
-        p_var = m * p_var * 2.33;
-        f += 0.1250 * noise3(p_var);
-        p_var = m * p_var * 2.01;
-        f += 0.0625 * noise3(p_var);
-        return f / 0.9175;
-      }
-
-      fn waterHeightMap(pos: vec2<f32>, time: f32) -> f32 {
-        var posm = pos;
-        posm = mr * posm;
-        posm.x += 0.25 * time;
-        let f = fbm3(vec3<f32>(posm * 1.9, time * 0.27));
-        var height = 0.5 + 0.1 * f;
-        height += 0.13 * sin(posm.x * 6.0 + 10.0 * f);
-        
-        // Generate ripples from model position
-        let modelPos2D = vec2<f32>(uniforms.modelPos.x, uniforms.modelPos.z);
-        let d = length(pos - modelPos2D);
-        let ripple1 = 0.15 * cos(d * 50.0 - time * 4.0) * (1.0 - smoothstep(0.0, 1.5, d));
-        let ripple2 = 0.08 * cos(d * 35.0 - time * 3.0) * (1.0 - smoothstep(0.0, 2.0, d));
-        let ripple3 = 0.05 * cos(d * 25.0 - time * 2.0) * (1.0 - smoothstep(0.0, 3.0, d));
-        height += ripple1 + ripple2 + ripple3;
-        
-        return height;
-      }
-
-      @compute @workgroup_size(8, 8)
-      fn cs_main(@builtin(global_invocation_id) globalId: vec3<u32>) {
-        let time = uniforms.time + 23.0;
-        let texelCoord = vec2<i32>(globalId.xy);
-        
-        // Map texture coordinates to world space
-        let uv = vec2<f32>(globalId.xy) / vec2<f32>(${this.waterHeightTextureSize}.0);
-        let worldX = mix(uniforms.worldBounds.x, uniforms.worldBounds.z, uv.x);
-        let worldZ = mix(uniforms.worldBounds.y, uniforms.worldBounds.w, uv.y);
-        let worldPos = vec2<f32>(worldX, worldZ);
-        
-        let height = waterHeightMap(worldPos, time);
-        textureStore(heightMap, texelCoord, vec4<f32>(height, 0.0, 0.0, 1.0));
-      }
-    `;
-        const module = this.device.createShaderModule({ code: computeShaderCode });
-        this.computePipeline = this.device.createComputePipeline({
-            layout: "auto",
-            compute: {
-                module,
-                entryPoint: "cs_main",
-            },
-        });
-    }
-    createPipeline() {
-        const shaderCode = `
-      struct CameraUniforms {
-        view: mat4x4<f32>,
-        projection: mat4x4<f32>,
-        viewPos: vec3<f32>,
-        _padding: f32,
-      };
-
-      struct Uniforms {
-        time: f32,
-        _padding1: f32,
-        resolution: vec2<f32>,
-        modelPos: vec3<f32>,
-        _padding2: f32,
-      };
-
-      @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-      @group(0) @binding(1) var<uniform> uniforms: Uniforms;
-
-      struct VertexOutput {
-        @builtin(position) Position: vec4<f32>,
-        @location(0) uv: vec2<f32>,
-      };
-
-      @vertex
-      fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
-        var pos = array<vec2<f32>, 6>(
-          vec2<f32>(-1.0, -1.0), vec2<f32>(1.0, -1.0), vec2<f32>(-1.0, 1.0),
-          vec2<f32>(-1.0, 1.0), vec2<f32>(1.0, -1.0), vec2<f32>(1.0, 1.0)
-        );
-        
-        var output: VertexOutput;
-        output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
-        var uv = pos[VertexIndex] * 0.5 + 0.5;
-        output.uv = vec2<f32>(uv.x, 1.0 - uv.y);
-        return output;
-      }
-
-      // Constants
-      const CLOUDSHARPNESS: f32 = ${this.config.cloudSharpness};
-      const WINDSPEED: vec2<f32> = vec2<f32>(${this.config.windSpeed[0]}, ${this.config.windSpeed[1]});
-      const BUMPFACTOR: f32 = ${this.config.bumpFactor};
-      const BUMPDISTANCE: f32 = ${this.config.bumpDistance};
-      const SKYCOLOR: vec3<f32> = vec3<f32>(${this.config.skyColor[0]}, ${this.config.skyColor[1]}, ${this.config.skyColor[2]});
-      const MOONLIGHTCOLOR: vec3<f32> = vec3<f32>(${this.config.moonlightColor[0]}, ${this.config.moonlightColor[1]}, ${this.config.moonlightColor[2]});
-      const SKYBYMOONLIGHTCOLOR: vec3<f32> = vec3<f32>(${this.config.skyByMoonlightColor[0]}, ${this.config.skyByMoonlightColor[1]}, ${this.config.skyByMoonlightColor[2]});
-      const WATERCOLOR: vec3<f32> = vec3<f32>(${this.config.waterColor[0]}, ${this.config.waterColor[1]}, ${this.config.waterColor[2]});
-      const EXPOSURE: f32 = ${this.config.exposure};
-      const EPSILON: f32 = ${this.config.epsilon};
-      const MARCHSTEPS: i32 = ${this.config.marchSteps};
-
-      // Math matrices (column-major)
-      const m: mat3x3<f32> = mat3x3<f32>(
-        vec3<f32>(0.00, -0.90, -0.60),
-        vec3<f32>(0.90, 0.36, -0.48),
-        vec3<f32>(-0.60, -0.48, 0.34)
-      );
-
-      const mr: mat2x2<f32> = mat2x2<f32>(
-        0.84147, 0.54030,
-        0.54030, -0.84147
-      );
-
-      // Hash function
-      fn hash(n: f32) -> f32 {
-        return fract(sin(n) * 43758.5453);
-      }
-
-      // Procedural noise
-      fn hash3(p: vec3<f32>) -> f32 {
-        var p3 = fract(p * 0.1031);
-        p3 += dot(p3, p3.yzx + 33.33);
-        return fract((p3.x + p3.y) * p3.z);
-      }
-
-      fn noise3(x: vec3<f32>) -> f32 {
-        let p = floor(x);
-        var f = fract(x);
-        f = f * f * (3.0 - 2.0 * f);
-        
-        let n = p.x + p.y * 57.0 + 113.0 * p.z;
-        return mix(
-          mix(mix(hash3(p), hash3(p + vec3<f32>(1.0, 0.0, 0.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 0.0)), hash3(p + vec3<f32>(1.0, 1.0, 0.0)), f.x), f.y),
-          mix(mix(hash3(p + vec3<f32>(0.0, 0.0, 1.0)), hash3(p + vec3<f32>(1.0, 0.0, 1.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 1.0)), hash3(p + vec3<f32>(1.0, 1.0, 1.0)), f.x), f.y), f.z
-        );
-      }
-
-      fn noise2(x: vec2<f32>) -> f32 {
-        let p = floor(x);
-        var f = fract(x);
-        f = f * f * (3.0 - 2.0 * f);
-        
-        let n = p.x + p.y * 57.0;
-        return mix(
-          mix(hash(f32(n)), hash(f32(n + 1.0)), f.x),
-          mix(hash(f32(n + 57.0)), hash(f32(n + 58.0)), f.x),
-          f.y
-        );
-      }
-
-      fn fbm3(p: vec3<f32>) -> f32 {
-        var f: f32 = 0.0;
-        var p_var = p;
-        f = 0.5000 * noise3(p_var);
-        p_var = m * p_var * 2.02;
-        f += 0.2500 * noise3(p_var);
-        p_var = m * p_var * 2.33;
-        f += 0.1250 * noise3(p_var);
-        p_var = m * p_var * 2.01;
-        f += 0.0625 * noise3(p_var);
-        return f / 0.9175;
-      }
-
-      fn fbm2(p: vec2<f32>) -> f32 {
-        var f: f32 = 0.0;
-        var p_var = p;
-        f = 0.5000 * noise2(p_var);
-        p_var = mr * p_var * 2.02;
-        f += 0.2500 * noise2(p_var);
-        p_var = mr * p_var * 2.33;
-        f += 0.1250 * noise2(p_var);
-        p_var = mr * p_var * 2.01;
-        f += 0.0625 * noise2(p_var);
-        return f / 0.9175;
-      }
-
-      // Height maps
-      fn heightMap(pos: vec3<f32>) -> f32 {
-        let n = noise2(vec2<f32>(0.0, 4.2) + pos.xz * 0.14);
-        return 9.0 * (n - 0.7);
-      }
-
-      // Intersection functions
-      struct IntersectResult {
-        hit: bool,
-        dist: f32,
-      }
-
-      fn intersectPlane(ro: vec3<f32>, rd: vec3<f32>, height: f32) -> IntersectResult {
-        var result: IntersectResult;
-        result.hit = false;
-        result.dist = 0.0;
-        
-        if (rd.y == 0.0) {
-          return result;
-        }
-        
-        let d = -(ro.y - height) / rd.y;
-        let d_clamped = min(100000.0, d);
-        if (d_clamped > 0.0) {
-          result.hit = true;
-          result.dist = d_clamped;
-        }
-        return result;
-      }
-
-      fn intersectHeightMap(ro: vec3<f32>, rd: vec3<f32>, maxdist: f32) -> IntersectResult {
-        var result: IntersectResult;
-        result.hit = false;
-        result.dist = 0.0;
-        
-        var dt: f32 = 0.3;
-        var dist: f32 = 0.0;
-        
-        for (var i: i32 = 0; i < MARCHSTEPS; i++) {
-          if (result.hit || dist > maxdist) {
-            break;
-          }
-          dist += dt;
-          dt = min(dt * 1.1, 0.5);
-          let pos = ro + rd * dist;
-          if (heightMap(pos) >= pos.y) {
-            result.hit = true;
-            result.dist = dist;
-          }
-        }
-        return result;
-      }
-
-      struct SphereResult {
-        hit: bool,
-        dist: f32,
-        normal: vec3<f32>,
-      }
-
-      fn intersectSphere(ro: vec3<f32>, rd: vec3<f32>, sph: vec4<f32>) -> SphereResult {
-        var result: SphereResult;
-        result.hit = false;
-        result.dist = 0.0;
-        result.normal = vec3<f32>(0.0);
-        
-        let ds = ro - sph.xyz;
-        let bs = dot(rd, ds);
-        let cs = dot(ds, ds) - sph.w * sph.w;
-        let ts = bs * bs - cs;
-        
-        if (ts > 0.0) {
-          let ts_val = -bs - sqrt(ts);
-          if (ts_val > 0.0) {
-            result.hit = true;
-            result.dist = ts_val;
-            result.normal = normalize(((ro + ts_val * rd) - sph.xyz) / sph.w);
-          }
-        }
-        return result;
-      }
-
-      // Cloud density - simplified to always be very light
-      fn cloudDensity(rd: vec3<f32>, time: f32) -> f32 {
-        let planeResult = intersectPlane(vec3<f32>(0.0, 0.0, 0.0), rd, 500.0);
-        let intersection = rd * planeResult.dist;
-        
-        // Very light, consistent cloud cover (no time variation)
-        let cloudCover = 0.15;
-        // Simplified cloud calculation - much lighter
-        var cloud = 0.3 + 0.2 * fbm3(vec3<f32>((intersection.xz + WINDSPEED * time) * 0.001, time * 0.25));
-        
-        cloud += 0.01 * noise2(intersection.xz - WINDSPEED * time * 0.01);
-        
-        // Clamp to keep clouds very light
-        cloud = clamp(cloud, 0.0, 0.25);
-        
-        // Simplified - always light clouds, no heavy blocking
-        cloud = cloud * 0.3; // Scale down to keep very light
-        
-        return cloud;
-      }
-
-      // Sky color
-      fn skyColorFunc(rd: vec3<f32>, time: f32, screenUV: vec2<f32>) -> vec3<f32> {
-        // Moon position from config
-        let moonPos = vec3<f32>(${this.moonPosition[0]}.0, ${this.moonPosition[1]}.0, ${this.moonPosition[2]}.0);
-        let moondir = normalize(moonPos);
-        
-        // Glow follows moon position - strongest when looking directly at moon
-        let moonAngle = dot(moondir, rd);
-        let moonglow = clamp(moonAngle, 0.0, 1.0);
-        var col = SKYCOLOR * moondir.y;
-        col += 0.6 * SKYBYMOONLIGHTCOLOR * moonglow;
-        col += 0.8 * MOONLIGHTCOLOR * pow(moonglow, 35.0);
-        
-        // Moon rendering - project moon to screen space for perfect circle (like original shader)
-        // Project moon position to screen space
-        let moonWorldPos = vec4<f32>(moonPos, 1.0);
-        let moonViewPos = camera.view * moonWorldPos;
-        let moonClipPos = camera.projection * moonViewPos;
-        
-        // Only render moon if it's in front of camera
-        if (moonClipPos.w > 0.0) {
-          // Convert to NDC then to screen UV (0-1)
-          let moonNDC = moonClipPos.xy / moonClipPos.w;
-          let moonScreenUV = (moonNDC + 1.0) * 0.5;
-          // Flip Y for screen space (WebGPU has Y=0 at top)
-          let moonScreenPos = vec2<f32>(moonScreenUV.x, 1.0 - moonScreenUV.y);
-          
-          // Calculate screen-space radius based on moon's angular size
-          // moonRadius is in radians, convert to screen-space units
-          let moonScreenRadius = ${this.moonRadius * 0.15}; // Adjusted for screen space
-          let moonDist2D = length(screenUV - moonScreenPos);
-          
-          // Sharp circular moon disk (like original: length(uvInit-vec2(0.,.04))<.03)
-          let moonDisk = 1.0 - smoothstep(moonScreenRadius * 0.95, moonScreenRadius, moonDist2D);
-          let moonBrightness = 3.0;
-          let moonColor = vec3<f32>(1.0, 0.98, 0.92) * moonBrightness;
-          
-          // Render moon disk
-          col = mix(col, moonColor, moonDisk);
-          
-          // Add glow/bloom effect - extends beyond moon disk (like original sun flare)
-          let glowRadius = moonScreenRadius * 3.0;
-          let glowDist2D = moonDist2D / glowRadius;
-          let glowFactor = pow(max(0.0, 1.0 - glowDist2D), 2.0) * 1.5;
-          // Only add glow outside the moon disk
-          let glowMask = 1.0 - moonDisk;
-          col += moonColor * glowFactor * glowMask;
-        }
-        
-        // Stars only when moon is far or behind camera
-        let moonDist = acos(clamp(dot(moondir, rd), -1.0, 1.0));
-        if (moonDist > ${this.moonRadius * 3.0}) {
-          let rds = rd;
-          let v = 1.0 / (2.0 * (1.0 + rds.z));
-          let xy = vec2<f32>(rds.y * v, rds.x * v);
-          var s = noise2(rds.xz * 134.0);
-          s += noise2(rds.xz * 370.0);
-          s += noise2(rds.xz * 870.0);
-          s = pow(s, 19.0) * 0.00000001 * max(rd.y, 0.0);
-          if (s > 0.1) {
-            let backStars = vec3<f32>((1.0 - sin(xy.x * 20.0 + time * 13.0 * rds.x + xy.y * 30.0)) * 0.5 * s, s, s);
-            col += backStars;
-          }
-        }
-        
-        // Apply clouds, but don't dim the moon if it's visible
-        let cloudDens = cloudDensity(rd, time);
-        if (moonDist > 1.0) {
-          col *= (1.0 - cloudDens);
-        } else {
-          // Moon is visible - don't dim it at all, keep it bright
-          // Moon stays fully visible through clouds
-        }
-        
-        return col;
-      }
-
-      // Trace function (removed bottle intersection)
-      struct TraceResult {
-        material: i32, // 0=sky, 1=mountain, 2=water
-        intersection: vec3<f32>,
-        normal: vec3<f32>,
-        dist: f32,
-        color: vec3<f32>,
-      }
-
-      fn trace(ro: vec3<f32>, rd: vec3<f32>, currentDistance: f32, reflection: bool, time: f32) -> TraceResult {
-        var result: TraceResult;
-        result.material = 0;
-        result.dist = 100000.0;
-        result.intersection = vec3<f32>(0.0);
-        result.normal = vec3<f32>(0.0, 1.0, 0.0);
-        result.color = vec3<f32>(0.0);
-        
-        // Skip mountains and water - only render sky
-        // Water is now handled by the 3D water plane mesh
-        
-        // Always return sky color (no water intersection)
-        // Calculate screen UV for moon projection
-        let q = input.uv;
-        result.color = skyColorFunc(rd, time, q);
-        
-        return result;
-      }
-
-      @fragment
-      fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-        let time = uniforms.time + 23.0;
-        let q = input.uv;
-        var p = -1.0 + 2.0 * q;
-        p.y = -p.y; // Flip Y: WebGPU (0,0) is top-left, ShaderToy (0,0) is bottom-left
-        p.x *= uniforms.resolution.x / uniforms.resolution.y;
-        
-        // Use engine's camera to reconstruct ray direction
-        // Extract camera basis vectors from view matrix
-        let viewRight = vec3<f32>(camera.view[0].x, camera.view[1].x, camera.view[2].x);
-        let viewUp = vec3<f32>(camera.view[0].y, camera.view[1].y, camera.view[2].y);
-        let viewForward = vec3<f32>(camera.view[0].z, camera.view[1].z, camera.view[2].z);
-        
-        // Extract FOV and aspect from projection matrix
-        let f = camera.projection[1].y;
-        let aspect = f / camera.projection[0].x;
-        let fovY = 2.0 * atan(1.0 / f);
-        
-        // Compute ray direction in view space
-        let tanHalfFov = tan(fovY * 0.5);
-        let viewDir = vec3<f32>(
-          p.x * aspect * tanHalfFov,
-          p.y * tanHalfFov,
-          -1.0  // In view space, forward is -Z
-        );
-        
-        // Transform to world space
-        let rd = normalize(
-          viewDir.x * viewRight +
-          viewDir.y * viewUp +
-          (-viewDir.z) * viewForward
-        );
-        
-        // Ray origin is camera position
-        let ro = camera.viewPos;
-        
-        var traceResult = trace(ro, rd, 0.0, false, time);
-        
-        // No water reflections in background - water plane handles its own reflections
-        
-        var col = pow(traceResult.color, vec3<f32>(EXPOSURE));
-        col = clamp(col, vec3<f32>(0.0), vec3<f32>(1.0));
-        
-        col *= 0.25 + 0.75 * pow(16.0 * q.x * q.y * (1.0 - q.x) * (1.0 - q.y), 0.15);
-        
-        return vec4<f32>(col, 1.0);
-      }
-    `;
-        const module = this.device.createShaderModule({ code: shaderCode });
-        this.pipeline = this.device.createRenderPipeline({
-            layout: "auto",
-            vertex: {
-                module,
-                entryPoint: "vs_main",
-            },
-            fragment: {
-                module,
-                entryPoint: "fs_main",
-                targets: [{ format: this.format }],
-            },
-            primitive: {
-                topology: "triangle-list",
-            },
-            multisample: {
-                count: this.sampleCount,
-            },
-            depthStencil: {
-                depthWriteEnabled: false, // Background doesn't write depth - model will render on top
-                depthCompare: "always", // Always pass depth test
-                format: "depth24plus-stencil8",
-            },
-        });
-    }
-    createUniformBuffer() {
-        // Uniforms: time, padding, resX, resY, modelPos.x, modelPos.y, modelPos.z, padding
-        const uniformBufferSize = 32;
-        this.uniformBuffer = this.device.createBuffer({
-            size: uniformBufferSize,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        this.bindGroup = this.device.createBindGroup({
-            layout: this.pipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                { binding: 1, resource: { buffer: this.uniformBuffer } },
-            ],
-        });
-        // Create compute bind group
-        const computeUniformBufferSize = 48; // time, padding, resX, resY, modelPos.xyz, padding, worldBounds.xyzw
-        this.computeUniformBuffer = this.device.createBuffer({
-            size: computeUniformBufferSize,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        this.computeBindGroup = this.device.createBindGroup({
-            layout: this.computePipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.computeUniformBuffer } },
-                { binding: 1, resource: this.waterHeightTextureView },
-            ],
-        });
-    }
-    dispatchCompute(encoder, width, height, modelPos = [0, 0, 0]) {
-        const now = performance.now();
-        const time = (now - this.startTime) / 1000;
-        // Calculate world bounds for height map (centered around model position)
-        const worldSize = 50.0;
-        const worldBounds = [
-            modelPos[0] - worldSize, // minX
-            modelPos[2] - worldSize, // minZ
-            modelPos[0] + worldSize, // maxX
-            modelPos[2] + worldSize, // maxZ
-        ];
-        // Write compute uniforms: time, padding, resX, resY, modelPos.xyz, padding, worldBounds.xyzw
-        const computeUniforms = new Float32Array([
-            time,
-            0,
-            width,
-            height,
-            modelPos[0],
-            modelPos[1],
-            modelPos[2],
-            0,
-            worldBounds[0],
-            worldBounds[1],
-            worldBounds[2],
-            worldBounds[3],
-        ]);
-        this.device.queue.writeBuffer(this.computeUniformBuffer, 0, computeUniforms);
-        // Dispatch compute shader to generate water height map
-        const computePass = encoder.beginComputePass();
-        computePass.setPipeline(this.computePipeline);
-        computePass.setBindGroup(0, this.computeBindGroup);
-        computePass.dispatchWorkgroups(Math.ceil(this.waterHeightTextureSize / 8), Math.ceil(this.waterHeightTextureSize / 8), 1);
-        computePass.end();
-    }
-    createWaterPlane() {
-        const subdivisions = this.waterPlaneSubdivisions;
-        const size = this.waterPlaneSize;
-        const halfSize = size / 2.0;
-        // Generate vertices
-        const vertices = [];
-        const indices = [];
-        const step = size / subdivisions;
-        // Create grid of vertices
-        for (let z = 0; z <= subdivisions; z++) {
-            for (let x = 0; x <= subdivisions; x++) {
-                const posX = -halfSize + x * step;
-                const posZ = -halfSize + z * step;
-                const u = x / subdivisions;
-                const v = z / subdivisions;
-                // Position (x, y, z) - y will be displaced by height map in shader
-                vertices.push(posX, 15.0, posZ);
-                // UV coordinates for sampling height map
-                vertices.push(u, v);
-            }
-        }
-        // Create indices for triangles
-        for (let z = 0; z < subdivisions; z++) {
-            for (let x = 0; x < subdivisions; x++) {
-                const i = z * (subdivisions + 1) + x;
-                // First triangle
-                indices.push(i);
-                indices.push(i + 1);
-                indices.push(i + subdivisions + 1);
-                // Second triangle
-                indices.push(i + 1);
-                indices.push(i + subdivisions + 2);
-                indices.push(i + subdivisions + 1);
-            }
-        }
-        // Create vertex buffer
-        const vertexData = new Float32Array(vertices);
-        this.waterPlaneVertexBuffer = this.device.createBuffer({
-            size: vertexData.byteLength,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        });
-        this.device.queue.writeBuffer(this.waterPlaneVertexBuffer, 0, vertexData);
-        // Create index buffer
-        const indexData = new Uint32Array(indices);
-        this.waterPlaneIndexBuffer = this.device.createBuffer({
-            size: indexData.byteLength,
-            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-        });
-        this.device.queue.writeBuffer(this.waterPlaneIndexBuffer, 0, indexData);
-    }
-    createWaterPlanePipeline() {
-        const shaderCode = `
-      struct CameraUniforms {
-        view: mat4x4<f32>,
-        projection: mat4x4<f32>,
-        viewPos: vec3<f32>,
-        _padding: f32,
-      };
-
-      struct Uniforms {
-        time: f32,
-        _padding1: f32,
-        resolution: vec2<f32>,
-        modelPos: vec3<f32>,
-        _padding2: f32,
-      };
-
-      @group(0) @binding(0) var<uniform> camera: CameraUniforms;
-      @group(0) @binding(1) var<uniform> uniforms: Uniforms;
-      @group(0) @binding(2) var waterHeightSampler: sampler;
-      @group(0) @binding(3) var waterHeightTexture: texture_2d<f32>;
-
-      struct VertexInput {
-        @location(0) position: vec3<f32>,
-        @location(1) uv: vec2<f32>,
-      };
-
-      struct VertexOutput {
-        @builtin(position) Position: vec4<f32>,
-        @location(0) worldPos: vec3<f32>,
-        @location(1) uv: vec2<f32>,
-        @location(2) viewPos: vec3<f32>,
-      };
-
-      const WATER_HEIGHT_WORLD_SIZE: f32 = 50.0;
-      const WATER_HEIGHT_SCALE: f32 = 0.1; // Scale factor for height displacement
-
-      @vertex
-      fn vs_main(input: VertexInput) -> VertexOutput {
-        // Sample height map to displace vertex
-        let modelPos2D = vec2<f32>(uniforms.modelPos.x, uniforms.modelPos.z);
-        let worldPos2D = vec2<f32>(input.position.x, input.position.z);
-        let offset = worldPos2D - modelPos2D;
-        let texCoord = (offset / WATER_HEIGHT_WORLD_SIZE) * 0.5 + 0.5;
-        
-        let height = textureSampleLevel(waterHeightTexture, waterHeightSampler, texCoord, 0.0).r;
-        
-        // Displace vertex position based on height map
-        let displacedPos = vec3<f32>(
-          input.position.x,
-          input.position.y + height * WATER_HEIGHT_SCALE,
-          input.position.z
-        );
-        
-        // Transform to clip space
-        let worldPos = displacedPos;
-        let worldPos4 = vec4<f32>(worldPos, 1.0);
-        let viewPos4 = camera.view * worldPos4;
-        let clipPos = camera.projection * viewPos4;
-        
-        var output: VertexOutput;
-        output.worldPos = worldPos;
-        output.uv = input.uv;
-        output.viewPos = viewPos4.xyz;
-        output.Position = clipPos;
-        return output;
-      }
-
-      const WATERCOLOR: vec3<f32> = vec3<f32>(${this.config.waterColor[0]}, ${this.config.waterColor[1]}, ${this.config.waterColor[2]});
-      const MOONLIGHTCOLOR: vec3<f32> = vec3<f32>(${this.config.moonlightColor[0]}, ${this.config.moonlightColor[1]}, ${this.config.moonlightColor[2]});
-      const SKYCOLOR: vec3<f32> = vec3<f32>(${this.config.skyColor[0]}, ${this.config.skyColor[1]}, ${this.config.skyColor[2]});
-      const SKYBYMOONLIGHTCOLOR: vec3<f32> = vec3<f32>(${this.config.skyByMoonlightColor[0]}, ${this.config.skyByMoonlightColor[1]}, ${this.config.skyByMoonlightColor[2]});
-      const CLOUDSHARPNESS: f32 = ${this.config.cloudSharpness};
-      const WINDSPEED: vec2<f32> = vec2<f32>(${this.config.windSpeed[0]}, ${this.config.windSpeed[1]});
-      const EXPOSURE: f32 = ${this.config.exposure};
-      const EPSILON: f32 = ${this.config.epsilon};
-
-      // Math matrices (column-major)
-      const m: mat3x3<f32> = mat3x3<f32>(
-        vec3<f32>(0.00, -0.90, -0.60),
-        vec3<f32>(0.90, 0.36, -0.48),
-        vec3<f32>(-0.60, -0.48, 0.34)
-      );
-
-      // Hash function
-      fn hash(n: f32) -> f32 {
-        return fract(sin(n) * 43758.5453);
-      }
-
-      fn hash3(p: vec3<f32>) -> f32 {
-        var p3 = fract(p * 0.1031);
-        p3 += dot(p3, p3.yzx + 33.33);
-        return fract((p3.x + p3.y) * p3.z);
-      }
-
-      fn noise3(x: vec3<f32>) -> f32 {
-        let p = floor(x);
-        var f = fract(x);
-        f = f * f * (3.0 - 2.0 * f);
-        
-        let n = p.x + p.y * 57.0 + 113.0 * p.z;
-        return mix(
-          mix(mix(hash3(p), hash3(p + vec3<f32>(1.0, 0.0, 0.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 0.0)), hash3(p + vec3<f32>(1.0, 1.0, 0.0)), f.x), f.y),
-          mix(mix(hash3(p + vec3<f32>(0.0, 0.0, 1.0)), hash3(p + vec3<f32>(1.0, 0.0, 1.0)), f.x),
-            mix(hash3(p + vec3<f32>(0.0, 1.0, 1.0)), hash3(p + vec3<f32>(1.0, 1.0, 1.0)), f.x), f.y), f.z
-        );
-      }
-
-      fn noise2(x: vec2<f32>) -> f32 {
-        let p = floor(x);
-        var f = fract(x);
-        f = f * f * (3.0 - 2.0 * f);
-        
-        let n = p.x + p.y * 57.0;
-        return mix(
-          mix(hash(f32(n)), hash(f32(n + 1.0)), f.x),
-          mix(hash(f32(n + 57.0)), hash(f32(n + 58.0)), f.x),
-          f.y
-        );
-      }
-
-      fn fbm3(p: vec3<f32>) -> f32 {
-        var f: f32 = 0.0;
-        var p_var = p;
-        f = 0.5000 * noise3(p_var);
-        p_var = m * p_var * 2.02;
-        f += 0.2500 * noise3(p_var);
-        p_var = m * p_var * 2.33;
-        f += 0.1250 * noise3(p_var);
-        p_var = m * p_var * 2.01;
-        f += 0.0625 * noise3(p_var);
-        return f / 0.9175;
-      }
-
-      // Intersection functions for cloud density
-      struct IntersectResult {
-        hit: bool,
-        dist: f32,
-      }
-
-      fn intersectPlane(ro: vec3<f32>, rd: vec3<f32>, height: f32) -> IntersectResult {
-        var result: IntersectResult;
-        result.hit = false;
-        result.dist = 0.0;
-        
-        if (rd.y == 0.0) {
-          return result;
-        }
-        
-        let d = -(ro.y - height) / rd.y;
-        let d_clamped = min(100000.0, d);
-        if (d_clamped > 0.0) {
-          result.hit = true;
-          result.dist = d_clamped;
-        }
-        return result;
-      }
-
-      // Cloud density - simplified to always be very light
-      fn cloudDensity(rd: vec3<f32>, time: f32) -> f32 {
-        let planeResult = intersectPlane(vec3<f32>(0.0, 0.0, 0.0), rd, 500.0);
-        let intersection = rd * planeResult.dist;
-        
-        // Very light, consistent cloud cover (no time variation)
-        let cloudCover = 0.15;
-        // Simplified cloud calculation - much lighter
-        var cloud = 0.3 + 0.2 * fbm3(vec3<f32>((intersection.xz + WINDSPEED * time) * 0.001, time * 0.25));
-        
-        cloud += 0.01 * noise2(intersection.xz - WINDSPEED * time * 0.01);
-        
-        // Clamp to keep clouds very light
-        cloud = clamp(cloud, 0.0, 0.25);
-        
-        // Simplified - always light clouds, no heavy blocking
-        cloud = cloud * 0.3; // Scale down to keep very light
-        
-        return cloud;
-      }
-
-      struct SphereResult {
-        hit: bool,
-        dist: f32,
-        normal: vec3<f32>,
-      }
-
-      fn intersectSphere(ro: vec3<f32>, rd: vec3<f32>, sph: vec4<f32>) -> SphereResult {
-        var result: SphereResult;
-        result.hit = false;
-        result.dist = 0.0;
-        result.normal = vec3<f32>(0.0);
-        
-        let ds = ro - sph.xyz;
-        let bs = dot(rd, ds);
-        let cs = dot(ds, ds) - sph.w * sph.w;
-        let ts = bs * bs - cs;
-        
-        if (ts > 0.0) {
-          let ts_val = -bs - sqrt(ts);
-          if (ts_val > 0.0) {
-            result.hit = true;
-            result.dist = ts_val;
-            result.normal = normalize(((ro + ts_val * rd) - sph.xyz) / sph.w);
-          }
-        }
-        return result;
-      }
-
-      // Sky color function (for reflections - uses angular distance since reflections are already distorted)
-      fn skyColorFunc(rd: vec3<f32>, time: f32) -> vec3<f32> {
-        // Moon position from config
-        let moonPos = vec3<f32>(${this.moonPosition[0]}.0, ${this.moonPosition[1]}.0, ${this.moonPosition[2]}.0);
-        let moondir = normalize(moonPos);
-        
-        // Glow follows moon position - strongest when looking directly at moon
-        let moonAngle = dot(moondir, rd);
-        let moonglow = clamp(moonAngle, 0.0, 1.0);
-        var col = SKYCOLOR * moondir.y;
-        col += 0.6 * SKYBYMOONLIGHTCOLOR * moonglow;
-        col += 0.8 * MOONLIGHTCOLOR * pow(moonglow, 35.0);
-        
-        // Moon rendering - use angular distance (OK for reflections which are already distorted)
-        let moonAngularRadius = ${this.moonRadius};
-        let angleToMoon = acos(clamp(dot(moondir, rd), -1.0, 1.0));
-        let moonDist = angleToMoon / moonAngularRadius;
-        
-        // Sharp circular moon disk
-        let moonDisk = 1.0 - smoothstep(0.95, 1.0, moonDist);
-        let moonBrightness = 3.0;
-        let moonColor = vec3<f32>(1.0, 0.98, 0.92) * moonBrightness;
-        
-        // Render moon disk
-        col = mix(col, moonColor, moonDisk);
-        
-        // Add glow/bloom effect
-        let glowDist = angleToMoon / (moonAngularRadius * 2.0);
-        let glowFactor = pow(max(0.0, 1.0 - glowDist), 2.5) * 1.2;
-        let glowMask = 1.0 - moonDisk;
-        col += moonColor * glowFactor * glowMask;
-        
-        // Stars only when not looking at moon
-        if (moonDist > 1.5) {
-          let rds = rd;
-          let v = 1.0 / (2.0 * (1.0 + rds.z));
-          let xy = vec2<f32>(rds.y * v, rds.x * v);
-          var s = noise2(rds.xz * 134.0);
-          s += noise2(rds.xz * 370.0);
-          s += noise2(rds.xz * 870.0);
-          s = pow(s, 19.0) * 0.00000001 * max(rd.y, 0.0);
-          if (s > 0.1) {
-            let backStars = vec3<f32>((1.0 - sin(xy.x * 20.0 + time * 13.0 * rds.x + xy.y * 30.0)) * 0.5 * s, s, s);
-            col += backStars;
-          }
-        }
-        
-        // Apply clouds, but don't dim the moon if it's visible
-        let cloudDens = cloudDensity(rd, time);
-        if (moonDist > 1.0) {
-          col *= (1.0 - cloudDens);
-        } else {
-          // Moon is visible - don't dim it at all, keep it bright
-          // Moon stays fully visible through clouds
-        }
-        
-        return col;
-      }
-
-      fn calculateNormal(pos: vec2<f32>, time: f32) -> vec3<f32> {
-        let modelPos2D = vec2<f32>(uniforms.modelPos.x, uniforms.modelPos.z);
-        let offset = pos - modelPos2D;
-        let texCoord = (offset / WATER_HEIGHT_WORLD_SIZE) * 0.5 + 0.5;
-        
-        let dx = vec2<f32>(EPSILON, 0.0);
-        let dz = vec2<f32>(0.0, EPSILON);
-        
-        let heightL = textureSampleLevel(waterHeightTexture, waterHeightSampler, texCoord - dx * 0.5, 0.0).r;
-        let heightR = textureSampleLevel(waterHeightTexture, waterHeightSampler, texCoord + dx * 0.5, 0.0).r;
-        let heightD = textureSampleLevel(waterHeightTexture, waterHeightSampler, texCoord - dz * 0.5, 0.0).r;
-        let heightU = textureSampleLevel(waterHeightTexture, waterHeightSampler, texCoord + dz * 0.5, 0.0).r;
-        
-        let normal = vec3<f32>(
-          (heightL - heightR) * WATER_HEIGHT_SCALE / EPSILON,
-          1.0,
-          (heightD - heightU) * WATER_HEIGHT_SCALE / EPSILON
-        );
-        return normalize(normal);
-      }
-
-      @fragment
-      fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-        let time = uniforms.time + 23.0;
-        
-        // Calculate distance from camera
-        let dist = length(input.viewPos);
-        
-        // Calculate normal from height map
-        let normal = calculateNormal(input.worldPos.xz, time);
-        
-        // Calculate view direction (from water surface to camera)
-        let viewDir = normalize(camera.viewPos - input.worldPos);
-        
-        // Calculate reflection direction
-        let reflectDir = reflect(-viewDir, normal);
-        
-        // Sample sky color with clouds in reflection direction
-        let skyReflection = skyColorFunc(reflectDir, time);
-        
-        // Also sample sky color directly above (for atmospheric blending)
-        let skyColorAbove = skyColorFunc(vec3<f32>(0.0, 1.0, 0.0), time);
-        
-        // Moon position from config
-        let moonPos = vec3<f32>(${this.moonPosition[0]}.0, ${this.moonPosition[1]}.0, ${this.moonPosition[2]}.0);
-        let moondir = normalize(moonPos);
-        
-        // Calculate lighting
-        let diff = clamp(dot(normal, moondir), 0.0, 1.0);
-        
-        // Base water color with lighting - blend more with sky color
-        var col = mix(WATERCOLOR, SKYCOLOR * 1.2, 0.3) * MOONLIGHTCOLOR * diff * 1.5;
-        
-        // Add reflection (fresnel effect - more reflection at glancing angles)
-        let fresnel = pow(1.0 - max(dot(viewDir, normal), 0.0), 2.0);
-        let reflectStrength = 0.9 * fresnel;
-        col = mix(col, skyReflection, reflectStrength);
-        
-        // Distance fog - blend with sky color at distance (updated for larger plane)
-        let fogStart = 60.0;
-        let fogEnd = 200.0;
-        let fogFactor = smoothstep(fogStart, fogEnd, dist);
-        col = mix(col, skyColorAbove, fogFactor * 0.8);
-        
-        // Edge fading - fade out at the edges of the plane (updated for larger plane)
-        let edgeDistance = length(input.worldPos.xz - vec2<f32>(uniforms.modelPos.x, uniforms.modelPos.z));
-        let edgeFadeStart = 100.0;
-        let edgeFadeEnd = 180.0;
-        // Smoother, more gradual edge fade
-        let edgeFade = 1.0 - smoothstep(edgeFadeStart, edgeFadeEnd, edgeDistance);
-        
-        // Atmospheric perspective - blend more with sky at distance and edges for better integration
-        // More gradual blending for smoother transition
-        let atmosphericBlend = fogFactor * 0.7 + (1.0 - edgeFade) * 0.8;
-        col = mix(col, skyColorAbove, atmosphericBlend);
-        
-        // Alpha based on distance and edge fade (more transparent to see model through water)
-        var alpha = 0.8;
-        alpha *= edgeFade;
-        // Fade out at very far distances (updated for larger plane)
-        alpha *= (1.0 - smoothstep(180.0, 300.0, dist) * 0.5);
-        
-        // Apply exposure
-        col = pow(col, vec3<f32>(EXPOSURE));
-        col = clamp(col, vec3<f32>(0.0), vec3<f32>(1.0));
-        
-        return vec4<f32>(col, alpha);
-      }
-    `;
-        const module = this.device.createShaderModule({ code: shaderCode });
-        this.waterPlanePipeline = this.device.createRenderPipeline({
-            layout: "auto",
-            vertex: {
-                module,
-                entryPoint: "vs_main",
-                buffers: [
-                    {
-                        arrayStride: 5 * 4, // 3 floats (position) + 2 floats (uv)
-                        attributes: [
-                            { shaderLocation: 0, offset: 0, format: "float32x3" }, // position
-                            { shaderLocation: 1, offset: 12, format: "float32x2" }, // uv
-                        ],
-                    },
-                ],
-            },
-            fragment: {
-                module,
-                entryPoint: "fs_main",
-                targets: [
-                    {
-                        format: this.format,
-                        blend: {
-                            color: {
-                                srcFactor: "src-alpha",
-                                dstFactor: "one-minus-src-alpha",
-                            },
-                            alpha: {
-                                srcFactor: "one",
-                                dstFactor: "one-minus-src-alpha",
-                            },
-                        },
-                    },
-                ],
-            },
-            primitive: {
-                topology: "triangle-list",
-                cullMode: "none", // Water plane is visible from both sides
-            },
-            multisample: {
-                count: this.sampleCount,
-            },
-            depthStencil: {
-                depthWriteEnabled: false, // Don't write depth so model can show through water
-                depthCompare: "less", // Test depth to avoid rendering behind background and model
-                format: "depth24plus-stencil8",
-            },
-        });
-        // Create bind group for water plane (same as background, uses same resources)
-        this.waterPlaneBindGroup = this.device.createBindGroup({
-            layout: this.waterPlanePipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                { binding: 1, resource: { buffer: this.uniformBuffer } },
-                { binding: 2, resource: this.waterHeightSampler },
-                { binding: 3, resource: this.waterHeightTextureView },
-            ],
-        });
-    }
-    renderWaterPlane(pass, width, height, modelPos = [0, 0, 0]) {
-        const now = performance.now();
-        const time = (now - this.startTime) / 1000;
-        // Write uniforms: time, padding, resX, resY, modelPos.x, modelPos.y, modelPos.z, padding
-        const uniforms = new Float32Array([time, 0, width, height, modelPos[0], modelPos[1], modelPos[2], 0]);
-        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
-        // Render water plane
-        pass.setPipeline(this.waterPlanePipeline);
-        pass.setBindGroup(0, this.waterPlaneBindGroup);
-        pass.setVertexBuffer(0, this.waterPlaneVertexBuffer);
-        pass.setIndexBuffer(this.waterPlaneIndexBuffer, "uint32");
-        pass.drawIndexed(this.waterPlaneSubdivisions * this.waterPlaneSubdivisions * 6, 1, 0, 0);
-    }
-    render(pass, width, height, modelPos = [0, 0, 0]) {
-        const now = performance.now();
-        const time = (now - this.startTime) / 1000;
-        // Write render uniforms: time, padding, resX, resY, modelPos.x, modelPos.y, modelPos.z, padding
-        const uniforms = new Float32Array([time, 0, width, height, modelPos[0], modelPos[1], modelPos[2], 0]);
-        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);
-        // Render pool scene
-        pass.setPipeline(this.pipeline);
-        pass.setBindGroup(0, this.bindGroup);
-        pass.draw(6, 1, 0, 0);
-    }
-    getSkyColor() {
-        return this.config.skyColor;
-    }
-}