Galactic: HTML5 を使用した 3D 太陽系の構築

Article
08/11/2011

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。

【元記事】Galactic: Building a 3D Solar System with HTML5 (2011/5/7 12:54 AM)

昨年 11 月、マイクロソフトは IE9 Platform Preview 7 と同時に Test Drive サイトに Galactic ( 英語 ) を公開しました。このデモは太陽系の 3D シミュレーションで、太陽の周りを周回する惑星を描くものです。V キーを押すと、太陽を中心としたズーム表示と、全体を遠くから眺める表示とを切り替えることができます。

私がこの銀河のデモの構築に着手したとき、HTML5 の Canvas を使用して 3D 映像のレンダリングをすればよいことはわかっていましたが、実際にどのようにするのかは定かではありませんでした。3D 計算に関する文献を少々調べた結果、3D エンジンをゼロから作成するための概念を学ぶには、週末の作業だけでは困難だとわかりました。そこで代わりに、Web を検索して 3D の JavaScript ライブラリをいくつか見つけました。

それらのライブラリを少々調べ、よくできているMr. Doob の three.js ライブラリを使うことに決めました。このライブラリは多くのブラウザーをサポートしており、HTML5 Canvas を始めさまざまな要素をレンダリングできます。また、Blender などのエディターから 3D モデルをインポートすることもできます。私は、サンプルをいくつか触るとライブラリの感覚をつかむことができ、すぐに Galactic デモの構築にとりかかることができました。これはすばらしいことです。

最初のステップはシーンの設定です。太陽系の背景は、星があって宇宙らしく見える必要があります。そこで空をシミュレートするために skybox を加えることにしました。

Two walls of the skybox (no textures applied)

 // 前壁面
walls.push(new Wall(5000, 3000, new THREE.Vector3(0, 0, -3000), 
   new THREE.Vector3(0, 0, 0), Materials.Space.Material));

// 後壁面
walls.push(new Wall(5000, 3000, new THREE.Vector3(0, 0, 1000), 
   new THREE.Vector3(0, 180 * Math.PI / 180, 0), Materials.Space.Material));

// 左壁面
walls.push(new Wall(4500, 4000, new THREE.Vector3(-3000, 0, -1000), 
   new THREE.Vector3(0, 90 * Math.PI / 180, 0), Materials.Space.Material));
// 右壁面
walls.push(new Wall(4500, 4000, new THREE.Vector3(3000, 0, -1000), 
   new THREE.Vector3(0, -90 * Math.PI / 180, 0), Materials.Space.Material));

Two walls of the skybox (textures applied)

次に、宇宙の見栄えのよい素材画像が必要です。それにはやはり NASA の写真が一番です。そこで NASA Image Gallery ( 英語) を探し回り、すばらしい写真をいくつか見つけました。それらの画像をシーンに当てはめると、右に示すように思いどおりの効果になりました。

さらに、太陽が必要です。激しく燃え盛るようにしたかったので、複数の 2D 平面を互いに接するように配置して 3D 空間をレンダリングすることにしました。NASA に戻って、太陽にちょうどよい画像を見つけてコードに追加しました。

Sun rendered as a series of planes

 // 太陽
for (var i = 0; i < 15; i++) {
   var ring = new THREE.Mesh(new Plane(200, 200, 1, 1), Materials.Ring1.Material);
   ring.position = gGalaxy.CenterPoint;
   ring.rotation = new THREE.Vector3(i * 15, i * 15, 0);
   ring.doubleSided = true;
   AddToLayer(ring, 3);
}

次は惑星を追加する番です。惑星は、単に 3D の球体として実装することにしました。NASA の画像をさらに使って各惑星のメッシュを作成し、それらをシーンに追加しました。次に単純な楕円運動を設定して、各惑星が太陽の周りを周回するようにしました。

Planets orbiting the sun

 var mesh = new THREE.Mesh(new Sphere(radius, _detail.x, _detail.y, true), material);

だんだん太陽系らしくなってきましたが、惑星に輝きを加えようと考えました。そのために、太陽の場合と似た手法を使い、各惑星の周りにいくつかの半透明の輪をレンダリングしました。

Glow effect around planet Earth

 // 輝く地球
for (var i = 0; i < 4; i++) {
   var ring = new THREE.Mesh(new Plane(60, 60, 1, 1), Materials.EarthGlow.Material);
   ring.position.x = gEarth.Position.x + i * 10;
   ring.position.y = gEarth.Position.y + i * 10;
   ring.position.z = gEarth.Position.z + i * 10;
   ring.rotation = new THREE.Vector3(i * 20, i * 20, i * 20);
   ring.doubleSided = true;
   ring.i = i;
   gEarthGlow.push(ring);
   AddToLayer(ring, 5);
}

A shooting star

最後に、流れ星を追加し、ランダムに空を数秒間横切るようにしました。この流れ星は、平面を使用して作成し、それを skybox 内でアニメーション表示しています。

さらに、別のカメラアングルを設定し、それをウィンドウの右下隅にレンダリングしました。アップの映像と全体を眺める映像の両方を同時に見られるようにしたかったのです。

The final 3D Solar System scene rendered in IE9

これで完成です。このシミュレーションは科学的に正確なものではありませんが、週末の実験としてはよくできたと思います。

今回の銀河のデモに使用した技法とライブラリは、多くの興味深い 3D 映像の作成に役立ちます。開発者が HTML5 の Canvas を使用して作成した実験的な 3D には以下のような例があります。

Internet Explorer 9 はハードウェアアクセラレーションを十分に活用したレンダリングを Web プラットフォーム全体に提供します。これにより既存のサイトをより高速で実行することができ、また上記の 3D シミュレーションのような新しいダイナミックなエクスペリエンスを可能とします。開発者はこれらを今すぐ作成することが可能です。3D グラフィックと HTML5 の Canvas を使った興味深い開発がとても簡単であることが、このブログでご理解いただけたと思います。HTML5 の可能性を紹介している Mr. Doob および他の開発者の皆様に感謝します。

Seth McLaughlin、プログラムマネージャー、Internet Explorer パフォーマンス

Share via

Galactic: HTML5 を使用した 3D 太陽系の構築

Additional resources