WebAR TOKYO #01 登壇資料 https://webar-tokyo.connpass.com/event/156371/

1. ~ 制作時につまずきそうなこと四選 ~
はんちょ (@a_hancho)
ここがつらいよ

2. 今日話すこと
● 2か月間8thWallコンテンツの開発を行い、先月公開した
● 制作中、
「WebAR(もしくは8thWall)、まだまだ辛いな...」
と感じたことと対処法を話す
● 半分全職能向け、半分エンジニア向けの内容

3. 自己紹介
● 名前
○ はんちょ (@a_hancho) 、井上敦登
● 経歴
○ 大学 : OculusやHoloLensで音の広がりを見る研究をした
○ 鎌倉の某企業 : Webフロント => Unityエンジニア
○ 今月から : フリーランスでARのお仕事
● 趣味
○ 釣り

4. NIGHT SYNC YOKOHAMA
● みなとみらいエリアを同調させるアートプログラム
● 「プロジェクションマッピング × WebAR」の特別演出
● 12/27まで、18:00~21:00の1時間刻みで公開中！
新港中央広場(赤レンガの前の公園)、コスモワールド、大さん橋にARマーカーがあります

5. パフォーマン
ス
空間認識の精
度
エラーハンド
リング
画像保存バグ

6. 最初から重い
● アプリARの場合
○ 30、60fpsが基本
○ Apple曰く、
「60fpsは、拡張現実アプリケーションに理想的なスピード」
➾ 8thWallの場合
何も3Dモデルを出していない状態で、15~30fps

7. 演出を入れるとさらにもっさり
● 検証
○ 3000ポリゴンのGPUパーティクル
○ ドローコール数1
○ Bloomのポストエフェクト
● 結果
○ iPhoneX : 22fps
○ iPhone8 : 18fps
○ iPhone6s : 8fps
○ Xiaomi MiMix3(Snapdragon 845) : 18fps
○ Xperia Z1(Snapdragon 800) : 13fps

8. 対処法
● 極力シンプルなコンテンツにする
○ 3D演出が画面全体を覆わない
○ ポストエフェクトや物理演算などの明らかに重い処理は避ける
● 動作保証端末を見直す
○ 一般的なWeb制作の例
■ iPhone5S以上、購入時Android 4.4 以上
○ NightSyncYokohama
■ iPhone8以上、Android 8.0以上

9. パフォーマン
ス
空間認識の精
度
エラーハンド
リング
画像保存バグ

10. マーカー認識の精度
● 検証結果(マーカーの認識しやすさによって変動)
○ 距離
■ 画面幅の1/2くらいマーカーが収まれば認識
■ 幅1mマーカーなら、3m先くらいからいける
○ 角度
■ 30度くらいから3Dモデルがカクカク
● 結構良いのでは

11. 空間認識の精度は...
● ざっくりと目の前の平面だけ認識している
● スマホを回転させる動きはOK
○ モーションセンサーを使用しているため
● 横・縦方向の動きは微妙
○ 3Dモデルが一緒についてきてしまう
○ 10m移動すると2~6m 移動している感じがする

12. 対処法
● 多少ずれても問題ない内容にする
● ユーザーが大幅に移動しなくて良い内容にする
● ユーザー側を誘導する
Spider Verse AR

13. パフォーマン
ス
空間認識の精
度
エラーハンド
リング
画像保存バグ

14. 大量のエラー画面
OS、バージョンによって出すエラー画面が異なるので厄介
まとめ記事を書きました : https://qiita.com/atsuhan/items/e9ad164739148e435564

15. iOSのモーションセンサー関連エラー
iOS11以下
XRExtrasのloadingModule
に記述あり
iOS12
デフォルト設定で出る
loadingModuleに記述あり
iOS13
必ず出る
LoadingModuleに記述がない
参考 : ikkouさん : iOS 12.2で半ば終わったWebVRとWebARがiOS 13でどうなったか
ikkouさん : iOS 12.2でWebVRとWebARが半ば終わった件について

16. iOS13のエラーを変更したい
● モーションセンサー有無を確認
window.addEventListener('devicemotion');
● iOS13の時はエラー表示
if (XR8.XrDevice.deviceEstimate().os === 'iOS')
if (XR8.XrDevice.deviceEstimate().osVersion.startsWith('13')) {
● ボタンにモーションセンサーアクセス許可してもらうイベントを貼る
https://qiita.com/ikkou/items/5197b78d69fb6198b4d8

17. パフォーマン
ス
空間認識の精
度
エラーハンド
リング
画像保存バグ

18. iOSでimg要素を長押しすると...
● 画像は長押しで保存してもらうのがセオリー
理由 : iOSのa要素download属性が、
「別タブで画像表示」になってしまうため
● しかし、iOS13だと映像が真っ暗になる
● iOS12でも強く押すと真っ暗
=> 3DTouchが悪い子だ！

19. 対処法(iOS12以下)
● ある圧力値を超えたらタッチ機能を防ぐ
引用 : @katsuya_Uさん iPhone Safariでimg要素の3DTouchを無効にし、かつ長押しで保存できるようにする

20. 対処法(iOS13)
● a要素download属性でダウンロードできるようになった！
=> img要素をa要素で囲おう
● 写真アプリとは別の場所に保存されてしまう点は注意

21. 四選以外の課題
● PCで開発できない問題
XR8.runを後からするとPC上で見えることがある...？(検証中)
● 画質をさげてフレームレート向上を図ったが失敗した
getUserMediaがこちらでは取得できなかった
● ローカルサーバー接続するとiOSが無限リロードしはじめて開発しにくい

22. まとめ
● アプリに比べて技術的制約は多い
● iOSがいろいろなところで厄介
● それでも8thWallに期待せざるを得ない
● 8thWallは日々アップデートしてくれている
● 8thWallに問い合わせるとすごい速度で返事をくれる
● 広告業界にいると、興味を持ってくれるクライアントさんが多い