前回は…名刺から忍者が飛び出るARを制作
コチラの記事「AR.jsとA-Frameを使ってキャラクターが飛び出すARを作成」に記載のとおり、前回は名刺からキャラクターが飛び出すARをつくってみました。
※AR初心者の私の奮闘を、上記記事にて、ぜひご覧ください。
今回は、ここで得た知見を生かして、メタバース内にARを設置してみたいと思います。
題して…「『アバター！後ろ、後ろ！』をARで作ってみた」です。
用意するもの
➀データを格納する場所（サーバー）を準備する
➁webページへアクセスできるQRコードを準備する
QRコードは「QRのススメ」から簡単に作成可能です。
※この2つは、前回の記事にて詳しく解説をしています。ぜひコチラをご覧ください。
➂飛び出す立体物（イラストでもいいのですが、今回は立体物にしてみました）
今回は「Sketcfab」という無料で使える3Dモデルを集めたプラットフォーム内のモデルを使って、試してみます。
せっかくなので、立体のドーナツを表示させてみたいと思います。
※「【Blender×Sketchfab】Blenderで本棚を改造してみた」の記事の中で紹介をしています。
ここまで用意ができたら、次のステップへ進みます。
ARに必要なデータを作成
「AR.js studio」で必要ファイルを取得
今回は、ARマーカーや必要なコード一式を取得できるツール「AR.js studio」を使用します。とても簡単に使えて、非常に便利なんです。
「AR.js studio」とは？
下記に「AR.js studio」の特徴を簡単に紹介します。
- 無料で使えるブラウザベースのアプリケーション
- 位置やARマーカーをつかったARを作成可能
- ARで表示可能なコンテンツは3D／画像／動画
- 3D：gltf／glb／zip（最大サイズ50MBまで）
- 画像：jpg／png／gif（最大サイズ15MBまで）
- 動画：mp4（最大サイズ25MBまで）
「AR.js studio」の使い方
➀TOPページ
「Marker-based」にチェックを入れて、「Start building」を押す
➁「1.Use a premade marker or upload your own」の項目
・「用意するもの」➁で準備したQRコードを「Upload image」からアップロードする
・アップロードができたら、「Download marker」からダウンロードし、保存する
➂「2. Choose the content」の項目
・「用意するもの」➂で準備した立体物を「Upload file」からアップロードする
・上手くアップロードできると、Viewに表示される
➃「3. Export the project」の項目
・「Download package」より、パッケージフォルダ（ZIP形式）をダウンロードする
※「ar.zip」というフォルダになっています
ここまでが、「AR.js studio」上で行う内容となります。
パッケージフォルダ内のコードを１箇所だけ修正
上記でダウンロードしたパッケージフォルダ「ar.zip」を解凍します。
ここで解凍したファイルの中には、アセットファイルとコードが格納されているのですが、コードの一部が古い情報のため、１箇所だけ修正する必要があります。（決して難しくないので、ぜひトライしてみてください）
パッケージフォルダを解凍すると、「assets」というフォルダと「index.html」が出現しますので、エディタソフトで「index.html」を開いてください。開くと、下記のようなコードになっています。
<!doctype html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
<script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene
vr-mode-ui="enabled: false;"
loading-screen="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
id="scene"
embedded
gesture-detector
>
<a-assets>
<a-asset-item
id="animated-asset"
src="assets/asset.glb"
></a-asset-item>
</a-assets>
<a-marker
id="animated-marker"
type="pattern"
preset="custom"
url="assets/marker.patt"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
id="markerA"
>
<a-entity
id="bowser-model"
scale="0.0105254363187677 0.0105254363187677 0.0105254363187677"
animation-mixer="loop: repeat"
gltf-model="#animated-asset"
class="clickable"
gesture-handler
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
「aframe.min.js」のバージョンを、「1.0.4」から「1.3.0」へ修正します。（黄色の箇所）
ここまでで、準備は完了です。あとは、「用意するもの」➀で用意した、データの格納場所へデータ一式をアップロードしていきます。
サーバーへアップロードするファイルの構成はこんなイメージです。
メタバースへARマーカーを配置
今回は、無料で利用可能なメタバース空間「Spatial」へ配置してみたいと思います。
※「Spatial」については、コチラの記事をぜひご覧ください。
Spatialでの配置は非常に簡単です。「AR.js studio」で作成、保存したARマーカーを設置するだけ。下記の画像のようにARとして表示したい箇所にARマーカーを置くだけで準備は完了です。
※こちらの画像では、ARマーカーを平面に設置するために「Blender」を使って平面へARマーカーを貼り付けています。
あとは、このARマーカーをカメラで映すと…
ブラウザが起動し、無事にドーナツが表示されました。「アバター！後ろ、後ろ！」の完成です。
この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます（記事はコチラ）
