reze-engine 0.2.3 → 0.2.5

package/dist/engine.js

@@ -9,7 +9,11 @@ export class Engine {
         this.lightData = new Float32Array(64);
         this.lightCount = 0;
         this.resizeObserver = null;
-        this.sampleCount = 4; // MSAA 4x
+        this.sampleCount = 4;
+        // Constants
+        this.STENCIL_EYE_VALUE = 1;
+        this.COMPUTE_WORKGROUP_SIZE = 64;
+        this.BLOOM_DOWNSCALE_FACTOR = 2;
         // Ambient light settings
         this.ambient = 1.0;
         // Bloom settings
@@ -22,7 +26,6 @@ export class Engine {
         this.modelDir = "";
         this.physics = null;
         this.textureCache = new Map();
-        this.textureSizes = new Map();
         this.lastFpsUpdate = performance.now();
         this.framesSinceLastUpdate = 0;
         this.frameTimeSamples = [];
@@ -38,6 +41,7 @@ export class Engine {
         this.renderLoopCallback = null;
         this.animationFrames = [];
         this.animationTimeouts = [];
+        this.gpuMemoryMB = 0;
         this.opaqueNonEyeNonHairDraws = [];
         this.eyeDraws = [];
         this.hairDrawsOverEyes = [];
@@ -50,10 +54,8 @@ export class Engine {
         this.canvas = canvas;
         if (options) {
             this.ambient = options.ambient ?? 1.0;
-            this.bloomThreshold = options.bloomThreshold ?? 0.3;
             this.bloomIntensity = options.bloomIntensity ?? 0.12;
             this.rimLightIntensity = options.rimLightIntensity ?? 0.45;
-            this.rimLightPower = options.rimLightPower ?? 2.0;
         }
     }
     // Step 1: Get WebGPU device and context
@@ -214,8 +216,8 @@ export class Engine {
       `,
         });
         // Create explicit bind group layout for all pipelines using the main shader
-        this.hairBindGroupLayout = this.device.createBindGroupLayout({
-            label: "shared material bind group layout",
+        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
@@ -227,14 +229,13 @@ export class Engine {
                 { binding: 7, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }, // material
             ],
         });
-        const sharedPipelineLayout = this.device.createPipelineLayout({
-            label: "shared pipeline layout",
-            bindGroupLayouts: [this.hairBindGroupLayout],
+        const mainPipelineLayout = this.device.createPipelineLayout({
+            label: "main pipeline layout",
+            bindGroupLayouts: [this.mainBindGroupLayout],
         });
-        // Single pipeline for all materials with alpha blending
-        this.pipeline = this.device.createRenderPipeline({
+        this.modelPipeline = this.device.createRenderPipeline({
             label: "model pipeline",
-            layout: sharedPipelineLayout,
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -437,9 +438,9 @@ export class Engine {
                 count: this.sampleCount,
             },
         });
-        // Unified hair outline pipeline: single pass without stencil testing, uses depth test "less-equal" to draw everywhere hair exists
-        this.hairUnifiedOutlinePipeline = this.device.createRenderPipeline({
-            label: "unified hair outline pipeline",
+        // Hair outline pipeline
+        this.hairOutlinePipeline = this.device.createRenderPipeline({
+            label: "hair outline pipeline",
             layout: outlinePipelineLayout,
             vertex: {
                 module: outlineShaderModule,
@@ -507,7 +508,7 @@ export class Engine {
         // Eye overlay pipeline (renders after opaque, writes stencil)
         this.eyePipeline = this.device.createRenderPipeline({
             label: "eye overlay pipeline",
-            layout: sharedPipelineLayout,
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -620,7 +621,7 @@ export class Engine {
         // Hair depth pre-pass pipeline: depth-only with color writes disabled to eliminate overdraw
         this.hairDepthPipeline = this.device.createRenderPipeline({
             label: "hair depth pre-pass",
-            layout: sharedPipelineLayout,
+            layout: mainPipelineLayout,
             vertex: {
                 module: depthOnlyShaderModule,
                 buffers: [
@@ -659,10 +660,10 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Unified hair pipeline for over-eyes (stencil == 1): single pass with dynamic branching
-        this.hairUnifiedPipelineOverEyes = this.device.createRenderPipeline({
-            label: "unified hair pipeline (over eyes)",
-            layout: sharedPipelineLayout,
+        // Hair pipeline for rendering over eyes (stencil == 1)
+        this.hairPipelineOverEyes = this.device.createRenderPipeline({
+            label: "hair pipeline (over eyes)",
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -724,10 +725,10 @@ export class Engine {
             },
             multisample: { count: this.sampleCount },
         });
-        // Unified pipeline for hair over non-eyes (stencil != 1)
-        this.hairUnifiedPipelineOverNonEyes = this.device.createRenderPipeline({
-            label: "unified hair pipeline (over non-eyes)",
-            layout: sharedPipelineLayout,
+        // Hair pipeline for rendering over non-eyes (stencil != 1)
+        this.hairPipelineOverNonEyes = this.device.createRenderPipeline({
+            label: "hair pipeline (over non-eyes)",
+            layout: mainPipelineLayout,
             vertex: {
                 module: shaderModule,
                 buffers: [
@@ -808,10 +809,9 @@ export class Engine {
         @group(0) @binding(2) var<storage, read> inverseBindMatrices: array<mat4x4f>;
         @group(0) @binding(3) var<storage, read_write> skinMatrices: array<mat4x4f>;
         
-        @compute @workgroup_size(64)
+        @compute @workgroup_size(64) // Must match COMPUTE_WORKGROUP_SIZE
         fn main(@builtin(global_invocation_id) globalId: vec3<u32>) {
           let boneIndex = globalId.x;
-          // Bounds check: we dispatch workgroups (64 threads each), so some threads may be out of range
           if (boneIndex >= boneCount.count) {
             return;
           }
@@ -944,21 +944,16 @@ export class Engine {
         @group(0) @binding(1) var inputSampler: sampler;
         @group(0) @binding(2) var<uniform> blurUniforms: BlurUniforms;
 
-        // 9-tap gaussian blur
+        // 5-tap gaussian blur
         @fragment fn fs(input: VertexOutput) -> @location(0) vec4f {
           let texelSize = 1.0 / vec2f(textureDimensions(inputTexture));
           var result = vec4f(0.0);
           
-          // Gaussian weights for 9-tap filter
-          let weights = array<f32, 9>(
-            0.01621622, 0.05405405, 0.12162162,
-            0.19459459, 0.22702703,
-            0.19459459, 0.12162162, 0.05405405, 0.01621622
-          );
+          // Optimized 5-tap Gaussian filter (faster, nearly same quality)
+          let weights = array<f32, 5>(0.06136, 0.24477, 0.38774, 0.24477, 0.06136);
+          let offsets = array<f32, 5>(-2.0, -1.0, 0.0, 1.0, 2.0);
           
-          let offsets = array<f32, 9>(-4.0, -3.0, -2.0, -1.0, 0.0, 1.0, 2.0, 3.0, 4.0);
-          
-          for (var i = 0u; i < 9u; i++) {
+          for (var i = 0u; i < 5u; i++) {
             let offset = offsets[i] * texelSize * blurUniforms.direction;
             result += textureSample(inputTexture, inputSampler, input.uv + offset) * weights[i];
           }
@@ -1094,11 +1089,9 @@ export class Engine {
         this.bloomThresholdBuffer = bloomThresholdBuffer;
         this.linearSampler = linearSampler;
     }
-    // Setup bloom textures and bind groups (called when canvas is resized)
     setupBloom(width, height) {
-        // Create bloom textures (half resolution for performance)
-        const bloomWidth = Math.floor(width / 2);
-        const bloomHeight = Math.floor(height / 2);
+        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],
@@ -1272,7 +1265,6 @@ export class Engine {
     async loadAnimation(url) {
         const frames = await VMDLoader.load(url);
         this.animationFrames = frames;
-        console.log(this.animationFrames);
     }
     playAnimation() {
         if (this.animationFrames.length === 0)
@@ -1334,7 +1326,9 @@ export class Engine {
                 this.physics.reset(worldMats, this.currentModel.getBoneInverseBindMatrices());
                 // Upload matrices immediately so next frame shows correct pose
                 this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-                this.computeSkinMatrices();
+                const encoder = this.device.createCommandEncoder();
+                this.computeSkinMatrices(encoder);
+                this.device.queue.submit([encoder.finish()]);
             }
         }
         for (const [_, keyFrames] of boneKeyFramesByBone.entries()) {
@@ -1408,6 +1402,14 @@ export class Engine {
         const dir = pathParts.join("/") + "/";
         this.modelDir = dir;
         const model = await PmxLoader.load(path);
+        // console.log({
+        //   vertices: Array.from(model.getVertices()),
+        //   indices: Array.from(model.getIndices()),
+        //   materials: model.getMaterials(),
+        //   textures: model.getTextures(),
+        //   bones: model.getSkeleton().bones,
+        //   skinning: { joints: Array.from(model.getSkinning().joints), weights: Array.from(model.getSkinning().weights) },
+        // })
         this.physics = new Physics(model.getRigidbodies(), model.getJoints());
         await this.setupModelBuffers(model);
     }
@@ -1535,7 +1537,6 @@ export class Engine {
             });
             this.device.queue.writeTexture({ texture: defaultToonTexture }, defaultToonData, { bytesPerRow: 256 * 4 }, [256, 2]);
             this.textureCache.set(defaultToonPath, defaultToonTexture);
-            this.textureSizes.set(defaultToonPath, { width: 256, height: 2 });
             return defaultToonTexture;
         };
         this.opaqueNonEyeNonHairDraws = [];
@@ -1547,10 +1548,10 @@ export class Engine {
         this.eyeOutlineDraws = [];
         this.hairOutlineDraws = [];
         this.transparentNonEyeNonHairOutlineDraws = [];
-        let runningFirstIndex = 0;
+        let currentIndexOffset = 0;
         for (const mat of materials) {
-            const matCount = mat.vertexCount | 0;
-            if (matCount === 0)
+            const indexCount = mat.vertexCount;
+            if (indexCount === 0)
                 continue;
             const diffuseTexture = await loadTextureByIndex(mat.diffuseTextureIndex);
             if (!diffuseTexture)
@@ -1578,7 +1579,7 @@ export class Engine {
             // 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.hairBindGroupLayout,
+                layout: this.mainBindGroupLayout,
                 entries: [
                     { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
                     { binding: 1, resource: { buffer: this.lightUniformBuffer } },
@@ -1593,100 +1594,77 @@ export class Engine {
             // Classify materials into appropriate draw lists
             if (mat.isEye) {
                 this.eyeDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
             else if (mat.isHair) {
-                // Hair materials: create bind groups for unified pipeline with dynamic branching
-                const materialUniformDataHair = new Float32Array(8);
-                materialUniformDataHair[0] = materialAlpha;
-                materialUniformDataHair[1] = 1.0; // alphaMultiplier: base value, shader will adjust
-                materialUniformDataHair[2] = this.rimLightIntensity;
-                materialUniformDataHair[3] = this.rimLightPower;
-                materialUniformDataHair[4] = 1.0; // rimColor.r
-                materialUniformDataHair[5] = 1.0; // rimColor.g
-                materialUniformDataHair[6] = 1.0; // rimColor.b
-                materialUniformDataHair[7] = 0.0;
-                // Create uniform buffers for both modes
-                const materialUniformBufferOverEyes = this.device.createBuffer({
-                    label: `material uniform (over eyes): ${mat.name}`,
-                    size: materialUniformDataHair.byteLength,
-                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                });
-                const materialUniformDataOverEyes = new Float32Array(materialUniformDataHair);
-                materialUniformDataOverEyes[7] = 1.0;
-                this.device.queue.writeBuffer(materialUniformBufferOverEyes, 0, materialUniformDataOverEyes);
-                const materialUniformBufferOverNonEyes = this.device.createBuffer({
-                    label: `material uniform (over non-eyes): ${mat.name}`,
-                    size: materialUniformDataHair.byteLength,
-                    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                });
-                const materialUniformDataOverNonEyes = new Float32Array(materialUniformDataHair);
-                materialUniformDataOverNonEyes[7] = 0.0;
-                this.device.queue.writeBuffer(materialUniformBufferOverNonEyes, 0, materialUniformDataOverNonEyes);
-                // Create bind groups for both modes
-                const bindGroupOverEyes = this.device.createBindGroup({
-                    label: `material bind group (over eyes): ${mat.name}`,
-                    layout: this.hairBindGroupLayout,
-                    entries: [
-                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                        { binding: 2, resource: diffuseTexture.createView() },
-                        { binding: 3, resource: this.textureSampler },
-                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
-                        { binding: 5, resource: toonTexture.createView() },
-                        { binding: 6, resource: this.textureSampler },
-                        { binding: 7, resource: { buffer: materialUniformBufferOverEyes } },
-                    ],
-                });
-                const bindGroupOverNonEyes = this.device.createBindGroup({
-                    label: `material bind group (over non-eyes): ${mat.name}`,
-                    layout: this.hairBindGroupLayout,
-                    entries: [
-                        { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
-                        { binding: 1, resource: { buffer: this.lightUniformBuffer } },
-                        { binding: 2, resource: diffuseTexture.createView() },
-                        { binding: 3, resource: this.textureSampler },
-                        { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
-                        { binding: 5, resource: toonTexture.createView() },
-                        { binding: 6, resource: this.textureSampler },
-                        { binding: 7, resource: { buffer: materialUniformBufferOverNonEyes } },
-                    ],
-                });
-                // Store both bind groups for unified pipeline
+                // Hair materials: create separate bind groups for over-eyes vs over-non-eyes
+                const createHairBindGroup = (isOverEyes) => {
+                    const uniformData = new Float32Array(8);
+                    uniformData[0] = materialAlpha;
+                    uniformData[1] = 1.0; // alphaMultiplier (shader adjusts based on isOverEyes)
+                    uniformData[2] = this.rimLightIntensity;
+                    uniformData[3] = this.rimLightPower;
+                    uniformData[4] = 1.0; // rimColor.rgb
+                    uniformData[5] = 1.0;
+                    uniformData[6] = 1.0;
+                    uniformData[7] = isOverEyes ? 1.0 : 0.0;
+                    const buffer = this.device.createBuffer({
+                        label: `material uniform (${isOverEyes ? "over eyes" : "over non-eyes"}): ${mat.name}`,
+                        size: uniformData.byteLength,
+                        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+                    });
+                    this.device.queue.writeBuffer(buffer, 0, uniformData);
+                    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.textureSampler },
+                            { binding: 4, resource: { buffer: this.skinMatrixBuffer } },
+                            { binding: 5, resource: toonTexture.createView() },
+                            { binding: 6, resource: this.textureSampler },
+                            { binding: 7, resource: { buffer: buffer } },
+                        ],
+                    });
+                };
+                const bindGroupOverEyes = createHairBindGroup(true);
+                const bindGroupOverNonEyes = createHairBindGroup(false);
                 this.hairDrawsOverEyes.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup: bindGroupOverEyes,
                     isTransparent,
                 });
                 this.hairDrawsOverNonEyes.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup: bindGroupOverNonEyes,
                     isTransparent,
                 });
             }
             else if (isTransparent) {
                 this.transparentNonEyeNonHairDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
             else {
                 this.opaqueNonEyeNonHairDraws.push({
-                    count: matCount,
-                    firstIndex: runningFirstIndex,
+                    count: indexCount,
+                    firstIndex: currentIndexOffset,
                     bindGroup,
                     isTransparent,
                 });
             }
-            // Outline for all materials (including transparent) - Edge flag is at bit 4 (0x10) in PMX format, not bit 0 (0x01)
+            // Edge flag is at bit 4 (0x10) in PMX format
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array(8);
                 materialUniformData[0] = mat.edgeColor[0]; // edgeColor.r
@@ -1694,9 +1672,9 @@ export class Engine {
                 materialUniformData[2] = mat.edgeColor[2]; // edgeColor.b
                 materialUniformData[3] = mat.edgeColor[3]; // edgeColor.a
                 materialUniformData[4] = mat.edgeSize;
-                materialUniformData[5] = 0.0; // isOverEyes: 0.0 for all (unified pipeline doesn't use stencil)
-                materialUniformData[6] = 0.0; // _padding1
-                materialUniformData[7] = 0.0; // _padding2
+                materialUniformData[5] = 0.0; // isOverEyes
+                materialUniformData[6] = 0.0;
+                materialUniformData[7] = 0.0;
                 const materialUniformBuffer = this.device.createBuffer({
                     label: `outline material uniform: ${mat.name}`,
                     size: materialUniformData.byteLength,
@@ -1712,45 +1690,44 @@ export class Engine {
                         { binding: 2, resource: { buffer: this.skinMatrixBuffer } },
                     ],
                 });
-                // Classify outlines into appropriate draw lists
                 if (mat.isEye) {
                     this.eyeOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else if (mat.isHair) {
                     this.hairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else if (isTransparent) {
                     this.transparentNonEyeNonHairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
                 else {
                     this.opaqueNonEyeNonHairOutlineDraws.push({
-                        count: matCount,
-                        firstIndex: runningFirstIndex,
+                        count: indexCount,
+                        firstIndex: currentIndexOffset,
                         bindGroup: outlineBindGroup,
                         isTransparent,
                     });
                 }
             }
-            runningFirstIndex += matCount;
+            currentIndexOffset += indexCount;
         }
+        this.gpuMemoryMB = this.calculateGpuMemory();
     }
-    // Helper: Load texture from file path with optional max size limit
-    async createTextureFromPath(path, maxSize = 2048) {
+    async createTextureFromPath(path) {
         const cached = this.textureCache.get(path);
         if (cached) {
             return cached;
@@ -1760,41 +1737,28 @@ export class Engine {
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
-            let imageBitmap = await createImageBitmap(await response.blob(), {
+            const imageBitmap = await createImageBitmap(await response.blob(), {
                 premultiplyAlpha: "none",
                 colorSpaceConversion: "none",
             });
-            // Downscale if texture is too large
-            let finalWidth = imageBitmap.width;
-            let finalHeight = imageBitmap.height;
-            if (finalWidth > maxSize || finalHeight > maxSize) {
-                const scale = Math.min(maxSize / finalWidth, maxSize / finalHeight);
-                finalWidth = Math.floor(finalWidth * scale);
-                finalHeight = Math.floor(finalHeight * scale);
-                // Create canvas to downscale
-                const canvas = new OffscreenCanvas(finalWidth, finalHeight);
-                const ctx = canvas.getContext("2d");
-                if (ctx) {
-                    ctx.drawImage(imageBitmap, 0, 0, finalWidth, finalHeight);
-                    imageBitmap = await createImageBitmap(canvas);
-                }
-            }
             const texture = this.device.createTexture({
                 label: `texture: ${path}`,
-                size: [finalWidth, finalHeight],
+                size: [imageBitmap.width, imageBitmap.height],
                 format: "rgba8unorm",
                 usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
             });
-            this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [finalWidth, finalHeight]);
+            this.device.queue.copyExternalImageToTexture({ source: imageBitmap }, { texture }, [
+                imageBitmap.width,
+                imageBitmap.height,
+            ]);
             this.textureCache.set(path, texture);
-            this.textureSizes.set(path, { width: finalWidth, height: finalHeight });
             return texture;
         }
         catch {
             return null;
         }
     }
-    // Step 9: Render one frame
+    // 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 && this.currentModel) {
             const currentTime = performance.now();
@@ -1802,16 +1766,17 @@ export class Engine {
             this.lastFrameTime = currentTime;
             this.updateCameraUniforms();
             this.updateRenderTarget();
-            this.updateModelPose(deltaTime);
+            // Use single encoder for both compute and render (reduces sync points)
             const encoder = this.device.createCommandEncoder();
+            this.updateModelPose(deltaTime, encoder);
             const pass = encoder.beginRenderPass(this.renderPassDescriptor);
             pass.setVertexBuffer(0, this.vertexBuffer);
             pass.setVertexBuffer(1, this.jointsBuffer);
             pass.setVertexBuffer(2, this.weightsBuffer);
             pass.setIndexBuffer(this.indexBuffer, "uint32");
             this.drawCallCount = 0;
-            // PASS 1: Opaque non-eye, non-hair
-            pass.setPipeline(this.pipeline);
+            // Pass 1: Opaque non-eye, non-hair
+            pass.setPipeline(this.modelPipeline);
             for (const draw of this.opaqueNonEyeNonHairDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -1819,9 +1784,9 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 2: Eyes (writes stencil = 1)
+            // Pass 2: Eyes (writes stencil value for hair to test against)
             pass.setPipeline(this.eyePipeline);
-            pass.setStencilReference(1); // Set stencil reference value to 1
+            pass.setStencilReference(this.STENCIL_EYE_VALUE);
             for (const draw of this.eyeDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -1829,9 +1794,9 @@ export class Engine {
                     this.drawCallCount++;
                 }
             }
-            // PASS 3: Hair rendering with depth pre-pass and unified pipeline
+            // Pass 3: Hair rendering (depth pre-pass + shading + outlines)
             this.drawOutlines(pass, false);
-            // 3a: Hair depth pre-pass (eliminates overdraw by rejecting fragments early)
+            // 3a: Hair depth pre-pass (reduces overdraw via early depth rejection)
             if (this.hairDrawsOverEyes.length > 0 || this.hairDrawsOverNonEyes.length > 0) {
                 pass.setPipeline(this.hairDepthPipeline);
                 for (const draw of this.hairDrawsOverEyes) {
@@ -1847,10 +1812,10 @@ export class Engine {
                     }
                 }
             }
-            // 3b: Hair shading pass with unified pipeline and dynamic branching
+            // 3b: Hair shading (split by stencil for transparency over eyes)
             if (this.hairDrawsOverEyes.length > 0) {
-                pass.setPipeline(this.hairUnifiedPipelineOverEyes);
-                pass.setStencilReference(1);
+                pass.setPipeline(this.hairPipelineOverEyes);
+                pass.setStencilReference(this.STENCIL_EYE_VALUE);
                 for (const draw of this.hairDrawsOverEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1860,8 +1825,8 @@ export class Engine {
                 }
             }
             if (this.hairDrawsOverNonEyes.length > 0) {
-                pass.setPipeline(this.hairUnifiedPipelineOverNonEyes);
-                pass.setStencilReference(1);
+                pass.setPipeline(this.hairPipelineOverNonEyes);
+                pass.setStencilReference(this.STENCIL_EYE_VALUE);
                 for (const draw of this.hairDrawsOverNonEyes) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1870,9 +1835,9 @@ export class Engine {
                     }
                 }
             }
-            // 3c: Hair outlines - unified single pass without stencil testing
+            // 3c: Hair outlines
             if (this.hairOutlineDraws.length > 0) {
-                pass.setPipeline(this.hairUnifiedOutlinePipeline);
+                pass.setPipeline(this.hairOutlinePipeline);
                 for (const draw of this.hairOutlineDraws) {
                     if (draw.count > 0) {
                         pass.setBindGroup(0, draw.bindGroup);
@@ -1880,8 +1845,8 @@ export class Engine {
                     }
                 }
             }
-            // PASS 4: Transparent non-eye, non-hair
-            pass.setPipeline(this.pipeline);
+            // Pass 4: Transparent non-eye, non-hair
+            pass.setPipeline(this.modelPipeline);
             for (const draw of this.transparentNonEyeNonHairDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -1892,12 +1857,10 @@ export class Engine {
             this.drawOutlines(pass, true);
             pass.end();
             this.device.queue.submit([encoder.finish()]);
-            // Apply bloom post-processing
             this.applyBloom();
             this.updateStats(performance.now() - currentTime);
         }
     }
-    // Apply bloom post-processing
     applyBloom() {
         if (!this.sceneRenderTexture || !this.bloomExtractTexture) {
             return;
@@ -1912,9 +1875,9 @@ export class Engine {
         const encoder = this.device.createCommandEncoder();
         const width = this.canvas.width;
         const height = this.canvas.height;
-        const bloomWidth = Math.floor(width / 2);
-        const bloomHeight = Math.floor(height / 2);
-        // Pass 1: Extract bright areas (downsample to half resolution)
+        const bloomWidth = Math.floor(width / this.BLOOM_DOWNSCALE_FACTOR);
+        const bloomHeight = Math.floor(height / this.BLOOM_DOWNSCALE_FACTOR);
+        // Extract bright areas
         const extractPass = encoder.beginRenderPass({
             label: "bloom extract",
             colorAttachments: [
@@ -1930,8 +1893,8 @@ export class Engine {
         extractPass.setBindGroup(0, this.bloomExtractBindGroup);
         extractPass.draw(6, 1, 0, 0);
         extractPass.end();
-        // Pass 2: Horizontal blur
-        const hBlurData = new Float32Array(4); // vec2f + padding = 4 floats
+        // Horizontal blur
+        const hBlurData = new Float32Array(4);
         hBlurData[0] = 1.0;
         hBlurData[1] = 0.0;
         this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, hBlurData);
@@ -1950,8 +1913,8 @@ export class Engine {
         blurHPass.setBindGroup(0, this.bloomBlurHBindGroup);
         blurHPass.draw(6, 1, 0, 0);
         blurHPass.end();
-        // Pass 3: Vertical blur
-        const vBlurData = new Float32Array(4); // vec2f + padding = 4 floats
+        // Vertical blur
+        const vBlurData = new Float32Array(4);
         vBlurData[0] = 0.0;
         vBlurData[1] = 1.0;
         this.device.queue.writeBuffer(this.blurDirectionBuffer, 0, vBlurData);
@@ -1970,7 +1933,7 @@ export class Engine {
         blurVPass.setBindGroup(0, this.bloomBlurVBindGroup);
         blurVPass.draw(6, 1, 0, 0);
         blurVPass.end();
-        // Pass 4: Compose scene + bloom to canvas
+        // Compose to canvas
         const composePass = encoder.beginRenderPass({
             label: "bloom compose",
             colorAttachments: [
@@ -1988,7 +1951,6 @@ export class Engine {
         composePass.end();
         this.device.queue.submit([encoder.finish()]);
     }
-    // Update camera uniform buffer each frame
     updateCameraUniforms() {
         const viewMatrix = this.camera.getViewMatrix();
         const projectionMatrix = this.camera.getProjectionMatrix();
@@ -2000,47 +1962,36 @@ export class Engine {
         this.cameraMatrixData[34] = cameraPos.z;
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
     }
-    // Update render target texture view
     updateRenderTarget() {
         const colorAttachment = this.renderPassDescriptor.colorAttachments[0];
         if (this.sampleCount > 1) {
-            // Resolve to scene render texture for post-processing
             colorAttachment.resolveTarget = this.sceneRenderTextureView;
         }
         else {
-            // Render directly to scene render texture
             colorAttachment.view = this.sceneRenderTextureView;
         }
     }
-    updateModelPose(deltaTime) {
+    updateModelPose(deltaTime, encoder) {
         this.currentModel.evaluatePose();
         const worldMats = this.currentModel.getBoneWorldMatrices();
         if (this.physics) {
             this.physics.step(deltaTime, worldMats, this.currentModel.getBoneInverseBindMatrices());
         }
         this.device.queue.writeBuffer(this.worldMatrixBuffer, 0, worldMats.buffer, worldMats.byteOffset, worldMats.byteLength);
-        this.computeSkinMatrices();
+        this.computeSkinMatrices(encoder);
     }
-    // Compute skin matrices on GPU
-    computeSkinMatrices() {
+    computeSkinMatrices(encoder) {
         const boneCount = this.currentModel.getSkeleton().bones.length;
-        const workgroupSize = 64;
-        // Dispatch exactly enough threads for all bones (no bounds check needed)
-        const workgroupCount = Math.ceil(boneCount / workgroupSize);
-        // Bone count is written once in setupModelBuffers() and never changes
-        const encoder = this.device.createCommandEncoder();
+        const workgroupCount = Math.ceil(boneCount / this.COMPUTE_WORKGROUP_SIZE);
         const pass = encoder.beginComputePass();
         pass.setPipeline(this.skinMatrixComputePipeline);
         pass.setBindGroup(0, this.skinMatrixComputeBindGroup);
         pass.dispatchWorkgroups(workgroupCount);
         pass.end();
-        this.device.queue.submit([encoder.finish()]);
     }
-    // Draw outlines (opaque or transparent)
     drawOutlines(pass, transparent) {
         pass.setPipeline(this.outlinePipeline);
         if (transparent) {
-            // Draw transparent outlines (if any)
             for (const draw of this.transparentNonEyeNonHairOutlineDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -2049,7 +2000,6 @@ export class Engine {
             }
         }
         else {
-            // Draw opaque outlines before main geometry
             for (const draw of this.opaqueNonEyeNonHairOutlineDraws) {
                 if (draw.count > 0) {
                     pass.setBindGroup(0, draw.bindGroup);
@@ -2076,12 +2026,12 @@ export class Engine {
             this.framesSinceLastUpdate = 0;
             this.lastFpsUpdate = now;
         }
-        // Calculate GPU memory: textures + buffers + render targets
+        this.stats.gpuMemory = this.gpuMemoryMB;
+    }
+    calculateGpuMemory() {
         let textureMemoryBytes = 0;
-        for (const [path, size] of this.textureSizes.entries()) {
-            if (this.textureCache.has(path)) {
-                textureMemoryBytes += size.width * size.height * 4; // RGBA8 = 4 bytes per pixel
-            }
+        for (const texture of this.textureCache.values()) {
+            textureMemoryBytes += texture.width * texture.height * 4;
         }
         let bufferMemoryBytes = 0;
         if (this.vertexBuffer) {
@@ -2119,48 +2069,44 @@ export class Engine {
             if (skeleton)
                 bufferMemoryBytes += Math.max(256, skeleton.bones.length * 16 * 4);
         }
-        bufferMemoryBytes += 40 * 4; // cameraUniformBuffer
-        bufferMemoryBytes += 64 * 4; // lightUniformBuffer
-        bufferMemoryBytes += 32; // boneCountBuffer
-        bufferMemoryBytes += 32; // blurDirectionBuffer
-        bufferMemoryBytes += 32; // bloomIntensityBuffer
-        bufferMemoryBytes += 32; // bloomThresholdBuffer
+        bufferMemoryBytes += 40 * 4;
+        bufferMemoryBytes += 64 * 4;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
+        bufferMemoryBytes += 32;
         if (this.fullscreenQuadBuffer) {
-            bufferMemoryBytes += 24 * 4; // fullscreenQuadBuffer (6 vertices * 4 floats)
+            bufferMemoryBytes += 24 * 4;
         }
-        // Material uniform buffers: Float32Array(8) = 32 bytes each
         const totalMaterialDraws = this.opaqueNonEyeNonHairDraws.length +
             this.eyeDraws.length +
             this.hairDrawsOverEyes.length +
             this.hairDrawsOverNonEyes.length +
             this.transparentNonEyeNonHairDraws.length;
-        bufferMemoryBytes += totalMaterialDraws * 32; // Material uniform buffers (8 floats = 32 bytes)
-        // Outline material uniform buffers: Float32Array(8) = 32 bytes each
+        bufferMemoryBytes += totalMaterialDraws * 32;
         const totalOutlineDraws = this.opaqueNonEyeNonHairOutlineDraws.length +
             this.eyeOutlineDraws.length +
             this.hairOutlineDraws.length +
             this.transparentNonEyeNonHairOutlineDraws.length;
-        bufferMemoryBytes += totalOutlineDraws * 32; // Outline material uniform buffers
+        bufferMemoryBytes += totalOutlineDraws * 32;
         let renderTargetMemoryBytes = 0;
         if (this.multisampleTexture) {
             const width = this.canvas.width;
             const height = this.canvas.height;
-            renderTargetMemoryBytes += width * height * 4 * this.sampleCount; // multisample color
-            renderTargetMemoryBytes += width * height * 4; // depth (depth24plus-stencil8 = 4 bytes)
+            renderTargetMemoryBytes += width * height * 4 * this.sampleCount;
+            renderTargetMemoryBytes += width * height * 4;
         }
         if (this.sceneRenderTexture) {
             const width = this.canvas.width;
             const height = this.canvas.height;
-            renderTargetMemoryBytes += width * height * 4; // sceneRenderTexture (non-multisampled)
+            renderTargetMemoryBytes += width * height * 4;
         }
         if (this.bloomExtractTexture) {
-            const width = Math.floor(this.canvas.width / 2);
-            const height = Math.floor(this.canvas.height / 2);
-            renderTargetMemoryBytes += width * height * 4; // bloomExtractTexture
-            renderTargetMemoryBytes += width * height * 4; // bloomBlurTexture1
-            renderTargetMemoryBytes += width * height * 4; // bloomBlurTexture2
+            const width = Math.floor(this.canvas.width / this.BLOOM_DOWNSCALE_FACTOR);
+            const height = Math.floor(this.canvas.height / this.BLOOM_DOWNSCALE_FACTOR);
+            renderTargetMemoryBytes += width * height * 4 * 3;
         }
         const totalGPUMemoryBytes = textureMemoryBytes + bufferMemoryBytes + renderTargetMemoryBytes;
-        this.stats.gpuMemory = Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100;
+        return Math.round((totalGPUMemoryBytes / 1024 / 1024) * 100) / 100;
     }
 }