このブログのとあるエントリに貼られていたニコニコ動画内のとある動画を見て、ちょっと感銘を受けたりした。
で、この動画っぽい事をARToolKit使って出来ると聞き及んだので、ちょっと試してみた。
とは言え、この動画に使われてるモデルは5MBと重いので、まずは習作として、パノラマ表示を使って、マーカの動きにあわせて動くパノラマビューを作ってみた。
そのdemoがこちら。
かなり探り探り作った習作なので、感想やご指摘をいただけると非常に助かります。
これが上手くいったら、次は動画にある奴を目指そう。
写真は、Waffing on Flickr – Photo Sharing!からお借りした。Creative Commonsのようだが、詳細が分からない。ライセンス的にまずそうだったら指摘していただけると助かります。
こちらが、件の動画。
で、こっちがパノラマビューの参考にさせていただいたサイト。
参考と言うか、ぶっちゃけコードを丸々パクッた。
Googleストリートビュー的なパノラマVRをPapervision3Dで実現する企画第三弾、いよいよ今回で最終回です。前回は立方体にパノラマ画像を貼り付けましたが、今回は球面にパノラマ画像を貼り付けてみたいと思います。まずはデモの紹介から。
CubicVRをPapervision3D 2.0で作るPart.03(Sphere編) | ClockMaker Blog
今回のコードは酷すぎて泣ける。
以下に、マーカ位置からパノラマの表示位置を変更するコードを示すが、適当もいいところだ。
- //マーカの中心点の位置を検出し、傾きとする
- var square:FLARSquare = this._detector.getSquare();
- var Mx:int = Math.max(square.sqvertex[0][0], square.sqvertex[1][0], square.sqvertex[2][0], square.sqvertex[3][0]);
- var mx:int = Math.min(square.sqvertex[0][0], square.sqvertex[1][0], square.sqvertex[2][0], square.sqvertex[3][0]);
- var My:int = Math.max(square.sqvertex[0][1], square.sqvertex[1][1], square.sqvertex[2][1], square.sqvertex[3][1]);
- var my:int = Math.min(square.sqvertex[0][1], square.sqvertex[1][1], square.sqvertex[2][1], square.sqvertex[3][1]);
- var center:Point = new Point((Mx + mx)/2, (My+my)/2);
- this._view.camera.rotationY = (center.x - this._source.getWidth()/2) / 2;
- this._view.camera.rotationX = -(center.y - this._source.getHeight()/2) / 2;
- //マーカの大きさから、ズームを判定する
- //マーカの大きさは、900?45000なので、ズームが1?5とか6くらいになるよう調節
- this._view.camera.zoom = 1 + square.area / 9000;
あと5秒も考えれば、もっと良いコードが出てくる気がする。
取り敢えずやったことは、以下2点。
- マーカの中心位置を(原始的な方法で)求め、それによってカメラ(PV3Dの)の傾きを適当に変更
- マーカの大きさから、ズームを適当に変更。マーカの画面内での大きさの最大と最小は、実験で求めたと言う手軽さ
でも絶対、もっと鮮やかな方法があると思う。マーカ検出結果として得られる変換行列を使うとか。
その辺を考えるのを止めてしまった負け犬のコードですよ。
なお、今回のコードはFLARToolKitのサンプルとして、Spark Projectにコミットしておいた。
例えば、メインクラスはこれ：http://www.libspark.org/svn/as3/FLARToolKit/branches/tarotarorg/examples_1_0_0/org/tarotaro/flash/ar/FLARPanoramaSphere.as
誰か修正プリーズって事でヨロシク。
追記：タイトルを「[習作]このFLARパノラマビューはどう？」から変更しました。
多分、これが目標の動画だろ。
