ノーコードでARマーカーでアバターを動かしたお話

こんにちは！
野球好き、ちなヤクのりまきです。
熾烈な最下位争いをしています。決して消化試合はしてませんよっと。

非エンジニアなので、できるだけコードを書きたくない！！
もはや執念だけでノーコードで出来ることを探して辿り着きました。
今回はノーコードでheroマーカーを使ってアバターを表示するまでにしたことをまとめてます。
私のモチベーションは野球なので野球場で遊びたい一心だけで作っています。

## 野球が好きすぎてAR試合に参加したくなる
野球への愛が止まらない。
より没入感を感じで、より選手の気持ちになりたい。

もっと野球で感情を揺さぶられて、選手と一体感を感じたいと思うようになりました。

私の分身をグラウンド上に表すにはどうしたらいいのか。。。

VRだとバーチャルなのでリアルな体験はできない。
だとしたらARじゃないか！？

ARでグラウンド上に私を表示させて試合に参加させるプロジェクト開始！！

## 目次
[1. 3Dアバターを作成する](#1-3Dアバターを作成する)
[2. 3Dアバターに動作をつける](#2-3Dアバターに動作をつける)
[3. ブラウザでARを動かす](#3-ブラウザでARを動かす)
[4. 動作確認](#4-動作確認)
[5. おわりに](#5-おわりに)

## 1.3Dアバターを作成する

AR、VR初心者なので、アバター作成も苦戦すると思いましたが、素晴らしいアプリ発見しました。

https://in3d.io/

スマホで撮影するだけで3Dアバターが作れます。
スマホを固定して撮影するだけです。とってもカンタンです。

https://x.com/n0rimaki_san/status/1826460206622278051

全身撮影するには、ある程度広い場所の方がいいです。

https://x.com/n0rimaki_san/status/1826465415746506951

完成したらアプリ内で遊べます。

https://x.com/n0rimaki_san/status/1827607807933456837

神宮球場に連れて行きました！

## 2. 3Dアバターに動作をつける

in3Dでは私がしたい動作はないため、動作をつける必要があります。
守備と走る、タッチするを実現したい。

こちらも神システムがありました。
adobeのシステムでアバターと動作どちらも無料で使用できます。
自分の作ったアバターもインポートできます。

https://www.mixamo.com/

### in3Dからアバターをエクスポート

mixamoで使用するアバターをin3Dアプリからエクスポートします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/37266f29-68b1-72c8-bdd7-230ffa060070.png" width=30%>

エクスポートできるのは3種類です。「FBX」を選びます。
エクスポートの場所を選びます。zipファイルでエクスポート！

### mixamoにアップロード

ダウンロードしたzipファイルそのままアップロードします。
アップロードするとアバターが表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/275e79e6-031e-0447-730c-d01b2d42135a.png" width=50%>

### 動作を選ぶ
野球の動作はピッチャー、キャッチャー、バッター、アンパイアはあったのですが、野手がないので攻守交替で走る動作にしました。

動作が決まったらダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/0a69026c-2185-6077-7452-41417309eb65.png" width=50%>

気を付けないといけないのは、"Skin"は "WithSkin" にしないと使うシステムによってはアバターが透明になります。

## ブラウザでARを動かす


参考にしたのはコチラの記事です。

https://qiita.com/dsudo/items/58718e9e3c870e6b92e6

### 3Dモデル形式を変換
3Dモデル形式をFBXからglTFに変換する必要があるとのこと。

記事ではコード書いてますが、GitHubさえ分からないのでコード書くのは諦めて、FBXからglteに変換するジェネレーターを見つけました。
いくつか試した中で一番よかったのがコチラです。
zipファイルでダウンロードできます。

https://www.3dpea.com/jp/convert/FBX-to-GLTF

### Ar.js studioで作成
AR.js Studioはオープンソースの WebAR 作成プラットフォームです。
Web 画面からの操作だけで WebAR アプリケーションが作成できます
そのまま GitHub にホスティングすることもできます
ロケーション・ベースとマーカー・ベースに対応しています。

https://ar-js-org.github.io/studio/

今回はマーカーで動かしたいので、Maker-basedを選択。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/255703eb-3e17-ecfa-fc69-2bad89af728c.png" width=50%>

マーカーはPhotoshopで作ったものを使用しました。ファイルをアップロード。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/f8dd69fc-6503-c0fc-9ef1-e9d9309f29de.png" width=50%>

アバターは変換したzipファイルをアップロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/73e6a4fd-ca53-2e74-802c-e648a70fb532.png" width=50%>

Downlolad packageを選択してダウンロード。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/0b904da3-a9cb-bf2d-e19c-e802932d11b1.png" width=50%>

以下のファイルがはいっています。

```
ar
├── assets
│   ├── asset.gltf
│   └── marker.patt
└── index.html

1 directory, 3 files
```
### A-Frameの最新化

A-Frame のバージョンを最新化した方がいいとのことで、index.htmlをメモ帳で開いて修正します。
1.0.4 -> 1.6.0　に修正して保存

### 全ファイルのアップロード
すべてのファイルをサーバにアップロードすると完成です。

## 4.動作確認

マーカーを表示するデバイスとWebAR 画面を表示するデバイスが必要です。

QRコードをカメラで読み取ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/7e064a97-bbac-0801-01b4-06e01ce09584.png)

カメラをの利用を許可してください。
カメラをマーカーに向けるとアバターが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784193/ea0f22fd-a330-a58a-365f-50bca74ab5fd.png)

### アバターの角度を変更できるようにする
【追記】
アバターがマーカーに垂直にしか表示できなかったので、アバターの角度を変更できるようにしました。
A-FRAMEの rotation の以下のコードをHTMLファイルに追記

<a-entity rotation="45 90 180"></a-entity>

角度は色んな角度を試しましたが、どの数字いれても大差なさそうです。

## 5.おわりに

ノーコードでARアバターができました！
途中四苦八苦しましたが、こうしてまとめると次から迷わずできそうです。

非エンジニアのみなさんも是非ARアバター作って遊んでみてください！

### クラウドファンディングチャレンジしてます🔥

https://camp-fire.jp/projects/777756/preview?token=aef70jzu&utm_campaign=cp_po_share_c_msg_mypage_projects_show

ARアバターで試合に参加するプロジェクトをしています。
是非お気に入り登録お願いします🤩