秘密の庭園をテーマにした Pixi.js 製の滑らかなアニメーションが面白い WebGL 作品
二次元的 WebGL の活用
今回ご紹介するのは、庭園をテーマにしたウェブサイトで、ヨーロッパなどで庭園に植えられていた様々な草花が登場します。
英語ではないこともあって詳細なところがわからなかったりもするのですが、どうやら同名のオフラインイベント（展示会）が開催されるので、それを告知するためのサイトでもあるようです。
Pixi.js を使った二次元での WebGL の使い方も非常に巧みで、まるで動く絵本のような美しいウェブサイトに仕上がっています。
その日の気分に合わせて植物を選ぶ
今回のサイトには、立体表現は基本的にひとつもありません。
実装に利用されている Pixi.js はもともと 2D に特化していることが特徴ですので、今回のサイトの演出を行う上では非常に相性が良かったのだと思います。
しかし立体では無いとは言っても、まるで紙芝居や、あるいは動く絵本のような 2.5D っぽい表現の演出は見受けられますね。
たとえば、最初の画面からスクロールして下に移動していく際には、中央から画面の両サイドに向かって、草のイラストがスッとアニメーションする演出があります。
左側の緑色の葉と、右側の白い花が中央から左右に移動しているのがわかるでしょうか。
これらのアニメーションはスクロール操作に連動するように動き、その後ろから文章が出てくるわけですね。これはいわゆる WebGL の一般的なコンテンツのような「立体」でこそありませんが、コンテンツを立体的に配置することで、より印象的な演出を行っているという点では、見事な手法だと言えるのではないでしょうか。
そしてさらにスクロールしてどんどん下のほうに移動していくと、今度は個々の植物の種類ごとにわかれて、それぞれが美麗なイラストとして描かれたものが出てきます。
これも静止画では絶対にわからないと思うのですが、この植物たちのひとつひとつが、微妙にアニメーションしています。
二次元的なんだけど、三次元的。まるで Live2D でアニメーションを仕込んだみたいな動き方ですね。
またそれぞれの植物の特徴や、庭園の歴史上どのような背景があったのかなど、個別に見ることもできるようになっています。
一種のハーブというか、薬草のような役割を持っていた植物も多いようで、日本の庭園の文化とはまったく違った、ヨーロッパの庭園の知識を学ぶことができる内容ですね。
まあ、フランス語なので翻訳機能使わないとまったく何もわからんのですけど（笑）
Pixi.js はフロントエンド界隈での採用例も非常に多く、軽快かつ手軽に利用できる点が高く評価されています。
今回のサイトを見るとわかるように、基本的には 2D 特化のライブラリなのですが、だからといって、平面的な表現しかできないと考えてしまうのは早計でしょう。
Pixi.js のみならず WebGL もまた然りだとは思いますが、表現というのは、ライブラリがどうとか API がどうとか、そういうものを超えたところに極致があるのではないか――と考えることが個人的には最近多くなったような気がしています。
WebGL が徐々に成熟していくなかで、定番の見せ方は既に古臭さを感じさせるものになってきています。今回のサイトのように、二次元ベースでありながらリッチで美しいウェブサイトが、きっと今後もどんどん増えていくのでしょうね。
非常に参考にできる部分の多いサイトだと思います。
ぜひチェックしてみてください。
