reze-engine 0.25.0 → 0.25.2

package/dist/engine.js

@@ -12,6 +12,7 @@ import { LTC_MAG_LUT_SIZE, LTC_MAG_LUT_DATA } from "./shaders/ltc_mag_lut";
 import { SHADOW_DEPTH_SHADER_WGSL } from "./shaders/passes/shadow";
 import { GROUND_SHADOW_SHADER_WGSL } from "./shaders/passes/ground";
 import { OUTLINE_SHADER_WGSL } from "./shaders/passes/outline";
+import { TRANSPARENT_DEPTH_PREPASS_WGSL } from "./shaders/passes/depth-prepass";
 import { SELECTION_MASK_SHADER_WGSL, SELECTION_EDGE_SHADER_WGSL } from "./shaders/passes/selection";
 import { GIZMO_SHADER_WGSL } from "./shaders/passes/gizmo";
 import { BLOOM_BLIT_SHADER_WGSL, BLOOM_DOWNSAMPLE_SHADER_WGSL, BLOOM_UPSAMPLE_SHADER_WGSL, } from "./shaders/passes/bloom";
@@ -192,17 +193,22 @@ function buildAlphaSampler(source, rgba, width, height) {
         return null;
     }
 }
-/** Average texture alpha over ≤400 of the material's triangle centroids —
- *  below the threshold the material renders as a transparent-bucket draw. */
+/** Texture-alpha statistics over ≤400 of the material's triangle centroids:
+ *  `avg` (0..1) and `translucentFrac` — the fraction of samples that are
+ *  neither fully opaque nor fully cut out (alpha in ~0.03..0.97). Together
+ *   Bucketing itself is binary (babylon-mmd parity): ANY translucent coverage
+ *  routes to the alpha-blend bucket. `avg` below this threshold additionally
+ *  marks a material as fully sheer (a veil), which vetoes shadow casting. */
 const SHEER_ALPHA_THRESHOLD = 0.7;
