reze-engine 0.66.4 → 0.67.0

package/dist/shaders/passes/composite.js

@@ -97,7 +97,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>, 15>;
+@group(0) @binding(3) var<uniform> viewU: array<vec4<f32>, 16>;
 // 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
@@ -119,6 +119,8 @@ override APPLY_GAMMA: bool = true;
 // viewU[9] = (grade slope.rgb, grade flags) — bit 0 the CDL grade(), bit 1 the
 //            scene's own LUT (setStageGrade) — see _rzGradeScene() below.
 // viewU[10] = (camera world position, _) — refreshed with the basis above.
+// viewU[11..14] = the cast's positions (effects; count in viewU[10].w).
+// viewU[15] = (soft curve contrast, _, _, _).
 // invGamma = 1/gamma precomputed on CPU — avoids a per-pixel divide.
 @group(0) @binding(6) var bgEquirect: texture_2d<f32>;
 // The scene pass's own MSAA depth buffer, bound depth-only. NOT an extra
@@ -217,7 +219,7 @@ fn srgb_encode(x: f32) -> f32 {
  * The game's ACES branch is off in every scene measured.
  */
 fn softTransform(c: vec3f) -> vec3f {
-  let t = pow(max(vec3f(1.0) - exp(-2.5 * max(c, vec3f(0.0))), vec3f(0.0)), vec3f(1.4));
+  let t = pow(max(vec3f(1.0) - exp(-2.5 * max(c, vec3f(0.0))), vec3f(0.0)), vec3f(viewU[15].x));
   return vec3f(srgb_encode(t.r), srgb_encode(t.g), srgb_encode(t.b));
 }
 

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

@@ -6,5 +6,18 @@
  * edgeSize 16..20, so this is 20.
  */
 export declare const RZ_OUTLINE_DISSOLVE_OFFSET = 20;
+/** Where the scene-wide width multiplier sits, in bytes — the float after
+ *  dissolve (Engine.setOutlineWidth). */
+export declare const RZ_OUTLINE_WIDTH_OFFSET = 24;
+/** Where the scene-wide colour override sits, in bytes: rgb and a weight, 0
+ *  for the material's own edge colour (Engine.setOutlineColor). */
+export declare const RZ_OUTLINE_COLOR_OFFSET = 32;
+/** Where a style graph's outline (ShaderGraph.outline) sits, in bytes: the
+ *  textured flag at 28, then its shadow colour at 48. Unset, a hull draws its
+ *  PMX edge colour flat, as MMD does. */
+export declare const RZ_OUTLINE_TEXTURED_OFFSET = 28;
+export declare const RZ_OUTLINE_SHADOW_OFFSET = 48;
+/** The hull's own block, in floats. */
+export declare const RZ_OUTLINE_UNIFORM_FLOATS = 16;
 export declare function outlineShaderWgsl(): string;
 //# 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":"AAqBA;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAE5C,wBAAgB,iBAAiB,IAAI,MAAM,CA6L1C"}
+{"version":3,"file":"outline.d.ts","sourceRoot":"","sources":["../../../src/shaders/passes/outline.ts"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAC5C;yCACyC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAA;AACzC;mEACmE;AACnE,eAAO,MAAM,uBAAuB,KAAK,CAAA;AACzC;;yCAEyC;AACzC,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAC5C,eAAO,MAAM,wBAAwB,KAAK,CAAA;AAC1C,uCAAuC;AACvC,eAAO,MAAM,yBAAyB,KAAK,CAAA;AAE3C,wBAAgB,iBAAiB,IAAI,MAAM,CAgP1C"}

package/dist/shaders/passes/outline.js

@@ -24,6 +24,19 @@ import { DISSOLVE_WGSL } from "../materials/common";
  * edgeSize 16..20, so this is 20.
  */
 export const RZ_OUTLINE_DISSOLVE_OFFSET = 20;
+/** Where the scene-wide width multiplier sits, in bytes — the float after
+ *  dissolve (Engine.setOutlineWidth). */
+export const RZ_OUTLINE_WIDTH_OFFSET = 24;
+/** Where the scene-wide colour override sits, in bytes: rgb and a weight, 0
+ *  for the material's own edge colour (Engine.setOutlineColor). */
+export const RZ_OUTLINE_COLOR_OFFSET = 32;
+/** Where a style graph's outline (ShaderGraph.outline) sits, in bytes: the
+ *  textured flag at 28, then its shadow colour at 48. Unset, a hull draws its
+ *  PMX edge colour flat, as MMD does. */
+export const RZ_OUTLINE_TEXTURED_OFFSET = 28;
+export const RZ_OUTLINE_SHADOW_OFFSET = 48;
+/** The hull's own block, in floats. */
+export const RZ_OUTLINE_UNIFORM_FLOATS = 16;
 export function outlineShaderWgsl() {
     return /* wgsl */ `
 ${DISSOLVE_WGSL}
@@ -36,7 +49,7 @@ struct CameraUniforms {
   viewportHeight: f32,
 };
 
-// THE HULL'S OWN BLOCK, not the material's. 32 bytes of edge data, which is all
+// THE HULL'S OWN BLOCK, not the material's. 48 bytes of edge data, which is all
 // this pass shades with — and dissolve, which it has to obey.
 //
 // It reached for the material block's own layout first, declaring the skipped
@@ -49,15 +62,34 @@ struct MaterialUniforms {
   edgeColor: vec4f,
   edgeSize: f32,
   dissolve: f32,
-  _padding2: f32,
-  _padding3: f32,
+  /** The scene's width multiplier (setOutlineWidth), the same on every hull:
+   *  scales the author's edgeSize rather than replacing it, so a model's thin
+   *  and thick lines keep their proportion. */
+  widthScale: f32,
+  /** 1: a style graph's outline, the game's (Uber pass "Outline"): edgeSize is
+   *  a world width, held between 1.2 and 3 px of a 1920-wide frame, and the
+   *  colour is the picture × lerp(shadowColor, edgeColor, the key's
+   *  half-Lambert). 0: the PMX edge, flat. */
+  textured: f32,
+  /** The scene's colour in place of edgeColor.rgb, by .a (0 or 1). The
+   *  material's own alpha still holds — a line its author made sheer stays so. */
+  colorOverride: vec4f,
+  shadowColor: vec4f,
 };
 
+struct OutlineLight { direction: vec4f, color: vec4f, };
+/** The head of the scene's light block: the key is lights[0]. */
+struct OutlineLights { ambientColor: vec4f, lights: array<OutlineLight, 4>, };
+
 @group(0) @binding(0) var<uniform> camera: CameraUniforms;
 @group(0) @binding(1) var edgeSampler: sampler;
+@group(0) @binding(2) var<uniform> light: OutlineLights;
 @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>;
+/** A look's outline tint (ShaderGraph.outline.tint): one of its images, white
+ *  when it names none. */
+@group(2) @binding(2) var tintTexture: texture_2d<f32>;
 
 struct VertexOutput {
   @builtin(position) position: vec4f,
@@ -72,6 +104,7 @@ struct VertexOutput {
   /** How much of a pixel-wide line this one really is (1 = all of it): a line
    *  held at the minimum width fades by what it was short. */
   @location(3) coverage: f32,
+  @location(4) normal: vec3f,
 };
 
 /**
@@ -94,6 +127,11 @@ const RZ_OUTLINE_FULL_FIGURE = 12.5;
  *  the shortfall, so far lines thin out without aliasing into dashes. */
 const RZ_OUTLINE_MIN_PX = 1.5;
 
+fn safe_normal2(v: vec2f) -> vec2f {
+  let l = length(v);
+  return select(vec2f(0.0), v / l, l > 1e-6);
+}
+
 @vertex fn vs(
   @location(0) position: vec3f,
   @location(1) normal: vec3f,
@@ -153,21 +191,40 @@ const RZ_OUTLINE_MIN_PX = 1.5;
   // once the frame is taller than a figure. The PMX per-vertex edge scale
   // multiplies it all, as vertex colour alpha does in the game.
   let w = max(clipPos.w, 1e-4);
-  let breakDepth = RZ_OUTLINE_FULL_FIGURE * camera.projection[1][1];
-  let nearNdc = viewNormal.xy * (material.edgeSize * outlineNormal.w * 4.0 / refViewport);
-  var ndc = nearNdc * (min(w, breakDepth) / w);
-
-  // Antialiased minimum (the game's _OutlineAntialias): held at the minimum
-  // width and faded by the shortfall, never thinner. The game fades by
-  // sqrt(coverage.x · coverage.y), per axis; for one width that is the ratio
-  // itself.
-  let px = length(ndc * deviceViewport * 0.5);
-  let minPx = RZ_OUTLINE_MIN_PX * max(1.0, camera.viewportHeight / 1080.0);
+  var ndc: vec2f;
   var coverage = 1.0;
-  if (px < minPx) {
-    coverage = px / minPx;
-    ndc = select(vec2f(0.0), ndc * (minPx / px), px > 1e-6);
+  if (material.textured > 0.5) {
+    // The game's: a view-space offset of edgeSize world units along the view
+    // normal, projected, then each axis held between 1.2 px and 1.2 px ×
+    // (1 + _OutlineMaxOffsetMultiplier, 1.5) of a 1920-wide frame; a line the
+    // minimum had to push fades by how far it was pushed.
+    let off = viewNormal.xy * material.edgeSize * material.widthScale * outlineNormal.w;
+    let d1 = vec2f(off.x * camera.projection[0][0], off.y * camera.projection[1][1]) / w;
+    // the minimum along the push direction (the game's dir · 2/screen · 1.2)
+    let pxNdc = 2.0 / refViewport * 1.2 * safe_normal2(viewNormal.xy);
+    let mx = abs(pxNdc) * 2.5;
+    let o = min(mx, max(abs(d1), abs(pxNdc)));
+    // fadeOut = min(length(saturate(off − |d1|))·75, 1), on clip offsets (× w)
+    // in game units: w here is MMD units, 8 to the game's metre
+    coverage = 1.0 - min(length(saturate((o - abs(d1)) * w / 8.0)) * 75.0, 1.0);
+    ndc = o * select(vec2f(1.0), sign(d1), abs(d1) > vec2f(0.0));
+  } else {
+    let breakDepth = RZ_OUTLINE_FULL_FIGURE * camera.projection[1][1];
+    let nearNdc = viewNormal.xy * (material.edgeSize * material.widthScale * outlineNormal.w * 4.0 / refViewport);
+    ndc = nearNdc * (min(w, breakDepth) / w);
+
+    // Antialiased minimum (the game's _OutlineAntialias): held at the minimum
+    // width and faded by the shortfall, never thinner. The game fades by
+    // sqrt(coverage.x · coverage.y), per axis; for one width that is the ratio
+    // itself.
+    let px = length(ndc * deviceViewport * 0.5);
+    let minPx = RZ_OUTLINE_MIN_PX * max(1.0, camera.viewportHeight / 1080.0);
+    if (px < minPx) {
+      coverage = px / minPx;
+      ndc = select(vec2f(0.0), ndc * (minPx / px), px > 1e-6);
+    }
   }
+  output.normal = worldNormal;
   output.coverage = coverage;
   output.position = vec4f(clipPos.xy + ndc * w, clipPos.z, clipPos.w);
   output.uv = uv;
@@ -199,7 +256,8 @@ ${sceneFsOutWgsl({ name: "FSOut", aux: "mask" })}
   // bind-pose position — three passes, one rule, or they disagree about which
   // pieces are still there.
   if (material.dissolve < 0.9995 && input.faceT > material.dissolve) { discard; }
-  let texA = textureSample(diffuseTexture, edgeSampler, input.uv).a;
+  let tex = textureSample(diffuseTexture, edgeSampler, input.uv);
+  let texA = tex.a;
   if (texA < 0.05) {
     discard;
   }
@@ -208,7 +266,13 @@ ${sceneFsOutWgsl({ name: "FSOut", aux: "mask" })}
   // alpha above), it is drawn right after the surface it traces so what lies
   // under a faded line is already there, and 4× MSAA would quantize a fade to
   // four steps.
-  out.color = vec4f(material.edgeColor.rgb, material.edgeColor.a * texA * input.coverage);
+  var rgb = mix(material.edgeColor.rgb, material.colorOverride.rgb, material.colorOverride.a);
+  if (material.textured > 0.5) {
+    let lit = dot(-light.lights[0].direction.xyz, normalize(input.normal)) * 0.5 + 0.5;
+    let tint = textureSample(tintTexture, edgeSampler, input.uv).rgb;
+    rgb = tex.rgb * tint * mix(material.shadowColor.rgb, rgb, lit);
+  }
+  out.color = vec4f(rgb, material.edgeColor.a * texA * input.coverage);
   out.mask = vec4f(1.0, 1.0, 0.0, out.color.a);
 ${sceneIdPadWgsl("out")}  return out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reze-engine",
-  "version": "0.66.4",
+  "version": "0.67.0",
   "description": "A lightweight WebGPU engine for real-time 3D MMD/PMX model rendering",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/engine.ts

@@ -79,7 +79,14 @@ import {
 } from "./shaders/lights"
 import { buildLightGrid } from "./light-grid"
 import { groundShaderWgsl, GROUND_NOISE_BAKE_WGSL, GROUND_NOISE_SIZE } from "./shaders/passes/ground"
-import { outlineShaderWgsl, RZ_OUTLINE_DISSOLVE_OFFSET } from "./shaders/passes/outline"
+import {
+  outlineShaderWgsl,
+  RZ_OUTLINE_COLOR_OFFSET,
+  RZ_OUTLINE_DISSOLVE_OFFSET,
+  RZ_OUTLINE_SHADOW_OFFSET,
+  RZ_OUTLINE_TEXTURED_OFFSET,
+  RZ_OUTLINE_WIDTH_OFFSET,
+} from "./shaders/passes/outline"
 import { transparentDepthPrepassWgsl } 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"
@@ -238,7 +245,7 @@ const PRESET_NAME_HINTS: Array<[MaterialPreset, string[]]> = [
       "hair", "ahoge", "bang",
     ],
   ],
-  ["body", ["肌", "皮肤", "skin"]],
+  ["body", ["肌", "皮肤", "skin", "指甲", "nail"]],
   ["metal", ["金属", "メタル", "metal", "earring", "耳环", "耳環"]],
   [
     "cloth_smooth",
@@ -284,6 +291,11 @@ const PRESET_NAME_HINTS: Array<[MaterialPreset, string[]]> = [
   ],
 ]
 
+// Whole names that are body parts — skin by another name. Whole, never
+// substrings: 手 alone is a hand, inside 手套 (gloves) or 手镯 (a bracelet) it is
+// what the hand wears; 足 is a leg, 足袋 a sock.
+const BODY_PART_NAMES = new Set(["手", "手部", "腕", "足", "脚", "腿", "爪", "hand", "hands", "arm", "arms", "leg", "legs", "body"])
+
 // Resolve a material name to a style category (override map first, then name hints), or
 // null if nothing matches — a null-resolving material stays ungrouped (neutral default).
 function resolvePreset(materialName: string, map: MaterialPresetMap | undefined): MaterialPreset | null {
@@ -293,6 +305,7 @@ function resolvePreset(materialName: string, map: MaterialPresetMap | undefined)
     }
   }
   const lower = materialName.toLowerCase()
+  if (BODY_PART_NAMES.has(lower.replace(/[\s_.\-0-9]+$/, ""))) return "body"
   for (const [preset, hints] of PRESET_NAME_HINTS) {
     for (const hint of hints) {
       if (lower.includes(hint)) return preset
@@ -641,10 +654,16 @@ export type ViewTransformOptions = {
   exposure: number
   /** After the transform, display gamma (`pow(rgb, 1/gamma)`). */
   gamma: number
+  /**
+   * The "soft" curve's power, (1 - e^(-2.5x))^contrast. Aether Gazer sets it per
+   * scene (SceneSetting._contrast): 1.4 is its common value, the character page
+   * runs 1.7. A stage brings its own; the other transforms ignore it.
+   */
+  contrast: number
   /**
    * Which display transform the frame is formed with (composite.ts, viewTransform).
    *
-   * "soft" — Aether Gazer's own final curve, (1 - e^(-2.5x))^1.4. The default.
+   * "soft" — Aether Gazer's own final curve, (1 - e^(-2.5x))^contrast. The default.
    * "neutral" — Unity URP's Neutral, the Khronos PBR Neutral operator: colour
    *   passes through until the top fifth, which rolls off.
    * "aces" — Unity URP's ACES (RRT + ODT approximation from the Core RP).
@@ -660,6 +679,7 @@ export type ViewTransformName = "soft" | "neutral" | "aces" | "none"
 export const DEFAULT_VIEW_TRANSFORM: ViewTransformOptions = {
   exposure: 0,
   gamma: 1.0,
+  contrast: 1.4,
   transform: "soft",
 }
 
@@ -823,7 +843,9 @@ interface DrawCall {
   /** 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 }
+  /** The inverted hull: `pmx` when the PMX asked for an edge, `drawn` when it
+   *  is drawn — the PMX's, or its style group's look's outline. */
+  outline?: { bindGroup: GPUBindGroup; pmx: boolean; drawn: boolean }
   /** MODEL-SPACE AABB over this material's index range, computed at load:
    *  [minX, minY, minZ, maxX, maxY, maxZ]. Usable for culling only while the
    *  owning model is rigid (see ModelInstance.rigid) — animation moves vertices
@@ -930,6 +952,9 @@ interface ModelInstance {
    *  material buffers never reached it and a dissolved character kept her
    *  outline. Kept here so that write has somewhere to go. */
   outlineUniformBuffers: GPUBuffer[]
+  /** Each outlined material's hull block and its PMX edge (colour, size), for
+   *  a style graph's outline to take over and give back. */
+  outlineByMaterial: Map<string, { buffer: GPUBuffer; edge: Float32Array<ArrayBuffer>; picture: GPUTextureView }>
   model: Model
   /**
    * Keep simulating this model's cloth while it is HIDDEN.
@@ -2632,7 +2657,7 @@ export class Engine {
   // 15 × vec4f — see the viewU comment in composite.ts. The last one is the
   // camera's world position, which is what lets a foreground effect turn the
   // depth it is handed into a PLACE (bgWorldPos) rather than a distance.
-  private readonly compositeUniformData = new Float32Array(60)
+  private readonly compositeUniformData = new Float32Array(64)
   /** Composite background (display-space sRGB 0–1) — null = transparent canvas. */
   private backgroundColor: Vec3 | null = null
   // 360 backdrop (equirectangular skybox, sampled by view ray in composite).
@@ -3054,6 +3079,7 @@ export class Engine {
     return {
       exposure: partial?.exposure ?? d.exposure,
       gamma: partial?.gamma ?? d.gamma,
+      contrast: partial?.contrast ?? d.contrast,
       transform: partial?.transform ?? d.transform,
     }
   }
@@ -3072,7 +3098,7 @@ export class Engine {
 
   getViewTransformOptions(): ViewTransformOptions {
     const v = this.viewTransform
-    return { exposure: v.exposure, gamma: v.gamma, transform: v.transform }
+    return { exposure: v.exposure, gamma: v.gamma, contrast: v.contrast, transform: v.transform }
   }
 
   private colorGrading: ColorGradingOptions = {
@@ -3188,6 +3214,7 @@ export class Engine {
     const v = this.viewTransform
     if (patch.exposure !== undefined) v.exposure = patch.exposure
     if (patch.gamma !== undefined) v.gamma = patch.gamma
+    if (patch.contrast !== undefined) v.contrast = patch.contrast
     if (patch.transform !== undefined) v.transform = patch.transform
     if (this.device && this.compositeUniformBuffer) {
       this.writeCompositeViewUniforms()
@@ -3266,6 +3293,9 @@ export class Engine {
     u[25] = Engine.VIEW_TRANSFORM_ID[v.transform] ?? 0
     u[26] = this.canvas.width
     u[27] = this.canvas.height
+    // The soft curve's power (viewU[15].x), the scene's own (SceneSetting._contrast).
+    // Its own vec4: viewU[11..14] are the cast's positions whenever an effect runs.
+    u[60] = v.contrast
     // ── 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.
@@ -3324,6 +3354,51 @@ export class Engine {
     this.bundlesDirty = true
   }
 
+  /**
+   * Every outline's width, as a multiple of what each PMX material asked for
+   * (its edgeSize): 1 is the author's own, 0 draws none. A multiplier rather
+   * than a width because a model's lines are not one width — the hair's rim
+   * and a sleeve's crease differ on purpose, and scaling keeps that.
+   *
+   * A write, not a re-record: one float in each hull's uniform, so a slider
+   * can drive it. Hulls built later take the current value at creation.
+   */
+  private outlineWidth = 1
+  setOutlineWidth(scale: number): void {
+    const v = Number.isFinite(scale) ? Math.max(0, scale) : 1
+    if (this.outlineWidth === v) return
+    this.outlineWidth = v
+    if (!this.device) return
+    const one = new Float32Array([v])
+    for (const inst of this.modelInstances.values()) {
+      for (const buffer of inst.outlineUniformBuffers) {
+        this.device.queue.writeBuffer(buffer, RZ_OUTLINE_WIDTH_OFFSET, one)
+      }
+    }
+  }
+
+  /**
+   * One colour for every outline, in place of each PMX material's edge colour;
+   * null hands each material its own back. Written as the edge colour is —
+   * the values a PMX would carry — so a picked black is MMD's black. The
+   * material's edge ALPHA is kept: only the hue is the scene's.
+   *
+   * A write, like setOutlineWidth: hulls built later take it at creation.
+   */
+  private outlineColor: [number, number, number, number] = [0, 0, 0, 0]
+  setOutlineColor(color: Vec3 | { x: number; y: number; z: number } | null): void {
+    const next: [number, number, number, number] = color ? [color.x, color.y, color.z, 1] : [0, 0, 0, 0]
+    if (next.every((v, i) => v === this.outlineColor[i])) return
+    this.outlineColor = next
+    if (!this.device) return
+    const data = new Float32Array(next)
+    for (const inst of this.modelInstances.values()) {
+      for (const buffer of inst.outlineUniformBuffers) {
+        this.device.queue.writeBuffer(buffer, RZ_OUTLINE_COLOR_OFFSET, data)
+      }
+    }
+  }
+
   /**
    * Draw the id attachment instead of the scene.
    *
@@ -8423,6 +8498,8 @@ export class Engine {
       entries: [
         { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+        // the key light, for a style graph's outline colour (see outline.ts)
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
       ],
     })
     // Outline per-instance reuses mainPerInstanceBindGroupLayout (same skinMats binding)
@@ -8431,6 +8508,7 @@ export class Engine {
       entries: [
         { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } },
         { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+        { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
       ],
     })
 
@@ -8449,6 +8527,7 @@ export class Engine {
       entries: [
         { binding: 0, resource: { buffer: this.cameraUniformBuffer } },
         { binding: 1, resource: this.materialSampler },
+        { binding: 2, resource: { buffer: this.lightUniformBuffer } },
       ],
     })
 
@@ -8462,6 +8541,7 @@ export class Engine {
       entries: [
         { binding: 0, resource: { buffer: this.mirrorCameraBuffer } },
         { binding: 1, resource: this.materialSampler },
+        { binding: 2, resource: { buffer: this.lightUniformBuffer } },
       ],
     })
 
@@ -8649,13 +8729,14 @@ export class Engine {
     // strength belong to the combine step.
     this.compositeUniformBuffer = this.device.createBuffer({
       label: "composite view uniforms",
-      // 15 × vec4f: (exposure, invGamma, _, _) · (bloom tint, intensity) ·
+      // 16 × 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 effects · three grade
       // vectors (CDL offset+contrast, power+saturation, slope+flag) · camera
       // world position, for an effect placing itself in the scene · four
-      // character positions, for one that wants to respond to the cast.
-      size: 240,
+      // character positions, for one that wants to respond to the cast · the
+      // soft curve's contrast. Shaders that stop at the cast declare 15.
+      size: 256,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     })
     this.dofUniformBuffer = this.device.createBuffer({
@@ -9981,6 +10062,46 @@ export class Engine {
     if (this.cameraPoseOverride) this.camera.setVmdPose(this.cameraPoseOverride)
   }
 
+  /**
+   * The host's adjustment to a camera track, added to every pose it samples.
+   *
+   * A downloaded camera motion is framed for whoever it was made with: a
+   * shorter model wants it lower, a wider stage wants it further back. This
+   * moves the shot without touching its ANGLE — the motion's rotation and roll
+   * are its choreography, and they stay the track's.
+   *
+   * - `target`: world units, added to the look-at point, so the whole shot
+   *   slides with the angle unchanged.
+   * - `distance`: positive pulls the eye further back along its own line of
+   *   sight. VMD distances are signed (negative is behind the target, the usual
+   *   case), so "further" means away from zero on whichever side it is.
+   * - `fov`: radians, added to the track's lens, never below a sliver.
+   *
+   * Only a loaded track reads it: the orbit has its own sliders, and a pose
+   * forced through setCameraPose is a statement of where the camera IS.
+   */
+  private cameraTrackOffset = { target: new Vec3(0, 0, 0), distance: 0, fov: 0 }
+  setCameraTrackOffset(offset: { target?: { x: number; y: number; z: number }; distance?: number; fov?: number } | null): void {
+    const t = offset?.target
+    this.cameraTrackOffset = {
+      target: new Vec3(t?.x ?? 0, t?.y ?? 0, t?.z ?? 0),
+      distance: offset?.distance ?? 0,
+      fov: offset?.fov ?? 0,
+    }
+  }
+
+  /** A sampled track pose with the host's offset laid on. */
+  private offsetTrackPose(pose: CameraPose): CameraPose {
+    const o = this.cameraTrackOffset
+    if (o.distance === 0 && o.fov === 0 && o.target.x === 0 && o.target.y === 0 && o.target.z === 0) return pose
+    return {
+      target: new Vec3(pose.target.x + o.target.x, pose.target.y + o.target.y, pose.target.z + o.target.z),
+      rotation: pose.rotation,
+      distance: pose.distance + Math.sign(pose.distance || -1) * o.distance,
+      fov: Math.min(Math.PI * 0.95, Math.max(0.01, pose.fov + o.fov)),
+    }
+  }
+
   /** The pose currently forced from outside, or null when nothing is. */
   getCameraPoseOverride(): CameraPose | null {
     return this.cameraPoseOverride
@@ -10974,6 +11095,12 @@ export class Engine {
         { binding: 12, resource: { buffer: this.probeUniformBuffer } },
       ],
     })
+    // The recorded phases bind these groups by value (sceneView), so a rebuild
+    // they never hear about leaves them drawing with the old one: the first
+    // light cookie landed on the ground (re-bound each frame) and not on the
+    // cast, and a swapped sky kept reflecting the one it replaced. Only init,
+    // a world install and the first cookie get here, so re-recording is cheap.
+    this.bundlesDirty = true
     return true
   }
 
@@ -14803,6 +14930,7 @@ export class Engine {
       dissolve: 1,
       materialUniformBuffers: [],
       outlineUniformBuffers: [],
+      outlineByMaterial: new Map(),
       cullModelIndex: 0,
       // Seeded false: the first skin-matrix upload decides it, and until then the
       // sphere path is the safe answer (it never culls something it should not).
@@ -15444,8 +15572,12 @@ export class Engine {
       // every material — on the heaviest mesh in the scene that doubles the
       // geometry submitted per frame to draw cartoon outlines around
       // architecture, which is not the look anyone is after.
+      // Every character material gets its hull: the PMX edge flag draws it as
+      // MMD does, and a style group whose look carries an outline draws it on
+      // any material (assignDrawCallGroups sets `drawn`).
       let outline: DrawCall["outline"]
-      if (!inst.isStage && (mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0) {
+      const pmxEdge = (mat.edgeFlag & 0x10) !== 0 && mat.edgeSize > 0
+      if (!inst.isStage) {
         const materialUniformData = new Float32Array([
           mat.edgeColor[0],
           mat.edgeColor[1],
@@ -15458,21 +15590,31 @@ export class Engine {
           // block's layout would be 32 bytes of padding per outlined material
           // to carry one float. See RZ_OUTLINE_DISSOLVE_OFFSET.
           1,
+          // The scene's width multiplier, at RZ_OUTLINE_WIDTH_OFFSET.
+          this.outlineWidth,
+          // A style graph's outline, at RZ_OUTLINE_TEXTURED_OFFSET: none yet.
+          0,
+          // The scene's colour override, at RZ_OUTLINE_COLOR_OFFSET.
+          this.outlineColor[0],
+          this.outlineColor[1],
+          this.outlineColor[2],
+          this.outlineColor[3],
+          // The graph outline's shadow colour, at RZ_OUTLINE_SHADOW_OFFSET.
+          0,
+          0,
           0,
           0,
         ])
         const outlineUniformBuffer = this.createUniformBuffer(`${prefix}outline: ${mat.name}`, materialUniformData)
         inst.gpuBuffers.push(outlineUniformBuffer)
         inst.outlineUniformBuffers.push(outlineUniformBuffer)
-        const outlineBindGroup = this.device.createBindGroup({
-          label: `${prefix}outline: ${mat.name}`,
-          layout: this.outlinePerMaterialBindGroupLayout,
-          entries: [
-            { binding: 0, resource: { buffer: outlineUniformBuffer } },
-            { binding: 1, resource: textureView },
-          ],
+        inst.outlineByMaterial.set(mat.name, {
+          buffer: outlineUniformBuffer,
+          edge: materialUniformData.slice(0, 5),
+          picture: textureView,
         })
-        outline = { bindGroup: outlineBindGroup }
+        const outlineBindGroup = this.outlineBindGroup(`${prefix}outline: ${mat.name}`, outlineUniformBuffer, textureView, null)
+        outline = { bindGroup: outlineBindGroup, pmx: pmxEdge, drawn: pmxEdge }
         if (!inst.outlineVertexBuffer) {
           const data = inst.model.getOutlineVertices()
           const buf = this.device.createBuffer({
@@ -17035,7 +17177,7 @@ export class Engine {
     } else if (this.camera.vmdDriven && this.cameraAnimation) {
       // Drive the shot from the camera VMD (synced to the animated model's clock).
       const pose = this.cameraAnimation.sample(this.transportTime())
-      if (pose) this.camera.setVmdPose(pose)
+      if (pose) this.camera.setVmdPose(this.offsetTrackPose(pose))
     }
 
     // Before the cast is written, which carries every subject's dissolve to the
@@ -18012,8 +18154,45 @@ export class Engine {
 
   // Rebind each material draw call to its (successfully-installed) group's uniform buffer,
   // or the zero buffer when ungrouped, then re-sort by render-class draw order.
+  /** A hull's per-material group: its block, the picture, the look's tint. */
+  private outlineBindGroup(label: string, buffer: GPUBuffer, picture: GPUTextureView, tint: GPUTexture | null): GPUBindGroup {
+    return this.device.createBindGroup({
+      label,
+      layout: this.outlinePerMaterialBindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer } },
+        { binding: 1, resource: picture },
+        { binding: 2, resource: (tint ?? this.fallbackMaterialTexture).createView() },
+      ],
+    })
+  }
+
   private assignDrawCallGroups(inst: ModelInstance, claimed: Map<string, string>): void {
     inst.materialToGroup.clear()
+    // The hulls: a group whose look carries an outline (ShaderGraph.outline)
+    // draws it in place of the PMX edge; the rest keep, or get back, their own.
+    for (const [name, hull] of inst.outlineByMaterial) {
+      const id = claimed.get(name)
+      const install = id ? inst.styleGroups.get(id) : undefined
+      const o = install?.group.graph.outline
+      const block = o
+        ? new Float32Array([o.color[0], o.color[1], o.color[2], 1, o.width])
+        : hull.edge
+      this.device.queue.writeBuffer(hull.buffer, 0, block)
+      this.device.queue.writeBuffer(hull.buffer, RZ_OUTLINE_TEXTURED_OFFSET, new Float32Array([o ? 1 : 0]))
+      if (o) this.device.queue.writeBuffer(hull.buffer, RZ_OUTLINE_SHADOW_OFFSET, new Float32Array([...o.shadowColor, 1]))
+      const tint = o?.tint != null ? (install?.imagesByMaterial?.[name] ?? install?.images)?.[o.tint] ?? null : null
+      for (const dc of inst.drawCalls) {
+        if (dc.materialName !== name || !dc.outline) continue
+        dc.outline.bindGroup = this.outlineBindGroup(`outline: ${name}`, hull.buffer, hull.picture, tint)
+        this.bundlesDirty = true
+        const drawn = o ? o.width > 0 : dc.outline.pmx
+        if (dc.outline.drawn !== drawn) {
+          dc.outline.drawn = drawn
+          this.bundlesDirty = true
+        }
+      }
+    }
     for (const dc of inst.drawCalls) {
       if (!dc.baseBindGroupEntries) continue // outlines/ground are never grouped
       const wantId = claimed.get(dc.materialName)
@@ -18512,7 +18691,7 @@ export class Engine {
       }
       pass.setBindGroup(2, draw.bindGroup)
       this.issueDraw(pass, draw, view.args)
-      if (draw.outline && this.outlineEnabled && view.outlines) outlined.push(draw)
+      if (draw.outline?.drawn && this.outlineEnabled && view.outlines) outlined.push(draw)
     }
     // THE HULLS AFTER THE SURFACES, as MMD draws a model's edges. A hull held
     // at the minimum width is faded, and it still writes depth: drawn between

package/src/graph/presets/body.ts

@@ -24,7 +24,7 @@ export const BODY_GRAPH: ShaderGraph = {
     { id: "lit_tint", type: "hue_sat", inputs: { hue: 0.5, saturation: 1.5, value: 1.0, fac: 1.0 } },
     { id: "toon_color", type: "mix/blend" },
     { id: "bc", type: "bright_contrast", inputs: { bright: 0.1, contrast: 0.2 } },
-    { id: "emission3", type: "vector_math/scale", inputs: { scale: 4.0 } },
+    { id: "emission3", type: "vector_math/scale", inputs: { scale: 3.2 } },
     { id: "warm_add", type: "math/add", inputs: { b: 0.5 } },
     { id: "warm_clamp", type: "math/clamp01" },
     {

package/src/graph/presets/cloth_rough.ts

@@ -30,7 +30,7 @@ export const CLOTH_ROUGH_GRAPH: ShaderGraph = {
     { id: "mix_003", type: "mix/blend" },
     { id: "hue_004", type: "hue_sat", inputs: { hue: 0.5, saturation: 0.800000011920929, value: 2.0, fac: 1.0 } },
     { id: "npr_overlay", type: "mix/overlay", inputs: { fac: 1.0 } },
-    { id: "npr_emit", type: "vector_math/scale", inputs: { scale: 18.200000762939453 } },
+    { id: "npr_emit", type: "vector_math/scale", inputs: { scale: 14.56 } },
     { id: "noise", type: "tex_noise", inputs: { scale: 17.7 } },
     { id: "noise_ramp", type: "ramp_linear", inputs: { pos0: 0.0, pos1: 1.0 } },
     { id: "bump", type: "bump", inputs: { strength: 1.0 } },