はじめまして。fujimuraです。
今回は11月にリリースした”MicroAd Ad Platform Visualizer”(以下、MAV)
についてお話します。
（MAVはコチラからアクセス！）
MAVとは？
MicroAd BLADEの一日の配信量を各都道府県に視覚化し、
各地域への割合をわかりやすく表現したサービスです。
とりあえず日本地図…飛んでるやつ…
配信の視覚化ということで、「とりあえず日本地図を用意して、
そこにピュンピュン何か飛んでるイメージ」というのがありました。
それに似たサイトなども色々見て参考にしながら、
さてどうしようか…と考えてはみたものの、
デザイン等は得意ではないためなかなかいいイメージが出てきません。
頭の中だけで考えていても埒が明かないのでまず作ってみようということで、
どこかの業務システム開発ならこの時点で失敗しそうな雰囲気の中、開発は始まりました。
1.日本地図を置いて玉をピュンピュン飛ばしてみました。
2.東京から各都道府県に円弧の線を伸ばして、それを玉が辿るようにしてみました。
3.都道府県別に色を付けて、玉の色を変えてみました。
4.配信量と玉の数を合わせました。
とこの辺まで作ってみて、ここからどうするぅ？となったわけですね。
実際にリリースされたものも、仕様的にはこれだけなんです。
しかし、この時の物とリリースされた物では天と地ほどの差があります。
その違いはいったい何なのか。
答えは「魅せ方」となるわけです。
three.jsとの出会いと”魅せ方”
ここからまた何か参考になりそうなものは無いかと色々探して、
たどり着いたのがthree.jsになります。
運命の出会いといいましょうか。。。
この出会い無くしてリリースされることはなかったでしょう。
URLはこちらです → http://mrdoob.github.com/three.js
何を参考にしたかはお察しください。
これまでCANVASだけで開発していたものをthree.jsに移行し、
色を整えアニメーションを入れて完成となりました。
と、文章にするとこれだけですが、実際には幾度ものMTGを経て
修正・改良を加えて出来上がったものになります。
その過程で大きく3つの魅せ所が追加・改良されました。
・デザインで魅せる
・3Dで魅せる
・アニメーションで魅せる
システム仕様としてはcanvasからthree.jsに移行するというのはありましたが、
それ以外では大きくは変わっていません。
魅せ方次第で如何様にも変わってしまうというのが、
恐ろしくもあり面白い部分でもあります。
技術面の苦労・three.jsとの戦い
three.jsを使うということで、3D・アニメーション経験ほぼ無しだったので
ピンチの連続ではあったのですが、思い出深い部分を挙げていきます。
・線を辿る
まず最初に困ったのが玉が線を辿るというものです。
線が直線なら問題ないのですが、曲線となるとどうしていいのやら。
曲線をベジェ曲線で表現していたのですが、開始位置をA、終了位置をBとしたときに、
AB間のt%地点は座標(x,y)となるという計算式を見つけました。
それを参考にして作成したのがこれです。
var T = 1 – t;
var x = this.ps[0].x*T*T*T + this.ps[1].x*3*t*T*T + this.ps[2].x*3*t*t*T + this.ps[3].x*t*t*t;
var y = this.ps[0].y*T*T*T + this.ps[1].y*3*t*T*T + this.ps[2].y*3*t*t*T + this.ps[3].y*t*t*t;
return {x: x, y: y};
}
※開発途中のもので、現在は使用していません。
three.jsでは、曲線を指定した数の点で分割する機能があった為、
あらかじめ分割しておくことで
点Aから点Bの直線での計算で済ませることができました。
// 曲線を50分割
var points = lineCurve.getPoints(50);
・3Dモデルをプログラムで作成
玉が線を辿るバージョンをシャワーとすると、
シャワーとは別の表現のものも欲しいよね、ということで
“クリスタル”で表現してみようということになりました。
配信量によって大きさや形が変わり、ニョキッと生えるような表現ということで
若干のアニメーションもあり。
これは3Dモデルでは厳しいかな？
ということで、プログラムでその都度作るようにしました。
要するにポリゴンを作るわけですが、ポリゴンは三角形の集合体として表現されます。
クリスタルということで形的にはそれほど難しいものは無く、
六角錐と六角柱が１つずつあればいいのでなんとかなるだろうと。
大まかなフローとしては、
・各頂点の座標を求める
・三角形を作る点を決める
・三角形の面の向きを決める
・面にテクスチャを貼る
と、このようになるのですが、面の向きを求めるというのがよくわからず、
面が裏を向いていたり、面が足りていなかったりと、かなり苦戦しました。
試行錯誤の末なんとかできたというのが現状です。
しかし、苦労した甲斐あって恩恵もありました。
錐状になっているため角柱部分の面が傾斜となるのですが、
その為光の反射が分かり辛くなっていました。
その傾斜をなくした面の向きにしているので、反射しているのが分かりやすくなっています。
おわりに
…とまあ、ここまで技術面中心に開発秘話と苦労話を綴りましたが、
今回はこのへんまでとしておきます！
私は引続き、このように出会った新たな技術の話や今後のリリース作品に関する
技術面での記事を連載で投稿していくつもりですのでよろしくお願いします。
ではまた。
fujimura