Unity の WebGL ビルド作品ながらシンプルかつミニマムなコンテンツとしてキレイにまとまっている Sound Waves

doxas : 2017-03-07 14:04:35

パッと見た印象はあまり Unity らしくない?

今回ご紹介するのは、当サイトとしては珍しく、Unity の WebGL ビルド作品です。

このサイトをご覧になっているような方であれば説明は不要かもしれませんが、ゲームエンジンである Unity にはウェブ向けの出力が行えるモードがあり、当たり前と言えば当たり前ですが、3D 描画処理などは内部的に WebGL を使って動きます。

Unity はゲームエンジンなので、あまり通常のウェブサイト向けの実装を Unity で作るということはないかなと思いますが、今回の作品は比較的シンプルで小さな実装なので、ウェブサイトに置かれていてもあまり違和感のない雰囲気になっています。

ローディングは長めだけど

Unity のゲームエンジン部分を同時にダウンロードしなければならない都合から、Unity 製の WebGL コンテンツは読み込みに非常に時間が掛かります。

また、本来 Unity が持っているコンテンツの作り込みの能力や表現力に対して、WebGL の API としての機能性がどうしても間に合わない(見合ってない)ために、ウェブ用に出力すると使えなくなってしまう機能なども多くあります。

そのような背景から、Unity には WebGL ビルドというモードはあるけれども、なかなか気軽に使っていくのはちょっと難しい面もある、というのが現在の状況だと言えます。

しかし、一部のソーシャルゲームが完全に WebGL ベースで動くようになっていたり、最近では結構アグレッシブに挑戦していく姿勢を見せるプロダクトも増えてきました。

さて、ちょっと前置きが長くなりましたが、今回のコンテンツも Unity の WebGL ビルドの作品なのですが、一見すると、あまりゲームエンジンが出力したような、ゴテゴテした印象は感じられない雰囲気に仕上がっています。

たとえば上の画像はローディング中の画面ですが、このコンテンツのタイトルである SOUND WAVES の文字が、ロード中のプログレスバーの代わりになっており、ロードが進んでいく間に少しずつその文字のシルエットが出てくるような演出になっています。

いわゆる通常の WebGL 実装のサイトとは違い、Unity の本体部分のスクリプトを落としてくるので、やはりロード時間は若干長めになっていますが、一度動作し始めてしまえばかなり軽快に動きます。

というのも、コンテンツそのものは非常にシンプルな構図の 3D シーンになっており、派手さよりもその静かな雰囲気に感心させられます。まるで絵本のような雰囲気がとてもいい感じです。

なんとなく画面を見れば、なにをどうしたらいいのかわかるかなと思いますが、キーの入力か、あるいはマウスによる鍵盤の押下によって、音が鳴るような仕組みです。

そして、サウンドが再生されている間は、近くに置かれたラップトップを開いたような形状の部分に、音を可視化したかのような波が立つという寸法です。

実際に音程などを考慮して波の立体部分の形状を変化させているわけではないようですが、インタラクティブに反応する様子はなかなか面白いですね。

複数の鍵盤を同時に押した状態にすると、波がどんどん高くなっていくのは仕様なのか、はたまた単に制限をかけ忘れてしまっているのか……

3つ同時押ししたら針山のように!!

これは私の完全な個人的な意見になってしまいますが、WebGL のコードを書いて作った実装と、Unity の WebGL ビルドとして出力されたものとは、別々の技術として扱うべきなのかなという気持ちがあります。

別に手書きのコードの暖かみみたいなことを言うつもりは全くありませんが、やはりゲームエンジンから出力されたコンテンツと、自分でひとつひとつ組み上げていったウェブコンテンツとでは、意味合いが違うもののように感じてしまいますし、そう考えたくもなってしまいますよね。

しかし、今回のコンテンツは、一見すると Unity らしさをあまり感じないコンテンツだと私は思いました。そのときに同時に感じたのは、やはりブラウザ上になにかしらの表現を行う上で、つくり手がどのような手法を使ったとしても、それは見る人によって判断されるしその結果こそが全てだよな、ということでした。

最近よく感じるのですが、本当に数年後には、もうフロントエンドエンジニアが 3D 実装を WebGL で手書きしてるなんてことは、なくなってしまうかもしれません。今回のコンテンツのように、実に見事にウェブのコンテンツとしての姿を体現しているゲームエンジン製の実装も、徐々にウェブに馴染んでいくのかもしれない……そんなふうに考えさせられたコンテンツでした。

これをご覧のみなさんには、みなさんなりにいろいろ考えることや感じることがあるかもしれませんが、個人的にはちょっと印象的なコンテンツでした。

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

リンク:

Sound Waves

share

follow us in feedly

search

search

sponsor

social