たべもののつくりかた.

目次/第11章

11Scene

見せ方を決める(光と露出)

IBL / exposure / tone mapping — 環境光と露出

この章の3行まとめ
  • 同じ料理でも、光の当て方で別物になります。形と同じくらい重要です。
  • 点の光源だけでは足りません。まわりの環境そのものを光として当てます(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 とぼけが掛からない。 ほとんどのサンプルは今この形になっています。

ここで覚えておきたいこと。 「見た目のための工夫」が、まったく関係なさそうな機能を壊すことがあります。 しかも壊れ方が「Inspector でクリックしても違うものが選ばれる」なので、 光の設定を疑うことはまずありません。 おかしいと思ったら、まず自分が足したものを1つずつ外してみるのが近道です。
やってみよう
  1. トーンマッピングを切り、露出を 2.6 にして、ハイライトがどうなるか見る。
  2. キーライトを真正面(0°)にして、立体感がどれだけ失われるか確かめる。
  3. 環境光を 0 にして、影が黒く潰れることを確かめる。
  4. 花見団子.js で「被写界深度」を検索し、なぜ 1000 を掛けるのか読む。