
屈折のような効果をたっぷり盛り込んだ演出がおもしろい Noomo Agency 提供の Noomo Showcase
WebGL の事例あつめました
今回ご紹介するのは、Noomo Agency が公開している showcase サイトです。
Noomo Agency は WebGL の作例が非常に多く、また品質も極めて高いため、当サイトでも何度もご紹介したことがあるエージェンシーです。
今回のサイトは showcase というそのタイトルにふさわしく、数々の事例が印象的な演出を交えつつ紹介されています。
リンク:
Noomo Showcase — Immersive 3D & WebGL Work
インタラクティブ性とストーリー性
今回のサイトは showcase という性質上、多くの下層ページがあるような規模感のウェブサイトではありません。
シンプルなキービジュアルと、そこからシームレスにつながる各事例の紹介セクションから構成されています。
キービジュアルからしてまずかなりおもしろいのですが、氷のようにも、あるいは表面が削れたガラスのようにも見える、独特な質感を持つオブジェクトがインタラクティブに反応します。

スクリーンショットではちょっとわかりにくいかもしれないのですが、キービジュアルに登場するオブジェクトはその内部にボールのような別のオブジェクトが格納されたように描かれます。
オブジェクト内の小さなボールは物理演算でリアルに転がったり落ちたりするようになっていて、凝った演出になっていますね。
若干小さいのですが、画面の下の部分にボタンがあり、それをクリックすると事例を紹介するセクションへと遷移していきます。

事例を紹介するセクションでも、やはりガラスのような氷のような……
たぶん、全体の印象から想像するに宇宙に漂う氷の塊みたいなものなのかなと思うのですが、必ずしも物理的な正しさを追求したような屈折とは違う、独特な質感を持っています。
氷の歪んだ屈折と、デジタルのノイジーな質感を融合したような不思議な演出でとてもかっこいいです。

こういったビジュアルに特化したウェブサイトって、それにどんな意味があるんだと真顔で聞かれてしまうと答えに困ってしまいますが、個人的には本当に貴重な事例だなと見かけるたびに感じます。
ズームブラーと RGB シフトを組み合わせつつ屈折や発光のような効果も織り交ぜた演出は、新しい可能性を感じさせてくれるグラフィックスになっています。
こういった「いままで見たことがないような質感・ビジュアル」って、たぶん人間にしか生み出せないものなのかなと思います。
ぜひチェックしてみてください。