このサイトの使い方
上から順でも、気になる章からでも
各章にはその場で動かせる実験がついています。スライダーを動かすと、 文章で説明していることが目の前で起きます。読むより先に、まず動かしてください。 むずかしい言葉は用語集にまとめてあります。
- Aとにかく動かしたい人図鑑の写真を押す → その料理がこのサイトの中で動きます
- B順番に理解したい人01 → 02 → 03 …… と上から。04章(かたち)と05章(面と法線)がこの教材の背骨です。
- C料理として面白い所だけ見たい人第II部(12〜17)へ。焼き色・たれ・透け・粒・潰れ。野菜には出てこない5つです。
- Dコードを読みたい人ソースでファイルを選ぶ → 対応する章に戻る
exp)、
それに少しだけベクトル(内積・外積)。
高校1年までの内容でだいたい追えます。出てきたところで、そのつど説明します。
1皿をつくる(00〜11)
1本の .js ファイルを、上から順にほどいていく構成
まず動かしてみる
インストールなし。ブラウザだけで14本を動かす手順。まずここから。
01CONFIG「作る」と「読み込む」はどう違うのか
モデルファイルも写真も読み込まず、実行した瞬間に座標と模様を計算で作る。
02Rng同じ種からは、同じ料理ができる
Math.random() を使わない理由。種を渡すと毎回同じ結果になる乱数を自分で書く。
03Noise焼きムラは、なめらかな乱数でできている
となり合う値がなめらかにつながる乱数。重ねると焼きムラや生地の肌理になる。
04Shape断面を1枚描けば、立体になる
断面を1枚描いて軸のまわりに回す。回らないものは外形×縦断面で作る。
05Mesh三角形の向きと、面の傾き
3Dモデルの正体は座標の配列と三角形の番号表。裏返ると立体が消える理由。
06Texture模様も、その場で描く
UVで立体と画像を対応させ、模様を1ピクセルずつ計算で描く。色・光り方・凹凸の3枚。
07PBR「照り」「ぬれ」「粉っぽさ」を数値で言う
「照っている」「ぬれている」を数値で書く。粗さ・クリアコート・透け。
08Havok盛り付けは、手で置かない
皿への盛り付けは手で置かない。重力と摩擦だけ与えて物理エンジンに任せる。
09Parts部品を作って、たくさん並べる
青のりもかつお節も、テクスチャに描くと消える。実体のかけらとして撒く。
10Sweep曲がったものを作る
ウィンナーも秋刀魚も曲がっている。先に軸を決め、断面を軸に垂直に置いていく。
11Scene見せ方を決める(光と露出)
同じ料理でも光で別物になる。IBL・影・露出・トーンマッピング。
火が通ったものをつくる(12〜17)
野菜では出てこなかった、料理だけの6つの難所
第I部の11章は、ファイルの構成(CONFIG → Rng → Noise → Mesh utils → Fields → TextureLab → 本体 …)に そのまま対応していました。並びは野菜編ともほとんど同じです。 違いが出るのはここからで、料理には火が通っていて、たれが掛かっていて、 柔らかくて、粒が集まっていて、切ってある。 第II部は、層ではなく「料理だから必要になったこと」で立てた6章です。
焼き色は、形と相関している
焼き色は最後に塗る飾りではない。形と結びついていないと「汚れ」に見える。
13Glazeたれは、色ではなく層
たれを茶色く塗ると光沢のない卵になる。色は厚みから解くもの。
14Translucency透けないと、食べ物に見えない
透けを切ると、白玉は石膏に、赤身は消しゴムになる。厚みを持たせる。
15Grains粒を1400個置いて、谷を暗くする
茶碗一杯は約1400粒。説得力を決めるのは粒間の暗がりで、SSAOでは出ない。
16Contact触れ合うと、潰れる
団子は真球では積めない。潰した体積の行き先と、接触の縁の土手。
17Variants「似ているのに別物」を作り分ける
トーストとエッグトーストは同じプログラム。色を変えただけでは別物にならない。
14本を引く
ファイルから逆に読みたいとき