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

概要

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

Vroidとは

無料の3Dキャラクターメイカー「VRoid Studio」

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

WebARとは

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

今回はA-FrameというフレームワークとAR.jsというライブラリを使用して作成していきます。

手順

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

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

今回はVroid Hubからこちらのモデルを利用させていただきます。

「このモデルを利用する」ボタンからダウンロードするとVRM形式ファイルがダウンロードされます。
このファイルを公式で推奨されているglTF形式へ変換します。

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

2. マーカーを用意する

AR.js Marker Trainingで、自作のARマーカーを作成します。
枠の太さを変更するとコード上で指定する必要が出てくるので、ここでは枠の太さは変更せずに作成します。
「DOWNLOAD MARKER」と「DOWNLOAD IMAGE」のボタンを押して、両方ダウンロードしてください。
.pattと.png形式のファイルが出力されます。

補足

このように、QRコードでWebアプリのURLへ遷移させ、ついでにそれをマーカにしてあげると便利です。
手順5でサーバを用意したら、QR Code Generatorを利用して自作マーカーの中身をQRコードにしてみるのも良いと思います。

ちなみに、こんな可愛いQRコードが作れるライブラリもあるようです。
artistic QR Code in Python （Animated GIF qr code）

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

3. ファイルを作成&配置する

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

ファイル構成は以下のようになります。

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を使用しました。
アカウントを作成して、ファイルをデプロイします。
NetrifyはGitと連携できます。毎回ファイルをアップロードしてデプロイすることも可能ですが、Gitを連携させるとコマンドでpushするだけでデプロイしてくれるので便利です。

このURLがWebアプリのURLになります。
起動したカメラにマーカーを映すと、Vroidがマーカの上に表示されます。

最後に

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

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