reze-engine 0.3.6 → 0.3.7

package/dist/engine_ts.js

@@ -0,0 +1,1575 @@
+import { Camera } from "./camera";
+import { Quat, Vec3 } from "reze-mmd";
+import { Quat as QuatMath } from "./math";
+import { PmxLoader } from "./pmx-loader";
+import { Player } from "./player";
+export class Engine {
+    constructor(canvas, options) {
+        this.cameraMatrixData = new Float32Array(36);
+        this.cameraDistance = 26.6;
+        this.cameraTarget = new Vec3(0, 12.5, 0);
+        this.lightData = new Float32Array(4);
+        this.resizeObserver = null;
+        this.sampleCount = 4;
+        // Constants
+        this.STENCIL_EYE_VALUE = 1;
+        this.BLOOM_DOWNSCALE_FACTOR = 2;
+        // Ambient light settings
+        this.ambientColor = new Vec3(1.0, 1.0, 1.0);
+        // Bloom settings
+        this.bloomThreshold = Engine.DEFAULT_BLOOM_THRESHOLD;
+        this.bloomIntensity = Engine.DEFAULT_BLOOM_INTENSITY;
+        // Rim light settings
+        this.rimLightIntensity = Engine.DEFAULT_RIM_LIGHT_INTENSITY;
+        this.currentModel = null;
+        this.modelDir = "";
+        this.physics = null;
+        this.textureCache = new Map();
+        this.vertexBufferNeedsUpdate = false;
+        // Unified draw call list
+        this.drawCalls = [];
+        this.lastFpsUpdate = performance.now();
+        this.framesSinceLastUpdate = 0;
+        this.lastFrameTime = performance.now();
+        this.frameTimeSum = 0;
+        this.frameTimeCount = 0;
+        this.stats = {
+            fps: 0,
+            frameTime: 0,
+        };
+        this.animationFrameId = null;
+        this.renderLoopCallback = null;
+        this.player = new Player();
+        this.hasAnimation = false; // Set to true when loadAnimation is called
+        this.canvas = canvas;
+        if (options) {
+            this.ambientColor = options.ambientColor ?? new Vec3(1.0, 1.0, 1.0);
+            this.bloomIntensity = options.bloomIntensity ?? Engine.DEFAULT_BLOOM_INTENSITY;
+            this.rimLightIntensity = options.rimLightIntensity ?? Engine.DEFAULT_RIM_LIGHT_INTENSITY;
+            this.cameraDistance = options.cameraDistance ?? Engine.DEFAULT_CAMERA_DISTANCE;
+            this.cameraTarget = options.cameraTarget ?? Engine.DEFAULT_CAMERA_TARGET;
+        }
+    }
+    // Step 1: Get WebGPU device and context
+    async init() {
+        const adapter = await navigator.gpu?.requestAdapter();
+        const device = await adapter?.requestDevice();
+        if (!device) {
+            throw new Error("WebGPU is not supported in this browser.");
+        }
+        this.device = device;
+        const context = this.canvas.getContext("webgpu");
+        if (!context) {
+            throw new Error("Failed to get WebGPU context.");
+        }
+        this.context = context;
+        this.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+        this.context.configure({
+            device: this.device,
+            format: this.presentationFormat,
+            alphaMode: "premultiplied",
+        });
+        this.setupCamera();
+        this.setupLighting();
+        this.createPipelines();
+        this.createBloomPipelines();
+        this.setupResize();
+    }
+    createRenderPipeline(config) {
+        return this.device.createRenderPipeline({
+            label: config.label,
+            layout: config.layout,
+            vertex: {
+                module: config.shaderModule,
+                buffers: config.vertexBuffers,
+            },
+            fragment: config.fragmentTarget
+                ? {
+                    module: config.shaderModule,
+                    entryPoint: config.fragmentEntryPoint,
+                    targets: [config.fragmentTarget],
+                }
+                : undefined,
+            primitive: { cullMode: config.cullMode ?? "none" },
+            depthStencil: config.depthStencil,
+            multisample: config.multisample ?? { count: this.sampleCount },
+        });
+    }
+    createPipelines() {
+        this.materialSampler = this.device.createSampler({
+            magFilter: "linear",
+            minFilter: "linear",
+            addressModeU: "repeat",
+            addressModeV: "repeat",
+        });
+        // Shared vertex buffer layouts
+        const fullVertexBuffers = [
+            {
+                arrayStride: 8 * 4,
+                attributes: [
+                    { shaderLocation: 0, offset: 0, format: "float32x3" },
+                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                    { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
+                ],
+            },
+            {
+                arrayStride: 4 * 2,
+                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+            },
+            {
+                arrayStride: 4,
+                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+            },
+        ];
+        const outlineVertexBuffers = [
+            {
+                arrayStride: 8 * 4,
+                attributes: [
+                    { shaderLocation: 0, offset: 0, format: "float32x3" },
+                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                ],
+            },
+            {
+                arrayStride: 4 * 2,
+                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+            },
+            {
+                arrayStride: 4,
+                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+            },
+        ];
+        const depthOnlyVertexBuffers = [
+            {
+                arrayStride: 8 * 4,
+                attributes: [
+                    { shaderLocation: 0, offset: 0, format: "float32x3" },
+                    { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                ],
+            },
+            {
+                arrayStride: 4 * 2,
+                attributes: [{ shaderLocation: 3, offset: 0, format: "uint16x4" }],
+            },
+            {
+                arrayStride: 4,
+                attributes: [{ shaderLocation: 4, offset: 0, format: "unorm8x4" }],
+            },
+        ];
+        const standardBlend = {
+            format: this.presentationFormat,
+            blend: {
+                color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                },
+                alpha: {
+                    srcFactor: "one",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                },
+            },
+        };
+        const shaderModule = this.device.createShaderModule({
+            label: "model shaders",
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct LightUniforms {
+          ambientColor: vec3f,
+        };
+
+        struct MaterialUniforms {
+          alpha: f32,
+          alphaMultiplier: f32,
+          rimIntensity: f32,
+          _padding1: f32,
+          rimColor: vec3f,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise
+        };
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) normal: vec3f,
+          @location(1) uv: vec2f,
+          @location(2) worldPos: vec3f,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> light: LightUniforms;
+        @group(0) @binding(2) var diffuseTexture: texture_2d<f32>;
+        @group(0) @binding(3) var diffuseSampler: sampler;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+        @group(0) @binding(5) var<uniform> material: MaterialUniforms;
+
+        @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>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          output.position = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          output.normal = normalize(skinnedNrm);
+          output.uv = uv;
+          output.worldPos = worldPos;
+          return output;
+        }
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          // Early alpha test - discard before expensive calculations
+          var finalAlpha = material.alpha * material.alphaMultiplier;
+          if (material.isOverEyes > 0.5) {
+            finalAlpha *= 0.5; // Hair over eyes gets 50% alpha
+          }
+          if (finalAlpha < 0.001) {
+            discard;
+          }
+          
+          let n = normalize(input.normal);
+          let albedo = textureSample(diffuseTexture, diffuseSampler, input.uv).rgb;
+
+          let lightAccum = light.ambientColor;
+          
+          // Rim light calculation
+          let viewDir = normalize(camera.viewPos - input.worldPos);
+          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
+          rimFactor = rimFactor * rimFactor; // Optimized: direct multiply instead of pow(x, 2.0)
+          let rimLight = material.rimColor * material.rimIntensity * rimFactor;
+          
+          let color = albedo * lightAccum + rimLight;
+          
+          return vec4f(color, finalAlpha);
+        }
+      `,
+        });
+        // Create explicit bind group layout for all pipelines using the main shader
+        this.mainBindGroupLayout = this.device.createBindGroupLayout({
+            label: "main material 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: {} }, // diffuseTexture
+                { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }, // diffuseSampler
+                { binding: 4, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
+                { binding: 5, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+            ],
+        });
+        const mainPipelineLayout = this.device.createPipelineLayout({
+            label: "main pipeline layout",
+            bindGroupLayouts: [this.mainBindGroupLayout],
+        });
+        this.modelPipeline = this.createRenderPipeline({
+            label: "model pipeline",
+            layout: mainPipelineLayout,
+            shaderModule,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "none",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+            },
+        });
+        // Create bind group layout for outline pipelines
+        this.outlineBindGroupLayout = this.device.createBindGroupLayout({
+            label: "outline bind group layout",
+            entries: [
+                { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // camera
+                { binding: 1, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
+                { binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: "read-only-storage" } }, // skinMats
+            ],
+        });
+        const outlinePipelineLayout = this.device.createPipelineLayout({
+            label: "outline pipeline layout",
+            bindGroupLayouts: [this.outlineBindGroupLayout],
+        });
+        const outlineShaderModule = this.device.createShaderModule({
+            label: "outline shaders",
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        struct MaterialUniforms {
+          edgeColor: vec4f,
+          edgeSize: f32,
+          isOverEyes: f32, // 1.0 if rendering over eyes, 0.0 otherwise (for hair outlines)
+          _padding1: f32,
+          _padding2: f32,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(1) var<uniform> material: MaterialUniforms;
+        @group(0) @binding(2) var<storage, read> skinMats: array<mat4x4f>;
+
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+        };
+
+        @vertex fn vs(
+          @location(0) position: vec3f,
+          @location(1) normal: vec3f,
+          @location(3) joints0: vec4<u32>,
+          @location(4) weights0: vec4<f32>
+        ) -> VertexOutput {
+          var output: VertexOutput;
+          let pos4 = vec4f(position, 1.0);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          var skinnedNrm = vec3f(0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+            let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);
+            skinnedNrm += (r3 * normal) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          let worldNormal = normalize(skinnedNrm);
+          
+          // MMD invert hull: expand vertices outward along normals
+          let scaleFactor = 0.01;
+          let expandedPos = worldPos + worldNormal * material.edgeSize * scaleFactor;
+          output.position = camera.projection * camera.view * vec4f(expandedPos, 1.0);
+          return output;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          var color = material.edgeColor;
+          
+          if (material.isOverEyes > 0.5) {
+            color.a *= 0.5; // Hair outlines over eyes get 50% alpha
+          }
+          
+          return color;
+        }
+      `,
+        });
+        this.outlinePipeline = this.createRenderPipeline({
+            label: "outline pipeline",
+            layout: outlinePipelineLayout,
+            shaderModule: outlineShaderModule,
+            vertexBuffers: outlineVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+            },
+        });
+        // Hair outline pipeline
+        this.hairOutlinePipeline = this.createRenderPipeline({
+            label: "hair outline pipeline",
+            layout: outlinePipelineLayout,
+            shaderModule: outlineShaderModule,
+            vertexBuffers: outlineVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "back",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: false,
+                depthCompare: "less-equal",
+                depthBias: -0.0001,
+                depthBiasSlopeScale: 0.0,
+                depthBiasClamp: 0.0,
+            },
+        });
+        // Eye overlay pipeline (renders after opaque, writes stencil)
+        this.eyePipeline = this.createRenderPipeline({
+            label: "eye overlay pipeline",
+            layout: mainPipelineLayout,
+            shaderModule,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTarget: standardBlend,
+            cullMode: "front",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+                depthBias: -0.00005,
+                depthBiasSlopeScale: 0.0,
+                depthBiasClamp: 0.0,
+                stencilFront: {
+                    compare: "always",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "replace",
+                },
+                stencilBack: {
+                    compare: "always",
+                    failOp: "keep",
+                    depthFailOp: "keep",
+                    passOp: "replace",
+                },
+            },
+        });
+        // Depth-only shader for hair pre-pass (reduces overdraw by early depth rejection)
+        const depthOnlyShaderModule = this.device.createShaderModule({
+            label: "depth only shader",
+            code: /* wgsl */ `
+        struct CameraUniforms {
+          view: mat4x4f,
+          projection: mat4x4f,
+          viewPos: vec3f,
+          _padding: f32,
+        };
+
+        @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+        @group(0) @binding(4) var<storage, read> skinMats: array<mat4x4f>;
+
+        @vertex fn vs(
+          @location(0) position: vec3f,
+          @location(1) normal: vec3f,
+          @location(3) joints0: vec4<u32>,
+          @location(4) weights0: vec4<f32>
+        ) -> @builtin(position) vec4f {
+          let pos4 = vec4f(position, 1.0);
+          
+          // Branchless weight normalization (avoids GPU branch divergence)
+          let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;
+          let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);
+          let normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);
+          
+          var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);
+          for (var i = 0u; i < 4u; i++) {
+            let j = joints0[i];
+            let w = normalizedWeights[i];
+            let m = skinMats[j];
+            skinnedPos += (m * pos4) * w;
+          }
+          let worldPos = skinnedPos.xyz;
+          let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);
+          return clipPos;
+        }
+
+        @fragment fn fs() -> @location(0) vec4f {
+          return vec4f(0.0, 0.0, 0.0, 0.0); // Transparent - color writes disabled via writeMask
+        }
+      `,
+        });
+        // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
+        this.hairDepthPipeline = this.createRenderPipeline({
+            label: "hair depth pre-pass",
+            layout: mainPipelineLayout,
+            shaderModule: depthOnlyShaderModule,
+            vertexBuffers: depthOnlyVertexBuffers,
+            fragmentTarget: {
+                format: this.presentationFormat,
+                writeMask: 0,
+            },
+            fragmentEntryPoint: "fs",
+            cullMode: "front",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+                depthBias: 0.0,
+                depthBiasSlopeScale: 0.0,
+                depthBiasClamp: 0.0,
+            },
+        });
+        // Hair pipelines for rendering over eyes vs non-eyes (only differ in stencil compare mode)
+        const createHairPipeline = (isOverEyes) => {
+            return this.createRenderPipeline({
+                label: `hair pipeline (${isOverEyes ? "over eyes" : "over non-eyes"})`,
+                layout: mainPipelineLayout,
+                shaderModule,
+                vertexBuffers: fullVertexBuffers,
+                fragmentTarget: standardBlend,
+                cullMode: "front",
+                depthStencil: {
+                    format: "depth24plus-stencil8",
+                    depthWriteEnabled: false,
+                    depthCompare: "less-equal",
+                    stencilFront: {
+                        compare: isOverEyes ? "equal" : "not-equal",
+                        failOp: "keep",
+                        depthFailOp: "keep",
+                        passOp: "keep",
+                    },
+                    stencilBack: {
+                        compare: isOverEyes ? "equal" : "not-equal",
+                        failOp: "keep",
+                        depthFailOp: "keep",
+                        passOp: "keep",
+                    },
+                },
+            });
+        };
+        this.hairPipelineOverEyes = createHairPipeline(true);
+        this.hairPipelineOverNonEyes = createHairPipeline(false);
+    }
+    // Create bloom post-processing pipelines
+    createBloomPipelines() {
+        // Bloom extraction shader (extracts bright areas)
+        const bloomExtractShader = this.device.createShaderModule({
+            label: "bloom extract",
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          // Generate fullscreen quad from vertex index
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomExtractUniforms {
+          threshold: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> extractUniforms: BloomExtractUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let color = textureSample(inputTexture, inputSampler, input.uv);
+          // Extract bright areas above threshold
+          let threshold = extractUniforms.threshold;
+          let bloom = max(vec3f(0.0), color.rgb - vec3f(threshold)) / max(0.001, 1.0 - threshold);
+          return vec4f(bloom, color.a);
+        }
+      `,
+        });
+        // Bloom blur shader (gaussian blur - can be used for both horizontal and vertical)
+        const bloomBlurShader = this.device.createShaderModule({
+            label: "bloom blur",
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BlurUniforms {
+          direction: vec2f,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+        };
+
+        @group(0) @binding(0) var inputTexture: texture_2d<f32>;
+        @group(0) @binding(1) var inputSampler: sampler;
+        @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
+
+        // 3-tap gaussian blur using bilinear filtering trick (40% fewer texture fetches!)
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
+          
+          // Bilinear optimization: leverage hardware filtering to sample between pixels
+          // Original 5-tap: weights [0.06136, 0.24477, 0.38774, 0.24477, 0.06136] at offsets [-2, -1, 0, 1, 2]
+          // Optimized 3-tap: combine adjacent samples using weighted offsets
+          let weight0 = 0.38774; // Center sample
+          let weight1 = 0.24477 + 0.06136; // Combined outer samples = 0.30613
+          let offset1 = (0.24477 * 1.0 + 0.06136 * 2.0) / weight1; // Weighted position = 1.2
+          
+          var result = textureSample(inputTexture, inputSampler, input.uv) * weight0;
+          let offsetVec = offset1 * texelSize * blurUniforms.direction;
+          result += textureSample(inputTexture, inputSampler, input.uv + offsetVec) * weight1;
+          result += textureSample(inputTexture, inputSampler, input.uv - offsetVec) * weight1;
+          
+          return result;
+        }
+      `,
+        });
+        // Bloom composition shader (combines original scene with bloom)
+        const bloomComposeShader = this.device.createShaderModule({
+            label: "bloom compose",
+            code: /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) uv: vec2f,
+        };
+
+        @vertex fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var output: VertexOutput;
+          let x = f32((vertexIndex << 1u) & 2u) * 2.0 - 1.0;
+          let y = f32(vertexIndex & 2u) * 2.0 - 1.0;
+          output.position = vec4f(x, y, 0.0, 1.0);
+          output.uv = vec2f(x * 0.5 + 0.5, 1.0 - (y * 0.5 + 0.5));
+          return output;
+        }
+
+        struct BloomComposeUniforms {
+          intensity: f32,
+          _padding1: f32,
+          _padding2: f32,
+          _padding3: f32,
+          _padding4: f32,
+          _padding5: f32,
+          _padding6: f32,
+          _padding7: f32,
+        };
+
+        @group(0) @binding(0) var sceneTexture: texture_2d<f32>;
+        @group(0) @binding(1) var sceneSampler: sampler;
+        @group(0) @binding(2) var bloomTexture: texture_2d<f32>;
+        @group(0) @binding(3) var bloomSampler: sampler;
+        @group(0) @binding(4) var<uniform> composeUniforms: BloomComposeUniforms;
+
+        @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
+          let scene = textureSample(sceneTexture, sceneSampler, input.uv);
+          let bloom = textureSample(bloomTexture, bloomSampler, input.uv);
+          // Additive blending with intensity control
+          let result = scene.rgb + bloom.rgb * composeUniforms.intensity;
+          return vec4f(result, scene.a);
+        }
+      `,
+        });
+        // Create uniform buffer for blur direction (minimum 32 bytes for WebGPU)
+        const blurDirectionBuffer = this.device.createBuffer({
+            label: "blur direction",
+            size: 32, // Minimum 32 bytes required for uniform buffers in WebGPU
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // Create uniform buffer for bloom intensity (minimum 32 bytes for WebGPU)
+        const bloomIntensityBuffer = this.device.createBuffer({
+            label: "bloom intensity",
+            size: 32, // Minimum 32 bytes required for uniform buffers in WebGPU
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // Create uniform buffer for bloom threshold (minimum 32 bytes for WebGPU)
+        const bloomThresholdBuffer = this.device.createBuffer({
+            label: "bloom threshold",
+            size: 32, // Minimum 32 bytes required for uniform buffers in WebGPU
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        // Set default bloom values
+        const intensityData = new Float32Array(8); // f32 + 7 padding floats = 8 floats = 32 bytes
+        intensityData[0] = this.bloomIntensity;
+        this.device.queue.writeBuffer(bloomIntensityBuffer, 0, intensityData);
+        const thresholdData = new Float32Array(8); // f32 + 7 padding floats = 8 floats = 32 bytes
+        thresholdData[0] = this.bloomThreshold;
+        this.device.queue.writeBuffer(bloomThresholdBuffer, 0, thresholdData);
+        // Create linear sampler for post-processing
+        const linearSampler = this.device.createSampler({
+            magFilter: "linear",
+            minFilter: "linear",
+            addressModeU: "clamp-to-edge",
+            addressModeV: "clamp-to-edge",
+        });
+        // Bloom extraction pipeline
+        this.bloomExtractPipeline = this.device.createRenderPipeline({
+            label: "bloom extract",
+            layout: "auto",
+            vertex: {
+                module: bloomExtractShader,
+                entryPoint: "vs",
+            },
+            fragment: {
+                module: bloomExtractShader,
+                entryPoint: "fs",
+                targets: [{ format: this.presentationFormat }],
+            },
+            primitive: { topology: "triangle-list" },
+        });
+        // Bloom blur pipeline
+        this.bloomBlurPipeline = this.device.createRenderPipeline({
+            label: "bloom blur",
+            layout: "auto",
+            vertex: {
+                module: bloomBlurShader,
+                entryPoint: "vs",
+            },
+            fragment: {
+                module: bloomBlurShader,
+                entryPoint: "fs",
+                targets: [{ format: this.presentationFormat }],
+            },
+            primitive: { topology: "triangle-list" },
+        });
+        // Bloom composition pipeline
+        this.bloomComposePipeline = this.device.createRenderPipeline({
+            label: "bloom compose",
+            layout: "auto",
+            vertex: {
+                module: bloomComposeShader,
+                entryPoint: "vs",
+            },
+            fragment: {
+                module: bloomComposeShader,
+                entryPoint: "fs",
+                targets: [{ format: this.presentationFormat }],
+            },
+            primitive: { topology: "triangle-list" },
+        });
+        // Store buffers and sampler for later use
+        this.blurDirectionBuffer = blurDirectionBuffer;
+        this.bloomIntensityBuffer = bloomIntensityBuffer;
+        this.bloomThresholdBuffer = bloomThresholdBuffer;
+        this.linearSampler = linearSampler;
+    }
+    setupBloom(width, height) {
+        const bloomWidth = Math.floor(width / this.BLOOM_DOWNSCALE_FACTOR);
+        const bloomHeight = Math.floor(height / this.BLOOM_DOWNSCALE_FACTOR);
+        this.bloomExtractTexture = this.device.createTexture({
+            label: "bloom extract",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.bloomBlurTexture1 = this.device.createTexture({
+            label: "bloom blur 1",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        this.bloomBlurTexture2 = this.device.createTexture({
+            label: "bloom blur 2",
+            size: [bloomWidth, bloomHeight],
+            format: this.presentationFormat,
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+        // Create bloom bind groups
+        this.bloomExtractBindGroup = this.device.createBindGroup({
+            layout: this.bloomExtractPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.sceneRenderTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.bloomThresholdBuffer } },
+            ],
+        });
+        this.bloomBlurHBindGroup = this.device.createBindGroup({
+            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.bloomExtractTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+            ],
+        });
+        this.bloomBlurVBindGroup = this.device.createBindGroup({
+            layout: this.bloomBlurPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.bloomBlurTexture1.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: { buffer: this.blurDirectionBuffer } },
+            ],
+        });
+        this.bloomComposeBindGroup = this.device.createBindGroup({
+            layout: this.bloomComposePipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.sceneRenderTexture.createView() },
+                { binding: 1, resource: this.linearSampler },
+                { binding: 2, resource: this.bloomBlurTexture2.createView() },
+                { binding: 3, resource: this.linearSampler },
+                { binding: 4, resource: { buffer: this.bloomIntensityBuffer } },
+            ],
+        });
+    }
+    // Step 3: Setup canvas resize handling
+    setupResize() {
+        this.resizeObserver = new ResizeObserver(() => this.handleResize());
+        this.resizeObserver.observe(this.canvas);
+        this.handleResize();
+    }
+    handleResize() {
+        const displayWidth = this.canvas.clientWidth;
+        const displayHeight = this.canvas.clientHeight;
+        const dpr = window.devicePixelRatio || 1;
+        const width = Math.floor(displayWidth * dpr);
+        const height = Math.floor(displayHeight * dpr);
+        if (!this.multisampleTexture || this.canvas.width !== width || this.canvas.height !== height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+            this.multisampleTexture = this.device.createTexture({
+                label: "multisample render target",
+                size: [width, height],
+                sampleCount: this.sampleCount,
+                format: this.presentationFormat,
+                usage: GPUTextureUsage.RENDER_ATTACHMENT,
+            });
+            this.depthTexture = this.device.createTexture({
+                label: "depth texture",
+                size: [width, height],
+                sampleCount: this.sampleCount,
+                format: "depth24plus-stencil8",
+                usage: GPUTextureUsage.RENDER_ATTACHMENT,
+            });
+            // Create scene render texture (non-multisampled for post-processing)
+            this.sceneRenderTexture = this.device.createTexture({
+                label: "scene render texture",
+                size: [width, height],
+                format: this.presentationFormat,
+                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+            });
+            // Setup bloom textures and bind groups
+            this.setupBloom(width, height);
+            const depthTextureView = this.depthTexture.createView();
+            // Cache the scene render texture view (only recreate on resize)
+            this.sceneRenderTextureView = this.sceneRenderTexture.createView();
+            // Render scene to texture instead of directly to canvas
+            const colorAttachment = this.sampleCount > 1
+                ? {
+                    view: this.multisampleTexture.createView(),
+                    resolveTarget: this.sceneRenderTextureView,
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                }
+                : {
+                    view: this.sceneRenderTextureView,
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                };
+            this.renderPassDescriptor = {
+                label: "renderPass",
+                colorAttachments: [colorAttachment],
+                depthStencilAttachment: {
+                    view: depthTextureView,
+                    depthClearValue: 1.0,
+                    depthLoadOp: "clear",
+                    depthStoreOp: "store",
+                    stencilClearValue: 0,
+                    stencilLoadOp: "clear",
+                    stencilStoreOp: "discard", // Discard stencil after frame to save bandwidth (we only use it during rendering)
+                },
+            };
+            this.camera.aspect = width / height;
+        }
+    }
+    // Step 4: Create camera and uniform buffer
+    setupCamera() {
+        this.cameraUniformBuffer = this.device.createBuffer({
+            label: "camera uniforms",
+            size: 40 * 4,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.camera = new Camera(Math.PI, Math.PI / 2.5, this.cameraDistance, this.cameraTarget);
+        this.camera.aspect = this.canvas.width / this.canvas.height;
+        this.camera.attachControl(this.canvas);
+    }
+    // Step 5: Create lighting buffers
+    setupLighting() {
+        this.lightUniformBuffer = this.device.createBuffer({
+            label: "light uniforms",
+            size: 4 * 4, // 4 floats: ambientColor vec3f (3) + padding (1)
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.setAmbientColor(this.ambientColor);
+        this.device.queue.writeBuffer(this.lightUniformBuffer, 0, this.lightData);
+    }
+    setAmbientColor(color) {
+        // Layout: ambientColor (0-2), padding (3)
+        this.lightData[0] = color.x;
+        this.lightData[1] = color.y;
+        this.lightData[2] = color.z;
+        this.lightData[3] = 0.0; // Padding for vec3f alignment
+    }
+    async loadAnimation(url) {
+        await this.player.loadVmd(url);
+        this.hasAnimation = true;
+        // Show first frame (time 0) immediately
+        if (this.currentModel) {
+            const initialPose = this.player.getPoseAtTime(0);
+            this.resetBonesAndPhysics(initialPose, true);
+        }
+    }
+    playAnimation() {
+        if (!this.hasAnimation || !this.currentModel)
+            return;
+        const wasPaused = this.player.isPausedState;
+        const wasPlaying = this.player.isPlayingState;
+        // Only reset pose and physics if starting from beginning (not resuming)
+        if (!wasPlaying && !wasPaused) {
+            const initialPose = this.player.getPoseAtTime(0);
+            this.resetBonesAndPhysics(initialPose, true);
+        }
+        // Start playback (or resume if paused)
+        this.player.play();
+    }
+    stopAnimation() {
+        this.player.stop();
+    }
+    pauseAnimation() {
+        this.player.pause();
+    }
+    seekAnimation(time) {
+        if (!this.currentModel || !this.hasAnimation)
+            return;
+        this.player.seek(time);
+        // Immediately apply pose at seeked time (don't reset bones without keyframes)
+        const pose = this.player.getPoseAtTime(time);
+        this.resetBonesAndPhysics(pose, false);
+    }
+    getAnimationProgress() {
+        return this.player.getProgress();
+    }
+    /**
+     * Apply animation pose to model
+     */
+    applyPose(pose) {
+        if (!this.currentModel)
+            return;
+        // Apply bone rotations
+        if (pose.boneRotations.size > 0) {
+            const boneNames = Array.from(pose.boneRotations.keys());
+            const rotations = Array.from(pose.boneRotations.values()).map((quat) => new Quat(quat.x, quat.y, quat.z, quat.w));
+            this.rotateBones(boneNames, rotations, 0);
+        }
+        // Apply bone translations
+        if (pose.boneTranslations.size > 0) {
+            const boneNames = Array.from(pose.boneTranslations.keys());
+            const translations = Array.from(pose.boneTranslations.values()).map((vec3) => new Vec3(vec3.x, vec3.y, vec3.z));
+            this.moveBones(boneNames, translations, 0);
+        }
+        // Apply morph weights
+        for (const [morphName, weight] of pose.morphWeights.entries()) {
+            this.setMorphWeight(morphName, weight, 0);
+        }
+    }
+    /**
+     * Reset bones and physics to match a given pose
+     * @param pose The pose to apply
+     * @param resetBonesWithoutKeyframes If true, reset bones that don't have keyframes in the pose to identity
+     */
+    resetBonesAndPhysics(pose, resetBonesWithoutKeyframes = false) {
+        if (!this.currentModel)
+            return;
+        this.applyPose(pose);
+        // Reset bones without keyframes if requested (for initial animation setup)
+        if (resetBonesWithoutKeyframes) {
+            const skeleton = this.currentModel.getSkeleton();
+            const bonesWithPose = new Set(pose.boneRotations.keys());
+            const bonesToReset = [];
+            for (const bone of skeleton.bones) {
+                if (!bonesWithPose.has(bone.name)) {
+                    bonesToReset.push(bone.name);
+                }
+            }
+            if (bonesToReset.length > 0) {
+                const identityQuat = new Quat(0, 0, 0, 1);
+                const identityQuats = new Array(bonesToReset.length).fill(identityQuat);
+                this.rotateBones(bonesToReset, identityQuats, 0);
+            }
+        }
+        // Update model pose and physics
+        this.currentModel.evaluatePose();
+        // if (this.physics) {
+        //   const worldMats = this.currentModel.getBoneWorldMatrices()
+        //   this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices())
+        //   // Compute and upload skin matrices immediately
+        //   this.computeSkinMatrices()
+        // }
+    }
+    getStats() {
+        return { ...this.stats };
+    }
+    runRenderLoop(callback) {
+        this.renderLoopCallback = callback || null;
+        const loop = () => {
+            this.render();
+            if (this.renderLoopCallback) {
+                this.renderLoopCallback();
+            }
+            this.animationFrameId = requestAnimationFrame(loop);
+        };
+        this.animationFrameId = requestAnimationFrame(loop);
+    }
+    stopRenderLoop() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+        this.renderLoopCallback = null;
+    }
+    dispose() {
+        this.stopRenderLoop();
+        this.stopAnimation();
+        if (this.camera)
+            this.camera.detachControl();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    // Step 6: Load PMX model file
+    async loadModel(path) {
+        const pathParts = path.split("/");
+        pathParts.pop();
+        const dir = pathParts.join("/") + "/";
+        this.modelDir = dir;
+        const model = await PmxLoader.load(path);
+        // this.physics = new Physics(model.getRigidbodies(), model.getJoints())
+        await this.setupModelBuffers(model);
+    }
+    rotateBones(bones, rotations, durationMs) {
+        this.currentModel?.rotateBones(bones, rotations.map((quat) => new QuatMath(quat.x, quat.y, quat.z, quat.w)), durationMs);
+    }
+    // moveBones now takes relative translations (VMD-style) by default
+    moveBones(bones, relativeTranslations, durationMs) {
+        this.currentModel?.moveBones(bones, relativeTranslations, durationMs);
+    }
+    setMorphWeight(name, weight, durationMs) {
+        if (!this.currentModel)
+            return;
+        this.currentModel.setMorphWeight(name, weight, durationMs);
+        if (!durationMs || durationMs === 0) {
+            this.vertexBufferNeedsUpdate = true;
+        }
+    }
+    updateVertexBuffer() {
+        if (!this.currentModel || !this.vertexBuffer)
+            return;
+        const vertices = this.currentModel.getVertices();
+        if (!vertices || vertices.length === 0)
+            return;
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, vertices);
+    }
+    // Step 7: Create vertex, index, and joint buffers
+    async setupModelBuffers(model) {
+        this.currentModel = model;
+        const vertices = this.currentModel.getVertices();
+        const skinning = this.currentModel.getSkinning();
+        const boneCount = this.currentModel.getSkeleton().bones.length;
+        this.vertexBuffer = this.device.createBuffer({
+            label: "model vertex buffer",
+            size: vertices.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(this.vertexBuffer, 0, new Float32Array(vertices));
+        this.jointsBuffer = this.device.createBuffer({
+            label: "joints buffer",
+            size: skinning.joints.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(this.jointsBuffer, 0, skinning.joints.buffer, skinning.joints.byteOffset, skinning.joints.byteLength);
+        this.weightsBuffer = this.device.createBuffer({
+            label: "weights buffer",
+            size: skinning.weights.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(this.weightsBuffer, 0, skinning.weights.buffer, skinning.weights.byteOffset, skinning.weights.byteLength);
+        const matrixSize = boneCount * 16 * 4;
+        this.skinMatrixBuffer = this.device.createBuffer({
+            label: "skin matrices",
+            size: Math.max(256, matrixSize),
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        const indices = this.currentModel.getIndices();
+        if (indices) {
+            this.indexBuffer = this.device.createBuffer({
+                label: "model index buffer",
+                size: indices.byteLength,
+                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+            });
+            this.device.queue.writeBuffer(this.indexBuffer, 0, new Uint32Array(indices));
+        }
+        else {
+            throw new Error("Model has no index buffer");
+        }
+        await this.setupMaterials(this.currentModel);
+    }
+    async setupMaterials(model) {
+        const materials = model.getMaterials();
+        if (materials.length === 0) {
+            throw new Error("Model has no materials");
+        }
+        const textures = model.getTextures();
+        const loadTextureByIndex = async (texIndex) => {
+            if (texIndex < 0 || texIndex >= textures.length) {
+                return null;
+            }
+            const path = this.modelDir + textures[texIndex].path;
+            const texture = await this.createTextureFromPath(path);
+            return texture;
+        };
+        this.drawCalls = [];
+        let currentIndexOffset = 0;
+        for (const mat of materials) {
+            const indexCount = mat.vertexCount;
+            if (indexCount === 0)
+                continue;
+            const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex);
+            if (!diffuseTexture)
+                throw new Error(`Material "${mat.name}" has no diffuse texture`);
+            const materialAlpha = mat.diffuse[3];
+            const isTransparent = materialAlpha < 1.0 - Engine.TRANSPARENCY_EPSILON;
+            const materialUniformBuffer = this.createMaterialUniformBuffer(mat.name, materialAlpha, 0.0);
+            // Create bind groups using the shared bind group layout - All pipelines (main, eye, hair multiply, hair opaque) use the same shader and layout
+            const bindGroup = this.device.createBindGroup({
+                label: `material bind group: ${mat.name}`,
+                layout: this.mainBindGroupLayout,
+                entries: [
+                    { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                    { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                    { binding: 2, resource: diffuseTexture.createView() },
+                    { binding: 3, resource: this.materialSampler },
+                    { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                    { binding: 5, resource: { buffer: materialUniformBuffer } },
+                ],
+            });
+            if (indexCount > 0) {
+                if (mat.isEye) {
+                    this.drawCalls.push({ type: "eye", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
+                }
+                else if (mat.isHair) {
+                    // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
+                    const createHairBindGroup = (isOverEyes) => {
+                        const buffer = this.createMaterialUniformBuffer(`${mat.name} (${isOverEyes ? "over eyes" : "over non-eyes"})`, materialAlpha, isOverEyes ? 1.0 : 0.0);
+                        return this.device.createBindGroup({
+                            label: `material bind group (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                            layout: this.mainBindGroupLayout,
+                            entries: [
+                                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                                { binding: 1, resource: { buffer: this.lightUniformBuffer } },
+                                { binding: 2, resource: diffuseTexture.createView() },
+                                { binding: 3, resource: this.materialSampler },
+                                { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                                { binding: 5, resource: { buffer: buffer } },
+                            ],
+                        });
+                    };
+                    const bindGroupOverEyes = createHairBindGroup(true);
+                    const bindGroupOverNonEyes = createHairBindGroup(false);
+                    this.drawCalls.push({
+                        type: "hair-over-eyes",
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: bindGroupOverEyes,
+                    });
+                    this.drawCalls.push({
+                        type: "hair-over-non-eyes",
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: bindGroupOverNonEyes,
+                    });
+                }
+                else if (isTransparent) {
+                    this.drawCalls.push({ type: "transparent", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
+                }
+                else {
+                    this.drawCalls.push({ type: "opaque", count: indexCount, firstIndex: currentIndexOffset, bindGroup });
+                }
+            }
+            // Edge flag is at bit 4 (0x10) in PMX format
+            if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
+                const materialUniformData = new Float32Array([
+                    mat.edgeColor[0],
+                    mat.edgeColor[1],
+                    mat.edgeColor[2],
+                    mat.edgeColor[3],
+                    mat.edgeSize,
+                    0,
+                    0,
+                    0,
+                ]);
+                const materialUniformBuffer = this.createUniformBuffer(`outline material uniform: ${mat.name}`, materialUniformData);
+                const outlineBindGroup = this.device.createBindGroup({
+                    label: `outline bind group: ${mat.name}`,
+                    layout: this.outlineBindGroupLayout,
+                    entries: [
+                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                        { binding: 1, resource: { buffer: materialUniformBuffer } },
+                        { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
+                    ],
+                });
+                if (indexCount > 0) {
+                    const outlineType = mat.isEye
+                        ? "eye-outline"
+                        : mat.isHair
+                            ? "hair-outline"
+                            : isTransparent
+                                ? "transparent-outline"
+                                : "opaque-outline";
+                    this.drawCalls.push({
+                        type: outlineType,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
+                        bindGroup: outlineBindGroup,
+                    });
+                }
+            }
+            currentIndexOffset += indexCount;
+        }
+    }
+    createMaterialUniformBuffer(label, alpha, isOverEyes) {
+        const data = new Float32Array(8);
+        data.set([alpha, 1.0, this.rimLightIntensity, 0.0, 1.0, 1.0, 1.0, isOverEyes]);
+        return this.createUniformBuffer(`material uniform: ${label}`, data);
+    }
+    createUniformBuffer(label, data) {
+        const buffer = this.device.createBuffer({
+            label,
+            size: data.byteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this.device.queue.writeBuffer(buffer, 0, data);
+        return buffer;
+    }
+    async createTextureFromPath(path) {
+        const cached = this.textureCache.get(path);
+        if (cached) {
+            return cached;
+        }
+        try {
+            const response = await fetch(path);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            const imageBitmap = await createImageBitmap(await response.blob(), {
+                premultiplyAlpha: "none",
+                colorSpaceConversion: "none",
+            });
+            const texture = this.device.createTexture({
+                label: `texture: ${path}`,
+                size: [imageBitmap.width, imageBitmap.height],
+                format: "rgba8unorm",
+                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+            });
+            this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [
+                imageBitmap.width,
+                imageBitmap.height,
+            ]);
+            this.textureCache.set(path, texture);
+            return texture;
+        }
+        catch {
+            return null;
+        }
+    }
+    // Helper: Render eyes with stencil writing (for post-alpha-eye effect)
+    renderEyes(pass) {
+        pass.setPipeline(this.eyePipeline);
+        pass.setStencilReference(this.STENCIL_EYE_VALUE);
+        for (const draw of this.drawCalls) {
+            if (draw.type === "eye") {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+    }
+    // Helper: Render hair with post-alpha-eye effect (depth pre-pass + stencil-based shading + outlines)
+    renderHair(pass) {
+        // Hair depth pre-pass (reduces overdraw via early depth rejection)
+        const hasHair = this.drawCalls.some((d) => d.type === "hair-over-eyes" || d.type === "hair-over-non-eyes");
+        if (hasHair) {
+            pass.setPipeline(this.hairDepthPipeline);
+            for (const draw of this.drawCalls) {
+                if (draw.type === "hair-over-eyes" || draw.type === "hair-over-non-eyes") {
+                    pass.setBindGroup(0, draw.bindGroup);
+                    pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                }
+            }
+        }
+        // Hair shading (split by stencil for transparency over eyes)
+        const hairOverEyes = this.drawCalls.filter((d) => d.type === "hair-over-eyes");
+        if (hairOverEyes.length > 0) {
+            pass.setPipeline(this.hairPipelineOverEyes);
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
+            for (const draw of hairOverEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        const hairOverNonEyes = this.drawCalls.filter((d) => d.type === "hair-over-non-eyes");
+        if (hairOverNonEyes.length > 0) {
+            pass.setPipeline(this.hairPipelineOverNonEyes);
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
+            for (const draw of hairOverNonEyes) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+        // Hair outlines
+        const hairOutlines = this.drawCalls.filter((d) => d.type === "hair-outline");
+        if (hairOutlines.length > 0) {
+            pass.setPipeline(this.hairOutlinePipeline);
+            for (const draw of hairOutlines) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+    }
+    // Render strategy: 1) Opaque non-eye/hair 2) Eyes (stencil=1) 3) Hair (depth pre-pass + split by stencil) 4) Transparent 5) Bloom
+    render() {
+        if (this.multisampleTexture && this.camera && this.device) {
+            const currentTime = performance.now();
+            const deltaTime = this.lastFrameTime > 0 ? (currentTime - this.lastFrameTime) / 1000 : 0.016;
+            this.lastFrameTime = currentTime;
+            this.updateCameraUniforms();
+            this.updateRenderTarget();
+            // // Animate VMD animation if playing
+            // if (this.hasAnimation && this.currentModel) {
+            //   const pose = this.player.update(currentTime)
+            //   if (pose) {
+            //     this.applyPose(pose)
+            //   }
+            // }
+            // // Update model pose first (this may update morph weights via tweens)
+            // // We need to do this before creating the encoder to ensure vertex buffer is ready
+            // if (this.currentModel) {
+            //   const hasActiveMorphTweens = this.currentModel.evaluatePose()
+            //   if (hasActiveMorphTweens) {
+            //     this.vertexBufferNeedsUpdate = true
+            //   }
+            // }
+            // // Update vertex buffer if morphs changed
+            // if (this.vertexBufferNeedsUpdate) {
+            //   this.updateVertexBuffer()
+            //   this.vertexBufferNeedsUpdate = false
+            // }
+            // Update model pose (computes skin matrices on CPU)
+            this.updateModelPose(deltaTime);
+            // Use single encoder for render
+            const encoder = this.device.createCommandEncoder();
+            const pass = encoder.beginRenderPass(this.renderPassDescriptor);
+            if (this.currentModel) {
+                pass.setVertexBuffer(0, this.vertexBuffer);
+                pass.setVertexBuffer(1, this.jointsBuffer);
+                pass.setVertexBuffer(2, this.weightsBuffer);
+                pass.setIndexBuffer(this.indexBuffer, "uint32");
+                // Pass 1: Opaque
+                pass.setPipeline(this.modelPipeline);
+                for (const draw of this.drawCalls) {
+                    if (draw.type === "opaque") {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    }
+                }
+                // Pass 2: Eyes (writes stencil value for hair to test against)
+                this.renderEyes(pass);
+                this.drawOutlines(pass, false);
+                // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
+                this.renderHair(pass);
+                // Pass 4: Transparent
+                pass.setPipeline(this.modelPipeline);
+                for (const draw of this.drawCalls) {
+                    if (draw.type === "transparent") {
+                        pass.setBindGroup(0, draw.bindGroup);
+                        pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                    }
+                }
+                this.drawOutlines(pass, true);
+            }
+            pass.end();
+            this.device.queue.submit([encoder.finish()]);
+            this.applyBloom();
+            this.updateStats(performance.now() - currentTime);
+        }
+    }
+    applyBloom() {
+        if (!this.sceneRenderTexture || !this.bloomExtractTexture) {
+            return;
+        }
+        // Update bloom parameters
+        const thresholdData = new Float32Array(8);
+        thresholdData[0] = this.bloomThreshold;
+        this.device.queue.writeBuffer(this.bloomThresholdBuffer, 0, thresholdData);
+        const intensityData = new Float32Array(8);
+        intensityData[0] = this.bloomIntensity;
+        this.device.queue.writeBuffer(this.bloomIntensityBuffer, 0, intensityData);
+        const encoder = this.device.createCommandEncoder();
+        // Extract bright areas
+        const extractPass = encoder.beginRenderPass({
+            label: "bloom extract",
+            colorAttachments: [
+                {
+                    view: this.bloomExtractTexture.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+        });
+        extractPass.setPipeline(this.bloomExtractPipeline);
+        extractPass.setBindGroup(0, this.bloomExtractBindGroup);
+        extractPass.draw(6, 1, 0, 0);
+        extractPass.end();
+        // Horizontal blur
+        const hBlurData = new Float32Array(4);
+        hBlurData[0] = 1.0;
+        hBlurData[1] = 0.0;
+        this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, hBlurData);
+        const blurHPass = encoder.beginRenderPass({
+            label: "bloom blur horizontal",
+            colorAttachments: [
+                {
+                    view: this.bloomBlurTexture1.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+        });
+        blurHPass.setPipeline(this.bloomBlurPipeline);
+        blurHPass.setBindGroup(0, this.bloomBlurHBindGroup);
+        blurHPass.draw(6, 1, 0, 0);
+        blurHPass.end();
+        // Vertical blur
+        const vBlurData = new Float32Array(4);
+        vBlurData[0] = 0.0;
+        vBlurData[1] = 1.0;
+        this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, vBlurData);
+        const blurVPass = encoder.beginRenderPass({
+            label: "bloom blur vertical",
+            colorAttachments: [
+                {
+                    view: this.bloomBlurTexture2.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+        });
+        blurVPass.setPipeline(this.bloomBlurPipeline);
+        blurVPass.setBindGroup(0, this.bloomBlurVBindGroup);
+        blurVPass.draw(6, 1, 0, 0);
+        blurVPass.end();
+        // Compose to canvas
+        const composePass = encoder.beginRenderPass({
+            label: "bloom compose",
+            colorAttachments: [
+                {
+                    view: this.context.getCurrentTexture().createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+        });
+        composePass.setPipeline(this.bloomComposePipeline);
+        composePass.setBindGroup(0, this.bloomComposeBindGroup);
+        composePass.draw(6, 1, 0, 0);
+        composePass.end();
+        this.device.queue.submit([encoder.finish()]);
+    }
+    updateCameraUniforms() {
+        const viewMatrix = this.camera.getViewMatrix();
+        const projectionMatrix = this.camera.getProjectionMatrix();
+        const cameraPos = this.camera.getPosition();
+        this.cameraMatrixData.set(viewMatrix.values, 0);
+        this.cameraMatrixData.set(projectionMatrix.values, 16);
+        this.cameraMatrixData[32] = cameraPos.x;
+        this.cameraMatrixData[33] = cameraPos.y;
+        this.cameraMatrixData[34] = cameraPos.z;
+        this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
+    }
+    updateRenderTarget() {
+        // Use cached view (only recreated on resize in handleResize)
+        const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
+        if (this.sampleCount > 1) {
+            colorAttachment.resolveTarget = this.sceneRenderTextureView;
+        }
+        else {
+            colorAttachment.view = this.sceneRenderTextureView;
+        }
+    }
+    updateModelPose(deltaTime) {
+        // Note: evaluatePose is called earlier in render() to update vertex buffer before encoder creation
+        // Here we just get the matrices and update physics/compute
+        const worldMats = this.currentModel.getBoneWorldMatrices();
+        // if (this.physics) {
+        //   this.physics.step(deltaTime, worldMats, this.currentModel!.getBoneInverseBindMatrices())
+        // }
+        this.currentModel?.evaluatePose();
+        this.computeSkinMatrices();
+    }
+    computeSkinMatrices() {
+        const skinMatrices = this.currentModel.getSkinMatrices();
+        this.device.queue.writeBuffer(this.skinMatrixBuffer, 0, skinMatrices.buffer, skinMatrices.byteOffset, skinMatrices.byteLength);
+    }
+    drawOutlines(pass, transparent) {
+        pass.setPipeline(this.outlinePipeline);
+        const outlineType = transparent ? "transparent-outline" : "opaque-outline";
+        for (const draw of this.drawCalls) {
+            if (draw.type === outlineType) {
+                pass.setBindGroup(0, draw.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+            }
+        }
+    }
+    updateStats(frameTime) {
+        // Simplified frame time tracking - rolling average with fixed window
+        const maxSamples = 60;
+        this.frameTimeSum += frameTime;
+        this.frameTimeCount++;
+        if (this.frameTimeCount > maxSamples) {
+            // Maintain rolling window by subtracting oldest sample estimate
+            const avg = this.frameTimeSum / maxSamples;
+            this.frameTimeSum -= avg;
+            this.frameTimeCount = maxSamples;
+        }
+        this.stats.frameTime =
+            Math.round((this.frameTimeSum / this.frameTimeCount) * Engine.STATS_FRAME_TIME_ROUNDING) /
+                Engine.STATS_FRAME_TIME_ROUNDING;
+        // FPS tracking
+        const now = performance.now();
+        this.framesSinceLastUpdate++;
+        const elapsed = now - this.lastFpsUpdate;
+        if (elapsed >= Engine.STATS_FPS_UPDATE_INTERVAL_MS) {
+            this.stats.fps = Math.round((this.framesSinceLastUpdate / elapsed) * Engine.STATS_FPS_UPDATE_INTERVAL_MS);
+            this.framesSinceLastUpdate = 0;
+            this.lastFpsUpdate = now;
+        }
+    }
+}
+// Default values
+Engine.DEFAULT_BLOOM_THRESHOLD = 0.01;
+Engine.DEFAULT_BLOOM_INTENSITY = 0.12;
+Engine.DEFAULT_RIM_LIGHT_INTENSITY = 0.45;
+Engine.DEFAULT_CAMERA_DISTANCE = 26.6;
+Engine.DEFAULT_CAMERA_TARGET = new Vec3(0, 12.5, 0);
+Engine.TRANSPARENCY_EPSILON = 0.001;
+Engine.STATS_FPS_UPDATE_INTERVAL_MS = 1000;
+Engine.STATS_FRAME_TIME_ROUNDING = 100;