reze-engine 0.25.1 → 0.26.0

package/dist/engine.js

@@ -142,6 +142,14 @@ export const DEFAULT_VIEW_TRANSFORM = {
     gamma: 1.0,
     look: "medium_high_contrast",
 };
+const NEUTRAL_GRADE_CHANNEL = 0.5;
+export const DEFAULT_COLOR_GRADING = {
+    shadows: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+    midtones: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+    highlights: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+    contrast: 1,
+    saturation: 1,
+};
 export const DEFAULT_ENGINE_OPTIONS = {
     world: { color: new Vec3(0.4014, 0.4944, 0.647), strength: 0.3 },
     sun: { color: new Vec3(1.0, 1.0, 1.0), strength: 2.0, direction: new Vec3(-0.0873, -0.3844, 0.919) },
@@ -196,14 +204,10 @@ function buildAlphaSampler(source, rgba, width, height) {
 /** 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
- *  they classify two distinct things:
- *    sheer   (avg low)            — a veil: mostly see-through everywhere
- *    partial (translucentFrac up) — mostly-opaque cloth with sheer REGIONS,
- *                                   e.g. a lace skirt panel
- *  Both route to the transparent bucket; only `sheer` is excluded from the
- *  shadow map and outline pass. */
+ *   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;
-const PARTIAL_TRANSLUCENT_FRAC = 0.15;
 function materialAlphaStats(verts, indices, firstIndex, count, sampler) {
     if (!sampler)
         return { avg: 1, translucentFrac: 0 };
@@ -274,7 +278,7 @@ export class Engine {
         // unchanged).
         this.hdrFormat = "rgba16float";
         // [exposure, invGamma, _, _,  bloomTint.x, bloomTint.y, bloomTint.z, bloomIntensity]
-        this.compositeUniformData = new Float32Array(28);
+        this.compositeUniformData = new Float32Array(40);
         /** Composite background (display-space sRGB 0–1) — null = transparent canvas. */
         this.backgroundColor = null;
         // 360 backdrop (equirectangular skybox, sampled by view ray in composite).
@@ -337,8 +341,20 @@ export class Engine {
         };
         this.animationFrameId = null;
         this.renderLoopCallback = null;
+        this.colorGrading = {
+            shadows: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+            midtones: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+            highlights: new Vec3(NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL, NEUTRAL_GRADE_CHANNEL),
+            contrast: DEFAULT_COLOR_GRADING.contrast,
+            saturation: DEFAULT_COLOR_GRADING.saturation,
+        };
         /** Debug/diagnostic: skip every inverted-hull outline draw. */
-        this.outlineEnabled = true;
+        // 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;
@@ -601,6 +617,38 @@ export class Engine {
         const v = this.viewTransform;
         return { exposure: v.exposure, gamma: v.gamma, look: v.look };
     }
+    /**
+     * Color-grade the tonemapped scene (ASC CDL slope/offset/power + saturation).
+     * The background layer is deliberately left ungraded — see the call site in
+     * composite.ts. Uniforms-only: no pipeline rebuild, safe to call per frame
+     * (e.g. from a slider drag).
+     */
+    setColorGrading(patch) {
+        const g = this.colorGrading;
+        if (patch.shadows)
+            g.shadows = new Vec3(patch.shadows.x, patch.shadows.y, patch.shadows.z);
+        if (patch.midtones)
+            g.midtones = new Vec3(patch.midtones.x, patch.midtones.y, patch.midtones.z);
+        if (patch.highlights)
+            g.highlights = new Vec3(patch.highlights.x, patch.highlights.y, patch.highlights.z);
+        if (patch.contrast !== undefined)
+            g.contrast = patch.contrast;
+        if (patch.saturation !== undefined)
+            g.saturation = patch.saturation;
+        if (this.device && this.compositeUniformBuffer)
+            this.writeCompositeViewUniforms();
+    }
+    /** Current grade (for serialization into a scene descriptor). */
+    getColorGrading() {
+        const g = this.colorGrading;
+        return {
+            shadows: new Vec3(g.shadows.x, g.shadows.y, g.shadows.z),
+            midtones: new Vec3(g.midtones.x, g.midtones.y, g.midtones.z),
+            highlights: new Vec3(g.highlights.x, g.highlights.y, g.highlights.z),
+            contrast: g.contrast,
+            saturation: g.saturation,
+        };
+    }
     setViewTransformOptions(patch) {
         const v = this.viewTransform;
         if (patch.exposure !== undefined)
@@ -643,6 +691,31 @@ export class Engine {
         u[25] = this.backgroundEffect ? 1 : 0;
         u[26] = this.canvas.width;
         u[27] = this.canvas.height;
+        // ── Grade (viewU[7..9]) ── The UI's three tonal COLORS map to ASC CDL here,
+        // on the CPU, so the shader only ever sees slope/offset/power. Mid-gray is
+        // neutral in all three; the signed distance from it is the amount.
+        const g = this.colorGrading;
+        const off = (c) => (c - NEUTRAL_GRADE_CHANNEL) * 0.5; // ±0.25 lift
+        // power < 1 brightens, so midtones ABOVE neutral must lower the exponent.
+        const pow_ = (c) => Math.max(0.05, 1 - (c - NEUTRAL_GRADE_CHANNEL) * 1.5);
+        const slope = (c) => Math.max(0, 1 + (c - NEUTRAL_GRADE_CHANNEL) * 1.5);
+        u[28] = off(g.shadows.x);
+        u[29] = off(g.shadows.y);
+        u[30] = off(g.shadows.z);
+        u[31] = g.contrast;
+        u[32] = pow_(g.midtones.x);
+        u[33] = pow_(g.midtones.y);
+        u[34] = pow_(g.midtones.z);
+        u[35] = g.saturation;
+        u[36] = slope(g.highlights.x);
+        u[37] = slope(g.highlights.y);
+        u[38] = slope(g.highlights.z);
+        // Neutral grade → flag off, so the default pipeline pays nothing per pixel.
+        const neutral = u[28] === 0 && u[29] === 0 && u[30] === 0 &&
+            u[32] === 1 && u[33] === 1 && u[34] === 1 &&
+            u[36] === 1 && u[37] === 1 && u[38] === 1 &&
+            g.contrast === 1 && g.saturation === 1;
+        u[39] = neutral ? 0 : 1;
         this.device.queue.writeBuffer(this.compositeUniformBuffer, 0, u);
     }
     /**
@@ -1194,6 +1267,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" },
                 ],
             },
             {
@@ -1448,6 +1523,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)
@@ -1455,6 +1531,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({
@@ -1468,7 +1545,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",
@@ -1483,8 +1563,10 @@ 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
@@ -1666,10 +1748,11 @@ export class Engine {
         // mirroring EEVEE where bloom color/intensity are combine-stage params, not prefilter).
         this.compositeUniformBuffer = this.device.createBuffer({
             label: "composite view uniforms",
-            // 7 × vec4f: (exposure, invGamma, _, _) · (bloom tint, intensity) ·
+            // 10 × vec4f: (exposure, invGamma, _, _) · (bloom tint, intensity) ·
             // (bg rgb, mode) · camera right/up/forward basis for the 360 skybox ray ·
-            // (time, _, canvas width, canvas height) for user background effects.
-            size: 112,
+            // (time, _, canvas width, canvas height) for user background effects ·
+            // three grade vectors (CDL offset+contrast, power+saturation, slope+flag).
+            size: 160,
             usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
         });
         this.bgParamsDummyBuffer = this.device.createBuffer({
@@ -3038,27 +3121,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 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 partial = !sheer && stats.translucentFrac > PARTIAL_TRANSLUCENT_FRAC;
-            // Transparent bucket: drawn after the opaque bucket (and hair) with depth
-            // WRITE OFF, so a lace panel folded in front of itself blends both layers
-            // consistently instead of a triangle-order patchwork of single/double
-            // coverage. Partial-sheer cloth still casts shadows and keeps its outline;
-            // fully sheer cloth (veil) does neither.
-            const isTransparent = materialAlpha < 1.0 - 0.001 || sheer || partial;
+            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/sheer disputes).
-            console.info(`[reze] ${mat.name}: alpha=${materialAlpha.toFixed(2)} avg=${stats.avg.toFixed(2)} sheerFrac=${stats.translucentFrac.toFixed(2)} ${sheer ? "SHEER" : partial ? "PARTIAL" : "opaque"} bucket=${isTransparent ? "transparent" : "opaque"} edge=${(mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0 ? (sheer ? "skipped(sheer)" : "on") : "off"}`);
+            // 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;
@@ -3089,23 +3170,13 @@ 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,
-                castsShadow: !sheer,
-            });
-            // No inverted-hull outline for SHEER materials: the outline shader draws a
-            // solid edgeColor silhouette (it never samples texture alpha), so a
-            // see-through veil dragged a near-black hull over the cloth behind it —
-            // broken black shapes that waved with physics and flickered with camera
-            // angle. A solid rim on see-through fabric is wrong in principle.
-            if ((mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0 && !sheer) {
+            // 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],
                     mat.edgeColor[1],
@@ -3121,18 +3192,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);
@@ -3713,13 +3791,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)
@@ -3992,8 +4082,7 @@ export class Engine {
         let overEyesPipeline;
         try {
             pipeline = await this.createRenderClassPipeline(renderClass, module, false);
-            // Transparent-bucket draws don't write depth (self-overlap must blend, not
-            // patchwork) — same shading, different depth state.
+            // 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);
@@ -4139,14 +4228,10 @@ 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) {
-        // Transparent draws WRITE depth — MMD semantics: PMX triangle/material order
-        // is the author's compositing order, and a fold HIDES its far side rather
-        // than blending it (the far side shades dark — light-averted — so letting it
-        // show through read as gray fold-shaped stains; depth-write-off made every
-        // fold do that). The no-write twins stay available for a future true-OIT
-        // path but are deliberately unused.
         if (dc.groupId) {
             const install = inst.styleGroups.get(dc.groupId);
             if (install)
@@ -4156,9 +4241,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;
@@ -4178,38 +4264,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) {
-        if (!this.outlineEnabled)
-            return;
-        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);
@@ -4217,19 +4292,26 @@ 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);
-        // Order matters (the black-hull saga): transparent color draws don't write
-        // depth (self-overlap must double-blend, not patchwork), so ALL outlines
-        // draw after the transparent depth PREPASS has recorded the fabric's depth
-        // — otherwise every hull behind a sheer skirt shows straight through it.
+    }
+    renderModelOpaquePhase(pass, inst) {
+        this.setModelDrawState(pass, inst);
         this.drawMaterials(pass, inst, "opaque");
         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, "opaque-outline");
-        this.drawOutlines(pass, inst, "transparent-outline");
     }
     /** Depth-only re-draw of transparent-bucket materials (see depth-prepass.ts).
-     *  Unused while transparent draws write depth themselves (MMD parity) — kept
-     *  for the dormant no-write/OIT path. */
+     *  Dormant — kept for a future order-independent-transparency path. */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     drawTransparentDepthPrepass(pass, inst) {
         let bound = false;
@@ -4291,6 +4373,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/index.d.ts

@@ -1,4 +1,4 @@
-export { Engine, DEFAULT_BLOOM_OPTIONS, DEFAULT_VIEW_TRANSFORM, type EngineStats, type EngineOptions, type BloomOptions, type ViewTransformOptions, type LoadModelFromFilesOptions, type MaterialPreset, type MaterialPresetMap, type ModelTransform, type GizmoDragEvent, type GizmoDragCallback, type GizmoDragKind, type BackgroundEffectParamValue, type BackgroundEffectResult, } from "./engine";
+export { Engine, DEFAULT_BLOOM_OPTIONS, DEFAULT_VIEW_TRANSFORM, DEFAULT_COLOR_GRADING, type ColorGradingOptions, type EngineStats, type EngineOptions, type BloomOptions, type ViewTransformOptions, type LoadModelFromFilesOptions, type MaterialPreset, type MaterialPresetMap, type ModelTransform, type GizmoDragEvent, type GizmoDragCallback, type GizmoDragKind, type BackgroundEffectParamValue, type BackgroundEffectResult, } from "./engine";
 export { parsePmxFolderInput, pmxFileAtRelativePath, type PmxFolderInputResult } from "./folder-upload";
 export { compileGraph, validateGraph, assignStyleSlots, type CompileOptions, type CompileResult, type StyleSlot, } from "./graph/compile";
 export type { ShaderGraph, GraphNode, GraphLink, ExposedParam, SocketValue, Diagnostic, } from "./graph/schema";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,qBAAqB,EACrB,sBAAsB,EACtB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,GAC5B,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AACvG,OAAO,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAA;AACxB,YAAY,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC7G,YAAY,EACV,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AACzC,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,GACb,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAC9B,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,GAC5B,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AACvG,OAAO,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAA;AACxB,YAAY,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC7G,YAAY,EACV,UAAU,EACV,eAAe,EACf,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AACzC,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,GACb,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA"}

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Engine, DEFAULT_BLOOM_OPTIONS, DEFAULT_VIEW_TRANSFORM, } from "./engine";
+export { Engine, DEFAULT_BLOOM_OPTIONS, DEFAULT_VIEW_TRANSFORM, DEFAULT_COLOR_GRADING, } from "./engine";
 export { parsePmxFolderInput, pmxFileAtRelativePath } from "./folder-upload";
 export { compileGraph, validateGraph, assignStyleSlots, } from "./graph/compile";
 export { NODE_REGISTRY } from "./graph/registry";

package/dist/shaders/passes/composite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/composite.ts"],"names":[],"mappings":"AASA;;;;;;;;;;;;;yEAayE;AACzE,MAAM,MAAM,qBAAqB,GAAG;IAClC,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AA8HD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,qBAAqB,GAAG,IAAI,GAAG,MAAM,CAWlF;AAED,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,QAA6B,CAAA"}
+{"version":3,"file":"composite.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/composite.ts"],"names":[],"mappings":"AASA;;;;;;;;;;;;;yEAayE;AACzE,MAAM,MAAM,qBAAqB,GAAG;IAClC,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAA;IACZ,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAyKD,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,qBAAqB,GAAG,IAAI,GAAG,MAAM,CAelF;AAED,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,QAA6B,CAAA"}

package/dist/shaders/passes/composite.js

@@ -17,7 +17,7 @@ override APPLY_GAMMA: bool = true;
 @group(0) @binding(0) var hdrTex: texture_2d<f32>;
 @group(0) @binding(1) var bloomTex: texture_2d<f32>;   // bloomUpTexture mip 0 (full pyramid top)
 @group(0) @binding(2) var bloomSamp: sampler;
-@group(0) @binding(3) var<uniform> viewU: array<vec4<f32>, 7>;
+@group(0) @binding(3) var<uniform> viewU: array<vec4<f32>, 10>;
 // Aux mask/alpha texture. .r = bloom mask (unused here; bloom blit uses it).
 // .g = accumulated canvas alpha (what hdr.a carried before the HDR format
 // became rg11b10ufloat). We unpremultiply HDR by this alpha for tonemap, then
@@ -40,6 +40,8 @@ override APPLY_GAMMA: bool = true;
 // viewU[3] = (camera right, tanHalfFov·aspect); viewU[4] = (camera up, tanHalfFov);
 // viewU[5] = (camera forward, _) — refreshed per frame while skybox/effect active.
 // viewU[6] = (time seconds, effect on/off, canvas width, canvas height).
+// viewU[7] = (grade offset.rgb, contrast);  viewU[8] = (grade power.rgb, saturation);
+// viewU[9] = (grade slope.rgb, grade on/off) — see grade() below.
 // invGamma = 1/gamma precomputed on CPU — avoids a per-pixel divide.
 @group(0) @binding(6) var bgEquirect: texture_2d<f32>;
 
@@ -59,6 +61,24 @@ fn filmic(x: f32) -> f32 {
 
 /** Canvas size in pixels — for user background effects (aspect correction). */
 fn bgResolution() -> vec2f { return viewU[6].zw; }
+
+/** Color grading, applied to the tonemapped SCENE (not the background — see the
+ *  call site). The core is ASC CDL, the film-industry interchange standard:
+ *
+ *      out = (in · slope + offset) ^ power        then saturation  (SOP → SAT)
+ *
+ *  Using the real standard rather than invented controls means a look authored
+ *  here maps onto any grading tool. slope/offset/power are derived on the CPU
+ *  from the UI's shadow/midtone/highlight colors (see setColorGrading), so the
+ *  per-pixel cost is one mul-add, one pow, one lerp. */
+fn grade(c: vec3f) -> vec3f {
+  var x = pow(max(c * viewU[9].xyz + viewU[7].xyz, vec3f(0.0)), viewU[8].xyz);
+  // Contrast pivots on 0.5 — display-referred midpoint, since we grade post-Filmic.
+  x = (x - vec3f(0.5)) * viewU[7].w + vec3f(0.5);
+  // Rec.709 luma, matching the ASC SAT node.
+  let luma = dot(x, vec3f(0.2126, 0.7152, 0.0722));
+  return max(mix(vec3f(luma), x, viewU[8].w), vec3f(0.0));
+}
 `;
 const COMPOSITE_BODY = /* wgsl */ `
 @vertex fn vs(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4f {
@@ -84,6 +104,13 @@ const COMPOSITE_BODY = /* wgsl */ `
   let exposed = combined * exp2(viewU[0].x);
   let tm = vec3f(filmic(exposed.r), filmic(exposed.g), filmic(exposed.b));
   var disp = max(tm, vec3f(0.0));
+  // Grade the SCENE only, before the display gamma. Deliberately not applied to
+  // the background: it keeps a picked background color exactly as picked, and —
+  // load-bearing — leaves green-screen mode's key color unshifted so chroma
+  // keying still works. Skipped entirely when the grade is neutral.
+  if (viewU[9].w > 0.5) {
+    disp = grade(disp);
+  }
   if (APPLY_GAMMA) {
     disp = pow(disp, vec3f(viewU[0].y));
   }
@@ -94,7 +121,7 @@ const COMPOSITE_BODY = /* wgsl */ `
   var bgA = select(0.0, 1.0, bg.w > 0.5);
   var bgPm = bg.rgb * bgA;  // premultiplied accumulator
   let fxOn = viewU[6].y > 0.5;
-  if (bg.w > 1.5 || fxOn) {
+  if ((bg.w > 1.5 || fxOn) COVERAGE_GATE) {
     // The equirect and any effect both need this pixel's world-space view ray,
     // rebuilt from the camera basis. The dome sits at infinity (no parallax) —
     // PhotoDome-style, display-only.
@@ -126,16 +153,31 @@ const EFFECT_CALL = /* wgsl */ `
       bgA = fx.a + bgA * (1.0 - fx.a);
     }
 `;
+// Derivative builtins are illegal in non-uniform control flow (WGSL uniformity
+// analysis rejects the pipeline), so the coverage gate below can only wrap
+// effect code that doesn't use them. Checked textually at build time.
+const USES_DERIVATIVES = /\b(?:fwidth|dpdx|dpdy)(?:Fine|Coarse)?\s*\(/;
+/** Skip the whole background block (equirect sample + effect) behind pixels the
+ *  model fully covers — the composite multiplies the result by (1 - alpha) = 0
+ *  there anyway, and on a full-screen effect that's a third or more of the frame
+ *  (the cost Safari feels most). The equirect uses explicit-LOD sampling, which
+ *  is always legal in non-uniform flow; only derivative-using effects must keep
+ *  uniform control flow and forgo the gate. */
+function coverageGate(effect) {
+    const gated = !effect || !USES_DERIVATIVES.test(effect.wgsl);
+    return gated ? "&& alpha < 0.999" : "";
+}
 export function buildCompositeShader(effect) {
     if (!effect)
-        return COMPOSITE_HEAD + COMPOSITE_BODY.replace("BG_EFFECT_CALL", NO_EFFECT_CALL);
+        return (COMPOSITE_HEAD +
+            COMPOSITE_BODY.replace("BG_EFFECT_CALL", NO_EFFECT_CALL).replace("COVERAGE_GATE", coverageGate(null)));
     return (COMPOSITE_HEAD +
         "\n// ── user background effect (setBackgroundEffect) ──\n" +
         effect.paramsDecl +
         "\n" +
         effect.wgsl +
         "\n" +
-        COMPOSITE_BODY.replace("BG_EFFECT_CALL", EFFECT_CALL.trim()));
+        COMPOSITE_BODY.replace("BG_EFFECT_CALL", EFFECT_CALL.trim()).replace("COVERAGE_GATE", coverageGate(effect)));
 }
 /** Kept for compatibility with existing imports (the base, no-effect shader). */
 export const COMPOSITE_SHADER_WGSL = buildCompositeShader(null);

package/dist/shaders/passes/outline.d.ts

@@ -1,2 +1,2 @@
-export declare const OUTLINE_SHADER_WGSL = "\nstruct CameraUniforms {\n  view: mat4x4f,\n  projection: mat4x4f,\n  viewPos: vec3f,\n  _padding: f32,\n};\n\nstruct MaterialUniforms {\n  edgeColor: vec4f,\n  edgeSize: f32,\n  _padding1: f32,\n  _padding2: f32,\n  _padding3: f32,\n};\n\n@group(0) @binding(0) var<uniform> camera: CameraUniforms;\n@group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;\n@group(2) @binding(0) var<uniform> material: MaterialUniforms;\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n};\n\n@vertex fn vs(\n  @location(0) position: vec3f,\n  @location(1) normal: vec3f,\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\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 normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);\n\n  var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);\n  var skinnedNrm = vec3f(0.0, 0.0, 0.0);\n  for (var i = 0u; i < 4u; i++) {\n    let j = joints0[i];\n    let w = normalizedWeights[i];\n    let m = skinMats[j];\n    skinnedPos += (m * pos4) * w;\n    let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);\n    skinnedNrm += (r3 * normal) * w;\n  }\n  let worldPos = skinnedPos.xyz;\n  let worldNormal = normalize(skinnedNrm);\n\n  // Screen-space outline extrusion \u2014 MMD-style pixel-stable edge line.\n  // 1. Project position and normal-as-direction to clip space.\n  // 2. Normalize the 2D clip-space normal, aspect-compensated so \"one pixel horizontally\"\n  //    matches \"one pixel vertically\" (otherwise wide viewports squash the outline in X).\n  // 3. Offset clip-space xy by (normal * edgeSize * edgeScale), then multiply by w\n  //    so the perspective divide cancels out \u2192 offset stays constant in NDC regardless\n  //    of depth, matching how MMD / babylon-mmd style outlines look identical when zooming.\n  // 4. edgeScale is in NDC-y units per PMX edgeSize. \u2248 0.006 gives ~3px at 1080p; it's\n  //    tied to viewport HEIGHT so resizing the window keeps pixel thickness stable.\n  let viewProj = camera.projection * camera.view;\n  let clipPos = viewProj * vec4f(worldPos, 1.0);\n  let clipNormal = (viewProj * vec4f(worldNormal, 0.0)).xy;\n  // projection is column-major: proj[0][0] = 1/(aspect\u00B7tan(fov/2)), proj[1][1] = 1/tan(fov/2).\n  // Ratio proj[1][1]/proj[0][0] recovers the viewport aspect (width/height).\n  let aspect = camera.projection[1][1] / camera.projection[0][0];\n  let pixelDir = normalize(vec2f(clipNormal.x * aspect, clipNormal.y));\n  let ndcDir = vec2f(pixelDir.x / aspect, pixelDir.y);\n  let edgeScale = 0.0016;\n  let offset = ndcDir * material.edgeSize * edgeScale * clipPos.w;\n  output.position = vec4f(clipPos.xy + offset, clipPos.z, clipPos.w);\n  return output;\n}\n\nstruct FSOut { @location(0) color: vec4f, @location(1) mask: vec4f };\n@fragment fn fs() -> FSOut {\n  var out: FSOut;\n  out.color = material.edgeColor;\n  out.mask = vec4f(1.0, 1.0, 0.0, out.color.a);\n  return out;\n}\n";
+export declare const OUTLINE_SHADER_WGSL = "\nstruct CameraUniforms {\n  view: mat4x4f,\n  projection: mat4x4f,\n  viewPos: vec3f,\n  // Render-target height in device pixels (engine writes it each frame);\n  // width is recovered via the projection matrix's aspect.\n  viewportHeight: f32,\n};\n\nstruct MaterialUniforms {\n  edgeColor: vec4f,\n  edgeSize: f32,\n  _padding1: f32,\n  _padding2: f32,\n  _padding3: f32,\n};\n\n@group(0) @binding(0) var<uniform> camera: CameraUniforms;\n@group(0) @binding(1) var edgeSampler: sampler;\n@group(1) @binding(0) var<storage, read> skinMats: array<mat4x4f>;\n@group(2) @binding(0) var<uniform> material: MaterialUniforms;\n@group(2) @binding(1) var diffuseTexture: texture_2d<f32>;\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) uv: vec2f,\n};\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\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 normalizedWeights = select(vec4f(1.0, 0.0, 0.0, 0.0), weights0 * invWeightSum, weightSum > 0.0001);\n\n  var skinnedPos = vec4f(0.0, 0.0, 0.0, 0.0);\n  var skinnedNrm = vec3f(0.0, 0.0, 0.0);\n  for (var i = 0u; i < 4u; i++) {\n    let j = joints0[i];\n    let w = normalizedWeights[i];\n    let m = skinMats[j];\n    skinnedPos += (m * pos4) * w;\n    let r3 = mat3x3f(m[0].xyz, m[1].xyz, m[2].xyz);\n    skinnedNrm += (r3 * normal) * w;\n  }\n  let worldPos = skinnedPos.xyz;\n  let worldNormal = normalize(skinnedNrm);\n\n  let clipPos = camera.projection * camera.view * vec4f(worldPos, 1.0);\n\n  // babylon-mmd: screenNormal = normalize((view * worldNormal).xy)\n  let viewNormal = (camera.view * vec4f(worldNormal, 0.0)).xyz;\n  let snLen = length(viewNormal.xy);\n  let screenNormal = select(vec2f(0.0, 0.0), viewNormal.xy / snLen, snLen > 1e-5);\n\n  // Reference-height normalization (babylon-mmd ships this variant commented\n  // out as `renderHeight = 1080`): thickness is a constant FRACTION of the\n  // frame \u2014 2\u00B7edgeSize px at 1080p \u2014 so retina DPR and 4K export don't thin\n  // the rims to sub-pixel. Width follows the projection aspect.\n  // projection[1][1]/projection[0][0] = width/height for a symmetric frustum.\n  let aspect = camera.projection[1][1] / camera.projection[0][0];\n  let viewport = vec2f(1080.0 * aspect, 1080.0);\n\n  // NDC offset = edgeSize \u00B7 4/viewport, \u00D7w so the perspective divide cancels:\n  // constant screen thickness at any distance (babylon-mmd parity).\n  let offset = screenNormal * (material.edgeSize * 4.0 / viewport) * clipPos.w;\n  output.position = vec4f(clipPos.xy + offset, clipPos.z, clipPos.w);\n  output.uv = uv;\n  return output;\n}\n\nstruct FSOut { @location(0) color: vec4f, @location(1) mask: vec4f };\n@fragment fn fs(input: VertexOutput) -> FSOut {\n  // Rim alpha FOLLOWS the fabric's texture alpha instead of a hard alpha test:\n  // MMD draws blend-material edges solid (only cutout materials alpha-test), so\n  // a 0.4 discard erased the whole hull on semi-transparent cloth \u2014 stockinged\n  // legs crossing lost their outline entirely. Modulating instead keeps a\n  // proportional rim on sheer weave (never a solid black hull) and still\n  // discards true cut-out margins like hair-card borders.\n  let texA = textureSample(diffuseTexture, edgeSampler, input.uv).a;\n  if (texA < 0.05) {\n    discard;\n  }\n  var out: FSOut;\n  out.color = vec4f(material.edgeColor.rgb, material.edgeColor.a * texA);\n  out.mask = vec4f(1.0, 1.0, 0.0, out.color.a);\n  return out;\n}\n";
 //# sourceMappingURL=outline.d.ts.map

package/dist/shaders/passes/outline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/outline.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,klGAgF/B,CAAA"}
+{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/outline.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,mBAAmB,ksHAgG/B,CAAA"}