【本サイトのご利用指針】
当サイトはSPAM対策等のためJavaScriptを使っています。
JavaScriptの実行を可能な状態にしてご利用下さい。
Please enable the execution of JavaScript!







































































【HTML5+JavaScript+AR】【円形マーカーで拡張現実センシング!】

~インターフェース2013年10月号【研究】『位置センシング』~

『Kinectが変えるセンシングの世界』
    【リンクフリー】 私設研究所ネオテックラボ Neo-Tech-Lab.co.uk
【記載者】 【私設研究所Neo-Tech-Lab】 上田 智章
作成日 2013/03/30
ここにチェックボックス型外部コンテンツ・メニューが入ります。




【ブラウザはGoogle Chrome】
●最新版ダウンロードはこちら

【お知らせ】

Windows7でChromeがフリーズを起こす場合は、コントロールパネル⇒管理ツール⇒サービス でWindows Media Player Network Sharing Serviceを停止かつ無効にします。Micorosoftのバグです。

【はじめに】

HTML5+JavaScriptが急速に進化を遂げてくれたおかげで、最新版Google Chrome, FireFox, OperaではWebカメラの利用が可能になりました。JavaScriptの実行速度も改善が続いており、漸くWebプログラミングでもHTML5+JavaScript+ARの時代がやってきました。WebGLの実装はまだChromeとFireFoxだけですので今回はNTL3D.jsを使ったプログラムを公開いたします。
今回、矩形波相関フィルタを円形マーカーの検出に、トランジスタ技術2012年8月号のKinect特集記事で紹介しました円運動推定(基底遷移)アルゴリズムを円形マーカーの中心座標推定に応用しました。JavaScriptで記述されていますので、ソースはテキストです。各サンプルプログラムをご覧ください。
今後、右のような円形マーカーで楕円推定を行うことにより回転角度、法線ベクトルの検出もできるように改良を行う予定です。

【参考ページ】
【3次元グラフィックス・ライブラリ】『NTL3D.js』
【Webカメラを使う】
【一部の読み取りパターンだけから回転角度を推定する】


【講演・技術セミナー予定メモ】

【テクノセンター セミナー】

【題  名】Kinect(距離画像センサ)の基礎とセンシングシステム開発への応用 ~デモ付~
【開催日時】2014年09月25日(木)10:30~17:30 【概略内容】
 ・距離画像センサをベースにしたUI開発のための講座
 ・Kinectが持つ新たな入力デバイスとしての可能性をその実行プログラム例と事例から修得し画像機器、センシング機器への応用開発に活かそう!

【トリケップス セミナー】

【題  名】『Kinect(Light Coding技術 / Time of Flight技術)の概要/理解と非接触生体センシング』
【副  題】~Kinectの基本アルゴリズム(Light Coding技術[V1] / Time of Flight技術[V2])の理解から、それを用いた非接触生体センシングの動作原理、ヒューマン・ヘルスケア関連アプリケーションへの展開、及び最新次世代Infrared Depth技術まで~
【開催日時】2014年11月28日(金)10:30-16:30
【会  場】オーム ビル(千代田区神田錦町)
【開催履歴】
  (1)2013年05月24日 (2)2013年08月30日 (3)2014年02月07日 (4)2014年06月20日【満員御礼】
  (5)2014年08月29日【満員御礼】(このセミナーでは可能な限り下記内容を反映します。)
【概略内容】
①Kinectの基本構造と基本機能の紹介[デモを行いながら説明します]
 ●Color(RGB)カメラ ●Depth(モノクロ/カラー) ●Infrared(赤外線)
 ●BodyIndex(人物輪郭情報) ●Body(骨格トラッキングと手の状態検出[グー、チョキ、パー])
