公開日
- 6 分で読めます
第一話 「ブラウザ3Dの夜明け前」
Three.js ってなんだろう？ カエル君と学ぶ、ブラウザ3Dの不思議な世界
注
この物語は、Three.jsを楽しく学ぶことを目的に、生成AIを活用して執筆されています。 技術的な情報の正確性には細心の注意を払っていますが、その内容がすべて真実であることを保証するものではありません。 あくまで学習の補助ツールとして、肩の力を抜いてお楽しみください。
登場人物紹介
- カエル君: 最近プログラミングを学び始めた元気なカエル。まだ知らないことばかりだけど、好奇心は人一倍。「〜ケロ」という口調が特徴。
- 三郎先生: 3DグラフィックスやWeb技術にとても詳しい物知り博士。どんな質問にも優しく答えてくれる。
第一話：ブラウザ3Dの夜明け前
カエル君: 「三郎先生、こんにちはケロ！ 今日は聞きたいことがあって来たんだケロ！」
三郎先生: 「おお、カエル君。こんにちは。今日は随分と元気いっぱいだね。どうしたんだい？」
カエル君: 「最近、ウェブサイトを見ていると、まるでゲームみたいに立体的な絵がグリグリ動くページがあるんだケロ。あれはいったいどうなってるんだケロ？ 僕が知ってるHTMLとCSSだけじゃ、あんなことできそうにないんだケロ！」
三郎先生: 「ほう、面白いところに目をつけたね。それはきっと、Three.jsのようなJavaScriptライブラリを使って、WebGLという技術で3Dグラフィックスを描画しているんだろう。」
カエル君: 「すりーじぇいえす…？ うぇぶじーえる…？ なんだか呪文みたいだケロ…。」
三郎先生: 「ふふふ。大丈夫、一つずつ説明してあげよう。まず、カエル君が驚いたように、昔はブラウザで立体的なものを自由に動かすなんて、とても大変なことだったんだよ。」
カエル君: 「そうなんだケロ！？」
三郎先生: 「うむ。そもそも、ウェブが生まれたばかりの頃は、文字と簡単な画像を表示するのが精一杯だった。そこに立体的な世界を作ろうとした人たちがいたんだ。それが、1994年頃に登場したVRMLという技術さ。」
カエル君: 「ぶいあーるえむえる…なんだか強そうな名前だケロ！」
三郎先生: 「Virtual Reality Modeling Language、日本語にすると『仮想現実モデリング言語』だね。その名の通り、3Dのモデルを記述するための言語だった。しかし、これを見るためにはブラウザに特別な『プラグイン』という追加機能をインストールする必要があったんだ。みんながそのプラグインを入れてくれるわけじゃないから、なかなか普及しなかった。」
カエル君: 「ふむふむ。見るために準備が必要だったんだケロね。それはちょっと面倒くさいケロ。」
三郎先生: 「その通り。その後、2000年代になると、FlashやShockwaveという技術が人気を博した。カエル君も、昔のウェブサイトでアニメーションやゲームが動いていたのを見たことがあるかもしれないね。」
カエル君: 「あ、知ってるケロ！ ボタンを押すとピカピカ光ったり、キャラクターが動いたりするやつだケロ！」
三郎先生: 「そうそう。FlashやShockwaveは、それまでのウェブの表現力を大きく広げてくれた。3Dの表現も可能だったんだよ。しかし、これらもまた、プラグインが必要だった。それに、読み込みに時間がかかったり、セキュリティの問題があったりと、いくつかの課題を抱えていたんだ。」
カエル君: 「なるほどー。昔は『プラグイン』っていうのが無いと、ブラウザでリッチな表現は難しかったんだケロね。じゃあ、今はどうしてプラグイン無しでグリグリ動くんだケロ？」
三郎先生: 「良い質問だね、カエル君！ そこでいよいよ登場するのが、WebGLなんだ。WebGLの登場が、ブラウザの3D表現にとって、まさに革命的な出来事だったんだよ。」
カエル君: 「か、革命！ なんだかすごいのが来たんだケロ！ ピョンピョン！」
三郎先生: 「おっと、興奮してきたようだね。よし、では次の章では、そのWebGLと、我々の本題であるThree.jsが、いかにしてブラウザの世界を変えていったのかを話してあげよう。」
（第2話へつづく）