みなさん、こんにちは！
omurinです。
今回はhtmlとJavaScriptを使ってARを作成してみました。
ARとは拡張現実のことを示しており、現実世界にCGを出現させる技術のことです。AR技術を用いられている例としてポケモンGOなどがあります。
ARという技術を用いてARパンフレット的なものを作っていこうと思います。
開発する上で使用したもの
テキストエディタ:vscode
レンタルサーバー:ロリポップ
マーカー作成:AR.js Marker Training
パンフレット作成:photoshop
ブラウザ:(iPhoneはsafari,androidはedgeを推奨)
テキストエディタは自分の好きなやつを使ってもらっても構わないです。
テキストエディタが入っていないという人はvscodeをお勧めします。(ライブラリが豊富なため)
レンタルサーバーも必要です。
今回はマーカーを用いてARを作成するため、カメラのついたスマートフォンが必須となります。
スマートフォン（カメラ必須）のブラウザで実行するため、webホスティングサービス(lollipopなど)を利用することが必須となります。
パンフレットの作成にフォトショップを使用します。
パンフレット的なものが作れたらなんでもいいのですがおしゃれなものを作りたいならphotoshopがおすすめです。(adobe stockが便利すぎるため)
ブラウザを使用するのですがiPhoneの場合はsafari、androidの場合はedgeを使用してください。それ以外のブラウザでは動作しない場合があります。
必要なライブラリ
AR.js:マーカーの読み取り及びカメラを使用するために必要。
a-frame:ARを実現するためのCGの表示およびアニメーションを作成するのに必要。
マーカーを作成
マーカーを作成するためにAR.js Marker Trainingを使用します。
ARマーカーの作成手順
- UPLOADボタンをクリックして画像を選択
- DOWNLOAD MARKERをクリックしてファイル名.pattを作成(これがマーカーになります)
- DOWNLOAD IMAGEをクリックしてマーカー画像を作成
基本的な操作は以上になります。
そのほかの機能として画像の枠の調整できるPattern Ratioや画像サイズの調整
もしくは枠の色を変更することもできます。
パンフレットの作成
adobe stockから使えそうなパンフレット素材を手に入れます。
そこに先ほどAR.js Marker Trainingで作成したマーカー画像をパンフレットと合成させます。
adobe stockとphotoshopがあれば簡単にこのようなパンフレットを作ることができます。マーカー画像に設定したのはコーラ、ワイン、コーヒーの3つです。パンフレット作成は以上で終わりです。
使用したソースコード
ソースコードはそんなに難しくないので詳しい説明は省略します。
注意する点としてはファイルの位置関係です。
先ほど紹介したソースコードがindex.htmlファイルです。同じディレクトリの中にsentouki.obj、sentouki.mtlとmarkerフォルダを用意します。
markerフォルダの中にはAR.js Marker Trainingで作成したpattファイルを入れてください。以上で完成となります。
あとはwebサーバー上にアップロードするだけです。omurinはレンタルサーバー(lolipop)を使用し、FTPファイルアプリのFileZillaを使用しました。
実際に遊んでみよう
実際にスマートフォンで利用した写真がこちらです。
実際には真ん中の戦闘機が動いています。
試してみたい人は
ブラウザでhttps://omurin.jp/pgm/WebAR/index.htmlで検索するもしくはこちらをクリックして、パンフレット画像を見てください！
