オーサリングツール＆ブラウザの 技術的トピック
オーサリングツール こんなのを出力するツール
PM-Codeとは？ 無通信を実現するためのデータストレージ 色つきQR-Codeを重ね合わせている
PM-Codeの問題点 データ容量が少ない スマートフォンのカメラの解像度 実用的な時間での処理 色の補正など、けっこういろいろやっている。 画像処理なので、とても重たい・・・ 2009年現在では、2k bytesくらいが妥当なライン
オーサリングツールとは？ 手描きの絵を描けるお絵かきツール
手描きの絵を扱うには？ ペイント系ツールを用いて描く！ ベクター系ツールを用いて描く！ 例：Photoshop, Bitmap形式 データ量がでかすぎ。数百k bytesは当たり前。 ベクター系ツールを用いて描く！ 例：Flash, SVG(Scalable Vector Graphics)形式 これでも、数十k bytesは当たり前。
データ量削減に向けて データ量のほとんどは、 方針 『（曲）線』を描くための 『点』データである 線の数の削減 点のデータ量の削減 直線で、曲線を描く
線の数の削減 ベジェ曲線 制御点を B0, B1, ..., BN-1 とすると、 で表される曲線 3次のベジェ曲線 3次のベジェ曲線（4個の制御点で示される曲線）で説明をする。 右図の P0, P1, P2, P3 が与えられた制御点である。今、ベジェ曲線の P0 から t (0 < t< 1) の比率の位置の点の座標を求めるためには、次のように計算すればよい。 まず、制御点を順に結んで得られる3つの線分 P0 - P1, P1 - P2, P2 - P3（緑色の線）をそれぞれ t : 1 - t の比率で分割する点、P4, P5, P6 を求める。 次に、これらの点を順に結んで得られる2つの線分 P4 - P5, P5 - P6（赤色の線）を再びそれぞれ t : 1 - t の比率で分割する点 P7, P8 を求める。 最後に、この2点を結ぶ線分 P7 - P8（黄色の線）をさらに t : 1 - t の比率で分割する点P9 を求めると、この点がベジェ曲線上の点となる。 この作業を 0 < t < 1 の範囲で繰り返し行う事により、P0, P1, P2, P3 を制御点とする3次ベジェ曲線（青い曲線）が得られる。 直線で、曲線を描く 3次のベジェ曲線 (4個の制御点で示される曲線の例)
点のデータ量の削減 SVGのデータでは、点は『int』値である より、小さい数値（bit）で表せばよい！ 32 bits ⇒ 8 bits と、1/4に削減可能 （0，0） （1820，2550） 実際に表示される画面 （0，0） （255，255） （182，255） 座標空間を再定義 （0，0） （255，255） ベース座標空間 （1280，1920） ベクトル変換座標 キャンバス選択 （128，192） 正確には、実装に依存するであろう。 ただ、普通に実装すれば、intで扱うと思われる。 A4紙とした場合、 縦横比 1:1.4 = 182:255
独自ファイルフォーマット策定 http://code.google.com/p/feelsketch/wiki/FileFormat SVG ⇒ 独自ファイルフォーマット変換 しかし、新たなる問題発生。
オーサリングツールは？ 我々が考える求められる機能 独自オーサリングツールへ 誰もが直感的に使えるシンプルなUI 気軽に機能追加可能なシンプルなソースコード 独自オーサリングツールへ 最低限の機能に絞ったUI Pure Java 100%による実装 SVGオーサリングツールの問題点 有料の商品である 無料のモノは、プロ志向 コンパイルするのも大変
Feel Sketch Browserとは？ オーサリングツールで作成された 独自フォーマットのデータを PM-Codeから読み込む データを変換し、 マーカーを認識して 紙の上にAR表示
問題点 Android Deviceの処理速度が遅い マーカーを認識するたびにリアルタイムで 表示オブジェクトを生成していては レンダリングが追いつかない
レンダリングの高速化 PM-Codeからデータを読み込んだ時点で 画像を生成しておく マーカーを認識したときに画像をAR表示 リアルタイムの処理が軽くなり高速化
座標計算 生成した画像をぴったり紙の上に AR表示したい マーカーの座標と紙に関する情報から リアルタイムで座標計算を行う
PM-Codeの座標検出 シンボル PM-Codeをマーカーとして利用 QR-Codeのライブラリを利用して 座標を検出 3つのシンボルにより紙の向きがわかる シンボル
紙に関する情報 紙の大きさ(A4, L判, Post Cardなど) PM-Codeの紙の中での位置、大きさ オーサリングツールであらかじめ 指定しておく
紙の情報の例 ・PM-Codeの位置：左上 ・PM-Codeの大きさ：短辺の1/2 ・紙の大きさ： A4
PM-Codeの座標と紙の情報から AR表示する画像の座標を計算