🐯

前提知識ゼロで AR 年賀状を作ってみた

2022/01/11に公開

作ったもの

画像認識 + トラッキングで、年賀状の上に 3D モデルが浮かび上がる + 年賀状を動かすと 3D モデルもあわせて動く、という AR 年賀状を作ってみました。3D モデリングとかの経験ほぼ無しでも作ることができたので、使ったツールや手順を紹介したいと思います。

きっかけ

Twitter のタイムラインに画像認識 + トラッキングで年賀状を作った方の Tweet が流れてきました。もともと AR を含む XR は勉強してみたいなと思っていたので、これを機に勉強しつつ真似て作ってみることにしました。

3D 素材の用意

3D オブジェクトは「ポリゴン」と「テクスチャ」との組み合わせで表現されますが、それぞれの勉強から始めると時間がかかりそう。専用ツールも高価な上にパッとつかいこなせそうになく、無料で利用可能な 3D 素材を探しました。ざっと見渡した感じ有力候補になりそうだったのは以下。

この中からトラの 3D 素材を見繕いました。TURBOSQUID は 2D 素材でおなじみの Shutterstock と同じ運営元らしいです。今後このような素材サイトがより充実していくといいですね。

今回は無料で探したんですが、有償のモデルと比べるとポリゴン数が少なかったり、テクスチャがベタ塗りだったりします。選んだのは以下のモデル。

Tiger | CGTrader

Zapper プロジェクトの作成

Zapper という AR プロジェクトをホスティングできるプラットフォームを利用しました。Zapper は Zapworks というプロジェクト管理ツールを提供しており、ここでプロジェクトを作成することで固有の QR コードを発行できます。

Project -> Trigger で QR コードを生成
QR コードは Trigger から作成できる

QR コードとは別に Zapcode というプラットフォーム独自規格のアイコンも発行できますが、今回は利用しません。QR コードが手に入ったら、次は年賀状の紙面をつくります。

年賀状を Zapworks に取り込む

入手した QR コードを含む年賀状をデザインします。ここで作るデザインの上に 3D モデルが浮かび上がるようになります。僕は Illustrator が手元にあったので使いましたが、はがきサイズの画像が作成できるツールであれば何でも良いと思います。デザインが出来上がったら PNG とかで出力しておきます。

実際に送った年賀状は、ここに住所とかを追加して印刷しました

3D 画像を浮かび上がらせ、さらにトラッキングさせるには画像をモデルとして学習させる必要があります。ここからの作業では Zapper が提供する ZapWorks Studio というデスクトップアプリケーションを利用します。ダウンロードして、先ほど Web 版の ZapWoks にログインしたのと同じアカウントでログインし、新しいプロジェクトを空で作ります。

新しいプロジェクトができたら MEDIA LIBRARY の + から Train Image File... というメニューを開き、作成した年賀状の PNG ファイルを選択します。しばらくして学習が終わると TARGETS に .zpt 形式の学習済データが表示されるので、これを画面左の root 直下にドラッグ & ドロップで持ってきます。

すると上記のように 3D プレビューの中に年賀状の紙面が描画されます。

3D モデルを ZapWorks に取り込む

続いて、事前に用意していた 3D モデルを ZapWorks に取り込みます。画面右上の Drag files to import here の欄に .fbx 形式のデータを放り込みます。すると Material を選択するウィンドウが出てくるので、 .png 形式などで用意されるテクスチャの素材を選択します。

これが終わると、画面右の SYMBOL DEFINITIONS の欄に 3D データが追加されます。先ほど年賀状データを root に追加したのと同じ要領で、3D データをモデルに追加します。

すごい位置にすごい向きで配置される様子

おそらく意図しない縮尺・向きでデータが読み込まれるので、HIERARCHY で 3D モデルを選択してから PROPERTIES で Scale や Rotation をいい塩梅に動かして、ちょうど良く年賀状の上に 3D データが表示されるよう調整します。

さらにテキストを追加したい場合は 3D モデルと同じ階層に右クリックメニューから Text を追加し、プロパティを良い具合に編集して配置します。最終形は以下のようになりました。 root を選択した状態で CONTROLLERS の shown / hidden を切り替えると、3D モデル全体の表示 / 非表示をプレビューすることができます。

ZapWorks プロジェクトを Publish する

ZapWorks Studio のメニューから COMMIT を使ってプロジェクトの状態を保存してから(Gitみたいですね) PUBLISH を押すと、プロジェクトを公開することができます。ここまで進めば、あとは冒頭で作成した QR コードから AR を楽しむことができます。ブラウザ内でのカメラ利用を許可すれば、年賀状の紙面が認識された瞬間に 3D モデルが読み込まれるはずです。

来年に向けて

楽しかったので、来年はもっとレベルアップした AR 年賀状を送ってみたいと思います。

素材に頼ることなく、自分で 3D モデルを作ってみる
3D モデルをアニメーションさせてみる
AR モデル内でインタラクションできるようにする(ボタン配置して Web に飛ばしたりできるっぽい)

今年もよろしくお願いします。