公開日
- 8 分で読めます
第5話 「シーンは必然か？ WebGLとの本当の関係」
Three.js ってなんだろう？ カエル君と学ぶ、ブラウザ3Dの不思議な世界
注
この物語は、Three.jsを楽しく学ぶことを目的に、生成AIを活用して執筆されています。 技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。 あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。
登場人物紹介
- カエル君: 最近プログラミングを学び始めた元気なカエル。まだ知らないことばかりだけど、好奇心は人一倍。「〜ケロ」という口調が特徴。
- 三郎先生: 3DグラフィックスやWeb技術にとても詳しい物知り博士。どんな質問にも優しく答えてくれる。
第5話：シーンは必然か？ WebGLとの本当の関係
カエル君: 「先生、この前のシーングラフの話、本当に面白かったんだケロ。親子関係で世界を組み立てるなんて、すごいアイデアだケロ。でも、そこで新たな疑問が生まれたんだケロ。」
三郎先生: 「ほう、どんな疑問だい？」
カエル君: 「この『シーン』とか『シーングラフ』っていう考え方は、Three.jsが作った特別なものなんだケロか？ それとも、3Dグラフィックスをやるなら、誰がどうやっても結局はこういう考え方にたどり着く、いわば『必然』のものなんだケロか？」
三郎先生: 「カエル君、それは物事の本質を突く、最高の質問だ！ 結論から言おう。シーングラフは、現代のリアルタイム3Dグラフィックスにおける、普遍的かつ必然的な設計思想だ。Three.jsだけのユニークなアイデアでは全くない。」
カエル君: 「やっぱり『必然』だったんだケロ！？」
三郎先生: 「うむ。例えば、世界的に有名なゲームエンジンの Unity や Unreal Engine、プロが使う3D制作ソフトの Blender や Maya も、呼び方や細部は違えど、すべてこのシーングラフという階層構造を中核に据えて世界を管理している。それほどまでに、この考え方は強力で、合理的ということさ。」
カエル君: 「なるほど…。でも、それなら前の話に出てきた『魔法の呪文』こと WebGL にも、当然シーンという概念があるんだケロよね？」
三郎先生: 「いいや、カエル君。ここが最も重要なポイントだ。WebGLには、シーンという概念は全く存在しない。」
カエル君: 「えええええーーーっ！？ どういうことだケロ！？ じゃあWebGLは何をやっているんだケロ！？」
三郎先生: 「落ち着いて聞いてくれ。WebGLは、我々が思っているよりもずっと『低レベル』で『無骨』な働き者なんだ。WebGLが理解できるのは、極めて原始的な命令だけだ。」
- 頂点のリスト: 『ここに、こういう座標の点の集まりがあるぞ』というただの数字の羅列。
- シェーダー: 『その点と点を線で結んで面を作り、ピクセルを塗るけど、どういう計算式で色を決めるかね？』という計算プログラム。
- 変換行列: 『その点たちを、この行列を使ってグニャっと変形させてくれ』という計算用の数字のセット。
三郎先生: 「WebGLは『立方体』も『親子関係』も『光』も知らない。ただ、渡された膨大な座標データと計算式に従って、黙々と三角形を描き、ピクセルを塗りつぶすだけの、超高性能な『描画マシン』なんだよ。」
カエル君: 「し、知らなかったんだケロ…。じゃあ、もしThree.js（シーングラフ）がなかったら、僕たちはどうなっちゃうんだケロ？」
三郎先生: 「地獄を見るだろうね。例えば、太陽の周りを回る地球を動かすとしよう。シーングラフがあれば『地球を少し回転させる』だけで済む。だが、シーングラフが無ければ、こうなる。」
- 『太陽の中心からの地球の現在の角度』を自分で覚えておく。
- その角度を使って、三角関数で地球の新しいXYZ座標（ワールド座標）を計算する。
- 地球のその新しい位置を元に、月の相対的な位置をまた三角関数で計算し、月の最終的なワールド座標を割り出す。
- そして、その計算結果の座標リストを、改めてWebGLに『この座標に三角形を描いてくれ』と毎フレーム送り直す。
三郎先生: 「オブジェクトが数千、数万個になったら…？ 考えただけで気が遠くなるだろう？」
カエル君: 「うぅ…僕の頭はもう爆発寸前だケロ…。シーングラフがないと、世界の全ての物の絶対位置を、僕が毎フレーム計算しなきゃいけないんだケロね…。」
三郎先生: 「その通り！ シーングラフの偉大さは、その『ワールド座標の計算』という最も面倒で複雑な部分を、すべて自動で肩代わりしてくれることにある。我々は『地球をちょっと回す』というローカルな（相対的な）変化を記述するだけで、あとはシーングラフが全体のつじつまを合わせてくれるんだ。」
カエル君: 「はぁ〜〜、なるほどケロ…。だから『必然』だったんだケロね。人間が複雑な3D空間をまともに扱うための、唯一無二の解決策がシーングラフだったんだケロ。」
三郎先生: 「まさにその通りだ、カエル君。そして、Three.jsの真の価値もそこにある。Three.jsは、無骨な描画マシンであるWebGLを、シーングラフという強力な『世界の設計図』を使って操作できるようにしてくれた。我々開発者と、低レベルなWebGLとの間に立つ、最高の『現場監督』なのさ。」
カエル君: 「現場監督！ 言い得て妙だケロ！ 先生、今日もありがとうケロ！ Three.jsとWebGLの本当の関係が、心の底から理解できたんだケロ！ ピョンピョンピョーーーン！」
（第6話へつづく）