自分が大学の授業で、制作することになった「WebARアプリの開発」についてお話しします。
あまり、記事を書いたことがないので、お手柔らかにお願いします！
自己紹介
- 某〇〇ゆき、〇〇はげ等のYoutuberを排出する（汗）大学の文学部2年生
- 大学1年生の終わり頃から、Web系企業で受託開発のインターン中
実際に開発したもの
ホログラム
ポータル（擬似オクルージョン）
イメージトラッキング(からの動画表示・再生)
UI関連
本題
授業について
- 今年度の新しく開講された授業
- 日系〇〇人について調べ、日系〇〇人の問題について自由に発表などをするという授業
- そして私たちのグループは、日系ブラジル人と、ペルー人についての発表を行なった
なぜ開発したのか！？
当時、明確な理由があったのかいまいち覚えていませんが、多分こんな感じだったと思います。
先生> 皆さんには、グループを組んでポスターを展示、紹介してもらいます。
友達> 何か面白いものを作りたいね！
自分> そうだね！これとかどう？
友達> 良いね！(（自分くんは）コンテンツ制作をお願い！僕たちはポスターを書くよ！)
自分> お、おっけい。。。（地獄の始まり）
このアプリは何ができるの！？
- ホログラム再生
- ポータル（擬似オクルージョン）
- イメージトラッキング(からの動画表示・再生)
大まかな利用した技術
| プラットフォーム | 言語 | ライブラリ |
|---|---|---|
| 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
4D views
-
8th Wallが幾つかのホログラム制作企業のホログラムとアプリを統合する機能を提供している
- その中でも、4Dviewsだけが、ホログラムのモデル本体と音声ファイルが別々で提供されていた
なので、3Dモデルは4D Viewが無料で提供しているもの拝借
音声を、text to speachなどで作成
ポータル（擬似オクルージョン）
- Pano Fetch
Pano Fetch
-
Google Street Viewのような3次元を再現したい場合は、BlenderGISなどを利用
- しかし、それだと私のような3D制作とは程遠い人からしたら、学習コスト大きい
-
そこで、本アプリではパノラマ写真で代用しました
- 段差などは無理ですが、景色に関しては違和感の無い綺麗な疑似三次元を作れました
イメージトラックングについて
- 特にないです
特にないです
- HTMLにA-Frameを書くだけで、実装できちゃいました
- ターゲット画像の作成は、プロジェクト毎に任意の画像をターゲットにできる機能があったので、それでチョちょっとできました
Github
8th Wallの自分が利用したプランでは、クラウドでの開発しかできなかったので、git等は使用していませんが、一応8th Wallで開発する機会のある方がいれば、今後少しはお役に立てるかもしれないので一応置いておきます！
お世辞にも綺麗なコードとは言えませんが...
総括
- 直前までバグだらけで怪しかったので、なんとか完成して良かったでが、忙しいなか、徹夜を続けたのでストレスが凄かったです（汗）
- ただ、当日の賑わいやユーザーの声を間近で聞いて、疲れが吹き飛ぶぐらい嬉しかったので、良い経験でした（笑）
- 今はパノラマ写真を見るだけで気持ち悪くなるので、少し休みたいと思います（汗）
- お疲れ様です。お休みなさい。。。