目次/第09章
部品を作って、組み合わせる
instancing & merging — 粒・ひだ・房
- 回転体(04章)は「1本の横顔を回す」ので、粒やひだのような部品の集まりは作れません。
- そこで部品を1個だけ作り、位置を変えて何百個も並べ、最後にひとつに合体させます。
- ブドウの房のように詰め込むものは、まず適当に置いて、めり込みを押し返してほぐします。
トウモロコシの粒、シイタケのひだ、ブドウの房。この3つは、これまでのやり方では作れません。 どれも同じような部品がたくさん集まってできているからです。 円柱にでこぼこ(ノイズ)を足しても、粒には見えません。トウモロコシ.js のコメントに 「円柱に変位をかけるとゴルフボールになる」と書いてあるのはこの話です。
やり方は「1個作って、たくさん置いて、合体」
- 粒を1個だけちゃんと作る(形も法線もUVも)
- 場所と向きと大きさを変えながら、何百個ぶんの座標を並べる
- ぜんぶを1つのメッシュに合体する(マージ)
3番目がなぜ要るのか。GPUに「これを描いて」と頼む回数をドローコールといいます。 粒が600個で600回頼むと、1回あたりの準備の手間だけで重くなります。 合体して1回にまとめれば、頂点の数は同じでも一気に速くなります。 形がぜんぶ同じで色だけ違う場合は、インスタンスという仕組みで 「同じ形をここに600個置いて」と1回で頼むこともできます(ブドウ.js の粒はこの方式です)。
粒は、列ごとに半分ずらして噛み合わせる
とうもろこしの粒は、まっすぐな格子には並んでいません。 縦の列をなしていて、となりの列とは半ピッチずれて噛み合っています。 レンガの積み方と同じです。ずらさないと、たちまち作り物のビーズになります。
実験 — 粒を並べる(円柱を切り開いた展開図)
見え方:ちょうど接している
ずれを0にすると、とたんに「工業製品」になります。0.5がとうもろこしです。
房は「ばらまいてから、ほぐす」
ブドウの房は、格子では並びません。かといって完全にランダムに置くと、粒どうしがめり込みます。 そこでリラクゼーション(緩和)という手を使います。 考え方はとても単純で、
- まず、房の形のなかに適当にばらまく
- めり込んでいる2粒を見つけたら、めり込んだぶんの半分ずつ、互いに押し返す
- これを何回もくり返す
押し返すだけなので、いつかは重ならなくなります。 物理エンジン(08章)を使わずに、自然な詰まり方が作れる安上がりな方法です。 ブドウ.js のコメントに「配置 → 重なり解消リラクゼーション → インスタンス化」とあるのが、まさにこれです。
実験 — 重なりをほぐす
ほぐした回数:0 回
赤く縁取られた粒が、まだめり込んでいる粒です。0組になれば完成。
シイタケのひだを、模様(テクスチャの縞)で済ませてはいけません。 ざるに盛れば必ず何本かは裏返って、ひだが正面に来ます。 そのとき縞で描いたひだは「線を引いた円盤」になり、一発で嘘だとわかります。 シイタケ.js は、ひだを実体のメッシュとして1枚ずつ立てています。 「正面から見ると同じに見えるが、別の角度で崩れる」——これが手抜きの見つかり方です。
- 列のずれを0にして、とうもろこしに見えなくなることを確かめる。
- 粒の大きさを0.8にする。すき間が空くと何に見えるか。
- 粒の数を60にして「自動でほぐす」。何回で0組になるか数える。
- 粒の数を60、房を狭くしたつもりで想像する。ほぐしても0にならない場合、何が足りないか考える。