このエントリーは tech.kayac.com Advent Calendar 2015 の4日目のエントリーです。
こんにちは！
今年の春、カヤックに新卒として入社した、フロントエンドエンジニアの深澤（@takumifukasawa）です。
今回は、「canvasのライブラリは手をつける順番で理解度が大きく変わる」と思った出来事について書きます。
canvasライブラリで表現の幅は広がるが、種類が多くて迷う。
僕は7月に、『1日1jsdo.it』という企画を始めました。主にcanvasの勉強のためです。
これは、「1日に1つプログラムで何か作品を作る → それをjsdo.it(※1)に投稿する」習慣のことです。
途中で1週間ほど間が空いてしまった時期はありますが、この習慣を4,5ヶ月ほど続けていて、いまのところ120個近くの作品が出来上がっています（たいてい、仕事を終えて帰ってから寝るまでの時間で作っています）。
http://jsdo.it/takumifukasawa
ある日、「今日はcanvasのライブラリを使ってみよう！」と思ったときに、WebGL関連など、使ってみたいものが多すぎて、何から手を出したらよいのか検討がつきませんでした。どうしたらよいかわからないまま、とにもかくにもいろんなライブラリを繰り返し使ってみると、しばらくして、ライブラリごとの共通点や特徴がちゃんと分かってきました。
しかし、ふと振り返って気がつきました。「あれ？この順番でcanvasのライブラリを触ってたらもっと早く理解できてたんじゃないかな…。」と。その順番とは、
1. create.js
2. pixi.js
3. three.js
です。まずは、それぞれのライブラリの紹介をしたいと思います。
1. create.js
http://www.createjs.com/
描いた図形をクリックできる機能や、タイマーの一元管理など、canvasの標準APIにはなかった、アニメーションに関する欲しかった機能が詰まっています。
例えば、canvasの標準APIでは色を四角に塗ることはできても、それを形として扱うことはできないのですが、createjsはその図形を一つの形（オブジェクト）として扱うことで、クリックできるようにしてくれるという仕組みになっています。そのため、複製や削除なども簡単です。
下の作品では、一つ一つの点がそれぞれオブジェクトです。2点がある一定距離以内だったら線を引き、それが3点なら面を塗るようにしています。
2. pixi.js
createjsと同じく2D表現に強く、図形や画像を一つのオブジェクトとして扱うなど、createjsとの共通点が非常に多いライブラリです。
大きな違いは、WebGLベースで動いている点です。WebGLとは、プラグインなしでブラウザで3D表現を実現させる技術のことで、WebGLのおかげで、数千個ものパーティクル表現もさくさく動くようになります。
これは初めてpixijsを使ってみた日の作品です。
それまで使ったことがなかったため、時間がかかりそうで不安でしたが、createjsに似た使い方のため、大きく詰まることはありませんでした。
3. three.js
まず下の作品をご覧ください。こちらはthreejsを使わずに、パーティクルがどんどん回転して、2点の距離が近いものは線を引くような3D表現をしてみた作品です。
しかし、3Dから2Dへの座標変換を自前で実装する必要があるため、複雑な動きの表現となると、その実装にとても骨が折れます。
そこで、threejsの出番。
threejsはWebGLベースで動く、3D描画のライブラリです。
javascriptで3Dのライブラリ、と言ったらまずはこのthree.jsが挙げられます。
Blenderで作った3Dモデルを取り込んで動かしたり、シェーダーによる色・形状の変更もできる優れものです。
WebGLが対応していないブラウザでも、canvas用のレンダラーがあるので安心。多少機能は制限されるものの、WebGL向けに近い開発を進めることができます。
そんなthreejsを使った作品がこちら。
1つ目の作品は、3D方向に線がランダムで伸びていくランダムウォークです。
2つ目の作品ではシェーダーを使って、幾何学的な模様を表現しています。
特徴の近いものから順番に学ぶ
冒頭に挙げた順番は、2Dと3Dどちら向きか、WebGLベースかどうかで決めました。それぞれのライブラリの特徴はこのようになります。まとめてみると、上から順に少しずつ違うものになっているのが分かりますよね。
僕は、3Dをやってみたくて一番最初にthree.jsを触ったのですが、canvasの標準APIと違いすぎて、全然わからないまま一度挫折してしまいました。
ところが、create.jsやpixi.jsを使ったあとだと、手も足もでなかったthree.jsの使い方がスッと入ってきました。
たとえばcreate.jsからpixi.jsへ以降した時のように、より特徴の近いものから順番に触れていくと、他のライブラリの敷居が下がって使いやすくなるし、結果的にその方が理解が早いことに、その時気がつきました。
これからcanvasのライブラリを使ってみようと考えている方は、ぜひこの順番を検討してみていただけると嬉しいです。three.jsまでいくと、演出の幅がぐんと広がって、より一層楽しくなります！
最後まで読んでいただきありがとうございました！
明日（12/5）は、新卒2年目にしてフロントエンジニアのエースとして大活躍しているたじー先輩の記事です。
※1. jsdo.itとは、プログラムをWeb上に保存・公開できるオンラインコミュニティのこと。オンラインエディターによってブラウザ上で編集が可能。http://jsdo.it/
