はじめに
タイトルにあんなことを書いてはいますが、これはとある案件で行ったことの忘備録的なものです。
別に webGL 宗教というわけでもなく、 これぐらいの表現をしたかったら webGL なんだな という感じで捉えて欲しい。
どんな案件だったか
まずこの案件は初めは
- 3D の球体に地球のテクスチャを貼ってグリグリ動かしたい
- 球体状には幾つかのオブジェクトが置いてあってインタラクションできる
- 地球には近づいたり、遠くなったりする
- できれば、多くの端末で見せたい ( PC, SP <- これが重要 )
という案件でした。割と3Dとかではよく聞く感じの案件ですね(でもやるのは初めてだったので嬉しかった。)
しかしクライアントさまからのご要望で仕様変更となりました。
3D は 重いから 2D にしよう
ということでした。
すでにこちらも3Dに胸をウキウキさせて webGL Meet Up に行って初心者丸出しな質問をベテランのエンジニアにしたりしてました。。(もちろん参考サイトから、どうやるのが良さそうか丁寧に説明していただきました！)
ちなみに全体の仕様はそんなに変更はないですが 2D 特有の仕様になりました。
- 2D の球体に地球のテクスチャを貼ってグリグリ動かしたい
- 球体状には幾つかのオブジェクトが置いてあってインタラクションできる
- 地球には近づいたり、遠くなったりする
- できれば、多くの端末で見せたい ( PC, SP <- これが重要 )
- ドラッグで横方向に無限に１周できる(ループ用のMapと合わせて２つの要素をそれぞれ管理するので少し面倒)
しかしそういう判断なら仕方ない。ということでその日の内にプロトを用意して想像とズレがないか確認し、OKをもらえたので一安心。
ちなみにこのとき、私は svg を使用してサイトを構築しました。
そしてこれが大きな間違いであることに気づかなかったのですね。
こっから webGLにたどり着くまでが長い、、、
Two.js で svg を動かす
プロト製作に使用したのは Two.jsでした。
これは、svg をいろいろと動かすことができるようになる ライブラリ。
似たようなので Adobe の Snap.svg なるライブラリがあります。物凄く質の高いライブラリなのですが、今回の案件にはファットかなぁということで、最悪困ったら使う。という判断でやめました。
なので Two.js は
- 軽量
- 各種イベントが備わっているし、マスクもかけれる (マスクは球体の表現で必要)
- svg のインポートもできる
ができて一見ベストな選択だと思っていました。実際プロトや実装の初めは軽快に動作していました。
しかし、最後のテストでオブジェクトを最終的な数だけ載せると
生成が重い上にブラウザが落ちる
という現象に悩まされることになります。
結局こういうライブラリはパス１つ１つなどにイベントを与えて管理できるようにしているんですね(絶望)
ということで、地球上にパスをもったキャラクタを 200体 程度描画したら根をあげました。
これが１回目のピンチ
重要な機能を自前で書く
ならばどうするか、簡単ですね。
svg を自前で構成していくだけです。これは意外と簡単でした。
svg の構造さえ分かってれば DOM 作ってるのと同じです。
ただし注意なのは今回素材は Illustrator で作成されているのかつ svg の情報がきちんと埋め込まれているという点です。なので minify とかしていまうと動かなくなったりします。まぁ全体に gzip かけてもらえばよいのだ。
結果、かなり高速に生成され、動作もある程度高速になりました。そして何よりブラウザが落ちない。
これである程度終わりが見えたかに思えました。
けど貧弱なPCだと重いんだが
そうです。重いんです。ちなみに僕のは Apple にお布施した高機能な Mac Book Proなので、あんまし気にならないのですが、ASUS とかのパソコンだと重い！
原因は
領域外の要素も描画されている
です。 DOM にありがちですね。
さて、ということで、今ウィンドウ内にあるオブジェクトを全て計算して出し入れするスクリプトを書くことになります。
このコンテンツは 近ずいたり、遠くなったりと、状況によって範囲が異なるので少々苦労しましたが、
その甲斐もあって、PCならほぼどんな端末でも高速に動く + svg だから綺麗 という結果を手に入れました。
ちょっと SP だとお話しにならないほど遅いんだが笑
え、、、あんぎゃ〜〜〜〜！ iPhone6, 6+ でさえ、まともに動かない糞コンテンツになってましたとさ。
このとき、気づきました。2D でも webGLを使うしかない。と
思い切って webGL にコンバートする
さて、ここには書いていないですが、結構なテストと試行錯誤をして、ようやく webGL に移る決心をします。
ただし 2D 。
そこで使用したライブラリは Pixi.js
でした。これは 2D コンテンツを webGL レンダラーで描画できるライブラリ、しかも最悪普通の canvas にフォールバックしてくれるという神機能付き。
まずはコアな機能を移植して確かめる
動く、動くぞ！！！
そうなんです、webGL はハードで動かすから早いんです！
このおかげで詳しくテストしていないですが、
- iPhone 5s ~ 6s (iOS 8+)
- Android 4.1+
くらいでみてもそんなにストレスがないパフォーマンスを得ることができました。
なんてことだ、
3D とか 2D とか関係なく webGL は正義
と思わざる終えなかったですね。
さて、ここからは webGL で行う 2D 表現の際に気をつけなければいけない Tips があるんですが、それはまたこんど
最後に
今回の失態は、早い段階での sp での調査を怠ったのが大きかった
当たり前といえば当たり前なんですが、
２D表現というなかで webGL というのはなかなか発想としてでてこず。。反省ですね。
さて、今回は
- 画像やオブジェクトをグリグリ動かすコンテンツ
に関しては
- PC だけなら svg でもいける
- SP とか考えだすと webGL を使わざるおえない
という教訓を得ました。
仕事募集
さて、せっかくノウハウも溜まったということで、また別の形でお仕事をしたいと思うわけですが、
はたしてこんなのできるの？とか webGL コンテンツつくりたいと思う方がいたら是非一声かけていただけたらなと、、、
僕より優秀な先輩が答えてくれます！