目次/第11章
見せ方を決める(光と露出)
IBL / exposure / tone mapping — 環境光と露出
- 同じ料理でも、光の当て方で別物になります。形と同じくらい重要です。
- 点の光源だけでは足りません。まわりの環境そのものを光として当てます(IBL)。
- 明るすぎる部分をどう畳むか(トーンマッピング)で、料理か写真の失敗かが分かれます。
ここまでで形も模様も質感もできました。それでも、光の設定を間違えると、 作ったものは食品サンプルに見えます。逆に、光がよければ多少の粗は隠れます。 14本のサンプルは、シーンの設定にほぼ同じ手を使っています。
- 環境光(IBL) — 空や壁からの光を1枚の環境マップとして与える。 食べ物は反射がやわらかいので、点光源だけだと影が黒く潰れます。
- キーライト — 主役の1灯。斜め上、やや後ろから当てると、 料理の輪郭が光って立体的になります(逆光ぎみ)。
- 影 — ESM ではなく PCF +
forceBackFacesOnly。 団子のように丸いものは、ESM だと自己遮蔽が痣のような黒い斑になります。 - SSAO2 — 物と物の接するところに薄い陰りを入れる。接地感が出ます。
- 露出とトーンマッピング — ACES というフィルム風の曲線で、 明るい部分をなめらかに畳みます。
実験 — 露出とトーンマッピング
トーンマッピングを切って露出を上げると、明るいところが真っ白に貼り付きます。
入れておくと、白くなる手前で色が残り続けます。
立体はドラッグで回せます(触ると自動回転は止まります。ダブルクリックで戻ります)。
光源は動かないので、回すと「同じ光でも角度で別物になる」ことが見えます。
トーンマッピングは「明るさの畳み方」
計算で出た明るさは 1 を超えます。画面は 1 までしか出せません。 1 を超えたぶんを単純に切り落とすと、ハイライトが真っ白な板になります。 料理でこれをやると、たれの照りが「白いシール」に見えます。
そこで、切り落とすかわりになめらかに畳みます。
x / (1 + x) のような曲線を通すと、どれだけ明るくても 1 を超えず、
しかも色が残ります。実際のサンプルは ACES という、
映画用に作られた曲線を使っています。
逆光は、食べ物の常套手段
料理写真が斜め後ろから光を当てるのには理由があります。 光が食材を通り抜けるところが見えるからです。 赤身の縁が赤く抜け、団子の輪郭が白く光り、大根おろしがふわっと浮く。 これは 07章の subSurface と 14章の透けと直結しています。 光の向きを変えるだけで、同じ材質が別物に見えます。上の実験で確かめてください。
被写界深度(ぼけ)の単位は m です。
このプロジェクトは 1 unit = 1 cm で書かれています。
ところが Babylon.js の被写界深度は「1 unit = 1 m」でぼけの大きさを計算するので、
ピント位置に radius × 1000 を渡す必要があります。
団子シリーズ4本すべてのコメントに、この注意が書かれています。
環境光を上げれば明るくなる、ではありません。 上げすぎると影が消え、平べったい絵になります。 「明るさが足りない」と感じたときに触るのは、たいてい露出のほうです。
ポストプロセスは、GUI にも掛かってしまう
Bloom(にじみ)や被写界深度(ぼけ)は、描き終えた絵の全体に掛ける処理です。
だから何もしないと、右下のスライダーまで一緒ににじんでボケます。
14本のサンプルは最初、これを避けるためにGUI 専用のカメラをもう1台立てて、
layerMask で描き分けていました。
カメラを2台にすると、思わぬところが壊れます。
Babylon.js のいくつかの機能は「activeCameras のいちばん最後=いま描いている基準のカメラ」
と考えて動きます。GUI 用のカメラを足すと、それが最後になるので、
Playground の Inspector が3つまとめて動かなくなりました。
物理の当たり判定の表示(Physics Helper)が出ない。選択の枠がずれる。
そして scene.pick() の光線が GUI カメラから飛ぶので、
画面をクリックしても違うものが選ばれる。
直し方は「カメラを増やさない」でした。
GUI を載せているレイヤーに applyPostProcess = false を付けると、
そのレイヤーだけポストプロセスのあとで合成されます。
カメラ1台のままで、UI にだけ Bloom とぼけが掛からない。
ほとんどのサンプルは今この形になっています。
- トーンマッピングを切り、露出を 2.6 にして、ハイライトがどうなるか見る。
- キーライトを真正面(0°)にして、立体感がどれだけ失われるか確かめる。
- 環境光を 0 にして、影が黒く潰れることを確かめる。
- 花見団子.js で「被写界深度」を検索し、なぜ 1000 を掛けるのか読む。