モバイル端末のジャイロスコープを活用した WebGL デモが面白い Porter Robinson の Look at the Sky
PC では閲覧できないので注意
今回ご紹介するのは、Porter Robinson の楽曲を WebGL を利用したオンラインコンテンツで視聴することができるスペシャルサイトです。
PC でアクセスすると、モバイルデバイスでアクセスするよう促されるようになっていて、基本的にモバイル専用のサイトとなっています。
コンテンツ内でジャイロスコープを使って視線を操作することができるようになっており、内容を考えるとモバイル専用になっていることもうなずけます。
リンク：
Look at the Sky | Porter Robinson
ジャイロスコープ有効な状態で楽しもう
今回のサイトはジャイロスコープの情報を利用してカメラが動きます。
ジャイロスコープが有効な状態でサイトを閲覧すると、WebGL を利用した 3D シーンを閲覧しながら楽曲を視聴することができます。
WebGL のシーンは曲の状態に合わせて常に変化が起こるようになっていて、3D 空間上に歌詞が表示されたりもします。
暗いシーンなのでちょっとわかりにくいかもしれませんが、画面に映っている場面はすでに 3D 空間になっていて、ジャイロスコープの情報を利用してリアルタイムに視点が変化するようになっています。
曲が進んでいくと、場面によってはユーザーの視線がどこを向いているのか、もう少し強調したような演出が出てくる場面もあります。
たとえば、多くの場面で使われている演出が「視線のあった位置にラインを引く」というもの。以下のキャプチャ画像には黒く細いラインが描画されているのがわかるでしょうか。
この演出があると自分がどこを見ているのかがグラフィックス（視覚）的にわかりやすくなりますね。
また、曲の進行とともに起こる変化は上記の視線がラインで表現されるものだけでなく他にもあります。
シーン内に花火が打ち上がるような演出があったり、ちょっとしたムービーのようなものが挿入される場面があったり……
突然視界がまるではるか上空、雲の上へと移ってしまったかのようなシーンなんかも用意されています。
この雲の上の場面、レイマーチングを活用したボリュームレンダリングで雲を表現しているようで、一瞬だけ負荷が爆上がりします（笑）
モバイル専用のコンテンツって実は結構あって、今回のケースはそのなかでも「モバイル端末特有のセンサーを利用している」ため、モバイル限定のコンテンツとなっています。（ジャイロセンサーを使っているので iOS + Safari の組み合わせだとうまくいかないかもしれません）
実は公式サイトには WebVR というキーワードが書かれているので、もしかしたら HMD を使って WebVR が実行可能な環境なら普通に閲覧が可能なのかもしれません。
3D コンテンツとしての内容は楽曲の雰囲気にも絶妙にマッチしており、Porter robinson のファンでも、そうでなくても楽しめる内容だと思います。
ぜひチェックしてみてください。
