| 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 の作法は色数の乏しさから来ている。乏しくない絵では逆に働く。
- ディザ（市松で中間色を作る）→ 使わない。ここでは中間色をそのまま置ける。
使うと縞か砂に見える
- なめらかな階調を数色に切り分ける（posterize /
Field.Quantize） → わざとそう見せる
画風でなければ使わない。面の中は連続で混ぜる
- 全周を同じ太さで囲む輪郭線 → 一律の線は距離の情報を消す（§4）
- 1 素材あたり 3〜5 色に切り詰める → 色の数ではなく彩度を予算にする（§6）
- 手で置くアンチエイリアス →
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 で形だけ取り出して確かめる |
描き出して自己批評
- ゲームの
make render（出口は gallery/）で描き出す。t は固定する
bin/fge digest <png> で色数・密度を下見してから目で見る- 実寸と 2 倍の両方で見る。倍にすると縞とエアブラシがすぐ分かる
- 上の失敗 3 つを名指しで自問する —
①どこか 1 つだけ彩度が浮いていないか ②エッジの硬さは 3 種類あるか
③空に縞は無いか・ムラは 1 種類だけになっていないか
- 描き出す → 目で見る → 直す、を最低 3 周。1 周目で下限を満たし、2〜3 周目で上の 3 つを潰す
bin/fge view は矩形と円だけの絵を弾く検査。通っても絵が良いことにはならない。
良し悪しを決めるのは人（/critique-render で目視の批評を取る）
禁止
- 1px の細い面を積んだ疑似グラデーション — 生成にかかる時間に直撃する。
Shade.Gradient で描く
- 一律の輪郭線で全部を囲む — 画風として選ぶなら
AGENTS.local.md に書いてから
- ディザ・階調の切り分け・手で置くアンチエイリアス — 格子の作法をここへ持ち込まない
- 広い面に高彩度 — 差し色は小さい面積にだけ
- 知らない
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 種類使い分ける。 主役の外形はいちばん硬く、体の中の面の境は中間、
接地影と霞はいちばん溶ける。体の中まで外形と同じ硬さで切ると、切り絵に見える。
- 逆光は、迷ったら潰す。 内側を暗く落とし、形は外形と、光の当たる縁の細い線で見せる。
手前に黒い物（近景の茂みなど）があって張り合うのが怖い場合も、体を明るいままにしない —
勝負するのは明るさではなく縁の光の細さで、縁を細く鋭くすれば、暗い体でも手前の黒から分かれる。
