地球の外周 40,075km にちなんだ世界中の音楽を巡る WebGL 製コンテンツ 40075 が面白い！

doxas : 2019-02-04 15:16:59

大量の 3D モデルが豪勢にシーンを彩る

今回ご紹介するのは、Spotify が楽曲データを提供している音楽に関するコンテンツです。

利用されているモデルデータの量が多く、非常に手の混んだリソースが使われていますね。それだけに、ちょっとロードに時間が掛かるのが難点です……

ただ、一度ロードが完了してしまえば、そこからは特に重いという感じもなく、ゆったりと音楽や 3D シーンのグラフィックスを楽しむことができます。

今回のサイトでは、タイトル画面がまず凝ってます。

ちょっと薄暗い印象のシーンのなかで、数値と楽器などのオブジェクトが影と共に浮かび上がる構図です。

このシーンではカーソルの位置に光源が追従するようになっているので、マウスカーソルを動かしてみると、シーンの雰囲気が結構違って見えて、面白いと思います。

この記事のトップ画像が、まさにその様子をキャプチャしたものですね。

そして、このサイトのコンテンツの中身としては、3D で描かれる世界の各地方を模したシーンの中から、楽器や音源を探して収集するといった内容です。

上の画像が、シーンの中に音源が隠れているということを説明するイントロの画面ですね。

画面内のどこかに置かれている楽器などを見つけて、そこにカーソルを持っていくと音楽が流れる仕組みになっています。

オブジェクトは結構わかりやすい形で、しかも結構大きめに描かれているので、見つけるのはまったく難しくありません。

ちょっとした遊び心といった感じで、難しいパズルのようなものではないですね。

ご覧の通り、シーンは暗い夜のような感じではありますが、後方からバックライトで照らされているような感じの雰囲気になっています。

このときのバックライトの色がそれぞれに異なっていて、なんとも雰囲気のある仕上がりです。

3D モデルの量が本当に多くて、まあこれらを最初に一気に読み込んでいるのだとすれば、少々ロードに時間が掛かるのもうなずけます。

導線としてはどんどん先に進んでいくことも、全部の音源を見つけながらじっくり進んでいくこともできるようになっているので、非同期で徐々に読み込む形には実装できなかったのかもしれません。

全部で６つのシーンがあり、それぞれに３つずつ、音源が隠されています。

今回のサイトの場合はとにかく 3D モデルのリソースの品質の高さが際立ちます。あまり特殊なライティングやポストエフェクトを使っているわけではないのですが、とてもお金の掛かっていそうな感じです……

実装自体は結構シンプルなのかなと思いますが、時間のあるときにゆったりと楽しみたい、そんなサイトとなっています。