色収差のような効果を上手に利用した表現が面白い UNFUR Project のウェブサイト

doxas : 2022-08-01 12:55:21

動物愛護とデジタル表現

今回ご紹介するのは UNFUR Project というプロジェクトのウェブサイトです。

こちらのサイト、ざっくり言うといわゆるファッションシーンにおけるファー製品（毛皮）を動物愛護の観点から批判的に捉えているプロジェクトのようで、そこにデジタルファッションの切り口を加えているのが独特ですね。

プロジェクトの内容はブロックチェーンやら NFT やら出てきますのでそのあたりはいったん端に置くとして、今回のサイトで使われている WebGL 表現について見ていきたいと思います。

今回のサイトはトップページの冒頭部分に、かなり派手目の WebGL 実装が置かれています。

実際には、ページをスクロールしていってもこの背景の WebGL の実装がそのまま再利用されているような形なので、実装としては１つだけなのですが見せ方にはちょっとしたバリエーションがありますね。

モザイク模様というかタイルというか……

ブロック状のレイヤーの裏に動物の写真が多層で配置されるようなかんじですね。

この動物の画像が表示されている状態では、マウスカーソルの位置に応じて描画結果が傾いて表示されます。

これちょっと私個人の想像も入った話になっちゃうのですが、たぶん手前にモザイク状の模様が描かれたレイヤーが重なっているような構造なので、より遠近感を強く感じるというか、立体感が強く表現されているように思います。

また、時折発生するグリッチ表現がちょっとありきたりな感じではありますがサイトのコンセプトとよくマッチしていますね。

またシーン全体には色収差のような効果が常時ポストエフェクトとして適用されています。

これが結構全体の質感に大きく寄与していて、特にスクロールしてコンテンツを読み進めていく過程で発生するブロック状のオブジェクトの変形時、すごく印象的にシーンを演出していると思います。

画面の端に行くほど大きく色収差の効果が発生するので、レンズ越しに世界を見ているかのような、不思議な世界観を描いていると思います。

現実世界の動物から採集する毛皮ではなく、デジタルファッションとしてのファーを楽しむ、みたいなコンセプトなんですかね……

やや強引な感じもしますが、デジタルデータであればもちろん動物がなにか憂き目を見るわけではないですから、プロジェクトの要旨としては一定の納得感や支持を得られるのかもしれません。

サイト内で紹介されているデジタルデータのほうのファッションは、プリレンダリングの動画になっています。