ゆったりノイズ変形エフェクトがおもしろい傘の再利用製品を扱う Anti のウェブサイト

doxas : 2021-07-29 14:14:19

傘をリサイクルして魅力的な製品を生み出す

今回ご紹介するのは、傘を再利用した製品を販売している Anti のウェブサイトです。

日本でも、ビニール傘などのゴミについて問題視されることがよくありますが、世界的にも、やはり傘にまつわるゴミ問題というのは結構よくあるトピックなのかもしれません。

今回の Anti というプロダクトは、そんな傘のフレームを中心に、それらを再利用することで製品を作っているみたいです。

独特の金属の風合いなど、たしかによく観察してみると傘由来の製品なんだなということがわかりますね。

今回のサイトでは、WebGL を使った演出としては割とよく見かける感じの、ノイズを使った画像のディストーションエフェクトが実装されています。

ただ、見せ方というか、使い方はなかなか個性的な感じで結構工夫されていますね。

通常時、画像に対して絶えずエフェクトが掛かっているのですが、ゆったりと流れる液体のような、不思議な風合いです。

静止画で見てもちょっとよくわからないですね……

実際に動いている様子を見ると、結構はっきりとアニメーションされてるのがわかると思います。

ノイズを使って全体を歪ませているのですが、かなりゆっくり目にアニメーションさせているのがある意味特徴的な感じかもしれません。

ちなみに、カーソルを重ねた場合だけスポットライトのようにカーソル付近が明るく演出されます。まあ実際には、カーソル付近が明るくなっているというよりは、カーソルから離れた場所が暗くなっている、というほうが正確かもしれません。

カーソル付近に明るい場所ができると同時に、ノイズによって歪む量も大きめになるので、よりエフェクトの効果がわかりやすくなりますね。

トップページでは一定の時間が経過すると自動的に画像が切り替わるようになっているのですが、この切り替わりの際にもノイズを使った遷移エフェクトが発生するので、WebGL を使っている効果がわかりやすくなっています。

ノイズによる歪む効果に加え、同時に横方向にスライドするような UV スクロール的効果も加わっているため、スピード感のあるエフェクトに仕上がっていると思います。

WebGL を利用したエフェクトとしては、ノイズを使ったディストーションはかなりメジャーというか、よく使われる手法の１つだと思います。

とは言え、WebGL の実装に不慣れであったり経験がなかったりすると、どういうふうにこれを実現しているのかはパッと見ただけではわかりにくいかもしれません。

WebGL や CG がある程度わかるひとに対する説明としては、要はノイズを使って UV（テクスチャ座標）を歪めている、ということになるのですが、そういう視点で見てみるとページが切り替わる際の水平方向の UV スクロールも含め「どういうシェーダを書いたらいいか」が想像しやすいかと思います。

こういう手軽にできる 2D 的なシェーダによる表現は汎用性も高く、覚えておくといろいろなところで活用できますね。