Pixi.js で作るハイレベルなデモンストレーション！ 青い空から宇宙空間につながる謎の穴！？
doxas : 2015-02-21 11:56:06
まるで異次元空間！
今回ご紹介するのは、まるで空にぽっかりと穴が開いてしまったかのような演出が特徴的な、Pixi.js を利用したデモンストレーションです。
Pixi.js は知ってる人は知っている割とメジャーなライブラリで、2D 表現をベースにしていますが WebGL を利用することで高速に描画が行えることが特徴です。
ユースケースのひとつとして、参考にしてみてください。
マウスカーソルを追従する演出効果
まずベースとなる背景には、青い空と白い雲。これらの背景パーツももちろん美しくアニメーションします。
これはこれで実にスムーズに動いています。
そして、マウスカーソルの位置を追いかけるようにして描かれる、異空間に繋がっているかのような演出が本デモの見どころです。
水溜まりができたときのように、ぽつりぽつりと穴が開いて、その向こう側には異次元とも、遠い遠い宇宙空間とも言えるような景色が見えます。
もちろんこの宇宙空間側もアニメーションしていて、じっくり見ていると雲と同様に奥から手前に向かって移動する靄のようなものが見えると思います。
また、空間の切れ目の部分には微妙にノイズのようなものを使って空間の境目が表現されていて、詳細にまでこだわって作られている感じが伝わってきます。
遠巻きにぼんやり眺めてもよし、近づいてじっくりと見てもそれはそれでよしといった感じです。
個人的には Pixi.js を使ったことはないのですが、2D 特化型のライブラリとしてはかなり有名なので、その実力に見合った素晴らしいデモだと言えそうです。
2D だけでなく、疑似的に 3D のような演出を行ったり影を出したりといったことができるようなので、気になる方は本家のサイトも含めてチェックしてみてはいかがでしょうか。
