たべもののつくりかた.

Babylon.js / procedural food

3Dの料理は、
数式から焼ける。

このサイトで扱う14本のプログラムは、3Dモデルも写真も1枚も読み込みません。 点の座標を計算で並べ、焼き色をその場で描き、たれの濃さを厚みから解く。 絵を描く技術ではなく、形と質感を組み立てる技術です。 中学・高校の数学で追えるところから順に見ていきます。

準備中 0 頂点
読み方HOW TO

このサイトの使い方

上から順でも、気になる章からでも

各章にはその場で動かせる実験がついています。スライダーを動かすと、 文章で説明していることが目の前で起きます。読むより先に、まず動かしてください。 むずかしい言葉は用語集にまとめてあります。

  • Aとにかく動かしたい人図鑑の写真を押す → その料理がこのサイトの中で動きます
  • B順番に理解したい人01 → 02 → 03 …… と上から。04章(かたち)と05章(面と法線)がこの教材の背骨です。
  • C料理として面白い所だけ見たい人第II部(12〜17)へ。焼き色・たれ・透け・粒・潰れ。野菜には出てこない5つです。
  • Dコードを読みたい人ソースでファイルを選ぶ → 対応する章に戻る
必要な数学。 sin・cos(三角関数)、座標、比例、指数関数(exp)、 それに少しだけベクトル(内積・外積)。 高校1年までの内容でだいたい追えます。出てきたところで、そのつど説明します。
姉妹編があります。 同じ作りで野菜と果物23本を扱った「やさいのつくりかた」(VirtualVegetablePlant)。 第I部の11章はほとんど共通の内容なので、どちらから読んでもかまいません。 料理でしか出てこない話は第II部にまとめてあります。
第I部PART I

1皿をつくる(00〜11)

1本の .js ファイルを、上から順にほどいていく構成

00START

まず動かしてみる

インストールなし。ブラウザだけで14本を動かす手順。まずここから。

01CONFIG

「作る」と「読み込む」はどう違うのか

モデルファイルも写真も読み込まず、実行した瞬間に座標と模様を計算で作る。

02Rng

同じ種からは、同じ料理ができる

Math.random() を使わない理由。種を渡すと毎回同じ結果になる乱数を自分で書く。

03Noise

焼きムラは、なめらかな乱数でできている

となり合う値がなめらかにつながる乱数。重ねると焼きムラや生地の肌理になる。

04Shape

断面を1枚描けば、立体になる

断面を1枚描いて軸のまわりに回す。回らないものは外形×縦断面で作る。

05Mesh

三角形の向きと、面の傾き

3Dモデルの正体は座標の配列と三角形の番号表。裏返ると立体が消える理由。

06Texture

模様も、その場で描く

UVで立体と画像を対応させ、模様を1ピクセルずつ計算で描く。色・光り方・凹凸の3枚。

07PBR

「照り」「ぬれ」「粉っぽさ」を数値で言う

「照っている」「ぬれている」を数値で書く。粗さ・クリアコート・透け。

08Havok

盛り付けは、手で置かない

皿への盛り付けは手で置かない。重力と摩擦だけ与えて物理エンジンに任せる。

09Parts

部品を作って、たくさん並べる

青のりもかつお節も、テクスチャに描くと消える。実体のかけらとして撒く。

10Sweep

曲がったものを作る

ウィンナーも秋刀魚も曲がっている。先に軸を決め、断面を軸に垂直に置いていく。

11Scene

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

同じ料理でも光で別物になる。IBL・影・露出・トーンマッピング。

第II部PART II

火が通ったものをつくる(12〜17)

野菜では出てこなかった、料理だけの6つの難所

第I部の11章は、ファイルの構成(CONFIG → Rng → Noise → Mesh utils → Fields → TextureLab → 本体 …)に そのまま対応していました。並びは野菜編ともほとんど同じです。 違いが出るのはここからで、料理には火が通っていて、たれが掛かっていて、 柔らかくて、粒が集まっていて、切ってある。 第II部は、層ではなく「料理だから必要になったこと」で立てた6章です。

資料REFERENCE

14本を引く

ファイルから逆に読みたいとき