Unity の WebGL ビルドでウェブのアワードを受賞！ 最適化のポイントなどが書かれたブログ記事も公開中！
ウェブ系アワードに Unity で挑む
今回ご紹介するのは、なんと Unity の WebGL ビルドによる出力結果を、ウェブサイト系のアワードサイトに出展し見事に受賞させたという驚きの作品です。
Unity は近年人気のゲームエンジンとして既にご存知の方がほとんどだと思いますが、様々なプラットフォームに対応していることも特徴のひとつです。モバイル端末向けやコンシューマゲーム機向けの他、WebGL を利用したブラウザを実行環境とするビルドも出力可能です。
今回のサイトは、そんな Unity の WebGL ビルドを用いてコンテンツを制作し、あくまでもウェブサイトとしてアワードに出展。リッチな 3DCG コンテンツとして見事にアワードを受賞したという経緯です。
実装の背景などを記載したブログ記事も同時に公開されており、そこには Unity でウェブコンテンツを制作するうえでの注意点などもまとめられています。
モバイル非対応だがさすがのクオリティ
まず、今回のサイトは一般的な WebGL のサイトと比較すると、圧倒的に美しく派手な CG を特徴とする高い完成度を誇っている一方で、かなりハイエンドな実行環境を要求する点に注意しましょう。
具体的には、モバイル端末での実行はサポートされておらず、また PC でもそれなりのスペックを備えていないとスムーズな描画が難しい場合があると思います。
サイトのロード時間も結構長く掛かります。これは Unity のエンジン部分がスクリプトとして丸々ダウンロードされてくることも関係しますが、通信環境さえ整っていれば、途方もなく待たされるという程ではないですね。ただし、全体では 80 MB 以上のデータがあるのでテザリングなどの環境で閲覧するのはちょっとおすすめできません。
ロードは二段階に分かれていて、それぞれに結構時間も掛かります。
気長に待ちましょう。
※ロードが始まる前に推奨スペックなどに関する注意事項が出ます。
上の画像はロード後に表示される About ページの様子。
二段階目のロード画面では、シェーダやカメラのエフェクトなど、個別にどのようなリソースがダウンロードされているかが画面に表示されます。実際には、ロードと同時に必要なデータ構造を作ったりとかもしていると思いますので、このあたりからは CPU がだんだん温かくなっていきますね……
少々長めのロード時間が終わると、実際に 3D でリアルタイムに描かれるシーンが出てきます。
Unity を使っているとは言っても、全ての機能がスタンドアロンなネイティブアプリと同じというわけではなく、WebGL 版にはいくらかの制約もあります。
たとえばテクスチャの解像度など、ぱっと見た印象で違和感を感じる部分もあるかもしれませんね。
とは言え、three.js 等を使って同様のことをやろうと思ったら、まあそこそこ大変ですから、さすがゲームエンジンから出力されたシーンといったところでしょうか。
ちなみに、今回のサイトは CG 部分は WebGL で描かれていますが、一般的にウェブサイトに置かれるリンクなどは普通に配置されています。
一度ロードが完了したシーンは、ページを再読込することなくスムーズに切り替えが可能ですので、画面の左側にあるリンク文字から各種ページを見てみましょう。
画面が一瞬フェードアウトしたあと、次のシーンへの変化が非常に滑らかに行われるのがわかると思います。最初のロードこそ重い印象を受けますが、一度実行できてさえしまえば、あとはゲームのシーン切り替えのような感じで違和感なくつながっていきますね。
また、同時に公開されているブログ記事（英語）では、Unity と three.js の比較に始まり、なにゆえに Unity を選択したか、また Unity でウェブコンテンツを作る上で気をつけることは何かなど、かなり具体的にいろいろなことが書かれていますね。
Unity だけでなくウェブの開発に関する知識も同時に必要であるとか、それらをどのように相互に関連付ければいいのかなど……割と丁寧に事細かく書かれています。
また記事の後半には、１～１０までの連番で書かれた実装 Tips などもあり、Unity に注目している方なら読んでおいてけして損はない、そんな内容になっています。
実際、このサイトはアワードを受賞するという快挙も達成しているわけですし、Unity と Web というキーワードは、これから数年の間により大きな注目を集めるようになっていくことでしょう。
私自身は Unity についての知識がほとんど無いのですが、WebGL ビルドが初めて実装された頃から折りに触れ簡単にですが調べたりはしていました。
今回のサイトは、ブログ記事の記載内容からすると、普通にプロジェクトが完成した段階では 200MB 以上あった容量を、最適化することで 80MB まで削減しているみたいですね。ある程度はそのあたりの技術的なこともブログに書かれていますし、最適化や容量の削減には結構気を配った様子がうかがえます。
ウェブで 80MB なんてとんでもない！ って感じる方もいるかもしれませんが、ハードウェアや通信環境は日々進化していますし、徐々にこういった規模感のリソースの利用がウェブの世界でも（もちろん状況によりますが）一般的になっていくのではないでしょうか。
今回のサイトに限って言えば、動きもスムーズですし導線も一般的なウェブサイトと比較して極端に異なる部分などは無く、Unity による Web コンテンツ制作が持つ優位性の一端は間違いなく示していると思います。
気になる方は、ぜひチェックしてみてください。
