ブログ

Blog

やっつけで自分が動くAR年賀状を作ってみた

やっつけで自分が動くAR年賀状を作ってみた

やっつけで自分が動くAR年賀状を作ってみた

tags: PIFuHD AR.js
author: btm_y_masuyama

はじめに

こんにちは！株式会社BTMのy-masuyamaです。
皆さん年賀状って作ってますか？私は友人への生存報告のつもりで毎年作ってます。
作ってみた年賀状のひとつに自分自身をARで動かしてみたものがあるのでこちらを軽く紹介したいと思います。

※なお、作ったのは2023年なので情報が古いかもしれません。

作成したもの

画質は荒いのですが、以下のような完成品ができました。
(本当は私自身が動いているのですが、動画とかの目線の入れ方がわからず静止画で、、、、すみません、、、)

完成例1
完成例2

作り方

大きく分けて以下の手順で作成しています。

  1. 自分の3Dモデルを作る
  2. 3Dモデルを読み込ませるコードを作成・公開する

1. 自分の3Dモデルを作る

まずは自分自身の3Dモデルを作ろうと思います。
とはいえ自分には3Dモデルの作成の知識がなかったので、ググったところ以下のサイトが見つかりました。

画像1枚から3Dモデルを生成してアニメーションさせる【pifuhd/mixamo】

上記サイトと同じ手順で、自身の3Dモデルを作ります。

補足: 以下のような有料でリアルな3Dモデルを作ってくれるサービスもあるみたいです。（使ってみたい）
https://www.real-avatar.com/

まず自分の画像を用意する

モデリング化したい自分の画像を用意します。
私が用意したのは下記画像です。

自撮り画像

人物全身が写り、左右対称の姿勢が望ましいとのこと。背景はWindowsのペイントで白背景にしました。

PIFuHDを使って3D化させる

PIFuHDのGitHubからGoogle Colabを起動。

Colab 起動画面

コードを順に実行し、途中で画像をアップロードします。

画像アップロード

注意: PNG, JPEG に対応。

アップロード後はフォルダ pifuhd/sample_images に配置されます。

ファイル配置

記事執筆時点ではColabのPythonバージョンエラーを回避する必要があり、こちらの対応を行います。

その後「Run PIFuHD!」までエラーなく実行。

PIFuHD実行結果

補足: 「Render the result」は必須ではありません。

生成されたモデルは pifuhd/results/pifuhd_final/recon に出力されるのでダウンロード。

モデルファイル

Blenderなどで確認すると、以下のようなオブジェクトが得られます。

Obj1
Obj2
Obj3

3DモデルをMixamoで動かす

Mixamoにサインアップ後、アップロードしてリギング・アニメーションを付与。

Mixamo結果

OKならFBXでエクスポート。

3D編集ソフトでテクスチャを貼る（任意）

よりリアルにしたい場合はBlenderでテクスチャ貼り付け。

Blender1
Blender2

補足: ソフト毎に手順が異なるため割愛。

2. 3Dモデルを読み込ませるコードを作成・公開する

QRコードをマーカーにして読み込み、モデルを表示させる手順です。

静的ホスティングサイトの用意

GitHub Pagesなどで公開可能な静的サイトを作成。

サイトURLをQRコード化

公開URL（https://<username>.github.io/<repo>）をQR化し、次ステップでマーカー化。

パターンマーカー作成

AR.js Marker TrainingでQRをアップロードし、.pattファイルをダウンロード。

コード作成

AR.js を使った index.html を記述。

<html lang="jp">
  <head>
    <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>
  </head>
  <body>
    <a-scene embedded arjs="debugUIEnabled: false;" renderer="gammaOutput: true;" vr-mode-ui="enabled:false">
      <a-assets>
        <a-asset-item id="model" src="./models/your_model.fbx"></a-asset-item>
      </a-assets>
      <a-light type="directional" color="#FFF" intensity="0.5" position="-1 1 2"></a-light>
      <a-light type="ambient" color="#FFF"></a-light>
      <a-marker preset="custom" type="pattern" url="./pattern.patt">
        <a-entity gltf-model="#model" position="0 0 0" scale="3 3 3" rotation="1 0 0" animation-mixer></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

ディレクトリ構成:

├─ models/
│   └─ your_model.fbx
├─ index.html
└─ pattern.patt

アップロード & 公開

作成したファイルをホスティング先に配置し完了。

終わりに

AR年賀状、思ったより時間かかりましたがとても楽しかったです！
今回学んだ技術で他の面白いものも作ってみます！

参考にさせていただいたサイト

  • https://qiita.com/kotauchisunsun/items/ecf40bfa6c63b9463a9a
  • https://colab.research.google.com/drive/1GFSsqP2BWz4gtq0e-nki00ZHSirXwFyY
  • https://techceed-inc.com/engineer_blog/7988/
  • https://creator-blog.jp/3d-animation-pifuhd-mixamo/

株式会社BTMではエンジニアの採用をしております。
ご興味がある方はぜひ コチラ をご覧ください。

  • SNS
  • 投稿日
  • カテゴリー

    Tech Blog