技術解説のブログ記事も同時に公開されている著名なサッカー選手を集めた WebGL コンテンツ

doxas : 2019-04-23 14:14:38

宇宙空間のような広がり

今回ご紹介するのは、DAZN が提供するウェブサイトで、世界中の著名なサッカー選手 50 人を紹介する WebGL 実装のウェブサイトです。

こちらのサイトでは、宇宙空間や、あるいは時空を超えたワープのような近未来的な演出の数々を交えつつ、現代の有名なサッカー選手たちについて知ることができます。

モバイル版と PC 版で操作感に差異ができないように工夫された、縦長のウェブサイトになっています。

今回のサイトでは、スポーツ関連の映像を配信している DAZN のロゴから始まる、宇宙空間のようなシーンでコンテンツを閲覧していきます。

PC 版でのスクロール操作がそのままモバイル端末での縦方向のスワイプ操作になっており、さらに PC 版ではホイールを操作だけでなく、ドラッグ操作でもシーンに干渉できるようになっています。

このあたりユーザーのインタラクションを共通のフローで受け取ることができるようになっていて好感が持てます。

シーン全体の雰囲気はご覧の通り非常にサイバーな感じでかっこいいです。

スクロールしていくと、どんどんカウントダウンされるような感じで画面中央の数値が減っていき、同時にシーン全体が奥へ奥へと進んでいきます。

最初は丸いネオンのようなものに周囲を囲まれたトンネル風なのですが、シーンが進んでいくとこれが六角形や三角形など、別の形状に変わる瞬間が訪れます。

このトンネルの形状が変わる瞬間の演出が色収差っぽい感じでこれまたなかなかかっこいいです。

今回のサイトで用いられている様々なテクニックや、シェーダの内容、リソースの制作方法などは、同時に公開されている技術解説記事でも言及されています。

パーティクルはどうやって制御しているとか、シェーダを利用してどういう画作りがなされているかなど、本番のサイトでは見ることができない制作中の様子をキャプチャした動画なども置かれているので、参考になるのではないでしょうか。

制作中の様子って、意外と表には出てこない印象があるので、こういう感じで手の内を公開してくれるというのはありがたい限りです。

今回のサイトはコンテンツがモバイル向けにも PC 向けにも同じ挙動をするようになっていて、どちらで閲覧するにしても混乱を生みにくいインターフェースとなっています。

また、技術解説記事が同時に公開されているというのも、同じ実装する側の人間としては興味深くて、こういう感じでノウハウが広く共有されるのは非常に素晴らしいことだとも思いました。

一見すると、宇宙空間的な表現としては比較的シンプルなものに感じられるかもしれませんが、結構手の込んだことをやっているんだなというのが解説記事を見るとわかるかもしれません。とても参考になる記事だと思います。