Help us understand the problem. What is going on with this article?

【PlayCanvas】WebARで遊ぶ

More than 1 year has passed since last update.

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

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

仕組み

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

とりあえず始める

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

作ってみる

環境構築

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

設計

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

ARマーカーの登録

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

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

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

utautattaro
世界中の端末で自分の書いたコードを走らせることが夢です
https://utautattaro.com
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away