FeelSketchTechnical

オーサリングツール＆ブラウザの
技術的トピック
オーサリングツール
• こんなのを出力するツール
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次のベジェ曲線
(4個の制御点で示される曲線の例)
点のデータ量の削減
• SVGのデータでは、点は『int』値である
– より、小さい数値（bit）で表せばよい！
• 32 bits ⇒ 8 bits と、1/4に削減可能
（1820，2550）
（255，255）
（255，255）
（1280，1920）
（182，255）
（128，192）ベクトル変換座標
キャンバス選択
A4紙とした場合、
（0，0）
ベース座標空間
縦横比
（0，0）
（0，0）
1:1.4 = 182:255
座標空間を再定義
実際に表示される画面
独自ファイルフォーマット策定
• http://code.google.com/p/feelsketch/wiki/Fi
leFormat
• SVG ⇒ 独自ファイルフォーマット変換
しかし、新たなる問題発生。
オーサリングツールは？
• 我々が考える求められる機能
– 誰もが直感的に使えるシンプルなUI
– 気軽に機能追加可能なシンプルなソースコード
• 独自オーサリングツールへ
– 最低限の機能に絞ったUI
– Pure Java 100%による実装
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表示する画像の座標を計算

Download Report