シェーダによる揺らぎ演出とドット模様が組み合わさった演出が面白い DOT TO DOT のウェブサイト
センスあふれる独特な世界観 今回ご紹介するのは、DOT TO DOT という（たぶん建築系の）デザインスタジオのウェブサイトです。 その組織の名前からも自然と連想できる、ドット模様をうまく利用したウェブサイトになっています。 Pixi.js を利用してノイズの揺らぎを加えた演出が特徴的なのですが、そ...
作品の持つ世界観を見事に体現！ Pixi.js を利用したシェーダエフェクトが生きるムンク展のウェブサイト
丁寧なアニメーション処理がお見事 今回ご紹介するのは、日本国内で開催されているムンク展のウェブサイトです。 日本でもムンクの「叫び」と言えば非常に有名な作品かなと思いますが、東京都美術館で開催されているムンク展は連日盛況なようです。 このムンク展のウェブサイトに、Pixi.js 製のシェーダを利用し...
Pixi.js を利用したシンプルな背景演出が雰囲気に華を添えるスマートウォッチのウェブサイト
もはや背景演出として鉄板の表現になりつつある 今回ご紹介するのは、いわゆるスマートウォッチの製品を紹介しているウェブサイトです。 まるで映像作品を見ているかのような、非常に凝った演出がたくさん詰め込まれているサイトになっており、WebGL はというと、背景でさりげなく使われているという感じの実装です...
水面から差し込む光の表現も見事な Pixi.js 製の演出が面白い！ 映画 CARGO のウェブサイト
海の深さを感じさせる演出 今回ご紹介するのは、CARGO という映画のウェブサイトです。 カリーム・モーティマーという方が監督を努めている作品だそうで、日本では吹き替えとかがあるわけではなさそうなので、あまり知られていない作品なのかもしれません。 海のある地域（バハマ）が舞台の映画のようで、今回のサ...
Pixi.js とノイズを上手に活用！ 動画のトランジション演出を中心に丁寧に作られた Yard Agency のウェブサイト
比較的簡単なシェーダ実装 今回ご紹介するのは、Yard Agency のウェブサイトです。 Pixi.js とノイズを使った動画のトランジション演出が行われていて、シンプルですがとても迫力のある印象に仕上がっています。 今回のサイトに見られるような、ノイズを使ったトランジションは結構簡単というか……...
