Node.js を学習できる NodeSchool のサイトに WebGL のグローブデモが登場!
Node School Globe!!
今回ご紹介するのは Node.js を学習することができるサイト Node School のサイトから、イベント開催地を一覧できるデモをご紹介します。
あまり難しいことをやっているわけではありませんが、WebGL の実装には three.js などのライブラリを使わずに書いているっぽいです。
Node.js に興味がある方も、WebGL に興味がある方も、ぜひチェックしてみてください。
世界中のイベントをチェックできる!
ページを開くと、画面の上部には Node School のロゴと「International Day」の文字が。
そしてその下の部分で WebGL 実装が動いています。
黄色に塗られた地球儀が一定周期でアニメーションしながら動いています。
そのままスクロールしていくと、グローブをじっくりみることができます。
グローブ上には、イベント開催地が赤い点として描かれていると同時に、左側にある開催地の太字になっている地点に 3D ビュー側のフォーカスが当たるようになっています。
くるくると回転しながら開催地にフォーカスがあたる様子が、滑らかなアニメーションで表現されています。
もちろんイベント開催地には日本もあります。
Tokyo と書かれた部分にマウスカーソルを持っていくと、フォーカスを当てることができます。ちょうど東京のあたりに青い丸印が出現する様子が確認できると思います。
画像だと、色合いが全体に黄色なのでちょっとわかりにくいかもしれませんが、青い丸印が見えますね。
ちなみに、5 月 23 日に渋谷で行われる日本のイベントは定員 150 名で既に満員です……
まだ日はだいぶありますので、ダメ元で補欠に登録しておくのもいいかもしれませんね。
WebGL の実装には、先ほども書いたように three.js などは使われていないように見えます。また、シェーダのソースコードを見るとノイズを生成して色を調整しているようですね。
グローブの様子をじっくり観察するとわかると思いますが、国ごとに境界線があり時折色が濃くなったり薄くなったりしています。パッと見ではそれほど強烈に訴えてくるわけではなくても、細部までしっかり作られているなあという印象です。
シェーダの記述や、インタラクティブなグローブの回転処理など、参考にできる点も多いと思います。ぜひチェックしてみてください。