f:id:omuriceman:20190917011940p:plain

宇宙にいきたいと思ったことは無いだろうか。私は行きたいとは思わない。しかし手軽に宇宙目線の人間を超越した存在になれるとしたら面白そうではないだろうか？そんなことを可能にするのが「Spacekit」というJavaScriptライブラリである。

概要

タイトルにほとんど書いている通りだが、地球や月・太陽系などの宇宙空間をインタラクティブに作成できるJavaScriptライブラリである。いくつかのサービスの描画エンジンとして使用されているようだ。

古代の地球を見るサービス

dinosaurpictures.org

小惑星のデータベース

www.asterank.com

流星群可視化サービス

www.meteorshowers.org

インストール方法

今の所、npmなどでインストールできる方法はない。公開されているGitHubのファイルを読み込むか、生のファイルをダウンロードして設置するかのどちらかになる。

次の事例ではGitHubのファイルを読み込む方法で宇宙を創造する方法を紹介している。

Webサイトで宇宙を表現する

太陽と地球を創造する

まずは太陽と宇宙を創造しよう。そのための一番シンプルなコードがこんな感じになると思う。

<!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        html,body{
            height: 100%;
        }
        #main-container {
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="main-container"></div>
    <script src="https://typpo.github.io/spacekit/build/spacekit.js"></script>
    <script src="./main.js"></script>
</body>
</html>

scriptファイルのmain.jsの中身はこのような状態になっている。

const viz = new Spacekit.Simulation(document.getElementById('main-container'), {});

viz.createObject('sun', Spacekit.SpaceObjectPresets.SUN);
viz.createObject('earth', Spacekit.SpaceObjectPresets.EARTH);

完了してみたらhtmlファイルを開いてみよう。これが本当の「Hello, World!」かもしれない。。

f:id:omuriceman:20190916204605p:plain — 漆黒の闇、太陽の周りを地球がぐるぐると回っている

余談ではあるが、DOCTYPE宣言時のhtmlとbodyはheightが0になってしまうので100%を指定すると画面全体に宇宙が描画される。うまく画面が表示されない時は確認してほしい。

他の惑星を追加する

他の惑星の追加の仕方は、上記のコードをみれば創造できると思うがcreateObjectメソッドにて追加ができる。

viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);

オリジナルの惑星を作成する

オリジナルの惑星は静止状態のものと、他の惑星と同じように太陽を周回するオブジェクトを作成できる。

静止オブジェクトの作成

const obj = viz.createObject('myobj', {
    position: [1, 1, 1],
});

周回オブジェクトの作成

このサンプルは人工惑星になったテスラロードスターが軌道を周回する情報になっているらしい。

electrek.co

const roadster = viz.createObject('spaceman', {
    labelText: 'Tesla Roadster',
    ephem: new Spacekit.Ephem({
      // These parameters define orbit shape.
      a: 1.324870564730606E+00,
      e: 2.557785995665682E-01,
      i: 1.077550722804860E+00,
      
      // These parameters define the orientation of the orbit.
      om: 3.170946964325638E+02,
      w: 1.774865822248395E+02,
      ma: 1.764302192487955E+02,
      
      // Where the object is in its orbit.
      epoch: 2458426.500000000,
    }, 'deg'),
  });

Ephemクラスに渡すプロパティについては下記を参考にパラメーターを調整する。

Ephem | spacekit.js

太陽・水金地火木土天海冥・テスラのロードスターを視覚化してみたのがこちら。

f:id:omuriceman:20190917000859p:plain

天王星/海王星/冥王星を画面に映そうとすると地球が小さく見える。

背景のデザインを宇宙にする

今のままだと惑星の背景が黒いままなので宇宙感のある背景を追加する。背景を宇宙の写真にするには簡単に2つの関数が用意されている。

createSkybox
createStars

createSkyboxはライブラリが用意している画像を読み込んで表示される。createStarsは画像ではなく星のデータを読み込んで、実際に画面上に反映させる方法である。そのためcreateStarsの方が処理速度が早いが、繊細な部分は表現しきれない。

個人的には両方ともセットすると綺麗な宇宙ができるのでオススメしたい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);

できあがった宇宙がこちら

f:id:omuriceman:20190917010714g:plain

createSkyboxに渡す引数のデータを変更すると違う背景になってこちらもとても美しいので紹介したい。

viz.createStars();
viz.createSkybox(Spacekit.SkyboxPresets.ESO_GIGAGALAXY);

f:id:omuriceman:20190917013132g:plain

まとめ

今回紹介したSpacekitは紹介した機能以外にも色々な機能があり、今回は省いたのだが興味のある方は是非公式のドキュメントやGitHubのソースコードを追ってみてほしい。

個人的には宇宙関連のサイト構築が会った時に使える日が来たらいいなと思って待つことにする。

また宇宙旅行に行ってみたいけど怖い・お金が無い。みたいな人は是非こちらで宇宙を体感してほしい。

参考サイト

ドキュメント

typpo.github.io

惑星の軌道要素について

ja.wikipedia.org

omuriceman's blog

iOS / AWS / Firebase / JavaScript / Deep Learning を中心とした技術を面白く紹介します！

宇宙空間をブラウザ上で視覚化できるJavaScript製OSS / 「Spacekit」で宇宙を創造する

概要