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

---
id: wiki-2026-0508-okami-ink-wash-aesthetics
title: Okami Ink Wash Aesthetics
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Sumi-e, Okami Art Style, Cel-shaded Ink, NPR Ink-Wash]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [non-photorealistic-rendering, art-style, shader, okami, sumi-e, npr]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: HLSL/GLSL
  framework: 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
// 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
// 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
```hlsl
// 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
```glsl
// 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)
```typescript
// 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)
```hlsl
// 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|Procedural Rhetoric (In Gaming)]]
- 응용: [[Beat Saber]] · [[Edge Bleeding]]
- Adjacent: [[Real-Time Translation]] · [[InstancedMesh 동적 버퍼 확장]] · [[Depth Pre-Pass|Early-Z]]

## 🤖 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 |