reze-engine 0.6.7 → 0.8.0

package/dist/engine.js

@@ -1,6 +1,5 @@
 import { Camera } from "./camera";
 import { Mat4, Vec3 } from "./math";
-import { PmxLoader } from "./pmx-loader";
 export const DEFAULT_ENGINE_OPTIONS = {
     ambientColor: new Vec3(0.88, 0.88, 0.88),
     directionalLightIntensity: 0.24,
@@ -12,8 +11,15 @@ export const DEFAULT_ENGINE_OPTIONS = {
     onRaycast: undefined,
     disableIK: false,
     disablePhysics: false,
+    multisampleCount: 4,
 };
 export class Engine {
+    static getInstance() {
+        if (!Engine.instance) {
+            throw new Error("Engine not ready: create Engine, await init(), then load models via Model.loadPmx().");
+        }
+        return Engine.instance;
+    }
     constructor(canvas, options) {
         this.cameraMatrixData = new Float32Array(36);
         this.lightData = new Float32Array(64);
@@ -23,6 +29,12 @@ export class Engine {
         // Constants
         this.STENCIL_EYE_VALUE = 1;
         this.groundHasReflections = false;
+        this.groundMode = "reflection";
+        this.shadowLightVPMatrix = new Float32Array(16);
+        this.shadowDrawCalls = [];
+        this.shadowVPLightX = Number.NaN;
+        this.shadowVPLightY = Number.NaN;
+        this.shadowVPLightZ = Number.NaN;
         this.cachedSkinMatricesVersion = -1;
         this.skinMatricesVersion = 0;
         // Double-tap detection
@@ -84,6 +96,7 @@ export class Engine {
             }
         };
         this.canvas = canvas;
+        this.sampleCount = options?.multisampleCount ?? DEFAULT_ENGINE_OPTIONS.multisampleCount;
         if (options) {
             this.ambientColor = options.ambientColor ?? DEFAULT_ENGINE_OPTIONS.ambientColor;
             this.directionalLightIntensity =
@@ -121,6 +134,7 @@ export class Engine {
         this.setupLighting();
         this.createPipelines();
         this.setupResize();
+        Engine.instance = this;
     }
     createRenderPipeline(config) {
         return this.device.createRenderPipeline({
@@ -379,15 +393,14 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
-        // Create ground/reflection pipeline with reflection texture support
         this.groundBindGroupLayout = this.device.createBindGroupLayout({
             label: "ground bind group layout",
             entries: [
-                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
-                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // light
-                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} }, // reflectionTexture
-                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // reflectionSampler
-                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // groundMaterial
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: {} },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
             ],
         });
         const groundPipelineLayout = this.device.createPipelineLayout({
@@ -397,97 +410,41 @@ export class Engine {
         const groundShaderModule = this.device.createShaderModule({
             label: "ground shaders",
             code: /* wgsl */ `
-        struct CameraUniforms {
-          view: mat4x4f,
-          projection: mat4x4f,
-          viewPos: vec3f,
-          _padding: f32,
-        };
-
-        struct LightUniforms {
-          ambientColor: vec4f,
-          lights: array<Light, 4>,
-        };
-
-        struct Light {
-          direction: vec4f,
-          color: vec4f,
-        };
-
-        struct GroundMaterialUniforms {
-          diffuseColor: vec3f,
-          reflectionLevel: f32,
-          fadeStart: f32,
-          fadeEnd: f32,
-          _padding1: f32,
-          _padding2: f32,
-        };
-
+        struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
+        struct Light { direction: vec4f, color: vec4f, };
+        struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
+        struct GroundMaterialUniforms { diffuseColor: vec3f, reflectionLevel: f32, fadeStart: f32, fadeEnd: f32, _a: f32, _b: f32, };
         @group(0) @binding(0) var<uniform> camera: CameraUniforms;
         @group(0) @binding(1) var<uniform> light: LightUniforms;
         @group(0) @binding(2) var reflectionTexture: texture_2d<f32>;
         @group(0) @binding(3) var reflectionSampler: sampler;
         @group(0) @binding(4) var<uniform> material: GroundMaterialUniforms;
-
         struct VertexOutput {
-          @builtin(position) position: vec4f,
-          @location(0) normal: vec3f,
-          @location(1) uv: vec2f,
-          @location(2) worldPos: vec3f,
+          @builtin(position) position: vec4f, @location(0) normal: vec3f, @location(1) uv: vec2f, @location(2) worldPos: vec3f,
         };
-
-        @vertex fn vs(
-          @location(0) position: vec3f,
-          @location(1) normal: vec3f,
-          @location(2) uv: vec2f,
-        ) -> VertexOutput {
-          var output: VertexOutput;
-          let worldPos = position;
-          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
-          output.normal = normal;
-          output.uv = uv;
-          output.worldPos = worldPos;
-          return output;
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VertexOutput {
+          var o: VertexOutput;
+          o.worldPos = position;
+          o.position = camera.projection * camera.view * vec4f(position, 1.0);
+          o.normal = normal; o.uv = uv; return o;
         }
-
         @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
           let n = normalize(input.normal);
-
+          let centerDist = length(input.worldPos.xz);
+          let t = clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0);
+          let edgeFade = 1.0 - smoothstep(0.0, 1.0, t);
           let clipPos = camera.projection * camera.view * vec4f(input.worldPos, 1.0);
           let ndcPos = clipPos.xyz / clipPos.w;
-          var reflectionUV = vec2f(ndcPos.x * 0.5 + 0.5, 0.5 - ndcPos.y * 0.5);
-
+          let reflectionUV = vec2f(ndcPos.x * 0.5 + 0.5, 0.5 - ndcPos.y * 0.5);
           let sampledReflectionColor = textureSample(reflectionTexture, reflectionSampler, reflectionUV).rgb;
-          let isValidReflection = clipPos.w > 0.0 &&
-                                  all(reflectionUV >= vec2f(0.0)) && all(reflectionUV <= vec2f(1.0));
-          var reflectionColor = select(vec3f(1.0, 1.0, 1.0), sampledReflectionColor, isValidReflection);
-
-          let distanceFromCamera = length(input.worldPos - camera.viewPos);
-          let fadeFactor = clamp((distanceFromCamera - 15.0) / 20.0, 0.0, 1.0);
-          reflectionColor *= (1.0 - fadeFactor * 0.3);
-
-          let diffuseColor = material.diffuseColor;
-          var finalColor = mix(diffuseColor, reflectionColor, material.reflectionLevel);
-
-          // Ground edge fade effect - smooth fade out at edges based on distance from center
-          let centerDist = length(input.worldPos.xz); // Distance from ground center in XZ plane
-
-          // Smoothstep for much smoother gradient transition
-          let t = clamp((centerDist - material.fadeStart) / (material.fadeEnd - material.fadeStart), 0.0, 1.0);
-          let edgeFade = 1.0 - smoothstep(0.0, 1.0, t);
-          finalColor *= edgeFade;
-
-          // Single directional light
+          let isValidReflection = clipPos.w > 0.0 && all(reflectionUV >= vec2f(0.0)) && all(reflectionUV <= vec2f(1.0));
+          let reflectionColor = select(vec3f(1.0, 1.0, 1.0), sampledReflectionColor, isValidReflection);
+          let fadeFactor = clamp((length(input.worldPos - camera.viewPos) - 15.0) / 20.0, 0.0, 1.0);
+          let refl = reflectionColor * (1.0 - fadeFactor * 0.3);
+          var finalColor = mix(material.diffuseColor, refl, material.reflectionLevel) * edgeFade;
           let l = -light.lights[0].direction.xyz;
-          let nDotL = max(dot(n, l), 0.0);
-          let intensity = light.lights[0].color.w;
-          let radiance = light.lights[0].color.xyz * intensity;
-          let lightAccum = light.ambientColor.xyz + radiance * nDotL;
-
-          // Apply lighting to the blended color
-          let litColor = finalColor * lightAccum;
-
-          return vec4f(litColor, edgeFade);
+          let lightAccum = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, l), 0.0);
+          return vec4f(finalColor * lightAccum, edgeFade);
         }
       `,
         });
@@ -498,12 +455,123 @@ export class Engine {
             vertexBuffers: fullVertexBuffers,
             fragmentTarget: standardBlend,
             cullMode: "back",
+            depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
+        });
+        this.shadowLightVPBuffer = this.device.createBuffer({
+            size: 64,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        const shadowBindGroupLayout = this.device.createBindGroupLayout({
+            label: "shadow depth bind layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } },
+            ],
+        });
+        const shadowShader = this.device.createShaderModule({
+            label: "shadow depth",
+            code: /* wgsl */ `
+        struct LightVP { viewProj: mat4x4f, };
+        @group(0) @binding(0) var<uniform> lp: LightVP;
+        @group(0) @binding(1) var<storage, read> skinMats: array<mat4x4f>;
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f,
+          @location(3) joints0: vec4<u32>, @location(4) weights0: vec4<f32>) -> @builtin(position) vec4f {
+          let pos4 = vec4f(position, 1.0);
+          let ws = weights0.x + weights0.y + weights0.z + weights0.w;
+          let inv = select(1.0, 1.0 / ws, ws > 0.0001);
+          let nw = select(vec4f(1.0,0.0,0.0,0.0), weights0 * inv, ws > 0.0001);
+          var sp = vec4f(0.0);
+          for (var i = 0u; i < 4u; i++) { sp += (skinMats[joints0[i]] * pos4) * nw[i]; }
+          return lp.viewProj * vec4f(sp.xyz, 1.0);
+        }
+      `,
+        });
+        this.shadowDepthPipeline = this.device.createRenderPipeline({
+            label: "shadow depth pipeline",
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [shadowBindGroupLayout] }),
+            vertex: { module: shadowShader, entryPoint: "vs", buffers: fullVertexBuffers },
+            primitive: { cullMode: "none" },
             depthStencil: {
-                format: "depth24plus-stencil8",
+                format: "depth32float",
                 depthWriteEnabled: true,
                 depthCompare: "less-equal",
+                depthBias: 2,
+                depthBiasSlopeScale: 1.5,
+                depthBiasClamp: 0,
             },
         });
+        this.shadowComparisonSampler = this.device.createSampler({
+            compare: "less",
+            magFilter: "linear",
+            minFilter: "linear",
+        });
+        this.groundShadowBindGroupLayout = this.device.createBindGroupLayout({
+            label: "ground shadow layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "depth" } },
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "comparison" } },
+                { binding: 4, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+            ],
+        });
+        const groundShadowShader = this.device.createShaderModule({
+            label: "ground shadow",
+            code: /* wgsl */ `
+        struct CameraUniforms { view: mat4x4f, projection: mat4x4f, viewPos: vec3f, _p: f32, };
+        struct Light { direction: vec4f, color: vec4f, };
+        struct LightUniforms { ambientColor: vec4f, lights: array<Light, 4>, };
+        struct GroundShadowMat { diffuseColor: vec3f, fadeStart: f32, fadeEnd: f32, shadowStrength: f32, pcfTexel: f32, _y: f32, };
+        struct LightVP { viewProj: mat4x4f, };
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var shadowMap: texture_depth_2d;
+        @group(0) @binding(3) var shadowSampler: sampler_comparison;
+        @group(0) @binding(4) var<uniform> material: GroundShadowMat;
+        @group(0) @binding(5) var<uniform> lightVP: LightVP;
+        struct VO { @builtin(position) position: vec4f, @location(0) worldPos: vec3f, @location(1) normal: vec3f, };
+        @vertex fn vs(@location(0) position: vec3f, @location(1) normal: vec3f, @location(2) uv: vec2f) -> VO {
+          var o: VO; o.worldPos = position; o.normal = normal;
+          o.position = camera.projection * camera.view * vec4f(position, 1.0); return o;
+        }
+        @fragment fn fs(i: VO) -> @location(0) vec4f {
+          let n = normalize(i.normal);
+          let centerDist = length(i.worldPos.xz);
+          let edgeFade = 1.0 - smoothstep(0.0, 1.0, clamp((centerDist - material.fadeStart) / max(material.fadeEnd - material.fadeStart, 0.001), 0.0, 1.0));
+          let lclip = lightVP.viewProj * vec4f(i.worldPos, 1.0);
+          let ndc = lclip.xyz / max(lclip.w, 1e-6);
+          let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);
+          let suv_c = clamp(suv, vec2f(0.02), vec2f(0.98));
+          let st = material.pcfTexel;
+          let compareZ = ndc.z - 0.0035;
+          var vis = 0.0;
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(0.0, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, -st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, 0.0), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c, compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, 0.0), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(-st, st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(0.0, st), compareZ);
+          vis += textureSampleCompare(shadowMap, shadowSampler, suv_c + vec2f(st, st), compareZ);
+          vis *= 0.1111111;
+          let sun = light.ambientColor.xyz + light.lights[0].color.xyz * light.lights[0].color.w * max(dot(n, -light.lights[0].direction.xyz), 0.0);
+          let dark = (1.0 - vis) * material.shadowStrength;
+          let lit = material.diffuseColor * sun * (1.0 - dark * 0.65);
+          return vec4f(lit * edgeFade, edgeFade);
+        }
+      `,
+        });
+        this.groundShadowPipeline = this.createRenderPipeline({
+            label: "ground shadow pipeline",
+            layout: this.device.createPipelineLayout({ bindGroupLayouts: [this.groundShadowBindGroupLayout] }),
+            shaderModule: groundShadowShader,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
+            depthStencil: { format: "depth24plus-stencil8", depthWriteEnabled: true, depthCompare: "less-equal" },
+        });
         // Create reflection pipeline (multisampled version for higher quality)
         this.reflectionPipeline = this.createRenderPipeline({
             label: "reflection pipeline",
@@ -894,44 +962,33 @@ export class Engine {
             reflectionTextureSize: 1024,
             fadeStart: 5.0,
             fadeEnd: 60.0,
+            mode: "reflection",
+            shadowMapSize: 4096,
+            shadowStrength: 1.0,
             ...options,
         };
-        // Create ground geometry
+        this.groundMode = opts.mode;
+        this.drawCalls = this.drawCalls.filter((d) => d.type !== "ground");
         this.createGroundGeometry(opts.width, opts.height);
-        this.createGroundMaterialBuffer(opts.diffuseColor, opts.reflectionLevel, opts.fadeStart, opts.fadeEnd);
-        this.createReflectionTexture(opts.reflectionTextureSize);
+        if (opts.mode === "reflection") {
+            this.createGroundMaterialBuffer(opts.diffuseColor, opts.reflectionLevel, opts.fadeStart, opts.fadeEnd);
+            this.createReflectionTexture(opts.reflectionTextureSize);
+        }
+        else {
+            this.createShadowGroundResources(opts.shadowMapSize, opts.diffuseColor, opts.fadeStart, opts.fadeEnd, opts.shadowStrength);
+        }
         this.groundHasReflections = true;
         this.drawCalls.push({
             type: "ground",
-            count: 6, // 2 triangles, 3 indices each
+            count: 6,
             firstIndex: 0,
-            bindGroup: this.groundReflectionBindGroup,
+            bindGroup: (opts.mode === "reflection" ? this.groundReflectionBindGroup : this.groundShadowBindGroup),
             materialName: "Ground",
         });
     }
     updateLightBuffer() {
         this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData);
     }
-    async loadAnimation(url) {
-        if (!this.currentModel)
-            return;
-        await this.currentModel.loadVmd(url);
-    }
-    playAnimation() {
-        this.currentModel?.playAnimation();
-    }
-    stopAnimation() {
-        this.currentModel?.stopAnimation();
-    }
-    pauseAnimation() {
-        this.currentModel?.pauseAnimation();
-    }
-    seekAnimation(time) {
-        this.currentModel?.seekAnimation(time);
-    }
-    getAnimationProgress() {
-        return this.currentModel?.getAnimationProgress() ?? { current: 0, duration: 0, percentage: 0 };
-    }
     getStats() {
         return { ...this.stats };
     }
@@ -955,7 +1012,9 @@ export class Engine {
     }
     dispose() {
         this.stopRenderLoop();
-        this.stopAnimation();
+        this.currentModel?.stopAnimation();
+        if (Engine.instance === this)
+            Engine.instance = null;
         if (this.camera)
             this.camera.detachControl();
         // Remove raycasting event listeners
@@ -968,41 +1027,18 @@ export class Engine {
             this.resizeObserver = null;
         }
     }
-    // Step 6: Load PMX model file
-    async loadModel(path) {
-        const pathParts = path.split("/");
+    // Single active model; prefer Model.loadPmx() so load + register stay paired
+    async registerModel(model, pmxPath) {
+        const pathParts = pmxPath.split("/");
         pathParts.pop();
-        const dir = pathParts.join("/") + "/";
-        this.modelDir = dir;
-        const model = await PmxLoader.load(path);
-        // Clear cached skinned vertices when loading a new model
+        this.modelDir = pathParts.join("/") + "/";
         this.cachedSkinnedVertices = undefined;
         this.cachedSkinMatricesVersion = -1;
         await this.setupModelBuffers(model);
     }
-    rotateBones(boneRotations, durationMs) {
-        this.currentModel?.rotateBones(boneRotations, durationMs);
-    }
-    // moveBones now takes relative translations (VMD-style) by default
-    moveBones(boneTranslations, durationMs) {
-        this.currentModel?.moveBones(boneTranslations, durationMs);
-    }
-    setPose(rotations, translations, morphs) {
-        this.currentModel?.setPose(rotations, translations, morphs);
-    }
-    resetAllBones() {
-        this.currentModel?.resetAllBones();
-    }
-    resetAllMorphs() {
-        this.currentModel?.resetAllMorphs();
-    }
-    setMorphWeight(name, weight, durationMs) {
-        if (!this.currentModel)
-            return;
-        this.currentModel.setMorphWeight(name, weight, durationMs);
-        if (!durationMs || durationMs === 0) {
-            this.vertexBufferNeedsUpdate = true;
-        }
+    // After morph/vertex edits, queues GPU vertex upload on next frame
+    markVertexBufferDirty() {
+        this.vertexBufferNeedsUpdate = true;
     }
     setMaterialVisible(name, visible) {
         if (visible) {
@@ -1023,15 +1059,6 @@ export class Engine {
     isMaterialVisible(name) {
         return !this.hiddenMaterials.has(name);
     }
-    getBones() {
-        return this.currentModel?.getSkeleton().bones.map((bone) => bone.name) ?? [];
-    }
-    getMorphs() {
-        return this.currentModel?.getMorphing().morphs.map((morph) => morph.name) ?? [];
-    }
-    getMaterials() {
-        return this.currentModel?.getMaterials().map((material) => material.name) ?? [];
-    }
     // IK control
     get disableIK() {
         return this._disableIK;
@@ -1175,27 +1202,24 @@ export class Engine {
         });
         this.device.queue.writeBuffer(this.groundIndexBuffer, 0, indices);
     }
-    createGroundMaterialBuffer(diffuseColor = new Vec3(1, 1, 1), reflectionLevel = 0.5, fadeStart = 5.0, fadeEnd = 60.0) {
-        const materialData = new Float32Array([
-            diffuseColor.x,
-            diffuseColor.y,
-            diffuseColor.z, // diffuseColor (12 bytes)
-            reflectionLevel, // reflectionLevel (4 bytes)
-            fadeStart, // fadeStart (4 bytes)
-            fadeEnd, // fadeEnd (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-            0, // padding (4 bytes)
-        ]);
+    createGroundMaterialBuffer(diffuseColor, reflectionLevel, fadeStart, fadeEnd) {
+        const u = new Float32Array(8);
+        u[0] = diffuseColor.x;
+        u[1] = diffuseColor.y;
+        u[2] = diffuseColor.z;
+        u[3] = reflectionLevel;
+        u[4] = fadeStart;
+        u[5] = fadeEnd;
+        u[6] = 0;
+        u[7] = 0;
         this.groundMaterialUniformBuffer = this.device.createBuffer({
             label: "ground material uniform buffer",
-            size: materialData.byteLength,
+            size: 64,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
-        this.device.queue.writeBuffer(this.groundMaterialUniformBuffer, 0, materialData);
+        this.device.queue.writeBuffer(this.groundMaterialUniformBuffer, 0, u);
     }
-    createReflectionTexture(size = 1024) {
+    createReflectionTexture(size) {
         this.groundReflectionTexture = this.device.createTexture({
             label: "ground reflection texture",
             size: [size, size],
@@ -1216,19 +1240,83 @@ export class Engine {
             format: "depth24plus-stencil8",
             usage: GPUTextureUsage.RENDER_ATTACHMENT,
         });
-        // Create a bind group for the reflection texture that can be used in the ground material
         this.groundReflectionBindGroup = this.device.createBindGroup({
             label: "ground reflection bind group",
             layout: this.groundBindGroupLayout,
             entries: [
                 { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                 { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                { binding: 2, resource: this.groundReflectionResolveTexture.createView() }, // Use resolve texture for sampling
+                { binding: 2, resource: this.groundReflectionResolveTexture.createView() },
                 { binding: 3, resource: this.materialSampler },
                 { binding: 4, resource: { buffer: this.groundMaterialUniformBuffer } },
             ],
         });
     }
+    createShadowGroundResources(shadowMapSize, diffuseColor, fadeStart, fadeEnd, shadowStrength) {
+        this.shadowMapTexture = this.device.createTexture({
+            label: "shadow map",
+            size: [shadowMapSize, shadowMapSize],
+            format: "depth32float",
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.shadowMapDepthView = this.shadowMapTexture.createView();
+        const gb = new Float32Array(8);
+        gb[0] = diffuseColor.x;
+        gb[1] = diffuseColor.y;
+        gb[2] = diffuseColor.z;
+        gb[3] = fadeStart;
+        gb[4] = fadeEnd;
+        gb[5] = shadowStrength;
+        gb[6] = 1.2 / shadowMapSize;
+        gb[7] = 0;
+        this.groundShadowMaterialBuffer = this.device.createBuffer({ size: 64, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+        this.device.queue.writeBuffer(this.groundShadowMaterialBuffer, 0, gb);
+        this.shadowBindGroup = this.device.createBindGroup({
+            label: "shadow bind",
+            layout: this.shadowDepthPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.shadowLightVPBuffer } },
+                { binding: 1, resource: { buffer: this.skinMatrixBuffer } },
+            ],
+        });
+        this.groundShadowBindGroup = this.device.createBindGroup({
+            label: "ground shadow bind",
+            layout: this.groundShadowBindGroupLayout,
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                { binding: 2, resource: this.shadowMapDepthView },
+                { binding: 3, resource: this.shadowComparisonSampler },
+                { binding: 4, resource: { buffer: this.groundShadowMaterialBuffer } },
+                { binding: 5, resource: { buffer: this.shadowLightVPBuffer } },
+            ],
+        });
+    }
+    updateShadowLightVP() {
+        const lx = this.lightData[4];
+        const ly = this.lightData[5];
+        const lz = this.lightData[6];
+        if (lx === this.shadowVPLightX && ly === this.shadowVPLightY && lz === this.shadowVPLightZ)
+            return;
+        this.shadowVPLightX = lx;
+        this.shadowVPLightY = ly;
+        this.shadowVPLightZ = lz;
+        const dir = new Vec3(lx, ly, lz);
+        if (dir.length() < 1e-6) {
+            dir.x = 0.35;
+            dir.y = -1;
+            dir.z = 0.2;
+        }
+        else
+            dir.normalize();
+        const target = new Vec3(0, 11, 0);
+        const eye = new Vec3(target.x - dir.x * 72, target.y - dir.y * 72, target.z - dir.z * 72);
+        const view = Mat4.lookAt(eye, target, new Vec3(0, 1, 0));
+        const proj = Mat4.orthographicLh(-72, 72, -72, 72, 1, 140);
+        const vp = proj.multiply(view);
+        this.shadowLightVPMatrix.set(vp.values);
+        this.device.queue.writeBuffer(this.shadowLightVPBuffer, 0, this.shadowLightVPMatrix);
+    }
     async setupMaterials(model) {
         const materials = model.getMaterials();
         if (materials.length === 0) {
@@ -1372,6 +1460,11 @@ export class Engine {
             }
             currentIndexOffset += indexCount;
         }
+        this.shadowDrawCalls.length = 0;
+        for (const d of this.drawCalls) {
+            if (d.type === "opaque" || d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes")
+                this.shadowDrawCalls.push(d);
+        }
     }
     createMaterialUniformBuffer(label, alpha, isOverEyes, diffuseColor, ambientColor, specularColor, shininess) {
         const data = new Float32Array(20);
@@ -1466,13 +1559,11 @@ export class Engine {
         }
     }
     renderGround(pass) {
-        if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer) {
+        if (!this.groundHasReflections || !this.groundVertexBuffer || !this.groundIndexBuffer)
             return;
-        }
-        if (this.groundReflectionTexture) {
+        if (this.groundMode === "reflection" && this.groundReflectionTexture)
             this.renderReflectionTexture();
-        }
-        pass.setPipeline(this.groundPipeline);
+        pass.setPipeline(this.groundMode === "reflection" ? this.groundPipeline : this.groundShadowPipeline);
         pass.setVertexBuffer(0, this.groundVertexBuffer);
         pass.setIndexBuffer(this.groundIndexBuffer, "uint16");
         for (const draw of this.drawCalls) {
@@ -1481,8 +1572,6 @@ export class Engine {
                 pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
             }
         }
-        // // Restore model index buffer for subsequent rendering
-        // pass.setIndexBuffer(this.indexBuffer!, "uint32")
     }
     renderReflectionTexture() {
         if (!this.groundReflectionTexture)
@@ -1789,10 +1878,35 @@ export class Engine {
                 this.updateVertexBuffer();
                 this.vertexBufferNeedsUpdate = false;
             }
-            // Update skin matrices buffer
             this.updateSkinMatrices();
-            // Use single encoder for render
+            if (this.groundMode === "shadow")
+                this.updateShadowLightVP();
             const encoder = this.device.createCommandEncoder();
+            if (this.groundMode === "shadow" &&
+                this.currentModel &&
+                this.shadowMapDepthView &&
+                this.shadowBindGroup) {
+                const sp = encoder.beginRenderPass({
+                    colorAttachments: [],
+                    depthStencilAttachment: {
+                        view: this.shadowMapDepthView,
+                        depthClearValue: 1.0,
+                        depthLoadOp: "clear",
+                        depthStoreOp: "store",
+                    },
+                });
+                sp.setPipeline(this.shadowDepthPipeline);
+                sp.setBindGroup(0, this.shadowBindGroup);
+                sp.setVertexBuffer(0, this.vertexBuffer);
+                sp.setVertexBuffer(1, this.jointsBuffer);
+                sp.setVertexBuffer(2, this.weightsBuffer);
+                sp.setIndexBuffer(this.indexBuffer, "uint32");
+                for (const draw of this.shadowDrawCalls) {
+                    if (this.shouldRenderDrawCall(draw))
+                        sp.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
+                sp.end();
+            }
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
             if (this.currentModel) {
                 pass.setVertexBuffer(0, this.vertexBuffer);
@@ -1822,7 +1936,6 @@ export class Engine {
                 }
                 this.drawOutlines(pass, true);
             }
-            // Pass 4: Ground (with reflections)
             if (this.groundHasReflections) {
                 this.renderGround(pass);
             }
@@ -1937,3 +2050,4 @@ export class Engine {
         this.device.queue.writeBuffer(this.skinMatrixBuffer, 0, transformedMatrices);
     }
 }
+Engine.instance = null;