このサイトの使い方
上から順でも、気になる章からでも
各章にはその場で動かせる実験がついています。スライダーを動かすと、 文章で説明していることが目の前で起きます。読むより先に、まず動かしてください。 むずかしい言葉は用語集にまとめてあります。
- Aとにかく動かしたい人00 まず動かしてみる → 好きな章の実験だけ触る
- B順番に理解したい人01 → 02 → 03 …… と上から。04章（かたち）と05章（面と法線）がこの教材の背骨です。
- Cコードを読みたい人図鑑でファイルを選ぶ → 対応する章に戻る
- Dもう一周した人第II部（12〜16）へ。ブロッコリー・ロマネスコの3本は、第I部のやり方では作れません
1個の野菜をつくる（00〜11）
1本の .js ファイルを、上から順にほどいていく構成
まず動かしてみる
インストールなし。ブラウザだけで23本を動かす手順。まずここから。
01CONFIG「作る」と「読み込む」はどう違うのか
モデルファイルを読み込まずに、実行した瞬間に座標を計算で作る。その利点と代償。
02Rng同じ種からは、同じ野菜が生える
Math.random() を使わない理由。「種」を渡すと毎回同じ結果になる乱数を自分で書く。
03Noiseでこぼこを、なめらかな乱数で作る
となり合う値がなめらかにつながる乱数。重ねると自然物の模様になる（fBm）。
04Profile横顔を1本描けば、立体になる
横顔の折れ線を1本描いて軸のまわりに回す。この教材の背骨にあたる章。
05Mesh三角形の向きと、面の傾き
3Dモデルの正体は座標の配列と三角形の番号表。裏返ると立体が消える理由。
06Texture模様も、その場で描く
UVで立体と画像を対応させ、模様を1ピクセルずつ計算で描く。色・光り方・凹凸の3枚。
07PBR「濡れている」「粉をふいている」を数値で言う
「濡れている」「粉をふいている」を数値で書く。粗さ・クリアコート・透け。
08Havok盛り付けは、手で置かない
ざるへの盛り付けは手で置かない。重力と摩擦だけ与えて物理エンジンに任せる。
09Parts部品を作って、組み合わせる
粒・ひだ・房。部品を1個作って何百個並べ、合体させる。重なりはほぐす。
10Spine曲がったものを作る
バナナやきゅうりは曲がっている。先に軸を決め、断面を軸に垂直に置いていく。
11Scene見せ方を決める（光と露出）
同じ野菜でも光で別物になる。IBL・影・露出・トーンマッピング。
構造そのものをつくる（12〜16）
回転体でも掃引でも作れない野菜が持ち込んだ、5つの技術
第I部の11章は、ファイルの構成（CONFIG → Rng → Noise → Profile → TextureLab → 本体 …）に そのまま対応していました。ところが、あとから加わったブロッコリー・カリフラワー・ロマネスコは、 その並びに収まりません。横顔（Profile）が無く、テクスチャも1枚も使わないからです。 形は再帰で生え、色は頂点そのものが持っています。 第II部は、層ではなく「作り方の種類」で立てた5章です。
くり返しが、形をつくる
ブロッコリーもロマネスコも、同じ手順を小さくしてくり返しただけ。むずかしいのは止め方。
13Phyllotaxis螺旋は、描かない
137.5°ずつ回して置くだけで、8本・13本・21本の螺旋が勝手に現れる。
14VertexColor模様を貼らずに、頂点で塗る
枝分かれした形にUVは張れない。色も影も、頂点ひとつずつに焼き込む。
15Shell毛は、薄い殻を重ねて生やす
産毛は法線マップでは出ない。少し大きい殻を重ねて、輪郭に毛を立てる。
16Variants「似ているのに別物」を作り分ける
ブロッコリーとカリフラワーは同じプログラム。色を白くしただけでは似ない。
23本を引く
ファイルから逆に読みたいとき