ブラウザだけでARを実現するAR.jsを使ってAR時計を作ってみよう

-

AR (Augmented Reality, 拡張現実) といえば、昨年大流行したポケモンGOでも使われていたり、最新のiOSリリースでAR機能が強化されたりと、最近では話題に事欠きません。

今回は、そのAR機能をブラウザだけで実現できるJavaScriptライブラリのAR.jsを使って簡単なARを作ってみましょう。

AR.jsとは

AR.jsは、WebGLやWebRTCなどのWeb標準の機能のうえに実現されたライブラリで、アプリをインストールすることなくWebブラウザだけでAR機能を実現することができます。

技術的には、ネイティブ向けのARライブラリであるARToolkitをEmscriptenを使ってJavaScriptに変換するというなかなか豪快な作りになっていますが、使う分にはいたって普通のJavaScriptライブラリとして使用することができます。スマホのブラウザ上でも問題ないパフォーマンスで動作するので、いろいろな応用ができそうな可能性を秘めています。

ARには、画像認識を助ける2次元パターンの「ARマーカー」を使う通常のARと、ARマーカーを使わないマーカーレスARがありますが、現在AR.jsではマーカーレスでない通常のARのみをサポートしているようです。

AR.jsを使ってみよう

今回はそのAR.jsを使って以下のようにARマーカーにデジタル時計をオーバーレイ表示する機能を作ってみます。

なお、ここでは以降の実装にClojureScriptを使いますが、JavaScriptやその他のAltJSの言語でも同じように作ることができます。

AR.jsはJavaScriptから使えるいくつかの3DあるいはVR向けのライブラリ、フレームワークと連携させて使うことができるようになっています。ここではそのなかで、JavaScriptから使える3Dライブラリとして知名度の高いThree.jsと合わせて使う方法を見てみます。

AR.jsをThree.jsを合わせて使う場合、機能分担は次のようになります：

  • AR.jsはWebRTCからの入力を基にARマーカーの位置を特定し、マーカーの中心を原点とする座標系を用意してくれます。この座標系は、カメラの位置や角度が変わってもマーカーを追従するように随時更新されるため、ここにオブジェクトを配置することであたかもそのオブジェクトがマーカーに固定されているように表示することができます。
  • AR.jsで用意した座標系を基に、Three.jsで任意のオブジェクトを配置します。一旦マーカーの座標が特定できればあとはThree.jsで自由にグラフィックを組み立てていくことができます。

