WebGLで展示会のシンボルを表現した
毎年年度末くらいに学校でやってる展示会があって、その告知サイトで使うシンボルのアニメーションの実装を担当した。
すでに完成したポスターのビジュアルがあり、そのイメージを残しつつWeb向けにアレンジしたという形。
WebGLを使ったと言ってもたいして難しいことをしたというわけではなく、ライブラリを使って簡単なアニメーションをさせただけだったので実装は難しくなかった。といってもいきなりスムーズには作れてない。
まずポスターのデータを渡されたとき、シンボルがパスの集合なのを見て、SVGで書き出したデータを動かそうと考えた。でも実際にやってみると大きく２つの問題があった。
まずポスターのデータは、媒体のサイズが決まった上でデザインされているので、Webのように複数の画面サイズで見せることが想定されていなかった。
ポスターのイメージをサイトでも同じように表現するため、ウィンドウサイズいっぱいにシンボルを配置することに決めたけど、複数のサイズに対応するためにあらかじめ画像を作っておくという手は現実的ではないので、なんらかの方法でリサイズするたびに見た目を作り直さないといけない。なのでそのままのデータを使うことは無理そうだった。
それに加え、SVGではアニメーションのパフォーマンス上の問題があった。
ポスターのシンボルは1000以上のパスで構成されていて、SVGとしてパスをそれぞれ動かすと負荷が大きく、まともに見れるアニメーションにならなかった。
それで、2DのCanvas上にシンボルに似せたものを描画してアニメーションさせると、多少は改善はできた。けどまだまだスムーズとは言い難い動きだった。
このままでは処理を多少書き換えてもアニメーションが劇的に改善されるということはないと思ったので、パフォーマンスがいいらしいWebGLを使って描画することにした。
僕自身まったくWebGLの知識はなく、three.jsというのがデファクトのライブラリだということだけ知っていたので、とりあえずそれを使って2Dの描画に挑んだ。
けど、three.jsで2Dを描画する方法が初学者にとっては理解しにくく、早々と挫折した。
他に方法はないかと調べていると、2D描画をWebGLで行えるライブラリがあるということを知った。
Pixi.jsとCreateJSがWebGLでの2D描画をサポートしているらしく、使ったことのあるCreateJSを採用しようとしたけど、CreateJSにはWebGLでグラフィック描画を行う機能がないのでpixi.jsを使った。
アニメーションに関してはtween.js（CreateJSじゃない方）を使ってる。
結果的にかなりパフォーマンスを改善できた。
スマホに関しても、２年以内くらいに発売された機種ならまともに動いてくれる。
CanvasはIE9以上、WebGLはIE11以上でないと対応していないけど、このサイト自体がIE10以下はサポートしないというポリシーなので問題なかった。まずこの前提があるおかげでいろいろ選択肢が広がったのかなという感想。
