10月31日はハロウィンです。せっかく年に1回のイベントなので雰囲気を楽しみたいですね。
今回はARを使って、サクッとハロウィンを楽しみたいと思います。
完成形
以下のようなハロウィンARを作ります。
実施の流れ
1. ハロウィンっぽい3Dオブジェクトの作成
ARを利用してなにかしらの物体を出現させたい場合、3Dオブジェクトが必要になります。
3D オブジェクトの作成方法としてはBlenderやUnityなどのソフトで作成する場合が多いかと思いますが、私はこれまでBlenderなどのソフトを利用したことがありません。
なんか、簡単に作れる方法ないかな～～っとリサーチをしていると、Monster Mashという画像ファイルを3Dオブジェクトに変換してくれるツールを発見したので今回はこのツールを利用してみたいと思います。
1-1. まずはインプットとなるハロウィン画像を作成する。
3Dオブジェクトを作成するために、まずは元画像となるハロウィンっぽいキャラクターをStable Diffusionを使って作成します。
こちらのデモサイトでそれっぽいプロンプトを入力して、ハロウィンな画像を作成します。
A single halloween pumpkin on floor
A skull witch full body small character, digital art, pop art, anime, pixer
A pumpkin head wizard, full body, simple background, anime, pop art
それっぽい画像の作成が完了したので、これらの画像をARで利用できるように3Dモデル化します。
1-2. 画像から3Dモデルを作成する
Stable Diffusionで作成した画像をARで表示するためにMonster Mashを利用して3Dモデルに変換していきます。
利用方法は非常に簡単です。 画像の取り込み → 枠線を記載 → エクスポートを行うだけです。
アニメーションをつけることもできるようですが、今回はなしで。
画像をファイルアイコンから、import template image から画像の取り込みを行います。
3Dモデルの作成は枠線をなぞるだけで完了です。出力後にBlenderなどでパーツごとの修正を行いたい場合などはいくつかのパーツに分けて記載する方法もあるようです。より詳しい使い方はこちらの動画が参考になりました。
出力された3Dオブジェクトは以下のような感じです。上部や側部は若干色褪せが発生していますが、ここを修正したい場合はBlenderなどに取りこんで質感や色の補填などの編集を行うこともできます（今回は割愛）。
これで3Dオブジェクトの作成は完了です。Macのトラックパッドで頑張って線を引いたので途中で大きく手ブレしていますが、いい感じに出力ができていました。出演者となるキャラクター達全てに上記の作業を行います。
2. 3DモデルをARで出力する
AR.jsを利用して3Dモデルを出力していきます。AR.jsを採用した理由は非常に実行が簡単であるという点です。
HTMLファイルにAR.js特有の記法で記載することで、手軽にARの出力ができます。
公式ドキュメントのAR typesによると、AR.jsには以下の３つのタイプがあります。
今回は、Image Trackingより精度が高いのかな？と思ったのでMarker Trackingを利用してみます。
| Type | 特徴 |
|---|---|
| Image Tracking | 指定した画像を検知したら、3Dオブジェクトが出現する |
| Location Based AR | 特定の位置(経度/緯度を指定)に行くと、3Dオブジェクトが出現する |
| Marker Tracking | 指定したAR.jsが用意しているマーカーを検知したら、3Dオブジェクトが出現する |
マーカーを利用する場合、AR.jsがもともと準備している2種類のPresetのマーカーを使う方法と自分でマーカーを作成する方法の２つがあります。
今回は、３つ出現させたいオブジェクトがあったので両方を利用しました。
Presetのマーカーを使用する場合
公式のドキュメントが参考になりますが、上記実装の以下の部分のように <a-marker preset='kanji'></a-marker> と指定するだけでOKです。該当するマーカーをカメラが検知すると、指定したオブジェクト(以下ではmm_project.glb)が出現します。
<a-marker preset="kanji">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="./assets/mm_project.glb"
></a-entity>
</a-marker>
自分でマーカーを作成する場合
コチラのサイトから作成を行います。
画像をアップロードして、出力されたpattファイルをマーカーとして指定して、同じく出力した画像をカメラが検知するとオブジェクトが出現します。
<a-marker preset='custom' type='pattern' url="./assets/pattern-GO.patt">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="./assets/skull-man.glb"
></a-entity>
</a-marker>
マーカーを利用した実装例は以下です。その他の素材など含めてこちらのリポジトリで公開しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>
<title></title>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker preset='custom' type='pattern' url="./assets/pattern-GO.patt">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="./assets/skull-man.glb"
></a-entity>
</a-marker>
<a-marker preset="kanji">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="./assets/mm_project.glb"
></a-entity>
</a-marker>
<a-marker preset='custom' type='pattern' url="./assets/pattern-HOSHI.patt">
<a-entity
position="0 0 0"
scale="0.2 0.2 0.2"
gltf-model="./assets/pumpkin-man.glb"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
まとめ
以上で完了です。キャラクターの作成、3Dモデル化、AR上での表示まで非常に簡単に行うことができました。
今後の課題としては、当初は５つのオブジェクトを出現させようとしていましたが同時に出現させたい場合、自作したマーカーの場合検知する精度がプリセットに比べてかなり劣りました。
マーカーの作成時に認識しやすい形にするか、Image Trackingを利用すると改善するかもしれないので、次回作成時に試してみたいと思います。
それでは、良いハロウィンを！
Discussion
素晴らしい記事をありがとうございます😆！
これは凄いですね！カメラの位置決めとかどうなってるんだ！？と思いました。
リンクのAR.jsを参照しましたが、ライブラリでここまで出来るとは驚きです。