AR.jsで提供されている主要なAPIは次の3つです：

  1. THREEx.ArToolkitSource

     (js/THREEx.ArToolkitSource. #:js{:sourceType <source type>})

    ARで使用する入力ソースを指定します。WebRTC経由でウェブカメラを使うことができるほか、画像や動画も入力ソースとして指定することができます。

  2. THREEx.ArToolkitContext

     (js/THREEx.ArToolkitContext. <opts>)

    入力ソースからマーカーを特定する処理をするコンテキストを作ります。ではキャンバスのサイズやカメラパラメータ等の各種設定を指定します。詳しくは 公式ドキュメント を参照して下さい。

  3. THREEx.ArMarkerControls

     (js/THREEx.ArMarkerControls. <context> <marker> <opts>)

    2.で作ったコンテキストをに渡すことで、に指定したオブジェクトを常にマーカーの位置に追従させることができます。により追従するマーカーの情報をします。

さて、ここまで見たところでこの3つのAPIを組み合わせてシンプルなARを作ってみましょう。ARのサンプルとしてよくある、マーカー位置に立方体を表示する例を作ってみます。

コードはこちらを参照下さい： 立方体を表示するサンプルコード

これを実行すると、次のようにマーカー位置に立方体が表示されます：

ARで時計を表示してみよう

ここまでで、AR.jsの基本的な部分は押さえられました。先の例では単純な立方体を表示するだけでしたが、Three.jsを使ってより複雑なARを実現することができます。

ARでデジタル時計を実現するためには何が必要でしょうか？やり方はいろいろ考えられますが、ここでは次のように実現してみます：

  1. 現在時刻を表すテキストオブジェクトを配置する
  2. 配置したテキストオブジェクトを定期的に更新する

現在時刻を表すテキストオブジェクトを配置する

Three.jsでテキストオブジェクトを扱うには TextGeometry を使いますが、TextGeometryを使うにはフォントをあらかじめロードしておく必要があります。

フォントのロードには、FontLoaderを使います。以下のようなコードを書くことで、 にフォントデータをロードすることができます(なお、フォントデータはフォントごとにJSON形式で用意しておく必要がありますが、いつくかのフォントに関してはThree.jsの Examples の中にすでに用意されています。facetype.js を使って自前で作ることもできます)。

■ フォントをロードする処理

(.load (js/THREE.FontLoader.) <path>
  (fn [font]
    ... <ロードしたfontを使った処理> ...))

ロードしたフォントをオプションで指定してTextGeometryを作り、それをThree.jsのメッシュでくるんでやるとテキストオブジェクトを生成できます：

■ テキストオブジェクトの生成処理

(let [geo (js/THREE.TextGeometry. <text> #js{:font font ...})
      mat (js/THREE.MeshNormalMaterial. <mat opts>)]
  (js/THREE.Mesh. geo mat))

配置したテキストオブジェクトを定期的に更新する

TextGeometryで表示するテキストの内容はコンストラクタの第一引数に文字列として指定できるため、現在時刻を文字列にして渡してやれば時刻をテキストとして表現できます。しかし、一度生成したTextGeometryのテキストを後から変更することはできないので、刻一刻と時刻が変化していくのを素直に実現することができません。

そこで、定期的にテキストの内容を更新するごとに新たなテキストオブジェクトを生成し、元のテキストオブジェクトと差し替えることでテキスト内容の更新を実現します：

■ テキストオブジェクトの定期的な更新

(defn update-clock [clock target]
  (when clock (.remove target clock))
  (let [clock' <現在時刻のテキストオブジェクトの生成処理>]
    (.add target clock')
    (js/setTimeout #(update-clock clock' target) 200)))

これらを組み合わせると、以下のように1秒ごと(実際には200ミリ秒ごと)に更新されるデジタル時計として動くことが確認できます：

まとめ

今回はブラウザだけでARを実現できるJavaScriptライブラリであるAR.jsを使って、ARでデジタル時計を作ってみました。

この試みによって以下のようなことが分かりました：

  • AR.jsを使って非常に簡単にブラウザ上にAR機能を実現できる
  • スマホ上でも(ネイティブアプリでなくても)実用的なパフォーマンスでARを動かすことができる
  • Three.js等のライブラリと組み合わせて使えば、好みに合わせて自由にグラフィックを拡張していける
  • ただし、裏を返すとThree.js等の使い方が分からないと好きなように表示させるのはやや難しいかも

また、今回はよくある単なるARのグラフィックを表示するだけのサンプルプログラムではなく、時々刻々と変化する内容を伴った表示をARで実現するサンプルを試すことで、ユーザへ情報提示をする表現方法としてのARの可能性も改めて確認することができました。

今回作ったサンプルプログラムは以下のデモページから実際に確認することができます。その際は、下のARマーカーをあらかじめ印刷しておくか、別の端末で表示しておくように下さい。

コメント

コメントを投稿

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その２

-
イメージ
前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲） ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提（再掲） ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール（再掲） ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作
続きを読む

M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編）

-
イメージ
今回は、においセンサー（TGS2450）から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334（スイッチとして利用） M5StackSideBB（ブレッドボード） M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー（TGS2450）について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二
続きを読む

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その１

-
イメージ
今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript（Typescriptの コンパイル 用） ・phaser（フロントの Javascript 用ゲームライブラリ） ・live-server（ソースを監視してブラウザのページをリロード） ・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする） ・webpack- cli （webpackを コマンドライン で使用するのに必要） 注：各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注： 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ （これから書くプログラムの保存領域）
続きを読む