概要

こんにちは、iXIT株式会社の新卒エンジニアの渡邊です。

最近業務の中で、ARを使ったコンテンツ制作ができないか？と話題に上がることが多くなったので手軽にWebARが実装できるAR.jsとA-frameを触ってみました。

冬なので、フリーの素材をお借りしてさくっと卓上スノードームを作ってみることにします。

AR.jsって？

AR.jsは、WebAR開発用のOSS（オープンソースソフトウェア）のひとつです。
jsファイルを読み込むだけで動かせるのでとても手軽にWebARを試すことができます。

AR.jsではマーカーベースのARとマーカーレス（ロケーションベース）のARを実装できますが、今回はマーカーベースの方を利用したいと思います。

3Dモデルの表示

単に3Dモデルを表示させるだけならもはや自分でコードを書く必要すらありません。
なんとマーカー素材と、表示させたい素材をアップロードするだけのジェネレータが用意されています。
https://ar-js-org.github.io/studio/pages/marker/index.html

マーカーの素材にする画像は文字だけでなくイラストでも大丈夫のようですが、コントラストの低い画像、メリハリのない画像だと認識精度に不安が残るようです。
今回はシンプルな文字のマーカーを作成しました。

ジェネレータで生成されたファイルの中身を確認していきましょう。

assets
- marker.patt
- asset.glb　　
index.html

index.htmlの中身はざっくり下記のような構成になっています。
3Dモデルを使用する場合は a-assetsに記載します。画像の場合は不要です。
マーカーで表示させる中身を変えたい時はa-markerの中身をいじっていくことになるかと思います。

a-scene
- a-assets
- a-marker　　
  - 表示させたいオブジェクトをa-entityもしくはa-imageで指定
- a-entity camera

<body>
    <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="[表示する3Dモデルのパス]"></a-asset-item>
        </a-assets>

        <a-marker id="animated-marker" type="pattern" preset="custom" url="[マーカーのpatファイルのパス]"
            raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" id="markerA">
            <a-entity id="bowser-model" scale="0.22015849415137176 0.22015849415137176 0.22015849415137176"
                animation-mixer="loop: repeat" gltf-model="#animated-asset" class="clickable" gesture-handler>
            </a-entity>
        </a-marker>

        <a-entity camera></a-entity>
    </a-scene>
</body>

パーティクルのライブラリについて

スノードームなので雪がなくちゃ始まりません。

AR.jsはあくまでARを実装するためのライブラリ（マーカーの認識など）で、表示するVRコンテンツについてはA-frameがベースになっています。
何か色々エフェクトなどを足したい時はA-frame回りの資料を漁ってみると丁度いいものが見つかると思います。

今回はA-frameのパーティクルのライブラリであるaframe-particle-system-componentを使います。
https://www.npmjs.com/package/aframe-particle-system-component

<head>
<!-- A-Frame パーティクルライブラリの読み込み -->
<script
        src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
</head>
<!-- 略 -->
            <a-marker>

            <!-- 略 -->

            <!-- パーティクル -->
            <a-entity position="0 2.25 -15" particle-system="preset:snow; particleCount: 5000; color: #fffafa,#f0f8ff"></a-entity>
            </a-marker>

headで読み込んだ後、<a-entity> タグで上記のように記述します。
雪はプリセットが存在するので、粒子の数や色だけカスタマイズしました。

動作確認

どうせならスマホのカメラで確認したいですよね。
ローカルで環境諸々整えるのは面倒くさいのでホスティングサービスを利用します。
htmlとjsだけのシンプルなサイトの動作確認だったら、glitchとかがおススメです。
https://glitch.com/

今回作ったスノードームのデモ

https://snowdome-ar-demo.glitch.me/
ページを開くとカメラと端末のモーション感知へのアクセス許可を求められます。
「許可」を押してカメラを下記のマーカーへ向けてみてください。

動きました😊

素材元

3Dモデルはこちらのサイトの無料素材からお借りしました
https://www.cgtrader.com/

最後に

AR.jsに関するデモの記事だと、単一の3Dモデル表示に留まっているので1マーカー=1要素の表示と思っていましたが、触ってみると複数の要素を一つのマーカーで表示させることも簡単にできました。
次は、モデルのアニメーション実装なんかを試してみたいです。
稚拙な記事ですが、ここまで読んでいただきありがとうございました。