シェーダによる揺らぎ演出とドット模様が組み合わさった演出が面白い DOT TO DOT のウェブサイト
センスあふれる独特な世界観
今回ご紹介するのは、DOT TO DOT という（たぶん建築系の）デザインスタジオのウェブサイトです。
その組織の名前からも自然と連想できる、ドット模様をうまく利用したウェブサイトになっています。
Pixi.js を利用してノイズの揺らぎを加えた演出が特徴的なのですが、その使い方がちょっと変わっていて面白いですね。
好奇心を刺激されるインタラクティブコンテンツ
今回のサイトは、黒、白、そして黄色というテーマカラーでうまくデザインされていて、とても洗練された印象を受けます。
またアニメーションする部品がたくさん使われているので、インタラクティブに次々と表示されるものが変わっていく様子がとてもおもしろいですね。
トップページ部分には、ドット模様とライン描画を利用したグラフィックスが描かれるのですが、点のなかにはマウスカーソルをホバーすることでイラストやメッセージが出てくるものもあります。
静止画ではちょっとわかりにくいかもしれないのですが、メッセージカードのようなオブジェクトがちょっと歪んだようになっているのがわかりますかね？
これが、Pixi.js を使った、シェーダでノイズによる歪みを加えた演出として描かれています。
メッセージカードだけでなく、画像を表示するタイプのものもあるのですが、同じようにノイズディストーションが加えられていて動きは滑らかですね。
下の画像では、画面の下の方に、ちょうど大きく歪んだ瞬間のカードが映っています。
その他、カードをさらにクリックすることで表示されるコンテンツのほうでも、同じように Pixi.js を活用して演出しているページがありますね。
こちらは画像と切替える際のエフェクトとして、ただフェードイン・フェードアウトさせるだけではない、シェーダを使った独特のイージングエフェクトが行われています。
ここでもやはりテーマカラーだけでページが構成されていて、統一感があります。
今回のサイトのようなコンテンツは、たぶん、がんばれば Canvas2D でも実装はできると思います。
ただ、やっぱり WebGL を使っていることによってサクサクで動いているというところはあると思いますね。
Canvas2D だとどうしても演出面が負荷的に難しい場合が多いと思うので、Pixi.js を使ったシェーダ芸はウェブにおいてもとても役に立つスキルになってきていると思います。
非常に楽しいサイトになっていますので、ぜひチェックしてみてください。
