今までにない驚きの手法を駆使したアメリカの人気アーティスト T.I. のアルバム DIME TRAP 特設サイトがすごい!
とにかく丁寧な作りが素晴らしい
今回ご紹介するのは、アメリカに人気アーティスト T.I. のニューアルバム用特設サイトです。
私はあまりヒップホップやラップのジャンルには詳しくない(というか音楽自体がほとんど知らないんですが……)のですが、T.I. と言えば全米ナンバーワンを何度も達成しているかなり有名なアーティストです。
今回のサイトで紹介されていて視聴もできるアルバム DIME TRAP は、彼の 10 作目のアルバムということでかなりプロモーションにも力が入っているとのこと。
今回のサイトからも、その本気度がヒシヒシと伝わってきます。
ライトの明かりで浮かび上がる世界
今回のサイトは、WebGL 実装のなかでもかなり特殊な、驚くべきサイトだと個人的には思います。
たぶん、CG や WebGL の実装に慣れている人なら気がつくと思うのですが、今回のサイト、実は立体的なジオメトリはほとんど使っていないのですよね……
CG に詳しくないと、言っている意味がわからないかもしれないですが……
要するに、テクスチャマッピングとシェーダによって今回のサイトのなんとも言えない立体感が生み出されています。3D のモデルが立体的な頂点情報として存在しているわけではなく、あくまでも擬似的に立体であるかのように見せる擬似 3D 表現です。
サイト内の閲覧は、マウスカーソルを動かしてライトを当てたり、ドラッグ操作を行って視点を動かしたりしながら行います。
明るさが絶妙に変化するので、これが立体じゃないと言われても、にわかには信じられないかもしれません。
ただ、よーく観察すると、テクスチャマッピング特有の微妙な揺らぎというか、歪みのようなものが見えますね……まあ慣れてないとわからないかな……
これが二次元のビットマップだけで実現されているというのは、わかった上で見ていても、なんとも驚きです。
理屈としては、いわゆる法線マップの仕組みに近いですが、恐らく深度マップ(奥行きを焼き込んだテクスチャ)も同時に使っていると思います。
精巧に作り込まれた 3D モデルは、それだけファイル容量も大きくなってしまいます。
今回のサイトでは、アルバムのジャケットなどにも使われている 3D オブジェクトを、そのまま使われているかのように見せたかったのだと思いますが、3D モデルのアーティストが納品した 3D データは、たぶん品質を維持したまま快適にウェブで閲覧することは難しいものだった(それだけ品質がよかった)のだと思います。あるいは権利的にも、難しかったのかな……
その前提があった上で、これが苦肉の策かどうかはわかりませんが、深度や法線を焼き込んだテクスチャを使って擬似的に立体表現を行うことで、本来の(アルバムのジャケットに使われたものと同等の)品質にかなり近いディティールを出せていると思います。
いやほんとに、これすごいです。
CG 慣れしていないと、たぶんわからないくらいの見事な立体感です。
今までいろいろな WebGL 製のサイトを見てきましたが、こういう方向でぶっ飛んでるサイトは今まで見たことがありません。使われているシェーダも恐らく 20 くらいはありそうですね。
高品質な 3D モデルが表示できないなら、テクスチャ芸を駆使すればいいじゃない! という割り切り方が本当にすごい。
そして擬似的な立体表現であっても、やはり詳細に作り込まれた世界は見るものを圧倒するのですね……
すごく、感動しました。
ぜひチェックしてみてください。