More than 5 years have passed since last update.

【PlayCanvas】WebARで遊ぶ

Last updated at 2017-12-18Posted at 2017-12-18

この記事は PlayCanvas Advent Calendar 2017 の18日目の記事です。

何

iOS 11でもsafariがカメラアクセスできるようになり、カメラアクセスができるターゲットではPlayCanvasを使って簡単にWebARアプリケーションが作れるようになりました
https://caniuse.com/#feat=stream
動画

昔懐かしARToolKitをemscriptenでJavaScriptにしたものを使用してやっています。
まだエンジンに組み込まれているわけではなく、ライブラリを別途アップロードする必要があります。
PlayCanvas AR | Github

公式プロジェクトのAR Starter Kitを見てみるのが一番手っ取り早いです。
[PLAY]をクリックし、実行してカメラアクセスを許可したら、HIROとKANJIをそれぞれ見てみましょう。印刷しなくても、ディスプレイに写すだけでOKです

現状はライブラリ関係のアップロード作業が発生するので、とりあえずAR Starter Kitからforkして開発開始するのが無難です。

マーカー用のエンティティを用意し、arMarkerスクリプトをアタッチするようです。マーカーの登録はPatternにセットします。実行してカメラを通してマーカーを見ると、マーカー用エンティティ配下のモデルがAR表示されます

.pattファイルはただの文字列なので、以下のサービスから独自でマーカーを登録、作成することもできます。
http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html

saveすると.patファイルがダウンロードできます。中身を見てみると正しくパターンと座標に応じた色情報が載っていることが確認できます。

これをPlayCanvasへアップロードすることで独自のARマーカーを設定できます。