大量の画像を切り替えることでアニメーションさせた独自の世界観が面白い Aesop のウェブサイト
いわゆるパラパラ漫画のような仕組み
今回ご紹介するのは、一風変わった WebGL 事例です。
Aesop というアロマキャンドルのウェブサイトなのですが、WebGL を使ってパラパラ漫画のように大量の動画を切り替えながら描画しています。
最初は全体が動画で作られているのかなとも思ったのですが、canvas 上に描画されているグラフィックスも存在していてそれらをユーザーに意識させずに自然に切り替えているのはなかなか見事だなと思いました。
リンク：
Aesop presents: Three Aromatique Candles & Other Stories
容量の低い大量の画像を一気に読み込む
今回のサイトではパラパラ漫画のように大量の画像を用いてアニメーション処理を行っており、恐らくですが Pixi.js だと思います。
なので WebGL でレンダリングしているといっても、あくまでも Pixi.js のエコシステムに乗っかってスプライトアニメーションしているような実装なのかなと想像します。
使っている画像が本当に大量にあるのですが、どれもモノクロの画像であることと、独特のドットで濃淡を表現したテイストのためなのか、いずれの画像も容量が非常に小さいですね。
ファイル容量が小さい画像を使っているからこそ、これだけ大量の画像を用いていてもそこそこロード時間が短くて済んでいるんでしょうね。
ページが読み込み開始された直後には、すでに Pixi.js による背景のレンダリングが開始されており、その状態で言語選択のインターフェースなどが表示されます。
よーく観察してみるとわかるのですが、この言語選択のインターフェースが出ている状態でも、背景にホワイトノイズのエフェクトが掛かったレンダリング結果が出ていますね。（スクリーンショットではほぼ見えないですが……）
その後、画像を切り替えるスプライトアニメーションの要領で様々なシーンがレンダリングされていきます。
個人的には WebGL で 3D シーンをあえてドット模様っぽくレンダリングしてたりするのかな～ すごいな～ と淡い期待をしたのですが、そういうわけではなかったです（笑）
私もしっかり計測したことはないのですが、ブラウザ上の <img> をバチバチ切り替えるスプライトアニメーションと、Canvas2D でそれをやった場合、WebGL でそれをやった場合、でどれくらい差が出るんでしょうね……
なんとなく、ただ画像を切り替えるだけだとすると Canvas2D と WebGL にはそれほど大きな差は出ないんじゃないかなとか思っちゃいますが、とは言え画像の解像度が極めて大きい場合や、引き伸ばされる画像の補間の取り扱いとか考えると、まあ WebGL でやっておけばすべての状況に対応できるのかなとは思います。
あとは手間というか、実装コストの問題かな……
実装コストという意味では人によると思いますけど……
スプライトアニメーションという昔からあるシンプルな表現方法ながら、ウェブサイトの体裁としてはすごく上手にまとめられており、なかなか興味深い事例なのではないでしょうか。
画像を用意するのがとても大変そうですが……
しかし WebGL で 3D シーンとしてレンダリングしながらこのテイストを表現することに比較すると、まだ大量のビットマップを用意することのほうがコストが低いかもしれません。
WebGL の実装云々ということよりは、サイトのインタラクションなどを含めた全体的な実装として参考にできる点が多いと思います。
ぜひチェックしてみてください。
