やっつけで自分が動くAR年賀状を作ってみた
はじめに
こんにちは！株式会社BTMのy-masuyamaです。
皆さん年賀状って作ってますか？私は友人への生存報告のつもりで毎年作ってます。
作ってみた年賀状のひとつに自分自身をARで動かしてみたものがあるのでこちらを軽く紹介したいと思います。
作成したもの
画質は荒いのですが、以下のような完成品ができました。
(本当は私自身が動いているのですが、動画とかの目線の入れ方がわからず静止画で、、、、すみません、、、)
作り方
大きく分けて以下の手順で作成してます。
- 自分の3Dモデルを作る
- 3Dモデルを読み込ませるコードを作成・公開する
1.自分の3Dモデルを作る
まずは自分自身の3Dモデルを作ろうと思います。
とはいえ自分には3Dモデルの作成の知識がなかったので、なにか方法がないかググったところ以下のサイトが見つかりました。
画像1枚から3Dモデルを生成してアニメーションさせる【pifuhd/mixamo】
上記サイトと同じ手順で、自身の3Dモデルを作りたいと思います。
まず自分の画像を用意する
まずはモデリング化したい自分の画像を用意しましょう。
私が用意したのは下記画像です。
元のサイトによると使う画像は人物の全身が写っている画像で、できるだけ左右対称の姿勢になっているものがいいとのことです。
ちなみに背景はWindowsのペイントで白背景にしてます。
PIFuHDを使って3D化させる
PIFuHDのgithubからGoogleColaboratoryを起動します。
この後はコードを上から順に実行していけばいいのですが、途中でファイル選択ができるのでここで自分が用意した画像を選択します。
なお、画像の形式は下記の注意点にあるとおりPNGかJPEGに対応してるみたいです。
If you want to upload your own picture, run the next cell. Otherwise, go to the next next cell. Currently PNG, JPEG files are supported.
選択したイメージはフォルダの[pifuhd→sample_images]の中に配置されるので、アップロード完了したら配置されたか確認しましょう。
この後はそのまま実行していけば良いのですが、この記事を執筆時点(2025/01/27時点)ではcolabのpythonバージョンが高いため途中で必ずエラーになってしまいます。
そのため、こちらのisuueに記載されている対応(コードの書き換え)を実施しましょう。
そうすれば、Run PIFuHD!の項目までエラーなく実行できると思います。
ここまでエラーなくできていたらフォルダの[pifuhd/results/pifuhd_final/recon]に3Dモデルが作成されているのでこちらをダウンロードしましょう。
ダウンロードしたら、Blenderなどの3Dソフトで確認してみましょう。
下記みたいなオブジェクトができてると思います。
3Dモデルをmixamoで動かす
mixamoにサインアップして作成したオブジェクトをアップロードしてアニメーションをつけましょう。
こちらは特に詰まることないので、下記のサイトと同じようにリギングなどしましょう。
画像1枚から3Dモデルを生成してアニメーションさせる【pifuhd/mixamo】
うまくアニメーションをつけると、オブジェクトが動きます。
(静止画で恐縮ですが、下記みたいな感じです。)
アニメーションに問題なければfbxファイルとして保存します。
3D編集ソフトを使ってモデルを編集する
このままでもいいのですが、もうちょっと人間ぽくしたい人はBlenderとか使ってテクスチャとか貼り付けましょう。
2. 3Dモデルを読み込ませるコードを作成・公開する
ここまでできたらあとは3Dモデルを読み込ませるコードを書きましょう。
今回はQRコードをカメラで読むとサイト読み込み→QRコードをパターンとして3Dモデルが描画
という挙動にしたいので以下の手順でコードを作成します。
静的ホスティングサイトを作成
まずはなんでもいいので静的サイトを作成します。
私はgithub pagesで作成しました。
静的サイトの公開リンクURLをQRコード化
静的サイトの公開したリンクURLをQRコード化しましょう。
github pagesの場合は下記のようなリンクになります。
http(s)://<username>.github.io/<repository>
QRコードの作成についてはいろいろな作成サイトがあるのでググって作ってみてください。
作成したQRコードからパターンファイルを作成
以下サイトを使ってパターンファイルを作成します。
やり方は、左のUPLOADアイコンでで作成したQRをアップロード、そのあとDOWNLOAD MARKERでpattファイルをダウンロードすればOKです。
コードを作成
ここまで来たら作ったpattファイルや3Dモデルをもとにコードを作成しましょう。
今回は簡単にARが作れるAR.jsを利用したいと思います。
ディレクトリ構成
├─models
│ └─<作成した3Dモデルファイル>
├─index.html
└─pattern.patt *作成したパターンファイル
コード
index.html
<html lang="JP">
<head>
<!-- A-Frameの読み込み -->
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<!-- AR.jsの読み込み -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<!-- aframe-extrasの読み込み(glTFのアニメーション再生のため) -->
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v5.0.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<!-- A-Frameのコードここから -->
<a-scene embedded arjs="debugUIEnabled: false;" renderer="gammaOutput: true;" vr-mode-ui="enabled:false" >
<!-- オブジェクトの読み込みここから -->
<a-assets>
<a-asset-item id="model" src="./models/<作成した3Dモデルのファイル名>"></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>
<!-- A-Frameのコードここまで -->
</body>
</html>
作成したコードを静的ホスティングサイトにアップロード
最後に上記で作成したコードをアップロードしましょう。
以上で終わりです。
終わりに
自分が年賀状で動いたら面白いな、というそれだけの思いで作成してみたのですが思ったより作成に時間がかかってしまいました。。。
しかし、ARってめちゃくちゃ面白いですね！
今回学んだことを生かしてさらに面白いものをつくっていこうと思います！
Discussion