reze-engine 0.25.0 → 0.25.2

package/src/engine.ts

@@ -22,6 +22,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 {
@@ -172,6 +173,8 @@ type GroupInstall = {
   renderClass: RenderClass
   alphaMode: AlphaMode
   pipeline: GPURenderPipeline
+  /** Depth-write-off twin — dormant, kept for a future OIT path. */
+  pipelineNoDepthWrite: GPURenderPipeline
   /** hair render-class only: the stencil-matched IS_OVER_EYES=true variant. */
   overEyesPipeline?: GPURenderPipeline
   uniformBuffer: GPUBuffer
@@ -354,6 +357,12 @@ interface DrawCall {
   // Present only for material draw calls (opaque/transparent) — the grouping walk skips
   // any draw call without it.
   baseBindGroupEntries?: GPUBindGroupEntry[]
+  /** Material draws only: false = excluded from the shadow map (fully sheer). */
+  castsShadow?: boolean
+  /** Edge-flagged materials: interleaved inverted-hull outline drawn right after
+   *  this material with the outline pipeline. Shares this call's index range;
+   *  own bind group (edge uniforms + diffuse texture for the alpha test). */
+  outline?: { bindGroup: GPUBindGroup }
 }
 
 interface PickDrawCall {
@@ -448,21 +457,26 @@ function buildAlphaSampler(
   }
 }
 
-/** 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(
+function materialAlphaStats(
   verts: Float32Array,
   indices: Uint32Array,
   firstIndex: number,
   count: number,
   sampler: { a: Uint8ClampedArray; w: number; h: number } | null | undefined,
-): boolean {
-  if (!sampler) return false
+): { avg: number; translucentFrac: number } {
+  if (!sampler) return { avg: 1, translucentFrac: 0 }
   const triCount = Math.floor(count / 3)
-  if (triCount === 0) return false
+  if (triCount === 0) 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]
@@ -473,10 +487,13 @@ function materialIsSheer(
     // 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 {
@@ -509,6 +526,8 @@ export class Engine {
   // The one base shading model: ungrouped materials render this (compiled DEFAULT_GRAPH).
   // Grouped materials use their group's own compiled pipeline.
   private neutralPipeline!: GPURenderPipeline
+  private neutralPipelineNoDepthWrite!: GPURenderPipeline
+  private transparentDepthPrepassPipeline!: GPURenderPipeline
   // ── Style group runtime ──
   // Shared 256 B zero StyleUniforms buffer (group(2) binding(4)) bound by every ungrouped
   // material; grouped materials rebind to their group's own buffer (per-model, in the
@@ -897,6 +916,17 @@ export class Engine {
     if (this.device && this.compositeUniformBuffer) this.writeCompositeViewUniforms()
   }
 
+  /** 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).
+  private outlineEnabled = false
+  setOutlineEnabled(on: boolean): void {
+    this.outlineEnabled = on
+  }
+
   private rebuildCompositeBindGroup(): void {
     if (!this.device || !this.hdrResolveTexture || !this.compositeBloomView) return
     this.compositeBindGroup = this.device.createBindGroup({
@@ -1468,6 +1498,8 @@ export class Engine {
         attributes: [
           { shaderLocation: 0, offset: 0, format: "float32x3" as GPUVertexFormat },
           { shaderLocation: 1, offset: 3 * 4, format: "float32x3" as GPUVertexFormat },
+          // uv — the outline FS alpha-tests the diffuse texture (babylon-mmd parity)
+          { shaderLocation: 2, offset: 6 * 4, format: "float32x2" as GPUVertexFormat },
         ],
       },
       {
@@ -1600,6 +1632,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 as GPUVertexBufferLayout[] },
+      fragment: {
+        module: prepassModule,
+        entryPoint: "fs",
+        targets: sceneTargets.map((t) => ({ format: (t as GPUColorTargetState).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,
@@ -1695,6 +1765,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)
@@ -1702,6 +1773,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" } },
       ],
     })
 
@@ -1717,7 +1789,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({
@@ -1734,9 +1809,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.
@@ -3482,18 +3569,27 @@ export class Engine {
       }
 
       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.
@@ -3531,17 +3627,12 @@ export class Engine {
         this.zeroStyleBuffer,
       )
 
-      const type: DrawCallType = 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: DrawCall["outline"]
       if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
         const materialUniformData = new Float32Array([
           mat.edgeColor[0],
@@ -3558,19 +3649,27 @@ export class Engine {
         const outlineBindGroup = this.device.createBindGroup({
           label: `${prefix}outline: ${mat.name}`,
           layout: this.outlinePerMaterialBindGroupLayout,
-          entries: [{ binding: 0, resource: { buffer: outlineUniformBuffer } }],
-        })
-        const outlineType: DrawCallType = 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: DrawCallType = 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)
@@ -4419,11 +4518,22 @@ export class Engine {
     }
 
     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)
+        if (inst.model.visible) 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):
@@ -4711,9 +4821,12 @@ export class Engine {
     }
 
     let pipeline: GPURenderPipeline
+    let pipelineNoDepthWrite: GPURenderPipeline
     let overEyesPipeline: GPURenderPipeline | undefined
     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)
     } catch (e) {
       diagnostics.push({ severity: "error", message: `pipeline creation failed: ${(e as Error).message}` })
@@ -4739,6 +4852,7 @@ export class Engine {
       renderClass,
       alphaMode,
       pipeline,
+      pipelineNoDepthWrite,
       overEyesPipeline,
       uniformBuffer,
       slotMap: result.slotMap,
@@ -4802,7 +4916,9 @@ export class Engine {
     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,
+    )
   }
 
   /**
@@ -4814,6 +4930,7 @@ export class Engine {
     renderClass: RenderClass,
     module: GPUShaderModule,
     overEyes: boolean,
+    depthWrite = true,
   ): Promise<GPURenderPipeline> {
     const base = {
       label: `style ${renderClass}${overEyes ? " (over eyes)" : ""}`,
@@ -4824,7 +4941,7 @@ export class Engine {
     }
     const plainDepth: GPUDepthStencilState = {
       format: "depth24plus-stencil8",
-      depthWriteEnabled: true,
+      depthWriteEnabled: depthWrite,
       depthCompare: "less-equal",
     }
     let depthStencil: GPUDepthStencilState = plainDepth
@@ -4868,7 +4985,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).
   private pipelineForDrawCall(inst: ModelInstance, dc: DrawCall): GPURenderPipeline {
     if (dc.groupId) {
       const install = inst.styleGroups.get(dc.groupId)
@@ -4879,9 +4998,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.
    */
   private drawMaterials(pass: GPURenderPassEncoder, inst: ModelInstance, type: "opaque" | "transparent"): void {
     let currentPipeline: GPURenderPipeline | null = null
@@ -4900,51 +5020,72 @@ 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.
-   */
-  private drawOutlines(pass: GPURenderPassEncoder, inst: ModelInstance, type: DrawCallType): void {
-    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.
    */
-  private renderOneModel(pass: GPURenderPassEncoder, inst: ModelInstance): void {
+  private setModelDrawState(pass: GPURenderPassEncoder, inst: ModelInstance): void {
     pass.setVertexBuffer(0, inst.vertexBuffer)
     pass.setVertexBuffer(1, inst.jointsBuffer)
     pass.setVertexBuffer(2, inst.weightsBuffer)
     pass.setIndexBuffer(inst.indexBuffer, "uint32")
-
     // 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)
+  }
 
+  private renderModelOpaquePhase(pass: GPURenderPassEncoder, inst: ModelInstance): void {
+    this.setModelDrawState(pass, inst)
     this.drawMaterials(pass, inst, "opaque")
-    this.drawOutlines(pass, inst, "opaque-outline")
     this.drawHairOverEyes(pass, inst)
+  }
+
+  private renderModelTransparentPhase(pass: GPURenderPassEncoder, inst: ModelInstance): void {
+    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
+  protected drawTransparentDepthPrepass(pass: GPURenderPassEncoder, inst: ModelInstance): void {
+    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)
+    }
   }
 
   /**
@@ -4991,6 +5132,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

package/src/graph/slots.ts

@@ -76,14 +76,23 @@ function prelude(renderClass: RenderClass, alphaMode: AlphaMode): string {
       ? "  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;