WebARでVroid(3Dモデル)を出現させてみる

## 概要
この記事はWebARでVroidを出現させてみるチュートリアルです。

### Vroidとは
<img width="1440" alt="スクリーンショット 2019-06-11 21.41.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/ad0cbff6-79c3-1b92-2611-cac7b8fd6e1d.png">

- [無料の3Dキャラクターメイカー「VRoid Studio」](https://www.pixiv.co.jp/news/press-release/article/6518/)

**Vroid**とは**pixiv**が2018年7月にリリースした[Vroid Studio](https://studio.vroid.com/)で作成されたVRMファイル形式の3Dモデルのことです。
モデリングの知識がなくても簡単に可愛いキャラクターを作成できます。
[Vroid Hub](https://hub.vroid.com/)では、有志が作成したモデルがアップロードされています。


### WebARとは
**WebAR**とは、**ブラウザ上でAR(拡張現実)を利用**できるようにした技術のことです。
アプリの場合はユーザが使い始めるためにアプリをダウンロードしなければなりませんが、ブラウザ上で動くWebアプリであれば、手軽にVRを楽しむことができます。

今回は[A-Frame](https://aframe.io/docs/)というフレームワークと[AR.js](https://github.com/jeromeetienne/AR.js)というライブラリを使用して作成していきます。

## 手順
WebARの手順は、以下の記事を参考にしました。

- [あのARをブラウザで体験できる！「AR.js」であそんでみた](https://liginc.co.jp/426106)
- [「AR.js」でオリジナルのマーカーを設定する方法](https://liginc.co.jp/457071)
- [A-FrameとAR.jsで超簡単AR（PC・スマホ・マルチマーカー対応）](https://qiita.com/mkoku/items/c635566e829c303a7d3f)

### 1. 3Dモデルを用意する

<img width="193" alt="スクリーンショット 2019-06-11 21.45.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/19b16dab-4954-aabb-2b78-eb3e14b500af.png">

今回はVroid Hubから[こちら](https://hub.vroid.com/characters/3841471040614751142/models/8257851689213055483)のモデルを利用させていただきます。

**「このモデルを利用する」**ボタンからダウンロードすると**VRM形式**ファイルがダウンロードされます。
このファイルを[公式で推奨](https://aframe.io/docs/0.9.0/introduction/models.html)されている**glTF形式**へ変換します。

VRM形式はglTFをベースにしたフォーマットであるため、
**ファイルの拡張子を`.glb`または`.gltf`へ書き換えるだけ**で変換できます。(便利！)

### 2. マーカーを用意する

[AR.js Marker Training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)で、自作のARマーカーを作成します。
**枠の太さ**を変更するとコード上で指定する必要が出てくるので、ここでは枠の太さは変更せずに作成します。
**「DOWNLOAD MARKER」**と**「DOWNLOAD IMAGE」**のボタンを押して、両方ダウンロードしてください。
`.patt`と`.png`形式のファイルが出力されます。

#### 補足 
![pattern-qr-code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/07730368-307a-3448-e93a-902a58b47b37.png)
このように、QRコードでWebアプリのURLへ遷移させ、ついでにそれをマーカにしてあげると便利です。
手順5でサーバを用意したら、[QR Code Generator](https://ja.qr-code-generator.com/)を利用して自作マーカーの中身をQRコードにしてみるのも良いと思います。

![zootopia_qrcode.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/3b41ccd5-69a7-9ff8-2783-bb85e37ad2c9.gif)
ちなみに、こんな可愛いQRコードが作れるライブラリもあるようです。
[artistic QR Code in Python （Animated GIF qr code）](https://github.com/sylnsfar/qrcode)

また、自作でなくプリセットのマーカーで試すことも可能なので、その場合は上記リンクの他の記事をご参考ください。

### 3. ファイルを作成&配置する
任意のディレクトリにプロジェクトのフォルダを作成します。
そこに、`index.html`というファイルを作成しましょう。
また、`asset`というフォルダを作成し、Vroidのファイルとマーカーのファイルを配置します。

ファイル構成は以下のようになります。
<img width="353" alt="スクリーンショット 2019-06-11 22.11.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d679ad5e-49f9-fe8a-95b7-a7572b4a8846.png">

### 4. コードを書く

先ほど作成した`index.html`に、以下のコードを追加します。
※A-FrameとAR.jsの**バージョンは新しいもの**にしてください。古いものはコードが動作しない場合があります。バージョンはscriptタグの0.8.2などの数字のことです。

```index.html
<!DOCTYPE html>

<head>
  <!-- A-Frame を読み込む -->
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <!-- AR.js を読み込む -->
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head>

<body style='margin: 0; overflow: hidden;'>
  <!-- シーンを追加 -->
  <a-scene embedded arjs="debugUIEnabled:false;">

    <!-- 3DCGモデルの読み込み -->
    <a-assets>
      <a-asset-item id="vroid" src="asset/vroid.glb"></a-asset-item>
    </a-assets>

    <!-- 自作マーカーを追加  -->
    <a-marker type='pattern' url='asset/pattern-qr-code.patt'>

      <!-- 3DCGモデルの呼び出し -->
      <a-gltf-model src="#vroid"></a-gltf-model>

    </a-marker>

    <!-- カメラを追加 -->
    <a-entity camera></a-entity>
  </a-scene>
</body>

</html>
```

### 5. サーバを用意する
自分のPC(localhost)で開発しても良いのですが、携帯でWebアプリの動作確認ができなかったり、マーカを毎回紙などに印刷しないといけなかったりして面倒です。
サーバとして無料のホスティングサービスを利用しましょう。

今回は[Netrify](https://www.netlify.com/)を使用しました。
アカウントを作成して、ファイルをデプロイします。
Netrifyは**Git**と連携できます。毎回ファイルをアップロードしてデプロイすることも可能ですが、Gitを連携させるとコマンドでpushするだけでデプロイしてくれるので便利です。
<img width="1440" alt="スクリーンショット 2019-06-11 22.25.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/81214c43-b4ca-72af-382c-c361f09fdb6b.png">
このURLがWebアプリのURLになります。
起動したカメラにマーカーを映すと、Vroidがマーカの上に表示されます。
![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/42b50624-9b68-a0b6-19e0-10af47b8b1d4.jpeg)

## 最後に
業務でWebARを扱い始めたのですが、以前から興味を持っていたVroidを表示させたいなーと思ってやってみたら意外と簡単にできたのでよかったです。ぜひお試しください。
今後はアニメーションに挑戦してみたいと思います。

記事に間違いや不明な点があれば遠慮なくご指摘ください。