-function materialIsSheer(verts, indices, firstIndex, count, sampler) {
+function materialAlphaStats(verts, indices, firstIndex, count, sampler) {
     if (!sampler)
-        return false;
+        return { avg: 1, translucentFrac: 0 };
     const triCount = Math.floor(count / 3);
     if (triCount === 0)
-        return false;
+        return { avg: 1, translucentFrac: 0 };
     const step = Math.max(1, Math.floor(triCount / 400));
     let sum = 0;
+    let translucent = 0;
     let n = 0;
     for (let t = 0; t < triCount; t += step) {
         const i0 = indices[firstIndex + t * 3];
@@ -213,10 +219,15 @@ function materialIsSheer(verts, indices, firstIndex, count, sampler) {
         // Wrap (MMD UVs may tile), then nearest-sample the downsampled plane.
         const x = Math.min(sampler.w - 1, Math.max(0, Math.floor((u - Math.floor(u)) * sampler.w)));
         const y = Math.min(sampler.h - 1, Math.max(0, Math.floor((v - Math.floor(v)) * sampler.h)));
-        sum += sampler.a[y * sampler.w + x];
+        const a = sampler.a[y * sampler.w + x];
+        sum += a;
+        if (a > 8 && a < 247)
+            translucent++;
         n++;
     }
-    return n > 0 && sum / n < SHEER_ALPHA_THRESHOLD * 255;
+    if (n === 0)
+        return { avg: 1, translucentFrac: 0 };
+    return { avg: sum / n / 255, translucentFrac: translucent / n };
 }
 export class Engine {
     static getInstance() {
@@ -322,6 +333,13 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
+        /** Debug/diagnostic: skip every inverted-hull outline draw. */
+        // OFF by default — the product aesthetic. Modern high-detail models read
+        // better without hulls (babylon-mmd's own demos disable its outline renderer
+        // too), and no hull pass means no depth-tie edge cases against near-coplanar
+        // cloth. The full MMD-faithful machinery (interleaved per-material hulls,
+        // texture-alpha-modulated rims) stays in place behind setOutlineEnabled(true).
+        this.outlineEnabled = false;
         /** When set, render resolution is pinned to this size instead of tracking the
          *  canvas's CSS size × devicePixelRatio (see setRenderSize). */
         this.fixedRenderSize = null;
@@ -640,6 +658,9 @@ export class Engine {
         if (this.device && this.compositeUniformBuffer)
             this.writeCompositeViewUniforms();
     }
+    setOutlineEnabled(on) {
+        this.outlineEnabled = on;
+    }
     rebuildCompositeBindGroup() {
         if (!this.device || !this.hdrResolveTexture || !this.compositeBloomView)
             return;
@@ -1174,6 +1195,8 @@ export class Engine {
                 attributes: [
                     { shaderLocation: 0, offset: 0, format: "float32x3" },
                     { shaderLocation: 1, offset: 3 * 4, format: "float32x3" },
+                    // uv — the outline FS alpha-tests the diffuse texture (babylon-mmd parity)
+                    { shaderLocation: 2, offset: 6 * 4, format: "float32x2" },
                 ],
             },
             {
@@ -1300,6 +1323,44 @@ export class Engine {
                 depthCompare: "less-equal",
             },
         });
+        // Depth-write-off twin for transparent-bucket draws (see pipelineForDrawCall).
+        this.neutralPipelineNoDepthWrite = this.createRenderPipeline({
+            label: "neutral base pipeline (no depth write)",
+            layout: mainPipelineLayout,
+            shaderModule: neutralModule,
+            vertexBuffers: fullVertexBuffers,
+            fragmentTargets: sceneTargets,
+            cullMode: "none",
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: false,
+                depthCompare: "less-equal",
+            },
+        });
+        // Depth-only prepass for transparent draws (see depth-prepass.ts): writes the
+        // fabric's depth AFTER its color blended, so outlines drawn later are
+        // occluded behind it. Color targets kept for pass compatibility, writeMask 0.
+        const prepassModule = this.device.createShaderModule({
+            label: "transparent depth prepass",
+            code: TRANSPARENT_DEPTH_PREPASS_WGSL,
+        });
+        this.transparentDepthPrepassPipeline = this.device.createRenderPipeline({
+            label: "transparent depth prepass",
+            layout: mainPipelineLayout,
+            vertex: { module: prepassModule, entryPoint: "vs", buffers: fullVertexBuffers },
+            fragment: {
+                module: prepassModule,
+                entryPoint: "fs",
+                targets: sceneTargets.map((t) => ({ format: t.format, writeMask: 0 })),
+            },
+            primitive: { cullMode: "none" },
+            multisample: { count: Engine.MULTISAMPLE_COUNT },
+            depthStencil: {
+                format: "depth24plus-stencil8",
+                depthWriteEnabled: true,
+                depthCompare: "less-equal",
+            },
+        });
         this.shadowLightVPBuffer = this.device.createBuffer({
             size: 64,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
@@ -1390,6 +1451,7 @@ export class Engine {
             label: "outline per-frame bind group layout",
             entries: [
                 { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
             ],
         });
         // Outline per-instance reuses mainPerInstanceBindGroupLayout (same skinMats binding)
@@ -1397,6 +1459,7 @@ export class Engine {
             label: "outline per-material bind group layout",
             entries: [
                 { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
+                { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
             ],
         });
         const outlinePipelineLayout = this.device.createPipelineLayout({
@@ -1410,7 +1473,10 @@ export class Engine {
         this.outlinePerFrameBindGroup = this.device.createBindGroup({
             label: "outline per-frame bind group",
             layout: this.outlinePerFrameBindGroupLayout,
-            entries: [{ binding: 0, resource: { buffer: this.cameraUniformBuffer } }],
+            entries: [
+                { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
+                { binding: 1, resource: this.materialSampler },
+            ],
         });
         const outlineShaderModule = this.device.createShaderModule({
             label: "outline shaders",
@@ -1425,9 +1491,21 @@ export class Engine {
             cullMode: "back",
             depthStencil: {
                 format: "depth24plus-stencil8",
-                // Don’t write outline into depth buffer — stops z-fighting / black cracks vs body (MMD-style; body depth stays authoritative)
-                depthWriteEnabled: false,
+                // babylon-mmd draws outlines WITH depth write (its _afterRenderingMesh
+                // forces setDepthWrite(true)); the constant bias below still makes
+                // hulls lose depth ties against their own near-coplanar geometry.
+                depthWriteEnabled: true,
                 depthCompare: "less-equal",
+                // CONFIRMED fix (bisected live via setOutlineEnabled): hull fragments
+                // carry their surface's exact depth, so against this model's paired
+                // near-coplanar skirt layers the hulls WON depth ties in patches —
+                // the black shapes on the dress. A small constant bias makes hulls lose
+                // every tie; silhouette rims compare against the far background and are
+                // unaffected. No slope term — slope explodes at silhouettes and would
+                // erase the rims themselves (previous regression).
+                depthBias: 4,
+                depthBiasSlopeScale: 0,
+                depthBiasClamp: 0,
                 // Skip fragments where the eye stamped stencil=EYE_VALUE. Those pixels are owned by
                 // the see-through-hair blend (hair-over-eyes), so letting the outline's near-black
                 // edge color overwrite them would re-introduce the dark almond we just killed.
@@ -2970,17 +3048,25 @@ export class Engine {
                 diffuseTexture = this.fallbackMaterialTexture;
             }
             const materialAlpha = mat.diffuse[3];
-            // Transparent bucket when the MATERIAL says so — or when the TEXTURE does
-            // (sheer cloth almost always ships with diffuse alpha 1.0 and carries its
-            // translucency in texture alpha). Transparent-bucket draws happen after
-            // the opaque bucket (and after the late-drawn hair render-class), so a
-            // veil composites over the hair behind it instead of depth-rejecting it;
-            // they are also excluded from the shadow map, so sheer cloth stops
-            // casting the solid shadow of an opaque sheet.
             const diffusePath = texLogicalPath(mat.diffuseTextureIndex);
             const alphaSampler = diffusePath ? this.textureAlphaCache.get(diffusePath) : null;
-            const isTransparent = materialAlpha < 1.0 - 0.001 ||
-                materialIsSheer(meshVertices, meshIndices, currentIndexOffset, indexCount, alphaSampler);
+            const stats = materialAlphaStats(meshVertices, meshIndices, currentIndexOffset, indexCount, alphaSampler);
+            // babylon-mmd parity (its default DepthWriteAlphaBlendingWithEvaluation
+            // method): the bucket decision is BINARY. A material with ANY translucent
+            // texels on its geometry is alpha-blend — drawn in PMX author order with
+            // depth write ON (forceDepthWrite); everything else is opaque. The old
+            // avg/frac tier system left mostly-opaque lace (translucentFrac 0.09) in
+            // the opaque bucket while its sibling panels went transparent, breaking
+            // the author's compositing order — the gray fold patches. The 2% floor
+            // only guards against centroid-sampling noise on genuinely solid cloth.
+            const sheer = stats.avg < SHEER_ALPHA_THRESHOLD;
+            const isTransparent = materialAlpha < 1.0 - 0.001 || sheer || stats.translucentFrac > 0.02;
+            // Shadow casting: the PMX author's own flag (bit 0x04, cast self-shadow),
+            // still vetoed for fully sheer cloth — a veil must not cast a solid sheet.
+            const castsShadow = (mat.edgeFlag & 0x04) !== 0 && !sheer;
+            // Load-time classification log — one line per material, cheap and
+            // invaluable when a model renders wrong (bucket/outline/shadow disputes).
+            console.info(`[reze] ${mat.name}: alpha=${materialAlpha.toFixed(2)} avg=${stats.avg.toFixed(2)} translucentFrac=${stats.translucentFrac.toFixed(2)} bucket=${isTransparent ? "transparent" : "opaque"} castsShadow=${castsShadow} edge=${(mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0 ? "on" : "off"}`);
             // Sphere map (sph=1 multiply / spa=2 add). Mode 3 (sub-texture UV) is
             // rare and not implemented — treated as none, like a failed load.
             let sphereMode = mat.sphereMode === 1 || mat.sphereMode === 2 ? mat.sphereMode : 0;
@@ -3011,16 +3097,12 @@ export class Engine {
             // Ungrouped at load — binding(4) = zero buffer, neutral base pipeline. autoStyleGroups
             // / applyStyleGroups rebind grouped materials to their group's buffer + pipeline.
             const bindGroup = this.createMaterialBindGroup(`${prefix}material: ${mat.name}`, baseBindGroupEntries, this.zeroStyleBuffer);
-            const type = isTransparent ? "transparent" : "opaque";
-            inst.drawCalls.push({
-                type,
-                count: indexCount,
-                firstIndex: currentIndexOffset,
-                bindGroup,
-                materialName: mat.name,
-                groupId: null,
-                baseBindGroupEntries,
-            });
+            // Inverted-hull outline for EVERY edge-flagged material (PMX bit 0x10) —
+            // the outline FS alpha-tests the diffuse texture, so sheer fabric masks
+            // its own hull where it is see-through instead of us skipping it here.
+            // Drawn interleaved right after this material's color draw (babylon-mmd's
+            // per-mesh afterRender outline stage) — see drawMaterials.
+            let outline;
             if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
                 const materialUniformData = new Float32Array([
                     mat.edgeColor[0],
@@ -3037,18 +3119,25 @@ export class Engine {
                 const outlineBindGroup = this.device.createBindGroup({
                     label: `${prefix}outline: ${mat.name}`,
                     layout: this.outlinePerMaterialBindGroupLayout,
-                    entries: [{ binding: 0, resource: { buffer: outlineUniformBuffer } }],
-                });
-                const outlineType = isTransparent ? "transparent-outline" : "opaque-outline";
-                inst.drawCalls.push({
-                    type: outlineType,
-                    count: indexCount,
-                    firstIndex: currentIndexOffset,
-                    bindGroup: outlineBindGroup,
-                    materialName: mat.name,
-                    groupId: null,
+                    entries: [
+                        { binding: 0, resource: { buffer: outlineUniformBuffer } },
+                        { binding: 1, resource: textureView },
+                    ],
                 });
+                outline = { bindGroup: outlineBindGroup };
             }
+            const type = isTransparent ? "transparent" : "opaque";
+            inst.drawCalls.push({
+                type,
+                count: indexCount,
+                firstIndex: currentIndexOffset,
+                bindGroup,
+                materialName: mat.name,
+                groupId: null,
+                baseBindGroupEntries,
+                castsShadow,
+                outline,
+            });
             if (this.onRaycast) {
                 const pickIdData = new Float32Array([modelId, materialId, 0, 0]);
                 const pickIdBuffer = this.createUniformBuffer(`${prefix}pick: ${mat.name}`, pickIdData);
@@ -3629,13 +3718,25 @@ export class Engine {
             sp.end();
         }
         const pass = encoder.beginRenderPass(this.renderPassDescriptor);
+        // Phase order: opaque models → ground → transparent fabric.
+        // The ground shader is the most expensive full-coverage draw in the frame
+        // (9-tap PCF on the 4096² shadow map per pixel), so it draws AFTER the
+        // opaque phase to get early-z rejected behind the body — drawing it first
+        // shaded every covered pixel and measurably dropped Safari fps. It still
+        // draws BEFORE the transparent phase so sheer fabric blends over the floor
+        // instead of over the background with the floor depth-rejected behind it.
         if (hasModels)
             this.forEachInstance((inst) => {
                 if (inst.model.visible)
-                    this.renderOneModel(pass, inst);
+                    this.renderModelOpaquePhase(pass, inst);
             });
         if (this.hasGround)
             this.renderGround(pass);
+        if (hasModels)
+            this.forEachInstance((inst) => {
+                if (inst.model.visible)
+                    this.renderModelTransparentPhase(pass, inst);
+            });
         pass.end();
         // Bloom pyramid (EEVEE 3.6):
         //   1. Blit: HDR → bloomDown[0] (Karis prefilter, half-res)
@@ -3904,9 +4005,12 @@ export class Engine {
             return { ok: false, diagnostics, slotMap: result.slotMap };
         }
         let pipeline;
+        let pipelineNoDepthWrite;
         let overEyesPipeline;
         try {
             pipeline = await this.createRenderClassPipeline(renderClass, module, false);
+            // Dormant OIT twin — kept for a future order-independent-transparency path.
+            pipelineNoDepthWrite = await this.createRenderClassPipeline(renderClass, module, false, false);
             if (renderClass === "hair")
                 overEyesPipeline = await this.createRenderClassPipeline(renderClass, module, true);
         }
@@ -3930,6 +4034,7 @@ export class Engine {
             renderClass,
             alphaMode,
             pipeline,
+            pipelineNoDepthWrite,
             overEyesPipeline,
             uniformBuffer,
             slotMap: result.slotMap,
@@ -3988,14 +4093,14 @@ export class Engine {
             ground: 4,
         };
         inst.drawCalls.sort((a, b) => typeOrder[a.type] - typeOrder[b.type] || this.drawCallRank(inst, a) - this.drawCallRank(inst, b));
-        inst.shadowDrawCalls = inst.drawCalls.filter((d) => d.type === "opaque");
+        inst.shadowDrawCalls = inst.drawCalls.filter((d) => (d.type === "opaque" || d.type === "transparent") && d.castsShadow === true);
     }
     /**
      * Render-class pipeline state. A group's compiled graph swaps the fragment shading; the
      * render-class owns pass integration (stencil interplay, depth bias, cull). auto = plain;
      * eye = stamp + front cull + bias; hair = stencil-test (+ the over-eyes variant).
      */
-    createRenderClassPipeline(renderClass, module, overEyes) {
+    createRenderClassPipeline(renderClass, module, overEyes, depthWrite = true) {
         const base = {
             label: `style ${renderClass}${overEyes ? " (over eyes)" : ""}`,
             layout: this.mainPipelineLayout,
@@ -4005,7 +4110,7 @@ export class Engine {
         };
         const plainDepth = {
             format: "depth24plus-stencil8",
-            depthWriteEnabled: true,
+            depthWriteEnabled: depthWrite,
             depthCompare: "less-equal",
         };
         let depthStencil = plainDepth;
@@ -4050,7 +4155,9 @@ export class Engine {
         });
     }
     // Pipeline for a material draw call: its group's compiled pipeline when grouped, else
-    // the neutral base (ungrouped materials render the default graph).
+    // the neutral base (ungrouped materials render the default graph). Transparent-bucket
+    // draws use the SAME depth-write-on pipeline — babylon-mmd's forceDepthWrite
+    // blending (see renderModelTransparentPhase for the trade-off record).
     pipelineForDrawCall(inst, dc) {
         if (dc.groupId) {
             const install = inst.styleGroups.get(dc.groupId);
@@ -4061,9 +4168,10 @@ export class Engine {
     }
     /**
      * Draw every material of a given type (`opaque` or `transparent`) using the main
-     * pipeline(s). Binds the per-frame and per-instance groups once at the top of the
-     * batch, then issues one draw per material. Early-outs if nothing to draw so we
-     * don't waste bindings when a model has no transparents, etc.
+     * pipeline(s), and — babylon-mmd's per-mesh outline stage — each edge-flagged
+     * material's inverted hull IMMEDIATELY after its color draw. Interleaving is what
+     * makes outlines compose like MMD: every material drawn later in the author's
+     * order covers earlier hulls, and each hull sits over everything drawn before it.
      */
     drawMaterials(pass, inst, type) {
         let currentPipeline = null;
@@ -4083,36 +4191,27 @@ export class Engine {
             }
             pass.setBindGroup(2, draw.bindGroup);
             pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
-        }
-    }
-    /**
-     * Draw every outline of a given type (`opaque-outline` or `transparent-outline`).
-     * Uses its own pipeline layout (group 0 = camera-only, group 2 = edge uniforms), so
-     * every batch binds its own groups from scratch — the next drawMaterials call will
-     * rebind group 0/1 correctly if needed.
-     */
-    drawOutlines(pass, inst, type) {
-        let bound = false;
-        for (const draw of inst.drawCalls) {
-            if (draw.type !== type || !this.shouldRenderDrawCall(inst, draw))
-                continue;
-            if (!bound) {
+            if (draw.outline && this.outlineEnabled) {
+                // Same index range; own pipeline + groups 0/2. Group 1 (skinMats) is
+                // layout-identical between the main and outline pipelines and stays
+                // bound. Restore group 0 afterwards and force a pipeline re-set.
                 pass.setPipeline(this.outlinePipeline);
                 pass.setBindGroup(0, this.outlinePerFrameBindGroup);
-                pass.setBindGroup(1, inst.mainPerInstanceBindGroup);
-                bound = true;
+                pass.setBindGroup(2, draw.outline.bindGroup);
+                pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+                pass.setBindGroup(0, this.perFrameBindGroup);
+                currentPipeline = null;
             }
-            pass.setBindGroup(2, draw.bindGroup);
-            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
         }
     }
     /**
-     * Main-pass render sequence for one model instance:
-     *   1) opaque bodies → 2) opaque outlines → 3) transparents → 4) transparent outlines.
-     * Each batch binds the groups it needs, so switching between main and outline
-     * pipelines is self-contained (no cross-batch dependencies).
+     * Main-pass render sequence for one model instance — babylon-mmd parity:
+     * opaque bucket, the hair-over-eyes stencil pass, then alpha-blend materials
+     * in PMX author order with depth write ON (forceDepthWrite). Outlines are not
+     * a separate phase: drawMaterials draws each edge-flagged material's hull
+     * right after the material itself, like MMD's per-mesh outline stage.
      */
-    renderOneModel(pass, inst) {
+    setModelDrawState(pass, inst) {
         pass.setVertexBuffer(0, inst.vertexBuffer);
         pass.setVertexBuffer(1, inst.jointsBuffer);
         pass.setVertexBuffer(2, inst.weightsBuffer);
@@ -4120,11 +4219,41 @@ export class Engine {
         // Single stencil-reference set covers eye (write), hair (read not-equal),
         // and hairOverEyes (read equal). Non-stencil pipelines ignore the value.
         pass.setStencilReference(Engine.STENCIL_EYE_VALUE);
+    }
+    renderModelOpaquePhase(pass, inst) {
+        this.setModelDrawState(pass, inst);
         this.drawMaterials(pass, inst, "opaque");
-        this.drawOutlines(pass, inst, "opaque-outline");
         this.drawHairOverEyes(pass, inst);
+    }
+    renderModelTransparentPhase(pass, inst) {
+        this.setModelDrawState(pass, inst);
+        // Transparent: babylon-mmd's forceDepthWrite blending — PMX author order
+        // with depth write ON. The accepted trade-off after trying every variant:
+        //   · depth-write ON (this): a fold hides its far side; rare view-dependent
+        //     double-blend seams at some angles. MMD's own known behavior.
+        //   · nearest-surface prepass: view-independent, but punched see-through
+        //     holes to whatever sat far behind a fold.
+        //   · depth-write OFF layering: every overlap visible everywhere — MORE
+        //     gray patches and texture artifacts in practice.
         this.drawMaterials(pass, inst, "transparent");
-        this.drawOutlines(pass, inst, "transparent-outline");
+    }
+    /** Depth-only re-draw of transparent-bucket materials (see depth-prepass.ts).
+     *  Dormant — kept for a future order-independent-transparency path. */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    drawTransparentDepthPrepass(pass, inst) {
+        let bound = false;
+        for (const draw of inst.drawCalls) {
+            if (draw.type !== "transparent" || !this.shouldRenderDrawCall(inst, draw))
+                continue;
+            if (!bound) {
+                pass.setPipeline(this.transparentDepthPrepassPipeline);
+                pass.setBindGroup(0, this.perFrameBindGroup);
+                pass.setBindGroup(1, inst.mainPerInstanceBindGroup);
+                bound = true;
+            }
+            pass.setBindGroup(2, draw.bindGroup);
+            pass.drawIndexed(draw.count, 1, draw.firstIndex, 0, 0);
+        }
     }
     /**
      * Second hair pass for the see-through-hair effect. Re-draws every hair-class grouped
@@ -4171,6 +4300,10 @@ export class Engine {
         this.cameraMatrixData[32] = cameraPos.x;
         this.cameraMatrixData[33] = cameraPos.y;
         this.cameraMatrixData[34] = cameraPos.z;
+        // Spare float after viewPos: render-target height in device px — the outline
+        // shader derives the full viewport (width via projection aspect) for its
+        // babylon-mmd constant-pixel edge extrusion.
+        this.cameraMatrixData[35] = this.canvas.height;
         this.device.queue.writeBuffer(this.cameraUniformBuffer, 0, this.cameraMatrixData);
         // 360 backdrop: the composite reconstructs each pixel's view ray from the
         // camera basis — refresh it every frame the skybox is active. The view matrix

package/dist/graph/slots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/graph/slots.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAiD5D,eAAO,MAAM,mBAAmB,gHAG/B,CAAA;AAuDD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,oBAAoB,EAAE,OAAO,GAC5B,MAAM,CAYR"}
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/graph/slots.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAiD5D,eAAO,MAAM,mBAAmB,gHAG/B,CAAA;AAgED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,oBAAoB,EAAE,OAAO,GAC5B,MAAM,CAYR"}

package/dist/graph/slots.js

@@ -67,14 +67,22 @@ function prelude(renderClass, alphaMode) {
         ? "  if (alpha < hashed_alpha_threshold(input.restPos)) { discard; }"
         : "  if (alpha < 0.001) { discard; }";
     const gate = renderClass === "eye" ? EYE_REAR_GATE : "";
+    // Double-sided shading, winding-independent: a normal pointing away from the
+    // camera means we're seeing the surface's other side — flip it. Only genuinely
+    // camera-averted fragments change (front surfaces have dot(n,v) > 0 and are
+    // untouched), unlike a front_facing test, which PMX's clockwise winding
+    // inverts. Fixes inner skirt linings (裙子白1-style flipped-normal copies)
+    // shading near-black through sheer outer layers. Eye is exempt: it FRONT-culls
+    // by design, so its visible fragments are back faces with intended normals.
+    const flip = renderClass === "eye" ? "" : "\n  n = select(-n, n, dot(n, v) >= 0.0);";
     return `@fragment fn fs(input: VertexOutput) -> FSOut {
   let tex_s = textureSample(diffuseTexture, diffuseSampler, input.uv);
   // MMD alpha semantics: material alpha × texture alpha.
   let alpha = material.alpha * tex_s.a;
 ${discard}
 
-  let n = safe_normal(input.normal);
-  let v = normalize(camera.viewPos - input.worldPos);
+  var n = safe_normal(input.normal);
+  let v = normalize(camera.viewPos - input.worldPos);${flip}
 ${gate}
   let l = -light.lights[0].direction.xyz;
   let sun = light.lights[0].color.xyz * light.lights[0].color.w;

package/dist/shaders/materials/common.d.ts

@@ -1,5 +1,5 @@
 export declare const COMMON_BINDINGS_WGSL = "\n\nstruct CameraUniforms {\n  view: mat4x4f,\n  projection: mat4x4f,\n  viewPos: vec3f,\n  _padding: f32,\n};\n\nstruct Light {\n  direction: vec4f,\n  color: vec4f,\n};\n\nstruct LightUniforms {\n  ambientColor: vec4f,\n  lights: array<Light, 4>,\n};\n\n// Per-material uniforms. Every material binds this layout even if it ignores fields;\n// the engine keeps one bind group layout across all material pipelines. The PMX\n// classic-material fields (ambient/specular/shininess) are carried for graph nodes that\n// want them; most graphs read only diffuseColor + alpha.\nstruct MaterialUniforms {\n  diffuseColor: vec3f,   // PMX diffuse rgb \u2014 the material_diffuse node reads this\n  alpha: f32,            // 0 \u2192 discard; <1 \u2192 transparent draw call\n  ambient: vec3f,        // PMX ambient rgb\n  shininess: f32,        // PMX specular power\n  specular: vec3f,       // PMX specular rgb\n  sphereMode: f32,       // 0 none \u00B7 1 multiply (sph) \u00B7 2 add (spa)\n  // Skeleton index of the \u982D (head) bone, or -1. Lets the eye shader gate\n  // the post-alpha-eye stencil by camera-vs-face hemisphere.\n  headBoneIndex: f32,\n  _pad0: f32,\n  _pad1: f32,\n  _pad2: f32,\n};\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) normal: vec3f,\n  @location(1) uv: vec2f,\n  @location(2) worldPos: vec3f,\n  // Bind-pose object-space position (the raw pre-skin vertex attribute). Procedural\n  // textures (noise bump, sparkle, Generated-coord gradients) key off this instead of\n  // worldPos so the pattern rides with the surface \u2014 otherwise the mesh swims through a\n  // world-static noise field under any skinning deformation or root (\u30BB\u30F3\u30BF\u30FC) motion.\n  // At rest skinMats are identity so restPos == worldPos, which is why existing noise-\n  // scale constants stay valid without retuning.\n  @location(3) restPos: vec3f,\n};\n\nstruct LightVP { viewProj: mat4x4f, };\n\n@group(0) @binding(0) var<uniform> camera: CameraUniforms;\n@group(0) @binding(1) var<uniform> light: LightUniforms;\n@group(0) @binding(2) var diffuseSampler: sampler;\n@group(0) @binding(3) var shadowMap: texture_depth_2d;\n@group(0) @binding(4) var shadowSampler: sampler_comparison;\n@group(0) @binding(5) var<uniform> lightVP: LightVP;\n// binding(9) brdfLut is declared inside NODES_WGSL (nodes.ts).\n@group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;\n@group(2) @binding(0) var diffuseTexture: texture_2d<f32>;\n@group(2) @binding(1) var<uniform> material: MaterialUniforms;\n// Reserved for future sphere/toon graph nodes; graphs that don't read them get the\n// 1\u00D71 white fallback bound here.\n@group(2) @binding(2) var toonTexture: texture_2d<f32>;\n@group(2) @binding(3) var sphereTexture: texture_2d<f32>;\n\n// Four-bone blended normals can cancel to ~zero on physics-driven parts\n// (opposing bone rotations at 50/50 weights) \u2014 normalize(0) is 0/0 = NaN,\n// which poisons the whole shading stack and flashes through bloom. Fall\n// back to up for degenerate normals instead.\nfn safe_normal(nIn: vec3f) -> vec3f {\n  let l2 = dot(nIn, nIn);\n  if (l2 < 1e-12) { return vec3f(0.0, 1.0, 0.0); }\n  return nIn * inverseSqrt(l2);\n}\n\n";
-export declare const SAMPLE_SHADOW_WGSL = "\n\nfn sampleShadow(worldPos: vec3f, n: vec3f) -> f32 {\n  if (dot(n, -light.lights[0].direction.xyz) <= 0.0) { return 0.0; }\n  let biasedPos = worldPos + n * 0.08;\n  let lclip = lightVP.viewProj * vec4f(biasedPos, 1.0);\n  let ndc = lclip.xyz / max(lclip.w, 1e-6);\n  let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);\n  let cmpZ = ndc.z - 0.001;\n  let ts = 1.0 / 2048.0;\n  let s00 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts, -ts), cmpZ);\n  let s10 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(0.0, -ts), cmpZ);\n  let s20 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts, -ts), cmpZ);\n  let s01 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts, 0.0), cmpZ);\n  let s11 = textureSampleCompareLevel(shadowMap, shadowSampler, suv, cmpZ);\n  let s21 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts, 0.0), cmpZ);\n  let s02 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts,  ts), cmpZ);\n  let s12 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(0.0,  ts), cmpZ);\n  let s22 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts,  ts), cmpZ);\n  return (s00 + s10 + s20 + s01 + s11 + s21 + s02 + s12 + s22) * (1.0 / 9.0);\n}\n\n";
+export declare const SAMPLE_SHADOW_WGSL = "\n\nfn sampleShadow(worldPos: vec3f, n: vec3f) -> f32 {\n  if (dot(n, -light.lights[0].direction.xyz) <= 0.0) { return 0.0; }\n  let biasedPos = worldPos + n * 0.08;\n  let lclip = lightVP.viewProj * vec4f(biasedPos, 1.0);\n  let ndc = lclip.xyz / max(lclip.w, 1e-6);\n  let suv = vec2f(ndc.x * 0.5 + 0.5, 0.5 - ndc.y * 0.5);\n  let cmpZ = ndc.z - 0.001;\n  let ts = 1.0 / 4096.0;\n  let s00 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts, -ts), cmpZ);\n  let s10 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(0.0, -ts), cmpZ);\n  let s20 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts, -ts), cmpZ);\n  let s01 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts, 0.0), cmpZ);\n  let s11 = textureSampleCompareLevel(shadowMap, shadowSampler, suv, cmpZ);\n  let s21 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts, 0.0), cmpZ);\n  let s02 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(-ts,  ts), cmpZ);\n  let s12 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f(0.0,  ts), cmpZ);\n  let s22 = textureSampleCompareLevel(shadowMap, shadowSampler, suv + vec2f( ts,  ts), cmpZ);\n  return (s00 + s10 + s20 + s01 + s11 + s21 + s02 + s12 + s22) * (1.0 / 9.0);\n}\n\n";
 export declare const COMMON_VS_WGSL = "\n\n@vertex fn vs(\n  @location(0) position: vec3f,\n  @location(1) normal: vec3f,\n  @location(2) uv: vec2f,\n  @location(3) joints0: vec4<u32>,\n  @location(4) weights0: vec4<f32>\n) -> VertexOutput {\n  var output: VertexOutput;\n  let pos4 = vec4f(position, 1.0);\n  let weightSum = weights0.x + weights0.y + weights0.z + weights0.w;\n  let invWeightSum = select(1.0, 1.0 / weightSum, weightSum > 0.0001);\n  let nw = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);\n  var skinnedPos = vec4f(0.0);\n  var skinnedNrm = vec3f(0.0);\n  for (var i = 0u; i < 4u; i++) {\n    let m = skinMats[joints0[i]];\n    let w = nw[i];\n    skinnedPos += (m * pos4) * w;\n    skinnedNrm += (mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz) * normal) * w;\n  }\n  output.position = camera.projection * camera.view * vec4f(skinnedPos.xyz, 1.0);\n  output.normal = skinnedNrm;\n  output.uv = uv;\n  output.worldPos = skinnedPos.xyz;\n  output.restPos = position;\n  return output;\n}\n\n";
 export declare const COMMON_FS_OUT_WGSL = "\n\nstruct FSOut {\n  @location(0) color: vec4f,\n  @location(1) mask: vec4f,\n};\n\n";
 export declare const COMMON_MATERIAL_PRELUDE_WGSL: string;

package/dist/shaders/materials/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/shaders/materials/common.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,oBAAoB,8pGA+EhC,CAAC;AAOF,eAAO,MAAM,kBAAkB,4xCAsB9B,CAAC;AAQF,eAAO,MAAM,cAAc,s+BA8B1B,CAAC;AAsBF,eAAO,MAAM,kBAAkB,0FAO9B,CAAC;AAMF,eAAO,MAAM,4BAA4B,QACwC,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/shaders/materials/common.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,oBAAoB,8pGA+EhC,CAAC;AASF,eAAO,MAAM,kBAAkB,4xCAsB9B,CAAC;AAQF,eAAO,MAAM,cAAc,s+BA8B1B,CAAC;AAsBF,eAAO,MAAM,kBAAkB,0FAO9B,CAAC;AAMF,eAAO,MAAM,4BAA4B,QACwC,CAAA"}