オーサリングツール＆ブラウザの 技術的トピック

Presentation on theme: "オーサリングツール＆ブラウザの 技術的トピック"— Presentation transcript:

1 オーサリングツール＆ブラウザの 技術的トピック

2 オーサリングツール こんなのを出力するツール

3 PM-Codeとは？ 無通信を実現するためのデータストレージ 色つきQR-Codeを重ね合わせている

4 PM-Codeの問題点 データ容量が少ない スマートフォンのカメラの解像度 実用的な時間での処理
色の補正など、けっこういろいろやっている。 画像処理なので、とても重たい・・・ 2009年現在では、2k bytesくらいが妥当なライン

5 オーサリングツールとは？ 手描きの絵を描けるお絵かきツール

6 手描きの絵を扱うには？ ペイント系ツールを用いて描く！ ベクター系ツールを用いて描く！ 例：Photoshop, Bitmap形式
データ量がでかすぎ。数百k bytesは当たり前。 ベクター系ツールを用いて描く！ 例：Flash, SVG(Scalable Vector Graphics)形式 これでも、数十k bytesは当たり前。

7 データ量削減に向けて データ量のほとんどは、 方針 『（曲）線』を描くための 『点』データである 線の数の削減 点のデータ量の削減
直線で、曲線を描く

8 線の数の削減 ベジェ曲線 制御点を 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個の制御点で示される曲線の例)

9 点のデータ量の削減 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

10 独自ファイルフォーマット策定 http://code.google.com/p/feelsketch/wiki/FileFormat
SVG ⇒ 独自ファイルフォーマット変換 しかし、新たなる問題発生。

11 オーサリングツールは？ 我々が考える求められる機能 独自オーサリングツールへ 誰もが直感的に使えるシンプルなUI
気軽に機能追加可能なシンプルなソースコード 独自オーサリングツールへ 最低限の機能に絞ったUI Pure Java 100%による実装 SVGオーサリングツールの問題点 有料の商品である 無料のモノは、プロ志向 コンパイルするのも大変

12 Feel Sketch Browserとは？
オーサリングツールで作成された 独自フォーマットのデータを PM-Codeから読み込む データを変換し、 マーカーを認識して 紙の上にAR表示

13 問題点 Android Deviceの処理速度が遅い
マーカーを認識するたびにリアルタイムで 表示オブジェクトを生成していては レンダリングが追いつかない

14 レンダリングの高速化 PM-Codeからデータを読み込んだ時点で 画像を生成しておく マーカーを認識したときに画像をAR表示
リアルタイムの処理が軽くなり高速化

15 座標計算 生成した画像をぴったり紙の上に AR表示したい マーカーの座標と紙に関する情報から リアルタイムで座標計算を行う

16 PM-Codeの座標検出 シンボル PM-Codeをマーカーとして利用 QR-Codeのライブラリを利用して 座標を検出
3つのシンボルにより紙の向きがわかる シンボル

17 紙に関する情報 紙の大きさ(A4, L判, Post Cardなど) PM-Codeの紙の中での位置、大きさ
オーサリングツールであらかじめ 指定しておく

18 紙の情報の例 ・PM-Codeの位置：左上 ・PM-Codeの大きさ：短辺の1/2 ・紙の大きさ： A4

19 PM-Codeの座標と紙の情報から AR表示する画像の座標を計算