②LongExposureInfrared / LongExposureDepth(長時間露光によるノイズ低減)
③関節位置の履歴表示とその応用
 ・1つのセンサで物理量の分布状態を可視化するARセンシング技術
 ・円運動検出によるジェスチャー判定(点, 直線, 円弧, 円)
 ・円運動検出アルゴリズムの応用(円形マーカーの検出、瞳孔トラッキング)
 ・非接触・無拘束な加速度検出や人の運動を解析する技術
 ・そこらじゅうをタッチパネルにする技術(ARドラム/エレクトーンなどの楽器化)
④Kinect Fusionと3Dスキャン技術(STLフォーマットと光源計算の原理)
 ・デプスから3次元座標を取得する
 ・STLフォーマット
 ・3Dグラフィックスの基礎知識
 ・法線ベクトルや陰影をくっきり表現する光源計算
⑤応用
 ・Cyber Eye(デプスを音に変換する代替知覚) ・機器制御 ・非接触バイタルセンシング(呼吸・心拍)
⑥非接触バイタルセンシング(呼吸・心拍)の検出原理と生体に関する知識
⑦デプス・カメラの動作原理
 ・三角測量法(レーザーポインタやラインレーザーを用いた測距)
 ・m系列符号パターンの映像から回転角度を検出する3Dスキャナの例
 ・Light Coding技術の動作原理(WebカメラとPCプロジェクタで試作した原理検証結果も用いて説明)
  ランダム・ドット・パターンの数学的性質と部分パターンとの相互相関による画素位置検出の原理
 ・Time of Flight技術の動作原理
  ・光パルスの位相差から距離を求める ・環境光の影響は除去
 ・最新次世代技術:普通のWebカメラをデプスカメラに変身させるMicrosoft社のInfraredDepth技術の動作原理
■各種アルゴリズムも説明
■その他、SDKのセットアップや基本的な事例の資料は添付、あるいはサンプルプログラムのダウンロードができます。

Kinect Developers KitのKinect V2 アルファ版


【Webカメラで瞳孔トラッキング】


【Webカメラで脈拍センシング】


【最新版】【HTML5+JavaScript】『円形マーカーの中心座標を推定するアルゴリズム』

大幅に方式を見直して『円形マーカーの検出』プログラムを試作してみました。USBカメラをアクセスするため、最新版のGoogle Chrome, FireFox, Operaを用いる必要があります。このプログラムはまだ楕円推定に非対応ですので、マーカーの法線方向から撮影してください。今後、楕円推定アルゴリズムに対応して、法線ベクトル、回転角度に対応する予定です。
回転角度検出に関しては、/3DScanner/index.htmを参考にしてください。
 ■【PNG, PowerPoint, PDF】『体験用円形マーカー』
 ●【HTML5+JavaScript+AR】『円形マーカーの検出』プログラム
   テキストで距離を表示
 ●【HTML5+JavaScript+AR】『回転するピラミッドのAR表示』プログラム
   NTL3D.jsを使って回転するピラミッドを表示
 ●【HTML5+JavaScript+AR】『マーカー移動履歴の表示』プログラム
   ☆マークで移動履歴の残す

まだ、楕円推定処理ではなく、単なる円推定(トランジスタ技術2012年8月号Kinect特集『円運動推定処理』)であるため、マーカーを斜めにした場合に対応していませんし、回転角度、法線ベクトルに非対応のサンプルです。
このオリジナル・アルゴリズムの最大特徴は手や物でマーカーの一部が隠れてもマーカー検出が機能する点である。基底遷移推定アルゴリズムは最小二乗法を実装しているので冗長性がある。




『【HTML5+JavaScript】 Circle Marker 【Augmented Reality】 』


『【HTML5+JavaScript】 円形マーカー ピラミッド 【Augmented Reality】』

【トラ技メルマガ】

トラ技メルマガ『俺センシング』で配信したものです。

【サンプルマーカー】直径48mmくらいになるように印刷します。
 http://www.neo-tech-lab.co.uk/ARMarker/Marker2.zip
【サンプルページ】
●エッジ検出のサンプル
 http://www.neo-tech-lab.co.uk/ARMarker/NTL3D_AR5.htm
