この記事の目的

AR.jsの記事は既に良い記事が沢山ありますが、初心者にとってはわかりにくそうだな〜と思う箇所が散見されたので、プログラミング未経験でも「AR作ってみたい！！」という人のために記事を書いてみることにしました。
超初心者向けに書いてますので、もっと詳しく知りたい方は他の方の記事を参照してみてください。

AR.jsについて

ARには色々な種類がありますが、ここで扱うのは「マーカー型AR」という、QRコードのようなマーカーを読み取ってARを表示するというものです。3DSにあったあれです。
AR.jsは簡単にいうとARのマーカーを読み取れる専用カメラをブラウザで起動させるプログラムです。
イメージとしてはこんな感じ。

AR.jsとAFrameというフレームワークを利用します。

今回の開発・実行環境

macOS Mojave（なんでもいいです）
iPhone8（iOS11以上、Androidは5.1以上）
VSCode（エディタならなんでもいいです）
（必要であれば）Blender2.8

手順

1.ARマーカーを作る

こちらのページで、ARを表示するためのマーカーを作ります。

枠の色や枠の中の画像など、簡単に弄ることができます。

いい感じに作れたら、ページ中央の**「DOWNLOAD MARKER」と「DOWNLOAD IMAGE」**をクリックします。
「DOWNLOAD MARKER」からは拡張子が「.patt」というファイルが出力されるので、それを新しく作ったフォルダに格納します。

「DOWNLOAD IMAGE」から出力された「.png」ファイルはカメラで映す被写体として必要になりますので、カメラとなる端末以外のパソコンやスマホに保存するか、紙に印刷してください。

2.3DCGモデルを用意する

※自分でモデルを作らない場合、このステップは飛ばして構いません

今回はBlenderでなめこを作ったので、なめこを表示させることにします。

ここではBlenderの詳しい操作方法については省略しますが、適用しているモディファイア（ミラー、細分割曲面etc）は全て適用した状態にしておきます。

テクスチャはUVEditingタブ/Texture Paintingタブから使っているテクスチャを選んで、「画像」→「パック」から紐づけをしておくといいと思います。

完成したらglTF形式でエクスポートします。Blender2.8だと標準の機能でできます。一般的と思われるobj+mtlだとマテリアルは読み込まれるのですがどうしてもテクスチャが読み込まれなかったので…（解決策ご存知の方は教えてください…！）

エクスポートしたglTFモデルやモデル作るときに作ったテクスチャは先ほど作ったWebARフォルダの中にモデル用のサブフォルダを作っていれます。

念の為blendファイルなども入れてます。その方が編集もしやすいので。

3.コードを書く

VSCodeでフォルダを開き、index.htmlというファイルを作成します。

とりあえずindex.htmlに以下のコードを貼り付けてみましょう。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intial-scale=1">
        <title>WebAR</title>
    </head>
    <body style="margin:0px; overflow:hidden;">
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

        <a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
            <a-assets>
                <a-asset-item id="nameko" src="./nameko/nameko2.glb"></a-asset-item>
            </a-assets>
            <a-marker preset="custom" type='pattern' url="pattern-marker.patt">
              <a-entity gltf-model="#nameko" scale="0.2 0.2 0.2" rotation="-20 0 0" animation-mixer></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

たったこれだけのコードでARが出せるようになります！

コードの意味や改良の仕方は5.で説明します。

4.コードが動くようにする

書いたコードを実際に動かすためには、サーバーにアップロードする必要があります。
Netlifyという無料ホスティングサービスを使うと簡単にコードを動かすことができるようになります。

サイトを開いてログインしたら、一番下の「Drag and drop your site folder here」にフォルダ（この場合はWebARフォルダ）ごとドラッグ＆ドロップします。

するとフォルダがサーバーにアップロードされ、URLが発行されるので（黄色い下線部）、このURLをスマホに送ります。

スマホでこのURLを開くとカメラが起動するので、1.で保存したマーカーのpngファイルを読み取ります。

なめこが生えてきました！！！！！

5.コードを改良する

3.で書いたコードをそれぞれ解説していきます。パラメーターなど色々弄ってみてください。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intial-scale=1">
        <title>WebAR</title>
    </head>
    <body style="margin:0px; overflow:hidden;">
~
</html>

ここは、htmlというファイルを表示するときに必要なものだととりあえず覚えておいてください。

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

AFrameとAR.jsというライブラリをそれぞれ外部サイトから読み込み、使えるようにしています。

<a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
~
</a-scene>

A-Frameのコードの最初に書くものです。この説明より下のコードは、<a-scene>タグの中に書きます。
後ろの方に書いてあるものはあまり気にしなくていいですが、AR.jsのデバックとA-FrameのVRボタンを非表示にしています。

<a-assets>
  <a-asset-item id="nameko" src="./nameko/nameko2.glb"></a-asset-item>
</a-assets>

3Dオブジェクトを登録しています。idで名前をつけ、srcでは3Dファイルの場所を指定しています。（場所指定については「相対パス」というワードで検索）

<a-marker preset="custom" type='pattern' url="pattern-marker.patt">
  <a-entity gltf-model="#nameko" scale="0.2 0.2 0.2" rotation="-20 0 0" animation-mixer></a-entity>
</a-marker>

<a-marker>で、読み取るマーカーを指定します。presetのデフォルトは"hiro"なのですが、今回はカスタムでARマーカーを作成したためpresetは"custom"になります。urlに、1.で作った「.patt」のファイル名を書きます。このタグの中に記述したオブジェクトが、マーカーで表示されるようになります。
<a-entity>は、先ほど登録したglTF形式の3Dオブジェクトをマーカーに表示させるためのタグです。<a-assets>で登録した3Dオブジェクトのid(nameko)の先頭に#をつけてgltf-model="#nameko"と指定しています。scale、rotationで大きさや角度も指定できます。
テキストを表示させたいときは<a-text>、画像を表示させたいときは<a-image>など他にも色々なタグがあります。

<a-entity camera></a-entity>

最後に、webカメラを呼び出します。

コードを更新したいときは、先ほどのNetlifyの画面下部にあるProduction deploysをクリックして、同様にフォルダごとドラッグ＆ドロップします。

プログラミング未経験者のためのAR.js