しばらく見ないうちに、JavaScriptでもARできる時代か。

  • このエントリーをはてなブックマークに追加
  • 0

js-arucoというのを、今更ながら見ている。
これは、JavaScriptだけでIDマーカーベースのARを実現するライブラリで、5×5のNyIDマーカーと大体同じことが出来る。しかもJavaScriptなのでプラグイン不要だし、Android端末(Nexus 5)上でも動いた。
(iPhone 5はJavaScriptのカメラ取得API「getUserMedia」に対応していないのか知らんが、動かん)

例えば、jsdo.itに、以下のようなサンプルがあり、その気になれば3Dモデルを表示することも可能のようだ。
ちなみにこれは別に俺が作ったわけではない。本当は真っ先に作りたかったくらいだが。

(この例はMicroGLというライブラリの関係で、Chromeでしか動かないようだ。Firefoxでは駄目だった。)

と言う事で、非実在法人クウソウのロゴをマーカーに出来ないかと試してみたが、そのままだと無理だったので、3つ程マーカー化案を作ってみた。

案1.640
案1.赤メインの改造

案2.383
案2. 白メインで一工夫

案3.1023
案3.周りをマーカーっぽく囲んだだけ

各案の番号横にある数字がIDだ。このうち案3だと、ほぼ真っ白と変わらないというのが欠点だ。
あと、この一番外側の赤も大事で、これの外側を白とかにする必要があり、そこが要改善点だと思う。

ところでこのjs-arucoだが、ライブラリ中のコアであると思われる「aruco.js」内のhammingDistanceという関数に、見つけるべきIDを直接書くという荒業を使っている。みんなは、ここを書き換えてね!ってことなのか?しかも、このIDがどんなマークかの説明も、特にない。(上記の、jsdo.itで使っているマーカーがそうだ。)

AR.Detector.prototype.hammingDistance = function(bits){
var ids = [ [1,0,0,0,0], [1,0,1,1,1], [0,1,0,0,1], [0,1,1,1,0] ],//←ここね。
dist = 0, sum, minSum, i, j, k;

for (i = 0; i < 5; ++ i){ minSum = Infinity; for (j = 0; j < 4; ++ j){ sum = 0; for (k = 0; k < 5; ++ k){ sum += bits[i][k] === ids[j][k]? 0: 1; } if (sum < minSum){ minSum = sum; } } dist += minSum; } return dist; }; [/js] ちなみに、どんなマーカーでもとりあえず見つかったことにし、IDを見たい、という場合は以下のgetMarker関数内の、nullを返すif文を消してやればよい。勿論、この場合回転を考慮したID付けをしないので、そこは注意が必要だ。 [js] AR.Detector.prototype.getMarker = function(imageSrc, candidate){ ・・・ if (0 !== pair.first){ return null; } [/js]

スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク