【大喜利状態】「次は太陽系を飛び出して」と言われたので、宇宙の果てまでワープするサイトを作ってしまった。

皆様、いかがお過ごしでしょうか。

先日、「冷やしすぎたお詫びにブラウザが溶ける『世界一熱いサイト（6000℃）』を作った」という記事を公開したところ、予想以上に多くの方に楽しんでいただけました。

すると、コメント欄でこんなありがたい（？）お言葉をいただきました。

絶対零度、マグマ（6000℃）と来て、次は温度の限界すら超えて「宇宙空間への旅」ですか。……最高ですね。受けて立ちましょう！

というわけで、フリにお応えして、太陽系を横断し、さらにその先の未知の宇宙へとワープしていくサイトを作ってしまいました。

その名も、「世界一遠くへ行くサイト - VOYAGER」です。

サイトはこちら（PC・音出し推奨！）

どんなサイト？

今回は温度のパラメーターではなく、「距離とスケール」に全振りをしました。ブラウザ上に3D空間を構築し、地球から出発して太陽系の惑星を次々と寄り道しながら、最終的に「観測可能な宇宙の果て（138億光年先）」までワープしていくインタラクティブなサイトです。

ただ星を眺めるだけではなく、宇宙旅行の「没入感」を高めるためにいくつかこだわりの要素を詰め込みました。

1. 探査機と一緒に旅をする「TPS（見下ろし）視点」

ただカメラが移動するのではなく、プレイヤーの目の前に「ゴールドの探査機（人工衛星）」を配置しました。「NEXT PLANET」のボタンを押すと、機体の後ろから青白いプラズマの炎が噴き出し、機体をガタガタと震わせながら次の星へとワープします。

2. 太陽系からブラックホール、そして「宇宙の果て」へ

太陽系の惑星（火星、木星、土星の環など）はもちろんのこと、冥王星を過ぎると「太陽系外」へのワープが可能になります。

巨大なオリオン大星雲、プラズマジェットを噴き出すM87ブラックホール、さらにはアンドロメダ銀河を超えて、光が届く限界である「宇宙の果て」まで寄り道することができます。

3. ブラウザで生成する「宇宙の音」（Web Audio API）

今回は視覚だけでなく、聴覚でも冷たく広大な宇宙を感じてもらえるよう、音響も実装しました。

低いアンビエントな重低音（ドローン音）が響く中、ワープ時にはスラスターの轟音が鳴り響きます。ぜひヘッドホンをつけて体験してみてください。

4. 宇宙の果てを超えた先には…？

最後の天体に到着すると、ボタンが「BEYOND UNIVERSE（宇宙の彼方へ）」に変わります。警告音とともにそれを押した時、探査機がどこへ向かって飛び出していくのか……ぜひご自身の目で確かめてみてください。

どうやって作ったか（少しだけ技術の話）

今回は「Three.js」という3Dライブラリを使用して実装しました。驚くべきことに、画像のテクスチャ素材は一切使っていません。

• 天体の描画: 球体（SphereGeometry）やリング（RingGeometry）に、色や透明度、発光（AdditiveBlending）のパラメーターを組み合わせるだけで、ガス惑星やブラックホール、銀河を表現しています。

• 星空: 2万個のパーティクル（小さな点）を15万の範囲にばらまき、ワープ中はそれをカメラの奥へ流すことでスピード感を出しています。

• サウンド: 音声ファイル（mp3など）も使っておらず、「Web Audio API」のオシレーター（波形生成）を使って、ブラウザ上でリアルタイムにエンジン音や環境音を合成しています。

おわりに

素敵な大喜利のお題をくださったコメント主様(じゅんちゃん様)、本当にありがとうございました！おかげさまで、ブラウザの中で果てしない宇宙旅行を楽しむことができるようになりました。

「氷」「マグマ」そして「宇宙の果て」……。

果たして、次なる無茶振りはどこから飛んでくるのでしょうか（戦々恐々）。

お時間のある時に、ぜひ音声をオンにして、宇宙の果てまでの寄り道ドライブに出かけてみてください！

世界一遠くへ行くサイト（VOYAGER）

【前回】世界一熱いサイト（MAGMA CORE）