●距離測定サンプル
 http://www.neo-tech-lab.co.uk/ARMarker/NTL3D_AR6s.htm
●拡張現実サンプル(回転するピラミッドを表示)  http://www.neo-tech-lab.co.uk/ARMarker/NTL3D_AR7s.htm
●移動履歴を残すサンプル
 http://www.neo-tech-lab.co.uk/ARMarker/NTL3D_AR8s.htm
【参考】
JavaScriptだけで3次元グラフィックスを表示するNTL3d.jsのサポートページ
 http://www.neo-tech-lab.co.uk/Canvas

『【トラ技メルマガ】『俺センシング  円形マーカー』【Augmented Reality】』

【円推定アルゴリズムの理論】

数学の話は雑誌の記事には不向きの内容なので、この場で詳細を記述します。
私はハフ変換を使わずにオリジナルの『基底遷移アルゴリズム』を使って、円の中心座標を推定しています。以下に詳細を記述します。

【円に関する基礎知識】

今、円周上の異なる2点を結ぶ線分(弦)の中点であるを通り、前記線分に直交する直線は円の中心を通る性質があります。
2点を通る直線の方程式は次式(1)で与えられます。
    (1)
このとき、式(1)に直交し、点を通る直線の方程式は次式(2)で与えられます。
    (2)
この弦の中点を通り弦と直交する直線(法線)を次式(3)と表記します。
    (3)
ここで、(2)式より
    (4)
    (5)
    (6)
が成立します。
理想的な円の場合には、弦の中点を通る法線は必ず円の中心を通るのですが、マーカーを印刷した紙は完全な平面ではないでしょうし、印刷時に歪もあるでしょう。また、カメラにはレンズ系に歪がありますし、イメージデバイスの画素の持つ量子化誤差、A/D変換に伴うノイズも存在するので、前述の法線は中心を通るとは限りません。
ここで、高校の数学Ⅱで履修したと思われる公式(直線と点との距離)が多分人生で初めて役に立ちます。円の中心と法線の距離は次式で与えられます。
    (7)

問題を整理します。今、円周上に存在することがわかっている点集合から円周上の2点のペアをn通り選択します。j番目の法線は次式(8)で表現することができます。
    (8)
円の中心との距離は次式(9)で表記されます。
    (9)
未知数を推定する手法に『最小2乗法』というものがあります。弦の中点を通過するn本の法線に基づいて、円の中心を推定する問題において、前述の距離は推定誤差を示しますが、最小2乗法ではすべてのサンプル法線に対して良い推定値を取得する推定誤差評価関数Eとして次式が使われます。
    (10)
(9)式を(10)式に代入すると、次式(11)が得られます。
    (11)
推定誤差評価式E(11)式が最小の値となるような円の中心座標値を推定できればよいわけです。

【基底遷移アルゴリズム】『円の中心座標推定への適用』

今、未知数はの2つがありますが、だけを考えることにします。
(11)式をを含む部分とを含まない部分に分離します。
    (12)
式をわかりやすくまとめるため、次式(13)の様に表記します。
    (13)
するとを変数として整理していくことで次式(14)が得られます。
    (14)
ここで、やや手法的ですが、次のように定義します。
    (15)
    (16)
    (17)
(14)式は以下のようになります。
    (18)
ここまでくるともうわかると思いますが、推定誤差評価関数Eは未知数に関して図3に示すように放物線になっているのです。
図3に示す放物線は軸値で最小の値を取ります。つまり、未知数を放物線の軸の座標に変更すればより小さな推定誤差になるわけです。
そこで次式(19)のように変形することができます。(15),(16)の定義はこの変形を理解しやすくする定義だったわけです。
    (19)
未知数をとして同様に次式が得られます。
    (20)
まとめると、以下の漸化式2式を交互に繰り返すことで確実により小さな推定誤差の円の中心座標値が得られます。
    (21)
    (22)
この推定アルゴリズムの収束性は良好で、10回程度繰り返すと収束します。

【円の半径は?】

