Pixi.js とノイズを上手に活用！動画のトランジション演出を中心に丁寧に作られた Yard Agency のウェブサイト

doxas : 2018-08-17 13:30:07

比較的簡単なシェーダ実装

今回ご紹介するのは、Yard Agency のウェブサイトです。

Pixi.js とノイズを使った動画のトランジション演出が行われていて、シンプルですがとても迫力のある印象に仕上がっています。

今回のサイトに見られるような、ノイズを使ったトランジションは結構簡単というか……見た目ほどは実装が難しくないので、参考にするにはちょうどいい事例なのかなと思います。

今回のサイトは、Pixi.js を使ったトランジション演出が使われていますが、それはあくまでもトップページでの印象的な演出のためという感じが強いです。

実際、サイト内を細かく見ていくと、WebGL を使っていない部分の演出にこそ驚きがたくさん詰まっていて、フロントエンドの実装としてもかなり参考になる点が多くありそうですね。

Pixi.js を使ったトランジション演出は、トップページでスクロール操作などを行った際に見ることができます。

このような複雑な画像や動画の滲んだような模様って、一見どのように処理したらいいのか、わからないという方も多いのではないでしょうか。

実際には、これ実は結構簡単で、そこまで複雑なロジックを使っているわけではありません。

WebGL や GLSL では、テクスチャと呼ばれるビットマップを参照した処理が行えるわけですが、ノイズを利用して、このビットマップを参照する際の「サンプリング点」をずらすと、こういう絵ができます。

サンプリング点をどのくらいずらしてやるかによって、歪み方にも強弱を付けることができるため、いわゆるイージング処理を行ってやることでスムーズなトランジション処理が行うこともできます。

個人的には、今回のサイトの場合はむしろ DOM や CSS を使ったシーン遷移のほうが、非常に手の込んだ丁寧な作りになっていて驚きでした。

下の画像だと、微妙に文字が半透明になっているのがわかると思うのですが、こういった CSS を使った WebGL とは別の部分でのトランジションがとても凝った作りになっていて、すごくいいですね。

WebGL を利用したシェーダ芸としては非常にシンプルですが、全体としての完成度がとても高い、そんなサイトだと思いました。

WebGL では GLSL と呼ばれるシェーダ言語を利用することができるので、そこに独自のアルゴリズムを組み込んでやることで、複雑なトランジションやアニメーションを行うことができます。

今回のサイトは全体のデザインや構成がまずとてもよくできていて、そこに華を添えるような感じで、GLSL がうまく活用されていると思いました。

立体的なノイズディストーションも面白いですが、今回のサイトのような比較的簡易な、平面的なノイズディストーションでも結構迫力がありますね。