とあるアパレルメーカーのサイトが Pixi.js を利用した面白い WebGL エフェクト実装で驚愕の出来栄え！

doxas : 2015-12-05 12:55:18

シェーダを活用した滲みエフェクトがすごい

今回ご紹介するのは、とあるアパレルメーカーの秋冬モノを紹介したサイトです。

意外とアパレル系は WebGL を使ってくる実装が多いですね……それだけ、ファッションの世界はビジュアルが大事ということなのかもしれません。

今回のサイトは Pixi.js を使ってベースとなる部分は構築しているようですが、かなりジャブジャブとシェーダを使っていて、とても良い感じに仕上がっています。

今回のサイト、まず最初に表示される画面は特別変わったところもなく、一見すると普通に写真が画面内に置かれているように見える感じでスタートします。

しかし実際には、画像が表示されたときには既に GLSL によるエフェクト処理がスタートしており、少しずつですが、写真が滲むような揺らぐような、そんなエフェクトが掛かっています。

パッと見た感じは、最初は完全に画像に見えます。しかし、ほんの少しでもホイール操作などで画面をスクロールしてみると、今度は明らかに変化が表れます。

上の画像を見ても、ちょっと女性の写真のほうが歪んでいるのがわかるでしょうか。

サイト全体はかなり領域としては広く、もっとどんどんスクロールしていくことができるので、さらにスクロールを進めていってみましょう。

すると、歪み具合というか、インクが滲んだようにというか、だんだん画像が崩れていく様子が見事に表現されます。

静止画ではわかりにくいというか、わかりませんけども、インクが揺らめくような感じで絶えず映像は動いています。

シェーダを見ると、頂点シェーダでうまいこと UV を計算したうえで、重みを付けてフラグメントシェーダで色を上手に混ぜ合わせているようです。

パッと見た感じ、使われているシェーダの量は 10 組を超えており、かなり本格的なシェーダエフェクトの実装になっています。これだけシェーダが書けるのであれば、Pixi.js 使わなくてもよかったのでは？　と思わず考えてしまいます。

Pixi.js には、モバイル端末などのデバイスに応じた自動フォールバックの機能があるため、必ずしもシェーダや WebGL の側面だけで利用されるとは限りません。

効率よく成果物を仕上げるためであったり、あるいはパフォーマンスを意識してだったりと、利用される理由はそれぞれあると思います。

今回のサイトは、かなりシェーダが本格的に利用されている素晴らしいサイトだと思いますので、シェーダのコードも含め、みなさんもぜひチェックしてみてください。