推定した円の中心座標と、推定に用いた円周上の各点の距離を求めて平均値を取れば半径が得られます。

【まとめ】

このアルゴリズムはハフ変換と異なり、円の中心座標を求めてから、最後に1回円の半径を求めるだけですので、√の計算回数はとても少なくて済むわけです。
また、ソースを読んでいただければわかりますが、漸化式を行う前に、変化しない部分は先に1回だけ演算しておく等の工夫を行っています。
このアルゴリズムの最大特徴は円周上の点は連続している必要は全くありません。円形マーカーの一部が障害物で隠れていても推定を行うことができます。


【図4】手の円運動のキャプチャのように飛び飛びでも円を推定できる







【図1】円の中心(xc,yc)と弦の中点を通り弦と直交する直線の関係






【図2】公式『直線と点の距離』を説明する図







【図3】推定誤差評価関数Eと未知数xcの関係

【円推定3Dアルゴリズムの理論】
≪斜め方向からの撮影に対応≫

次はKinectのようなデプスカメラによる3次元計測データに基づいて、円形マーカーの中心座標を推定し、そこから半径と法線ベクトルを演算する方法について説明します。
今、円周上に存在する2点の中点を、2点を結ぶベクトルの正規化ベクトルをとします。式(1), (2), (3), (4), (5)が得られます。
    (1)
    (2)
    (3)
    (4)
    (5)
このとき、点を通り、を法線ベクトルとする平面の方程式は次式(6)で与えられます。
    (6)
一般に円周上の任意の弦の中点を通り、弦を法線とする平面は円の中心を面内に含む性質があります。
しかしながら、円周上に存在する2点及びが測定誤差を持つと仮定すれば、式(6)の平面は円の中心を通過するとは限らず、誤差を伴うことが考えられます。
この誤差は距離で次式(7)のように求めることができます。
    (7)
    (8)
円の中心座標の推定誤差評価式Eを最小二乗法を用いて次式(9)とする。
  (9)
ここで、簡単のためにと定義します。
まず、未知数に関してのみ誤差評価関数Eとの関係を考えます。
誤差評価関数Eの右辺を未知数を含む部分と未知数を含まない部分(未知数に関して変化しない定数部分)に分離します。
    (10)
      (11)
      (12)
      (13)
ここで、やや作為的に以下のように定義します。
      (14)(15)(16)
(13)式からわかるように、誤差評価関数Eは未知数に関して放物線になっています。
この放物線は図2に示すように放物線の軸座標で最小値を取っていますので、次式(17)のように未知数を現在値から軸値に変更することで推定誤差を小さくすることができます。
    (17)
他の未知数についても同様の数式処理を施せるので、まとめると次式(18),(19),(20)の漸化式が得られます。
この漸化式を順次数回から10回程度繰り返すことで、円の中心座標を取得することができます。
   (18),(19),(20)
半径は推定した円の中心座標と円周上の各点との平均距離で、法線ベクトルは円の中心から選択2点への2つのベクトルの外積ベクトルの平均値を正規化することにより得られる。

なお、回転角度の読み取りに関しては、【3Dスキャナ向け回転角度の読み取り方法】を参考にしてください。







【図1】円の中心(xc,yc,zc)と弦の中点(xj,yj,zj)を通り弦と直交する平面の関係









































【図2】推定誤差評価関数Eと未知数xcの関係



























【図3】円の半径rと法線ベクトル(a b c)

【Apacheのインストール方法】

http://geocities.yahoo.co.jp/http://web.fc2.comなどの無料でレンタルできるサーバーがありますので
このページで紹介したHTML5+JavaScriptなプログラムは簡単に試すことができると思います。
しかしプログラムをいちいち外部サイトにFTPを使ってアップロードして動作確認を行うのは面倒な作業です。
ご自分のパソコンがWindowsパソコンなら無料のApacheをインストールすれば
外部サーバーを必要としないでスタンドアローンでのテストが可能になります。
以下のようにしてインターネットに接続しなくても3Dスキャナ向け角度検出の体験をすることができます。
以下にインストール手順を説明します。

