smooth-render

name	smooth-render
description	画素の格子に乗せない絵（高解像度・なめらか・ベクター調・ピクセルを見せない絵）の手つき。グラデーション・ぼかし・エッジの硬さ・面積と彩度・質感の重ね方・なめらかな面に出る縞（banding）の消し方を、ShaderDoc / Field / Shade・gradPolygon・Material の部品へ翻訳して出す。背景や面をシェーダーで塗るとき、被写界深度や大気で奥行きを作るとき、「なめらかにして」「ピクセルを見せない絵で」と言われたとき、描き出した絵を自己批評するときに使う。画風そのもの（題材・色 3 つ・やらないこと）を決めるのは /visual-dict の仕事で、ここは高解像度で行くと決まった後の手つき。
sync	2026-08-13T00:00:00.000Z

高解像度の絵の核 — 画素の格子に乗せない絵

1 画素ずつ意味を持って置くのではなく、面を関数で塗り、輪郭をなめらかな図形で作る絵の 決まり。ベクター調・水彩調・厚塗り調・フラットのどれにも使う。 題材や色の中身はここに書かない — それは画風の仕事（/visual-dict）。

いつ引くか・いつ引かないか

引く: 面を ShaderDoc で塗るとき。*.shader.json を書くとき。多角形の頂点色や 楕円・折れ線で絵を組むとき。「なめらか」「高解像度」「ピクセルを見せない」の指定が 出たとき。描き出した絵を自己批評するとき。

引かない:

• 画素の格子に乗る絵（*.sprite.json・タイル地形・ドット絵の背景）→ /retro-pixel。 こちらの作法（連続の階調・ぼかし・ふちのやわらかさ）を持ち込むと、あちらの予算を壊す
• 画風がまだ決まっていない → /style-interview で人の注文を聞き、/visual-dict で 題材・色 3 つ・やらないこと 1 つを決める。ここはその後の手つき
• 部品選び（グロー・粒・残像）→ /visual-dict の技法 → 部品の翻訳表
• 語彙の正: Field / Shade の全 kind とキーは engine の docs/shader-doc.md。 知らない kind が 1 つあると Doc 全体が既定値へ落ちる（エラーは出ない）

衝突したら: 人の注文 > /visual-dict の画風 > この skill。 絵の下限 5 性質（engine の docs/drawing-floor.md）はどちらにも先立つ。

予算を 1 つ選ぶ（いちばん最初に）

ドット絵の予算は「色数」だったが、この絵で効くのは時間。ShaderDoc は画素ごとに 評価されるので、面の枚数ではなく面の広さが生成する時間に直結する。次の 3 つを先に書く。

決める物	目安	なぜ
解像度	描き出す実寸（例 512×320）	輪郭のなめらかさと生成にかかる時間が両方ここで決まる
エッジの硬さの種類	3 種類以上（くっきり / 中間 / 溶ける）	1 種類だと全部が同じ距離に見える（下の §4）
質感の大きさの種類	2〜3 種類（大きいムラ / 中くらい / 粒）	1 種類だとエアブラシで吹いた面に見える（下の §7）

併せて光源の方向 1 つ・遠中近の 3 層・主役のモチーフ 1 つを先に決める。 描き分けの原則は「面はアルゴリズム・モチーフは意思」— 空や地面のような大きな面は 場（Field）の式で作り、何をどこに置くかは自分で書く配置表にする。

広い面（空・地面）は 1 枚で済ませ、狭い面（雲・葉）だけ枚数を出す。 ぼかしを Pass + tex / shift で作るときは値段を見る — 3×3 のガウスぼかしで テクスチャ読み 27 回（docs/shader-doc.md）。5×5 が常用になったら相談する。

ドット絵から持ち込むと失敗する 5 つ

/retro-pixel の作法は色数の乏しさから来ている。乏しくない絵では逆に働く。

1. ディザ（市松で中間色を作る）→ 使わない。ここでは中間色をそのまま置ける。 使うと縞か砂に見える
2. なめらかな階調を数色に切り分ける（posterize / Field.Quantize） → わざとそう見せる 画風でなければ使わない。面の中は連続で混ぜる
3. 全周を同じ太さで囲む輪郭線 → 一律の線は距離の情報を消す（§4）
4. 1 素材あたり 3〜5 色に切り詰める → 色の数ではなく彩度を予算にする（§6）
5. 手で置くアンチエイリアス → Field.Disk の feather と Field.Smoothstep の lo/hi が担う。手で 1 画素を足さない

§4 エッジの硬さを使い分ける（失敗 1: 全部のエッジが同じやわらかさ）

