第2話 「WebGLの革命とThree.jsの誕生」

Three.js ってなんだろう？ カエル君と学ぶ、ブラウザ3Dの不思議な世界

注

この物語は、Three.jsを楽しく学ぶことを目的に、生成AIを活用して執筆されています。 技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。 あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。

---

登場人物紹介

• カエル君: 最近プログラミングを学び始めた元気なカエル。まだ知らないことばかりだけど、好奇心は人一倍。「〜ケロ」という口調が特徴。
• 三郎先生: 3DグラフィックスやWeb技術にとても詳しい物知り博士。どんな質問にも優しく答えてくれる。

---

第2話：WebGLの革命とThree.jsの誕生

カエル君: 「先生、早く聞きたいんだケロ！ 革命的な『うぇぶじーえる』ってやつが、どうやって世界を変えたんだケロ？」

三郎先生: 「はっはっは。落ち着いて、カエル君。順を追って話してあげよう。WebGL、正式には Web Graphics Library と言うんだが、これは2011年頃に登場した、ブラウザで3Dグラフィックスを動かすための『魔法の呪文』のようなものなんだ。」

カエル君: 「魔法の呪文！ やっぱりケロ！」

三郎先生: 「そう言ってもいいかもしれないね。WebGLの何が革命的だったかというと、ずばり**『プラグインが不要』**だったことだ。WebGLは、ブラウザにもともと組み込まれている機能として、誰でも使えるようになったんだよ。」

カエル君: 「おおー！ ということは、特別な準備をしなくても、みんなが同じように3Dを見られるようになったんだケロね！」

三郎先生: 「その通り！ しかも、コンピュータの性能を最大限に引き出すことができる。特に、グラフィック処理専門の頭脳である**GPU（Graphics Processing Unit）**のパワーを直接利用できるようになったんだ。これにより、これまでプラグインを使っても難しかった、滑らかで複雑な3D表現が、ブラウザの上で実現可能になったんだよ。」

カエル君: 「じーぴーゆー…？ なんだか難しい言葉が出てきたケロ…。」

三郎先生: 「簡単に言うと、絵を描くのがすごく得意な専門家、といったところかな。その専門家の力を借りられるようになったことで、ブラウザは一気に表現力を増したんだ。ゲーム、データや建物の可視化、仮想現実（VR）など、様々な分野でWebGLは使われている。」

カエル君: 「なるほどケロ！ WebGLは、プラグイン無しで、専門家の力を借りて、すごい3Dを動かせる魔法の呪文なんだケロね！ でも先生、今日のテーマの『すりーじぇいえす』はどこに行ったんだケロ？」

三郎先生: 「いよいよ本題だね。実は、その強力な魔法の呪文であるWebGLは、少しだけ…いや、かなり専門的で、直接使いこなすのが大変だったんだ。」

カエル君: 「えっ、そうなんだケロ？」

三郎先生: 「うむ。例えば、ただの立方体を一つ表示するだけでも、何百行もの呪文（コード）を唱える必要があった。これでは、気軽に魔法を使ってみよう、とはなりにくいだろう？」

カエル君: 「うーん、確かに。僕なら最初の10行で眠くなっちゃうケロ…。」

三郎先生: 「そこで現れた救世主が、Three.jsなんだ。Three.jsは、その複雑で難しいWebGLの呪文を、もっと簡単で分かりやすい言葉に翻訳してくれる、いわば『魔法の翻訳機』のようなものさ。」

カエル君: 「魔法の翻訳機！ ピョンピョン！ それなら僕にも使えそうだケロ！」

三郎先生: 「そうなんだ。Three.jsを使えば、何百行も必要だった立方体の表示が、ほんの数行のコードで書けてしまう。Three.jsは、WebGLの持つパワフルな能力はそのままに、開発者がもっと創造的な作業に集中できるように、様々な機能を提供してくれているんだ。」

カエル君: 「具体的には、どんなところが優秀なんだケロ？」

三郎先生: 「良い質問だね。Three.jsの優秀な点はたくさんあるが、いくつか挙げるとすると…

• 簡単なコード: 複雑なWebGLの処理を隠蔽し、直感的な命令でシーン、カメラ、ライト、オブジェクトなどを操作できる。
• 豊富な機能: 3Dモデルを読み込む機能、アニメーションを制御する機能、様々な種類の光や影を表現する機能など、3D制作に必要なものが一通り揃っている。
• 巨大なコミュニティ: 世界中の開発者が使っているから、情報が豊富で、困ったときにも解決策を見つけやすい。

といったところかな。Three.jsは、Ricardo Cabello（通称 Mr.doob）という一人の天才的な開発者によって2010年に生み出され、今では数え切れないほどの貢献者によって、日々進化し続けているんだよ。」

カエル君: 「へぇー！ Three.jsは、難しい魔法の呪文を簡単にしてくれる、すごい翻訳機なんだケロね！ しかも、便利な機能がたくさんあって、困ったら助けてくれる仲間もいっぱいいるなんて、最強だケロ！ 僕もThree.js、使ってみたくなったんだケロ！」

三郎先生: 「その意気だ、カエル君！ Three.jsの登場によって、世界中のウェブ開発者が、気軽に、そして自由に3D表現の可能性を探求できるようになった。まさに、ブラウザ3Dの歴史における、大きな大きな一歩だったと言えるだろう。」

カエル君: 「先生、ありがとうケロ！ なんだか、ブラウザで3Dが動く仕組みがよーく分かった気がするんだケロ！ ピョンピョンピョーン！」

三郎先生: 「ふふふ、それは良かった。今日の話はここまでにしておこう。次は、実際にThree.jsを使って、簡単な3Dの世界を一緒に作ってみるのも面白いかもしれないね。」

---

（第3話へつづく）