たべもののつくりかた.

目次/第13章

13Glaze

たれは、色ではなく層

absorption — 厚みが色を決める

この章の3行まとめ
  • たれを茶色い色として塗ると、光沢のない茶色い卵になります。
  • 実物のたれは透明な層で、厚いところほど濃い。色は厚みの結果です。
  • しかも実体です。垂れの輪郭・縁の厚み・たまりの膨らみがシルエットに出ます。

みたらし団子を作ります。飴色のたれを、アルベド(素の色)に茶色として塗る。 これが最初の版でした。花見団子.js の作り直しの記録に、こうあります。

「たれは『色』ではなく『透明な層』。飴色を albedo に塗ると、光沢の無い茶色い卵になる。 クリアコートの着色(吸収)で持たせると、薄い所は淡い琥珀、 厚い所は黒に近い赤褐色へ自然に分かれる」

透明なものを光が通ると、進んだ距離に応じて吸収されます。これがランベルト・ベールの法則で、 残る光の量は exp(−吸収係数 × 厚み) です。 吸収係数を赤・緑・青で別々にすると、厚みが変わるだけで色が変わります。 たこ焼きのソースなら、単位厚みあたりの吸収が RGB で [1.5, 3.2, 5.4]。 青がいちばん吸われるので、薄いところは橙、厚いところは黒に近い赤褐色になります。

// 5. TextureLab : ソースの色は「塗る」のではなく「解く」
const EXT = [1.5, 3.2, 5.4];   // 単位厚みあたりの吸収(RGB)
const t = thickness(u, v);       // その場所のソースの厚み
for (let c = 0; c < 3; c++) {
    // 下地の色に、通った距離ぶんの吸収を掛ける
    out[c] = base[c] * Math.exp(-EXT[c] * t);
}
たこ焼き.js。Babylon のクリアコート着色は薄いところで数値的に破綻するので、CPU で解いて焼く

実験 — 塗る / 層として解く

—

「塗る」に切り替えると、厚みを変えても色が変わりません。 だから、いくら濃くしても「濃い茶色に塗ったもの」にしか見えなくなります。

たれは全面を覆わない

上から掛けたたれは、下へ流れて、途中で止まります。止まった線から下は、 白い生地が出たままです。全面を覆うと、たれではなくコーティングになります。 たこ焼きのソースも同じで、垂れの輪郭がシルエットに出て初めてソースになる。 アルベドに茶色を描くだけだと、ハイライトが玉全体で一様のままなので、印刷したように見えます。

液体の面は、下の肌理を埋める

これも見落としやすい点です。生地の表面はざらざらしていますが、 その上をたれが流れると、細かい凹凸は埋まって平らになります。 たれの上を粗いままにしておくと、たれではなく「茶色い塗装」になります。 13章でやることは、結局この3つに集約されます。

  • 色は厚みから解く(吸収)
  • 厚みを形にも出す(縁の盛り上がり、たまりの膨らみ)
  • たれの下の粗さと法線を上書きする(平らにする)

艶にも、ムラが要る

たれを一様に光らせると、プラスチックの成型品になります。 たこ焼き.js のコメント:「乾きかけた縁はざらつき、たまりだけが鏡になる」。 同じソースの中で、粗さが場所ごとに違う。 07章で「粗さは1つの数値ではなく1枚の画像」と言ったのは、ここに効いてきます。

つまずきポイント

クリアコートの着色は、厚み 0 のところで壊れます。 Babylon.js のクリアコート着色は、浅い入射角と厚み 0 の組み合わせで数値的に破綻します。 団子シリーズ4本とも、着色をエンジンに任せずCPU で吸収を解いてテクスチャに焼く方針をとっています。 「エンジンの機能があるから使う」ではなく、壊れない側を選ぶ、という判断です。

やってみよう
  1. 「塗る」に切り替えて厚みを動かし、色が変わらないことを確かめる。
  2. 層のまま厚みを 1.0 にして、いちばん厚い所が何色になるか見る。
  3. 「厚みを形にも出す」を切り、シルエットの違いを見比べる。
  4. 花見団子.js で「たれ」を検索し、たれが止まる線をどう決めているか読む。