モバイル端末で閲覧できるモバイル VR 対応! Jam3 のオーロラを描く WebGL Experience

doxas : 2017-02-12 15:16:15

ショートムービーのような映像作品

今回ご紹介するのは、フロントエンド界隈では WebGL を利用した様々なサイトの制作などで話題になる、Jam3 が制作したコンテンツです。

モバイル端末のジャイロセンサーを利用した、いわゆるモバイル VR に対応した WebGL コンテンツで、スマートフォンでサイトを閲覧すれば、端末の動きにシーンが連動してまるで夜空を実際に眺めているかのような、そんな体験をすることができます。

もちろん PC での閲覧も可能で、その場合はドラッグ操作によって視点を動かしていきます。

WebVR の API を使っているものではありませんが、非常に美しくオーロラの質感を再現していてなかなか見応えがあります。

自在に視点を変化させて空を見上げてみよう

今回の作品はモバイル端末での閲覧を推奨しますが、PC でも同様の映像を見ることは可能です。

この記事内でキャプチャ画像として掲載しているものは、全て PC で撮影しました。モバイル端末でも実際に動かしてみましたがそれほど負荷は高くなさそうですね。

まずページのロードが終わると、晴れ渡った空と山並みが見えるシーンになります。

このシーンから「カメラの位置」自体は動かせないのですが、マウスのドラッグ操作やスマートフォンの傾きなどから、注視する方向を自由に変更することができます。

コンテンツの内容としては、具体的なストーリー性こそありませんが、一種のショートムービーのような感じになっていて、自動的に世界の雰囲気が時系列で変化していきます。

デモが始まった直後は、日中の、黄色い日差しが眩しいような感じの外観になっていますが、これが少しずつ夜の風景へと切り替わっていきます。

完全に夜の状態になると空が星で埋め尽くされた、幻想的な雰囲気になります。

遠くに見える山岳地帯の上から、うっすらと紫色の光のようなものが見えていたりして、どこか幻想的な雰囲気。

このように時間の経過によって景色が変化するのが今回のコンテンツの特徴ですが、基本的にどのタイミングであっても、自由に全ての方向にカメラの視線を向けることができるようになっています。

夢中になって空を眺めていると、徐々に BGM も盛り上がって来て、気がつけば満点の星空の下にはオーロラが出てくるようになります。

黄色や緑、あるいは紫色のような、いわゆるカーテンのような形をしたオーロラの表現はとてもキレイですね。

また、光のラインの束のようなものが時折画面のなかを縦断していくのですが、こちらも発光したようなその姿がとてもインパクトのあるものとして描画されています。

WebGL ではこういったオーロラや、あるいはネオンのような、光を放つ物体を美しく描くことができます。

ブレンドの設定を正しく行ってやるだけで比較的簡単に実現できるテクニックではあるのですが、それでもここまでしっかりと「オーロラらしさ」を感じさせるのは、さすが Jam3 といったところでしょうか。

今回のコンテンツはモバイル VR 対応なので、Jam3 のモバイル VR コンテンツの習作のような位置づけのコンテンツなのかもしれませんね。

幻想的な音楽と、一体感のあるビジュアルとが相まって、非常に美しいコンテンツとなっています。

短い時間でサクッと見ることができる程度の長さになっていますので、空いた時間に、息抜きに閲覧してみるというのもいいかもしれません。

ぜひチェックしてみてください。

リンク:

Jam3 Aurora

share

follow us in feedly

search

search

monthly

sponsor

social