2nd/10_Wiki/Topics/Game_Design/Okami-Ink-Wash-Aesthetics.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-okami-ink-wash-aesthetics	Okami Ink Wash Aesthetics	10_Wiki/Topics	verified	self	Sumi-e Okami Art Style Cel-shaded Ink NPR Ink-Wash	none	A	0.9	applied	non-photorealistic-rendering art-style shader okami sumi-e npr		2026-05-10	pending	language framework HLSL/GLSL NPR-shader

Okami Ink Wash Aesthetics

매 한 줄

"매 Okami Ink Wash는 매 Japanese sumi-e (墨絵) 의 매 real-time game rendering 의 매 translation". 매 Clover Studio 2006 의 매 hand-painted brush stroke + 매 watercolor bleed + 매 calligraphic outline 의 매 NPR pipeline — 매 modern stylized rendering 의 매 foundational reference.

매 핵심

매 Visual Components

• Outline (calligraphic): 매 view-space normal/depth edge detection + 매 brush-tip texture 의 매 sweep along edge.
• Cel-shaded fill: 매 매 2-3 tone toon shader, 매 hard band transition.
• Paper texture: 매 background canvas (washi paper) 의 매 multiplicative overlay.
• Ink bleed: 매 매 alpha-mask 의 매 noise-perturbed edge — 매 ink-on-paper 의 매 organic boundary.
• Color desaturation: 매 매 muted ochre/red/black palette — 매 sumi-e 의 매 traditional ink color.

매 Rendering Pipeline

1. Geometry pass (forward).
2. Outline pass (post-process: depth + normal Sobel → brush-stroke compositor).
3. Toon shading (vertex normal · light direction → step function).
4. Paper overlay (full-screen quad multiply).
5. Ink-bleed mask (procedural noise on alpha).

매 응용

1. Okami / Okamiden (Clover, Capcom).
2. Sumire / Genji (homage).
3. Modern: Sable, Kena: Bridge of Spirits (related NPR styles).

💻 패턴

Sobel-based outline detection (post-process)

// HLSL — sample depth in 3x3 kernel, apply Sobel
float SampleDepth(float2 uv) { return _DepthTex.SampleLevel(s, uv, 0).r; }

float4 OutlinePass(float2 uv : TEXCOORD0) : SV_Target {
    float2 px = _ScreenSize.zw;
    float gx =
        -SampleDepth(uv + float2(-px.x,-px.y)) - 2*SampleDepth(uv + float2(-px.x, 0)) - SampleDepth(uv + float2(-px.x, px.y))
        +SampleDepth(uv + float2( px.x,-px.y)) + 2*SampleDepth(uv + float2( px.x, 0)) + SampleDepth(uv + float2( px.x, px.y));
    float gy =
        -SampleDepth(uv + float2(-px.x,-px.y)) - 2*SampleDepth(uv + float2(0,-px.y)) - SampleDepth(uv + float2( px.x,-px.y))
        +SampleDepth(uv + float2(-px.x, px.y)) + 2*SampleDepth(uv + float2(0, px.y)) + SampleDepth(uv + float2( px.x, px.y));
    float edge = saturate(sqrt(gx*gx + gy*gy) * 50);
    float brush = _BrushTex.Sample(s, uv * 4 + Hash(uv) * 0.05).r;
    return float4(0,0,0, edge * brush);
}

Toon (cel) shading with hard bands

// GLSL — 3-tone toon
float toonRamp(float NdotL) {
    if (NdotL > 0.6) return 1.0;
    if (NdotL > 0.2) return 0.6;
    return 0.3;
}

void main() {
    vec3 N = normalize(vNormal);
    float NdotL = max(dot(N, uLightDir), 0.0);
    float band = toonRamp(NdotL);
    fragColor = vec4(uBaseColor * band, 1.0);
}

Paper texture overlay

// Full-screen post-process — multiplicative paper grain
float4 PaperOverlay(float2 uv : TEXCOORD0) : SV_Target {
    float4 scene = _SceneTex.Sample(s, uv);
    float paper = _PaperTex.Sample(s, uv * _PaperScale).r;
    // Slightly desaturate scene for ink-wash feel
    float gray = dot(scene.rgb, float3(0.299, 0.587, 0.114));
    scene.rgb = lerp(float3(gray,gray,gray), scene.rgb, 0.85);
    return float4(scene.rgb * (0.7 + paper * 0.3), 1.0);
}

Ink-bleed alpha noise

// Animate bleed boundary using simplex noise
float inkBleed(vec2 uv, float t) {
    float n = simplex(uv * 12.0 + vec2(t * 0.1));
    return smoothstep(0.45, 0.55, n);
}

void main() {
    vec4 base = texture(uInk, vUV);
    float bleed = inkBleed(vUV, uTime);
    fragColor = vec4(base.rgb, base.a * bleed);
}

Brush-stroke trail (Celestial Brush mechanic)

// Player draws a stroke; sample points become ribbon mesh
class BrushStroke {
  points: { pos: Vec2; pressure: number; t: number }[] = [];

  add(p: Vec2, pressure: number) {
    this.points.push({ pos: p, pressure, t: performance.now() });
  }

  toRibbonMesh(): Mesh {
    return generateRibbon(this.points, p => p.pressure * 8.0);
    // Width tapers based on pressure; texture is brush-tip
  }
}

Color palette (muted ochre/red/black)

// LUT-based color grading toward sumi-e palette
float3 ApplyOkamiLUT(float3 color) {
    // Lookup table mapping linear color -> sumi-e palette
    return _OkamiLUT.Sample(s, color).rgb;
}

매 결정 기준

상황	Approach
Stylized NPR action game	매 Okami pipeline (outline + cel + paper) 의 매 baseline
Performance-constrained mobile	매 vertex-based outline (vs post-process)
Player-authored brush mechanic	매 ribbon-mesh + 매 spline tessellation
Color grading	매 muted palette LUT, 매 desaturate 80-90%

기본값: 매 view-space outline + 매 3-band toon + 매 paper overlay + 매 sumi-e LUT — 매 Okami canonical NPR stack.

🔗 Graph

• 부모: Procedural-Level-Geometry · Metaverse Aesthetics
• 변형: Algorithmic Rhetoric · Procedural-Rhetoric
• 응용: Beat Saber · Edge Bleeding
• Adjacent: Real-Time Translation · InstancedMesh 동적 버퍼 확장 · Depth Pre-Pass

🤖 LLM 활용

언제: 매 NPR shader design, 매 sumi-e/ink-wash style 의 매 implementation, 매 outline-detection algorithms. 언제 X: 매 photo-realistic rendering (매 stylization 의 매 mismatch).

🪲 안티패턴

• Pure post-process outline: 매 매 thin geometry 의 매 outline miss — 매 vertex-based hybrid 권장.
• Constant brush thickness: 매 매 calligraphic feel 의 매 lose — 매 pressure/curvature 의 매 width modulate.
• Over-saturated palette: 매 sumi-e 의 매 muted feel 의 매 contradict.

🧪 검증 / 중복

• Verified (Clover Studio Okami GDC 2007 talk, Capcom dev blogs, modern NPR research papers e.g. "Stylized Rendering" SIGGRAPH 2018).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Okami NPR ink-wash pipeline + shader patterns