なめらかな絵で距離と材質を伝えるのは、色より先に輪郭のやわらかさ。 すべての縁を同じ feather で作ると、手前の岩も遠くの雲も同じ紙から切り抜いたように見える （実際に起きた失敗）。1 枚の絵に最低 3 種類を意図して置く。

硬さ	何に使う	部品
くっきり	主役の輪郭・手前の物・硬い材質（石・金属）	図形の縁そのまま / Field.Smoothstep の lo〜hi を狭く
中間	中景・布・葉の塊	Field.Disk の feather を小さめ
溶ける	遠景・霞・影の外側・光の縁	feather を大きく / 濃さ 0 で終わる gradPolygon

輪郭は途中で失わせてよい（lost and found — 見せる所と背景に溶かす所を作る）。 主役の輪郭は「背景と明るさが近い側だけ溶かし、離れている側は残す」と物が空気の中に置ける。

§5 明るさは端から端へ単調に上がらない

球や岩を「影の側 → 受光の側」へ 2 色で混ぜると、風船に見える。実物は 明暗の境目のすぐ内側がいちばん暗く（光が回り込まない所 — form shadow）、そこから縁へ向かって まわりの反射光でまた明るくなる。

• 2 色を混ぜるだけの gradPolygon の頂点色では、この山と谷は出ない
• Shade.Gradient の stops は位置を自由に置ける。 暗いほうから明るいほうへ並べた色の列（color ramp）を [[0.0, 反射光] [0.18, いちばん暗い所] [0.55, 地の色] [1.0, 受光]] のように単調でない順に置く
• 影の側は Color.cool、光の側は Color.warm で色そのものをずらす（明暗だけにしない）

§6 面積と彩度（失敗 2: 岩が青い宝石のように浮く）

面が広いほど彩度を下げる。 実際に起きた失敗は、岩という大きな面に 高い彩度の青を置いたもの — 暖色の草地の中でそこだけ宝石のように光った。

• 画面の大半を占める面（空・地面・大きい岩）は低彩度。色の差は色相と明るさで付ける
• 高い彩度は小さい面積の差し色にだけ使う（夕日・灯り・実・目印）
• 遠い物ほど彩度を落とし、空の色へ寄せる（大気遠近）。Color.mix(色, 空の色, 距離)
• 主役を目立たせたいときは主役の彩度を上げるのではなく、まわりを落とす （Render.glowAt を Multiply で背後に敷く手が実例にある）

§7 質感は大きさの違うムラを重ねる（失敗 3: エアブラシに見える）

Fbm（ムラを作る場）を 1 つだけ掛けた面は、絵の具を吹き付けたように均一に見える。 大きさの違うムラを 2〜3 種類重ねると面が物になる。

• 大きいムラ = Field.Fbm({ octaves = 3, scale = 2〜3, … }) — 光の当たり方のむら
• 中くらい = scale = 8〜12 を薄く足す — 材質の起伏
• 細かい粒 = Field.Hash1 か Material.grain をごく薄く — 紙・埃・ざらつき
• Field.Warp を 1 枚かませると、ムラが等方の雲でなく流れを持つ（地層・木目・水面）
• スクロールする面は Fbm でなく FbmTile（period を整数に）— 継ぎ目が出ない

§8 なめらかな面に出る縞を消す（banding）

広いグラデを 8bit で塗ると、色の変わり目が縞になって見える（banding）。 空にこれが出るのは欠陥で、画風ではない（実際に起きた失敗）。

• 原因は色の刻みが粗いことなので、stops を増やしても消えない。潰すのはノイズ
• グラデの入力になる場に、振幅 **1/255 程度（0.004 前後）**のノイズを足す。 Field.Hash1({ scale = 大きめ, seed = … }) を Bin(Mul, 0.004) して Add
• 振幅を上げすぎると砂に見える。「縞が消える最小」で止める
• 縞が形として出ているなら別の原因 — グラデの stops の間隔が不均一か、 重ねた半透明の面の端が線になっている（濃さ 0 で終わらせる）

§9 絵の下限 5 性質をこの絵でどう満たすか

engine の docs/drawing-floor.md の 5 性質は画風に依らない。この絵での典型は:

性質	この絵での手
面に階調か質感がある	Shade.Gradient + §7 のムラの重ね。単一の Solid で広い面を塗らない
主役が背景から分離	§4 の硬さの差 + §6 の彩度差 + 接地影（平たい楕円を Multiply）
層が分かれている	遠景ほど彩度を落として空の色へ寄せ、エッジを溶かす（大気遠近）
時間が流れている	Field.Scaled の scroll でムラを流す・Sway・Curve。粒に頼らなくてよい
形が物として読める	HeadlessRender.silhouettePng で形だけ取り出して確かめる

