大学の授業（ポスター制作）でWebARを開発したお話

自分が大学の授業で、制作することになった「WebARアプリの開発」についてお話しします。
あまり、記事を書いたことがないので、お手柔らかにお願いします！

## 自己紹介
- _某〇〇ゆき、〇〇はげ等のYoutuberを排出する（汗）大学の文学部2年生_
- _大学1年生の終わり頃から、Web系企業で受託開発のインターン中_

## 実際に開発したもの
##### ホログラム
<iframe width="70" height="240" src="https://www.youtube.com/embed/1Kn98NlS0I0" title="qiita_hologram" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

##### ポータル（擬似オクルージョン）

<iframe width="70" height="240" src="https://www.youtube.com/embed/Nm2ODKVZ5x0" title="qiita_portal" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

##### イメージトラッキング(からの動画表示・再生)
<iframe width="70" height="240" src="https://www.youtube.com/embed/kTn956ESD_E" title="qiita_image_tracking" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

##### UI関連
<iframe width="70" height="240" src="https://www.youtube.com/embed/0eQCRRWWqwc" title="qiita_top" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 本題
#### 授業について
- _今年度の新しく開講された授業_
- _日系〇〇人について調べ、日系〇〇人の問題について自由に発表などをするという授業_
- _そして私たちのグループは、日系ブラジル人と、ペルー人についての発表を行なった_

#### なぜ開発したのか！？
当時、明確な理由があったのかいまいち覚えていませんが、多分こんな感じだったと思います。

>先生> _皆さんには、グループを組んでポスターを展示、紹介してもらいます。_
友達> _何か面白いものを作りたいね！_
自分> _そうだね！<a target="_blank" href="https://www.youtube.com/watch?v=8Uta3XOd4Ps">これ</a>とかどう？_
友達> _良いね！(（自分くんは）コンテンツ制作をお願い！僕たちはポスターを書くよ！)_
自分> _お、おっけい。。。（地獄の始まり）_

## このアプリは何ができるの！？
- _ホログラム再生_
- _ポータル（擬似オクルージョン）_
- _イメージトラッキング(からの動画表示・再生)_

## 大まかな利用した技術
|プラットフォーム|    言語    | ライブラリ  |
|:-----------:|:-----------:|:------------:
|8th Wall     | Typescrip  | React      |
|| Javascript | A-Frame    |
||            | Three.js   |
||            | MUI        |

### 選定理由
##### プラットフォーム
- _似たようなAR作成を行えるプラットフォームはいくつかありますが、クロスプラットフォームで動いて欲しかったので、8th Wallを選定しました。_
- _他にはGoogleCoreやARkitなどのUnityといったツールを使用するプラットフォームもありましたが、私はUnityなどの3D制作系ツールを使ったことがなかったので断念しました。_

##### 言語&ライブラリ
- _最初はそもそも作れるのか分からないぐらいのレベル感だったので、ペラいちで始めましたが、後々機能追加したくなってReactを使用したプロジェクトに移行しました。_
- _8th Wallの自分が利用していたプランでは、クラウドでの開発しかできなかったので、なくなくこの構成にしました。_

## 実際に開発してみた感想
色々ときつかったです（汗）
具体的には...
- _ARについての学習と8th Wallに辿りついた時点で発表まで残り一週間_
- 怒涛の期末試験ラッシュ
- インターンなどの課外活動
- etc...

特に消耗したのが、
- _コンテンツの内容考案_
- _アプリ上でのテキスト、ロゴ、写真、素材等々集め_
- _疑似三次元上の距離感や位置関係の調節等々_

をグループの友達に頼みましたが、
> どうすれば、それをできるのか？？？
あ、これ向いてないかも...

といった具合だったので、諦めて全て一人で行ったことです。(T ^ T)

# 各コンテンツ内で利用した他のサービス
## ホログラム作成
- _4D Views_
- _Text To Speach_

##### <a href="https://www.4dviews.com/">4D views</a>
- _8th Wallが幾つかのホログラム制作企業のホログラムとアプリを統合する機能を提供している_
    - _その中でも、4Dviewsだけが、ホログラムのモデル本体と音声ファイルが別々で提供されていた_

なので、3Dモデルは4D Viewが無料で提供しているもの拝借
音声を、text to speachなどで作成

## ポータル（擬似オクルージョン）
- Pano Fetch

##### <a href="https://chrome.google.com/webstore/detail/pano-fetch/ggmfokbjchlhboclfngkneflhkopebbh?hl=en-US">Pano Fetch</a>
- _Google Street Viewのような3次元を再現したい場合は、BlenderGISなどを利用_
    - _しかし、それだと私のような3D制作とは程遠い人からしたら、学習コスト大きい_
- _そこで、本アプリではパノラマ写真で代用しました_
    - _段差などは無理ですが、景色に関しては違和感の無い綺麗な疑似三次元を作れました_

## イメージトラックングについて
- _特にないです_

##### <a href="https://www.8thwall.com/">特にないです</a>
- _HTMLにA-Frameを書くだけで、実装できちゃいました_
- _ターゲット画像の作成は、プロジェクト毎に任意の画像をターゲットにできる機能があったので、それでチョちょっとできました_
# Github
8th Wallの自分が利用したプランでは、クラウドでの開発しかできなかったので、git等は使用していませんが、一応8th Wallで開発する機会のある方がいれば、今後少しはお役に立てるかもしれないので一応置いておきます！

お世辞にも綺麗なコードとは言えませんが...

https://github.com/sshd911/8thwall-react

# 総括
- 直前までバグだらけで怪しかったので、なんとか完成して良かったでが、忙しいなか、徹夜を続けたのでストレスが凄かったです（汗）
- ただ、当日の賑わいやユーザーの声を間近で聞いて、疲れが吹き飛ぶぐらい嬉しかったので、良い経験でした（笑）
- 今はパノラマ写真を見るだけで気持ち悪くなるので、少し休みたいと思います（汗）
- お疲れ様です。お休みなさい。。。

##### ...ということで、ここまでお読みいただいた皆さんありがとうございました！＞＜
##### 良いねやコメントいただけると嬉しいです！(๑╹ω╹๑ )