WebARで有名な8thWallに関する勉強会がありました。私はWebARはあまり試したことがないので、最近の動向を知りたくて参加しました。
せっかくなので、聴講した発表について簡単にまとめてみました。
1. 8th Wall Tech Talk Japanとは?
公式サイトの説明を引用します。
JavaScriptでリッチなWebARの表現可能なライブラリを提供する、8th Wall。
最近Niantic社が買収したことでも知られる同社ですが、そんな8th Wall話題を中心に、WebARについてお話しするイベントです!
様々な方をお招きして、8th Wallの利用シーンや、利用するメリット、開発の流れなどをお話しいただきます!
ARに興味がある!という方から、すでにガッツリ開発している方、エンジニア、ディレクター、デザイナー、マーケター…役職を超えてどなたでも歓迎です!お気軽にご参加ください!
引用元:8th Wall Tech Talk Japan - connpass
WebAR TOKYOによる主催です。
当日はYouTubeライブでの配信で、私が視聴内では110人前後の方が視聴されていました。
2. 勉強会の内容
2.1 About 8th Wall, recently released features and the future of WebAR
発表者:Joel Udwinさん (Niantec)
日本語字幕付きの発表でした。
・8thWallの概要を説明
・8thWallは、服飾 (例: Ancy)、飲食 (例:ドミノピザ) などでも活用されている
・8thWall内のDiscovery Hubでは色々なコンテンツを見られる
■8thWallの新しい機能
・デジタル広告の配信
・Ready Player Me (アバター作成サービス) との連携
・4DVIewsとの提携により、Volumetric Video の簡単な再生が可能に
・Absolute Scale (実寸でAR表示) 機能
■8thWallとメタバース
・AR/VR対応した (=Metaversal Deployment)
・より開発を手軽にするために、Starter Plan ($9.99/month) を新しく発表
・LightSip VPSも導入。Lightshipについて興味がある方は、6/24開催のLightship Summitに参加してほしい
Lightship Summit | Spring 2022
2.2 Recent Feature Topics on WebAR
発表者:HEAVEN ちゃん @ 6/6 8th Wall Tech Talk Japan (@ikkou) | Twitter
8thWallの情報補足と、iOS15.5のWebXR Device API対応状況を説明
■スタータープラン
- これまでは$99のPro+月額$1,250のCommercial Licenseが必要
- 今後は非商用であれば月額$9.99のみで使えるようになった
- Plus プラン ($49/month) であれば独自ドメイン、PWA対応などがOK
■Payment API
- 8thWall Payment APIによる収益化が可能に!
- 課金型コンテンツを作ったとき、Stripe (カード決済方法) で決済できる仕組み。課金されると1-7日だけアクセスできるコンテンツを提供できる
- キャッシュで管理されているので、決済に使った端末のみ使用可能になる
手数料は20%+ 30セント
今は決済通貨がUSDのみ。受け取り口座も米国の銀行
■Lightship VPS for Web
Niantecが提供するVPS ソリューション = Lightship VPS
これのWeb版で8thが Lightship VPS for Web
Lightship Summit Japan 2022で詳細が発表されるかも?
■iOS15.5におけるWebXR Device APIが引き続き動かない
iOS15.4でExperimental FeaturesにWebXR Device API関連のフラグが追加されたが動作していない。
もしかしたら今夜のWWDC2022で何か発表されるかも?
■WebXR Device APIの新しいモジュール「WebXR Capture Module」が登場
しかし、まだ詳細はでていない
■GCP (Google Cloud Platform) でImmersive Stream for XRがPublic Preview版でリリース
GCPでクラウドレンダリングすることで、ブラウザベースのWebAR描画を高速にできるかもしれない
2.3 物体検出MLxWebAR
所属:クラウドサーカス株式会社
AR関連製品にCocoAR、LESSARがある
物体検知ML × WebAR
資料で紹介した「物体検知ML x WebAR」アプリはこちらになります。(Android Only)https://t.co/S0Ah6h6G66#8thWallTechTalkJapan pic.twitter.com/oBYkRu9oRs
— すぎどん (@sgidon) 2022年6月6日
画面を検知して物体を認識したところにARで花を咲かせる
ブウラザでの制約 →ARKit/ARCoreなどを使えない。センサも使えない場合が多い
今回の実装の仕組み
物体検知を実行 (Tensorflow.jsのcoco-ssd modelを使用)
→画面上の位置特定 (Boundix Boxを取得して計算)
→画面上の位置から空間上の位置を特定 (Raycasterで特定)
→AR表示
感想: ブラウザでの物体検知について、予想よりもレスポンスが悪くなかった。実用に耐えられそう
2.4 VolumetricVideoを8thwallで使ってみた
発表者:あきごろう (@Akigoro_XR) | Twitter
所属:株式会社x garden
x-garden.co.jp
Volumetric Video (VV) とは?
人やモノなどの被写体を多数のカメラを使って全方位で撮影し、被写体そのものを3Dコンテンツとしたビデオ
今回は、VVデータを8thWallをつかってWebARコンテンツにした
■実装手順
・Tetaviで撮影、レンダリング、VVデータを出力
・VVデータをWTETConvert.exeでmp4とtvmファイルに変換
・mp4とtvmを8thWallのTetaviサンプルプロジェクトに入れる
参考
TETAVI 製品ページトップ|Crescent,inc
■開発で学んだこと
・uploadできるファイルサイズは100MBまでなので、最大60sec程度のVVしか載せられない
・8thWallのサンプルプロジェクトが優秀。ファイルを配置するだけで開発コストを大きく下げられる
2.5 Web AR プロモーション/キャンペーンの開発チップス
発表者:IVAN@AR × Marketing (@van_eng622) | Twitter
所属:株式会社 OnePlanet
WebARのメリット・デメリット
メリット
・インストール不要
・自由度高くアプリ構築ができる (アプリストアの制約を受けない)
デメリット
・使用できる機能が限られる
・トラッキング精度が落ちる
8thWallの良い点
・トラッキング機能が豊富、精度が高い
・サンプルプロジェクトが豊富
・インフラ構築、ホスティングの工数を削減できる
よくない点
・商用利用の場合、pricingが高い
・全てをコードで実装する必要がある
■開発のtips
①XR Extraを積極的に使おう
・WebARを提供する際に必要な汎用的機能をまとめたライブラリ
・ユーザがサポートされているデバイスやブラウザを判別して、それに応じた画面やメッセージ表示
・AR読み込み中のloadingアニメーションを表示
・モーションセンサやカメラ使用の許可を確認するダイアログを表示
・ ただしXR Extraを使って表示される画面の言語は英語→日本語訳などが必要
web/xrextras at master · 8thwall/web · GitHub
②position, rotation, scaleの調整が大変なので、モデリングソフトで工夫しよう
コード記述でposition, rotation, scaleを調整するのは大変
モデリングソフトで原点を調整してから出力して、コード調整の手間を削減
③モデルの容量はできるだけ小さくしよう
モデル容量が大きすぎたこともあり、以下の問題が発生
・シーンを結合したらブラウザがクラッシュ
・iOSをアップデートしたら体験できなくなった
明確な原因はわからず、モデル毎のテクスチャ解像度を圧縮して容量を削減
読み込むモデルの総容量が一定値を増えると問題が発生するようだった
2.6 WebARライブラリの比較と8th Wall開発チップスの紹介
発表者:ささぱん (@sasapanchama) | Twitter
所属:株式会社palan
WebARライブラリ + 3D描画ライブラリ = WebARコンテンツ
WebARライブラリの例
■AR.js
基本的な機能はいろいろある。ロケーションベースARも提供。しかし、曲面精度×、トラッキング精度×
■MindAR MindAR | mind-ar-js
曲面精度は▲
■8thWall
曲面精度、顔認識、平面認識などがすべて●。LightShipVPSによるロケーションベースARもある
8thWall開発tipsの紹介
■似ているマーカーの設定方法
似ているマーカーをそのまま登録すると、誤認識が発生する (4つのマーカにすべて「GAME」という文字が入っていると全部一緒とみなされてしまうことがある)
→そのマーカ特有の部分を3つ以上切り抜く
■商用プラン変更時は早めに連絡しよう
商用利用のときは基本使用料とライセンス料が必要になる。変更の1週間くらい前に連絡するのがおすすめ (すぐに変更できないため)
■self hostingの際にlocalhost設定は避けよう
localhostではなく、Browsersync設定のExternalURLで設定すると不要なトラブルを回避できる
3. おわりに
8thWallだけでなく、WebAR関連の開発Tipsや、MindARなど知らなかったOSSもあって勉強になりました。8thWallはBabylon.jsでも使えるようになっているので、機会見つけて試してみようと思いました。