描き出して自己批評

1. ゲームの make render（出口は gallery/）で描き出す。t は固定する
2. bin/fge digest <png> で色数・密度を下見してから目で見る
3. 実寸と 2 倍の両方で見る。倍にすると縞とエアブラシがすぐ分かる
4. 上の失敗 3 つを名指しで自問する — ①どこか 1 つだけ彩度が浮いていないか ②エッジの硬さは 3 種類あるか ③空に縞は無いか・ムラは 1 種類だけになっていないか
5. 描き出す → 目で見る → 直す、を最低 3 周。1 周目で下限を満たし、2〜3 周目で上の 3 つを潰す
6. bin/fge view は矩形と円だけの絵を弾く検査。通っても絵が良いことにはならない。 良し悪しを決めるのは人（/critique-render で目視の批評を取る）

禁止

1. 1px の細い面を積んだ疑似グラデーション — 生成にかかる時間に直撃する。Shade.Gradient で描く
2. 一律の輪郭線で全部を囲む — 画風として選ぶなら AGENTS.local.md に書いてから
3. ディザ・階調の切り分け・手で置くアンチエイリアス — 格子の作法をここへ持ち込まない
4. 広い面に高彩度 — 差し色は小さい面積にだけ
5. 知らない kind — docs/shader-doc.md に無い語を書くと Doc 全体が既定値へ落ちる

大きい人を塗る（人物の高さがおよそ 48 画素から上）

先に .claude/skills/figure-drawing/SKILL.md を読む。 何を先に決めるか（シルエット・ 重心・比率・前後・向き・持ち物）はそちらにある。ここはその判断を面に落とす手つきだけ。

ドット絵の作法を持ち込まない。 等身の型・輪郭の段・色の段を数える癖をそのまま 持ってくると、「ドット絵をなめらかに塗っただけ」の絵になる。

• 輪郭を関数で作らない。 「高さ → 半幅」を横帯で埋める作りは、どれだけ滑らかに塗っても 円柱にしかならない。塊（頭・胴・腰・脚・腕・持ち物）をそれぞれ独立した面として置き、 前後は重ね順で作る。
• 塊を四角形で置かない。 頂点 4 つの多角形を並べるとポリゴンの人形に見える。手は 2 つ:
  • Render.shaderFillMasked(spec, rect, maskPolys, t, z) … 多角形の型で面を抜く（縁は硬い）
  • 矩形 1 枚を Render.shaderFill で塗り、中心からの距離を fbm でゆがませた場を alpha にして輪郭を抜く（Field.Warp × Field.Radial → Smoothstep）。縁の硬さは Smoothstep の幅で決まるので、主役は狭く（硬く）、影や霞は広く（溶ける）
• 細い塊は、塊ごとに矩形を切る。 Uv の階調は面の矩形に対して効くので、 腕 1 本に体ぜんたいの矩形を渡すと端の 1 色に潰れる。塊の外接矩形をその塊のぶんだけ渡す。
• 立体は光と影の境目の形で出す。 明るい面と暗い面の境界線そのものの形が丸みを語る。 端から端へ単調に明るくすると風船になる。影の側のいちばん暗い所より、縁が少し明るい（反射光）。
• 暗い材質の受光は lighten では作れない。 暗く寒い色（黒髪・濃い布）を明度だけ上げると 青いまま持ち上がって、緑や紫の帯が出る。受光は光源の色そのものへ混ぜて作る。
• 関節で軸を折る。 腕・脚を 1 本の先細りの四角形にしない。肘・膝で軸の向きを変え、 関節にわずかな膨らみを置く。折らないと、なめらかに塗るほど円柱に見える。
• 手の先を平らに切らない。 腕が四角い断面で終わると、持ち物を「握っている」に見えない。 握りの塊を 1 つ置くだけで繋がる。
• エッジの硬さを 3 種類使い分ける。 主役の外形はいちばん硬く、体の中の面の境は中間、 接地影と霞はいちばん溶ける。体の中まで外形と同じ硬さで切ると、切り絵に見える。
• 逆光は、迷ったら潰す。 内側を暗く落とし、形は外形と、光の当たる縁の細い線で見せる。 手前に黒い物（近景の茂みなど）があって張り合うのが怖い場合も、体を明るいままにしない — 勝負するのは明るさではなく縁の光の細さで、縁を細く鋭くすれば、暗い体でも手前の黒から分かれる。