記事概要

先日弊社の初主催イベントであるWebARハンズオンオフラインイベントの第2回目を行いました。
本記事ではこちらのENGINEER MEETUPイベントレポートを行います！

前回同様、今回もフロントエンドエンジニアだけでなく、
サーバーサイドやプランナーの方などConpass以外からの流入と合わせると
多様なバックグラウンドの計9名の方が参加してくださいました。
初心者向けの内容となっており、初めてWebARを触る方でも楽しく開発体験ができたと思います。
後半には、軽食とお酒を囲みながらの交流会も実施しました。

ハンズオン内容

LumaAI×NIANTIC 8th Wallを使ってWebARコンテンツを作成する

前回に引き続き、8th Wallを使用しましたが、今回は新たにLumaAIで
モデルを作成するという実験的な試みを行いました。

LumaAIとは

LumaAIは、NeRF(Neural Radiance Fields)と呼ばれる機械学習モデルを用いて
スマホで撮影した動画から3Dモデルの作成と出力ができる3Dキャプチャツールです。
動画をアップロードするだけでモデルを作ることができる、画期的なサービスです。

公式サイトではLumaAIによって生成されたさまざまな3Dを閲覧するが可能です。

まずスマホからアプリをDLし、ユーザー登録をしていただきます。
ユーザー登録はWebサイト、アプリ、どちらからでも可能です。

オブジェクトをスキャンを開始する

さっそくオブジェクトをスキャンしていきます。当日のスライドを一部抜粋し
掲載させていただきます。
UPLOAD/GUIDED/FREEFORMという3種類のモードがあります。
UPLOADは読んで字のごとく、そのまま手持ちの動画をアップロードするモード、
GUIDEDは小物を撮影するモード。
FREEFORMはその場で立ち上がったカメラで広い空間を撮影するモードです。

オブジェクトのサイズを定義する

撮影のコツ

今回は小物を撮影するのでGUIDEDで撮影していきます。 まず撮影したいオブジェクトの範囲を決めます。 このあとオブジェクトの周りを360度回りながら撮影するため、 一度置いたオブジェクトは撮影場所には注意しましょう。 あまり低い場所に配置すると中腰の時間が長く腰を痛める恐れがあるので ある程度の高さがある場所に配置するようにしておきます。 コツを掴むまではなかなか撮影がうまくいかないため、動きやすい服装が 適していると思います。皆さんかなり奮闘して撮影しておりました。

生成された3DCGモデルを確認する

生成されたモデルをWebサイトのユーザーページから確認していきます。
今回は過去に撮影したお菓子のデータで確認していきます。
矢印ボタンからデータをダウンロードする画面に遷移します。

glbデータをダウンロードする

ダウンロードできるデータ形式は、一般的な3DCGのフォーマットです。
今回は8thWallに読み込みたいのであまりポリゴン数が高いものは適しません。
そのためlow polyのモデルをダウンロードします。
そうすると、テクスチャが同梱されたglbファイルがローカルに落ちてきます。

8th Wallに組み込む

この後の手順は、前回の実装と同様になります。

▼前回のレポートはこちら

補足

Luma AIのデータはlow polyでもものによっては20000ポリゴンあり、
実際にモバイルやブラウザで扱うにはまだ最適なデータとは言えません。
実務で導入するにはリトポロジーやテクスチャのベイクのし直しなど
諸手続きで最適化をする必要があります。

とはいえ、目の前にあるもののデジタルツインをパッと撮影して
すぐにARに組み込み表示できる…すごい時代になったなとわくわくします。

興味がある方はぜひ触ってみてくださいね。

最後に

アンケートでもポジティブなリアクションをたくさんいただけて、
やってよかったなぁとしみじみ感じました。

やはり色々な開発者とコミュニケーションができると刺激になりますね。

弊社では今後もこのようなMEEETUPイベントを期開催していきたいと思っております。
少しでもご興味を持っていただけた方は、ぜひお気軽にご参加ください！