【本サイトのご利用指針】
当サイトは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で記述されていますので、ソースはテキストです。各サンプルプログラムをご覧ください。
今後、右のような円形マーカーで楕円推定を行うことにより回転角度、法線ベクトルの検出もできるように改良を行う予定です。

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

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

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

【題　　名】㉕『Azure Kinectと距離画像センサの測距原理、３Dセンサの応用』
【副　　題】～Azure Kinect(Kinect v4)のTime of Flight方式、RealSense(D415, D435, SR305) のStructured Light方式、LiDAR等、非接触生体センシングの原理とその応用まで～
【開催日時】2020年6月18日(木)　⇒　2020年9月1日(火)　10：00～17：00
【会　　場】オームビル
【受講料】47,000円(税別、１名)　59,000円(税別、１口・３名まで)
【開催履歴】
　　(1)2013年05月24日　(2)2013年08月30日　(3)2014年02月07日
　　(4)2014年06月20日　(5)2014年08月29日　(6)2014年11月28日
　　(7)2015年03月18日　(8)2015年07月10日　(9)2015年11月06日
　　(10)2016年03月17日 (11)2016年4月14日　(12)2016年07月14日
　　(13)2016年11月02日 (14)2017年03月24日 (15)2017年07月7日
　　(16)2017年11月02日 (17)2018年03月13日 (18)2018年5月28日
　　(19)2018年8月29日 (20)2018年12月5日 (21)2019年4月12日
　　(22)2019年7月17日 (23)2019年10月30日 (24)2020年2月7日
【概略内容】
　Azure Kinect(Kinect v4)は2019年7月に北米・中国で発売開始され、2020年3月に日本でも発売予定が決まった。デプスカメラの視野角もWFoVモードで120度、解像度は1024×1024画素となった。SDKはオープンソースであり、C言語ベースのDLL、C++ラッパー、C#ラッパーを備える。360°マイクロフォンアレイの他、３軸加速度・ジャイロセンサも備える。これまでのゲーム機用モーションキャプチャセンサではなく、工業用、健康見守りなどの本格的な応用を視野に入れたものとなっている。
　近年、自動車分野では、自動運転化を実現するための探索センサとしてだけでなく、搭乗者の健康状態モニタやユーザーインターフェースとしても、距離画像センサを組み込んだ３Ｄセンサにも関心が集まっている。
　また、世界的な先進国少子高齢化を踏まえ、2025年開催予定の大阪万博のテーマは『健康と医療』に決まり、病院または老人ホームだけでなく、独居老人見守り・看取りやスマートホームとしてのシステムに対する関心も高い。
　本セミナーでは距離画像センサとカラーカメラを組み込んだ３Ｄセンサの基本機能、ソフトウェアで実現できる応用事例をデモを通して紹介するとともに、方式別に測距原理の説明を行い、非接触生体センシングを中心とする応用とその原理について解説を行う。また、Shannonのチャンネル容量の法則を利用した増感処理やマッチング処理の原理や応用についても触れる。
■その他、SDKのセットアップや基本的な事例の資料は添付、あるいはサンプルプログラムのダウンロードができます。

Microsoft社のAzure Kinectの内部構成図


高解像度デプスイメージの例 (Kinect V2)


iPhone6で撮影したカラーJPEG画像から真皮層内毛細血管や皮下組織内の血管を可視化した事例など

【最新版】【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.jp/ARMarker/Marker2.zip
【サンプルページ】
●エッジ検出のサンプル
　http://www.neo-tech-lab.jp/ARMarker/NTL3D_AR5.htm
●距離測定サンプル
　http://www.neo-tech-lab.jp/ARMarker/NTL3D_AR6s.htm
●拡張現実サンプル（回転するピラミッドを表示） 　http://www.neo-tech-lab.jp/ARMarker/NTL3D_AR7s.htm
●移動履歴を残すサンプル
　http://www.neo-tech-lab.jp/ARMarker/NTL3D_AR8s.htm
【参考】
JavaScriptだけで３次元グラフィックスを表示するNTL3d.jsのサポートページ
　http://www.neo-tech-lab.jp/Canvas
『【トラ技メルマガ】『俺センシング　 円形マーカー』【Augmented Reality】』

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

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

【円に関する基礎知識】

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

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

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

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

【円の半径は？】

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

【まとめ】

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


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






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






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







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

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

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

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






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









































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



























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

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

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

【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の頻繁なフリーズ現象の原因について』に書いた対策を取って下さい。