あまりのクオリティに開いた口が塞がらない! とにかくすべてが異次元のレベルで実装された Lusion のウェブサイト
多少ロード時間が長いのも頷ける
今回ご紹介するのは、イギリスのクリエイティブ・スタジオ Lusion のウェブサイトです。
WebGL の事例をこれまで多く見てきた自負がありますが、このレベルはちょっと異常ですね……
思わずそんなことを口走りたくなるほどの、とんでもないクオリティのウェブサイトになっています。
ややロード時間が長く感じられる部分もあるのですが、それも思わず納得してしまうような、本当に端から端まですべての完成度が異次元のウェブサイトになっています。
リンク:
ひとつひとつを切り取っても価値がある
今回のサイトは、トップページ部分から大迫力のデモが大量に置かれていて見どころ満載なのですが、それ以外にも、About ページなどではそのページに特有のデモが実行されるようになっているなど、とにかくサイト全体がすさまじい完成度になっています。
最初のトップページの部分から、GPGPU 全開の、美しい映像を見ることができます。
カーソルの位置に、光源がやや遅れて追従してくるようなインタラクションが仕込まれているのですが、これを見ただけでも CG のレンダリングとウェブというインターフェースとの連携が完璧に行われており、細かいところですが品質の高さを感じさせてくれます。
流れる有機物のような質感、布が自然にたわむような滑らかな挙動、そしてパーティクルがスクリーンに投影されているようなシーンづくりなど……
とにかく注目ポイントが多すぎて目と思考がまるで追いつきません(笑)
トップページの部分をただ下に向かってスクロールしていくだけでも、それ単体でひとつのサイトの演出として独立させられるレベルのデモがバンバン出てきます。
本当に異次元すぎる……
さらに、About ページにはネオンのラインで作られた人型のモデルが登場するのですが、画面をクリックするとまるで映画などで見かけるような「スローモーション」を活用したダイナミックな演出を楽しむこともできます。
クリエイティブ・スタジオのウェブサイトに WebGL が使われている事例は多いですが、ここまでやってるやつはちょっと思い当たらないです。
CG の品質、という意味でいうと、実際には「three.js が持っている機能を存分に、そして丁寧に使っている」ということなんですが、それにしても本当に全体的なレベルの高さの均一さがすごいです。
どの部分を切り取ってみても、本当に素晴らしいシーンばかりで、インタラクションも含めて本当に楽しいウェブサイトになっています。
WebGL の実装があまりに迫力があるため見過ごしてしまいがちですが、それ以外の DOM や CSS の使い方についても、本当に丁寧に作り込まれていて感心させられます。
じっくりと、観察したくなるような、そんなサイトです。
効果音なども含む、インタラクティブな要素についても、よくよく観察してみると参考になりそうな部分が多くあると思います。
ぜひチェックしてみてください。