reze-engine 0.25.0 → 0.25.2

package/src/shaders/passes/outline.ts

@@ -1,12 +1,25 @@
-// MMD-style screen-space outline via normal-extrusion in clip space.
-// Aspect-compensated so pixel thickness stays stable across viewport sizes.
+// MMD-style inverted-hull outline, ported from babylon-mmd's mmdOutline shader
+// (the reference implementation whose output matches MMD):
+//   1. Extrude along the VIEW-SPACE normal's XY, normalized — a pure screen
+//      direction, so rims never smear toward the camera at grazing angles.
+//   2. Offset in clip space by edgeSize · 4/viewport · w. The ×w cancels the
+//      perspective divide → CONSTANT screen thickness of exactly
+//      2·edgeSize device pixels (babylon: `screenNormal / (viewport*0.25) *
+//      offset * projectedPosition.w`). PMX edgeSize ~0.3–1.0 ⇒ fine 0.6–2px
+//      rims, matching MMD instead of our former chunky constants.
+//   3. The FRAGMENT stage samples the material's own diffuse texture and
+//      MODULATES the rim's alpha by it (discarding only near-zero cut-out
+//      margins) — sheer fabric gets a proportional rim, never a solid black
+//      hull, without dropping the author's edge flag.
 
 export const OUTLINE_SHADER_WGSL = /* wgsl */ `
 struct CameraUniforms {
   view: mat4x4f,
   projection: mat4x4f,
   viewPos: vec3f,
-  _padding: f32,
+  // Render-target height in device pixels (engine writes it each frame);
+  // width is recovered via the projection matrix's aspect.
+  viewportHeight: f32,
 };
 
 struct MaterialUniforms {
@@ -18,16 +31,20 @@ struct MaterialUniforms {
 };
 
 @group(0) @binding(0) var<uniform> camera: CameraUniforms;
+@group(0) @binding(1) var edgeSampler: sampler;
 @group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;
 @group(2) @binding(0) var<uniform> material: MaterialUniforms;
+@group(2) @binding(1) var diffuseTexture: texture_2d<f32>;
 
 struct VertexOutput {
   @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
 };
 
 @vertex fn vs(
   @location(0) position: vec3f,
   @location(1) normal: vec3f,
+  @location(2) uv: vec2f,
   @location(3) joints0: vec4<u32>,
   @location(4) weights0: vec4<f32>
 ) -> VertexOutput {
@@ -51,33 +68,43 @@ struct VertexOutput {
   let worldPos = skinnedPos.xyz;
   let worldNormal = normalize(skinnedNrm);
 
-  // Screen-space outline extrusion — MMD-style pixel-stable edge line.
-  // 1. Project position and normal-as-direction to clip space.
-  // 2. Normalize the 2D clip-space normal, aspect-compensated so "one pixel horizontally"
-  //    matches "one pixel vertically" (otherwise wide viewports squash the outline in X).
-  // 3. Offset clip-space xy by (normal * edgeSize * edgeScale), then multiply by w
-  //    so the perspective divide cancels out → offset stays constant in NDC regardless
-  //    of depth, matching how MMD / babylon-mmd style outlines look identical when zooming.
-  // 4. edgeScale is in NDC-y units per PMX edgeSize. ≈ 0.006 gives ~3px at 1080p; it's
-  //    tied to viewport HEIGHT so resizing the window keeps pixel thickness stable.
-  let viewProj = camera.projection * camera.view;
-  let clipPos = viewProj * vec4f(worldPos, 1.0);
-  let clipNormal = (viewProj * vec4f(worldNormal, 0.0)).xy;
-  // projection is column-major: proj[0][0] = 1/(aspect·tan(fov/2)), proj[1][1] = 1/tan(fov/2).
-  // Ratio proj[1][1]/proj[0][0] recovers the viewport aspect (width/height).
+  let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);
+
+  // babylon-mmd: screenNormal = normalize((view * worldNormal).xy)
+  let viewNormal = (camera.view * vec4f(worldNormal, 0.0)).xyz;
+  let snLen = length(viewNormal.xy);
+  let screenNormal = select(vec2f(0.0, 0.0), viewNormal.xy / snLen, snLen > 1e-5);
+
+  // Reference-height normalization (babylon-mmd ships this variant commented
+  // out as \`renderHeight = 1080\`): thickness is a constant FRACTION of the
+  // frame — 2·edgeSize px at 1080p — so retina DPR and 4K export don't thin
+  // the rims to sub-pixel. Width follows the projection aspect.
+  // projection[1][1]/projection[0][0] = width/height for a symmetric frustum.
   let aspect = camera.projection[1][1] / camera.projection[0][0];
-  let pixelDir = normalize(vec2f(clipNormal.x * aspect, clipNormal.y));
-  let ndcDir = vec2f(pixelDir.x / aspect, pixelDir.y);
-  let edgeScale = 0.0016;
-  let offset = ndcDir * material.edgeSize * edgeScale * clipPos.w;
+  let viewport = vec2f(1080.0 * aspect, 1080.0);
+
+  // NDC offset = edgeSize · 4/viewport, ×w so the perspective divide cancels:
+  // constant screen thickness at any distance (babylon-mmd parity).
+  let offset = screenNormal * (material.edgeSize * 4.0 / viewport) * clipPos.w;
   output.position = vec4f(clipPos.xy + offset, clipPos.z, clipPos.w);
+  output.uv = uv;
   return output;
 }
 
 struct FSOut { @location(0) color: vec4f, @location(1) mask: vec4f };
-@fragment fn fs() -> FSOut {
+@fragment fn fs(input: VertexOutput) -> FSOut {
+  // Rim alpha FOLLOWS the fabric's texture alpha instead of a hard alpha test:
+  // MMD draws blend-material edges solid (only cutout materials alpha-test), so
+  // a 0.4 discard erased the whole hull on semi-transparent cloth — stockinged
+  // legs crossing lost their outline entirely. Modulating instead keeps a
+  // proportional rim on sheer weave (never a solid black hull) and still
+  // discards true cut-out margins like hair-card borders.
+  let texA = textureSample(diffuseTexture, edgeSampler, input.uv).a;
+  if (texA < 0.05) {
+    discard;
+  }
   var out: FSOut;
-  out.color = material.edgeColor;
+  out.color = vec4f(material.edgeColor.rgb, material.edgeColor.a * texA);
   out.mask = vec4f(1.0, 1.0, 0.0, out.color.a);
   return out;
 }