やさいのつくりかた.

目次/第11章

11Scene

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

IBL / shadow / SSAO / tone mapping

この章の3行まとめ
  • 形・模様・質感がぜんぶ正しくても、光の当て方を外すと台無しになります。
  • いまの3Dは、360度の風景写真をそのまま光源として使います(IBL)。
  • 明るさは計算のなかでは1を超えます。それを画面用に圧縮するのがトーンマッピングです。

どのファイルも、最後のほうに必ず同じような行が並んでいます。 IBL / ライト / 影 / SSAO2 / トーンマッピング。 ここは野菜そのものではなく、写真でいうところの照明とカメラの設定です。 同じ野菜でも、この設定次第で「おいしそう」にも「標本」にもなります。

光は「電球」ではなく「風景」で当てる

現実で野菜を見るとき、光は電球ひとつから来ているわけではありません。 窓から入った空の光、白い壁の照り返し、机の反射。四方八方から来ています。 これを再現するために、360度ぐるりと撮った風景の画像を、そのまま光源として使います。 これを IBL(イメージ・ベースド・ライティング=画像による照明)といいます。 野菜の表面に映り込む「まわりの景色」も、これで一気に本物らしくなります。

  • キーライト — 主役の1灯。影の向きを決める。
  • 影(シャドウマップ) — 光から見て手前にあるものの距離を記録して、影を落とす。
  • SSAO — 物どうしのすみっこを暗くする。ざるに盛った野菜のすき間が締まる。

明るさは1を超える。だから圧縮する

画面で出せる白は 255 が上限です。でも計算の途中では、ハイライトの明るさは 平気で 5 や 20 になります。そのまま切り捨てると、光っている部分が ベターっとした真っ白になって、形が消えます。 そこで、明るいところほど強く圧縮する関数を通してから画面に出します。 これがトーンマッピングです。写真の「白飛びしにくい設定」と同じことをしています。

実験 — 光と露出を動かす

いまの状態:—

トーンマッピングを切って露出を2.5にすると、ハイライトが白く潰れて形が消えます。

環境光を落とすと、影が「真っ黒」になる

環境光を0にしてみてください。光が当たっていない側が、完全な黒になります。 現実にはこうなりません。まわりの壁や机から必ず光が回り込むからです。 逆に環境光を上げすぎると、影が消えてぺったりした絵になります。 「まわりからどれくらい光が回り込むか」を決めるのが、この数値です。

つまずきポイント

色にはsRGBとリニアの2種類があります。 画面に表示するための色(sRGB)と、光の計算をするための色(リニア)は別物で、 そのまま混ぜると濁ったり明るくなりすぎたりします。 各ファイルのコメントに「sRGB相当のHSV(後でリニアへ)」と書いてあるのはこの区別です。 Babylon.js では色を作るときに toLinearSpace() を通します。 ここを忘れると、「なぜか全体が白っぽい」という直しにくいバグになります。

やってみよう
  1. トーンマッピングを切って、露出を2.5まで上げる。ハイライトが潰れて形が消える様子を見る。
  2. 環境光を0にして、影の側が真っ黒になることを確かめる。
  3. 光の向きを真後ろ(180°)にする。輪郭だけが光る「逆光」になります。
  4. 自分のスマホで野菜を撮り、窓の光がどちらから来ているか観察する。