【Apacheインストール時の表示画面】

ApacheのWindows用インストールプログラムは以下のサイトで入手することができます。
  【Apacheダウンロード・サイトURL】http://httpd.apache.org/download.cgi
Apache HTTP Server 2.0.64にはwindowsで動作するApacheのインストールプログラムがあります。
  ●Win32 Binary without crypto (no mod_ssl) (MSI Installer):
   httpd-2.0.64-win32-x86-no_ssl.msi
  ●Win32 Binary including OpenSSL 0.9.8o (MSI Installer):
   httpd-2.0.64-win32-x86-openssl-0.9.8o.msi
【概略導入手順】
  ① Nextボタンをクリックします。
  ② ライセンスに同意(accept)します。
  ③ Nextボタンをクリックします。
  ④ ドメイン名、サーバー名、サーバー管理者メールアドレスを入力します。
  (公開サーバーにするのでなければ適当に入力しても問題ありません。)
  ⑤ TypicalのままでNextボタンをクリックします。
  ⑥ Changeボタンをクリックしてフォルダをc:\Apache Groupeに変更します。
  ⑦ Installボタンをクリックしてインストールを開始します。
    ⇒⑧のように表示されます。
  ⑨ Finishボタンをクリックします。




【Apache設定手順】

前の節でApacheをC:\Apache Groupに設定すると、C:\Apache Group\Apache2\confフォルダ内に
httpd.confが見つかるはずです。以下のように修正します。
 ① LANに接続して他のコンピュータから使うのであれば、
  一行上の例に習ってそのコンピュータの固定IPアドレスに変更します。
   Listen 80  ⇒ 例:Listen 12.34.56.78:80
 ② サンプルプログラムを置いているフォルダを指定します。
   DocumentRoot "C:/Apache Group/Apache2/htdocs"
   ⇒ 例:DocumentRoot "C:/MyWeb/Uk"
 ③ 上記と同じフォルダを指定します。
   <Directory "C:/Apache Group/Apache2/htdocs">
   ⇒ 例:<Directory "C:/MyWeb/Uk">
 ④ 筆者は*.htmlとせず、*.htmとしています。
   DirectoryIndex index.html index.html.var
   ⇒ DirectoryIndex index.htm index.htm.var
 ⑤ 上書き保存します。
 ⑥ この設定でApacheを起動するため、一旦Apacheを停止します。
  スタートメニューでApacheを探すと、StopとStartが見つかるはずです。
  Stopを右クリックでメニューを出して、『管理者権限で起動』してください。
 ⑦ 同様にStartを右クリックでメニューを出して、『管理者権限で起動』してください。

【使い方】

最新のGoogle Chrome, FireFox, Operaのいずれかを立ち上げ、
例えばC:\MyWeb\UkにWebCamフォルダを設置している場合にはアドレス欄に
  http://localhost/WebCam/Sample.htm
と入力します。
Windows8の場合はスタートメニューがありません。
Modern Style画面の何もない壁紙上で右クリックを行うと
画面右下に下のようなアイコンが表示されるので
クリックすると、横に長い一覧が表示されます。
     
そこを丹念に調べれば、きっと以下のアイコンが見つかるはずです。
     
右クリックしてメニューを出し、『管理者として実行』します。

【その他の注意】

あなたのパソコン上でサンプルプログラムのデモを行う場合には以下のように設定します。

【Javaのアンインストール】

インターネットに接続するパソコンなら悪意のページをアクセスしてウィルスを感染させない様にするためアンインストール推奨です。
なお、JavaとJavaScriptは全くの別物です。

【セキュリティーソフト】

ウィルスバスター、マカフィー、カスペルスキー、RegClean等のソフトは全部アンインストールし、Microsoft社のSecurity Essentialをインストールします。

【Windows7のフリーズ対策】

『Windows7の頻繁なフリーズ現象の原因について』に書いた対策を取って下さい。