WebAR Tokyo 01に参加してきた

これは [Three.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/threejs) の13日目の記事です。
昨日 [WebAR Tokyo #01](https://webar-tokyo.connpass.com/event/156371/) に参加してきたので、その会のレポートです！（内容は緩めです）

# WebAR Tokyoとは
ざっくり言うとWebARに興味あるヒト全てのコミュニティーです！
WebARに興味のあるエンジニア、デザイナー、ディレクターはみんな集まれ！という感じの場になりそうですね。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">WebAR TOKYOができました🎉🎉<br><br>このたび私と <a href="https://twitter.com/kinnikujst?ref_src=twsrc%5Etfw">@kinnikujst</a> さんで<br>WebARのコミュニティー<br>「WebAR TOKYO」を立ち上げました！<br><br>WebAR TOKYOは職種問わず、WebARに興味のあるすべての人のコミュニティーです！<br><br>▼connpassグループ<a href="https://t.co/Qrc5qx8Bxl">https://t.co/Qrc5qx8Bxl</a><a href="https://twitter.com/hashtag/webartokyo?src=hash&amp;ref_src=twsrc%5Etfw">#webartokyo</a> <a href="https://twitter.com/hashtag/webar?src=hash&amp;ref_src=twsrc%5Etfw">#webar</a></p>&mdash; Damien / Arisa Ito (@saharu54) <a href="https://twitter.com/saharu54/status/1177554328522936320?ref_src=twsrc%5Etfw">2019年9月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今日は初回という事でどんな人が集まるのか、どんな内容が良いのか手探りしつつ、ガチな内容にせずに様子見な感じでした。ちなみに参加者はエンジニア9割、ディレクター1割だった。
LTの人は業務でWebARを触ってる人ばかりだったので、色々とWebARノウハウがためになりました。

ハッシュタグは [#WebARTokyo](https://twitter.com/search?q=%23WebARTokyo&src=typed_query)ですでにtogetterにまとめられてます（仕事早い！）

- [【簡易まとめ】#webartokyo # 01](https://togetter.com/li/1442091)

# 前節
まずはWebAR会を立ち上げた[Damien](https://twitter.com/saharu54)さんが軽快なトークで場を仕切ってくれました。
この方、SNSで見てみたら[VR個展](https://www.facebook.com/events/417523905598664/)してたり結構アーティスト寄りな方ですね。

WebAR Tokyoの目的としては、以下のような感じらしいです。

- WebARに興味あるヒト全てのコミュニティ
- WebARの市場を活性化させる
- WebARの関わってるヒト同士の交流を促す

会場となった`XR-Hub Cafe`は11月にオープンしたばかりでアットフォームな感じでした。写真だとこんな感じです。

XR-Hub Cafe入り口
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f31353032382f39326165376337612d323030632d323032612d393231302d6561373865353530613462372e6a706567.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/49d3fd61-d985-5b42-aa31-e0bdd61d0e01.jpeg)


内部はこんな感じ
![adcal0-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/3c97eb8a-63ea-ca3b-ceea-733dd9a05799.jpeg)
XR-Hub CafeはAR/VRクリエイターのための無償スペースとのこと。

- [XR-Hub Cafe公式サイト](https://x-garden.co.jp/xr-hub-cafe)

機材もOculus QuestやHoloLens、Looking Glassも置くらしいので凄く良いスペースですね！

# オープニングトーク
登壇者：[ikkou](https://twitter.com/ikkou)さん
資料を公開してくれてるので、そちらをご覧ください。

- [The past and future of WebAR](https://speakerdeck.com/ikkou/the-past-and-
future-of-webar-the-webxr-device-api-was-shipped-in-chrome-79)

主に、WebARのユースケースやWebXR Device APIの解説をしてくれました。
11/28に公開してたCITIZENのARライブデモも見せて頂きました。

[「シチズン時計」の新サービスは「AR」の試着体験](https://tabi-labo.com/293166/wt-citizen-ar-try)

他にもARの種類の話（location based ARとVision based ARの違い）や、WebARで環境マッピングできる未来を聞いて夢が拡がりました。`8th Wall`や`model-viewer`のARの話などなど（ちなみに`model-viewer`は[Three.jsの作者](https://ricardocabello.com/)が開発に関わってますね）
あとWebXRロゴがドラフトであるのを初めて知りました。
<img width="602" alt="スクリーンショット 2019-12-13 0.50.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/d7b339cb-a3ba-7f92-24b5-389fc1471cc7.png">
iOSにてモーションデータが取得できず、激震が走った話を熱く語られてました！


# LT1：一泊二日 （社内合宿）で8th Wall Webに入門してみた
登壇者：[のぶさん](https://twitter.com/mininobu)

資料が公開されてるので、そちらをご覧ください。

- [一泊二日 （社内合宿）で8th Wall Webに入門してみた]((https://speakerdeck.com/mininobu/bo-er-ri-de8th-wall-webniru-men-sitemita))

所属はウルシステムズ株式会社（コンサルティングの会社、先端技術やデータアナリティクスなど）でWebARとの出会いは、2018年1月にAR.jsを触ってたそうです。
8th Wallが流行ってきて、8th Wall ImageTargetで画像マーカーで遊んでみて、ARポトフを作ってみた話でした（ガスコンロを認識したら、ポトフ鍋を表示する）
![ELlQCecUEAAlaL8.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/75dac079-374d-576b-909d-63b11e28db80.jpeg)

ちなみに8th Wallは10月後半からOnline Edtiorが提供されていて使えるらしいです（有償）
自分もVueやReact対応予定は知ってましたが、Online Editorを使ってる人の意見を聞けて、開発しやすそうな印象を受けました。
のぶさんいわく、個人研究の結果でAR認識用の画像は背景を透過しても認識してくれるらしいです。
また、マニュアルが改訂になって、Quick Start Guideが2つあって困ったという話もレスポンス早い会社あるあるだなと思いました。

# LT2：約1年半WebARに取り組んできた苦難
登壇者：[えいしさん](https://twitter.com/kinnikujst)

こちらはLT資料がまだ公開されていないですが、ざっくりと以下の感じです。

- 株式会社palanの会社代表（Web制作の会社）
- [palanAR](https://palanar.com/)というサービスを12月に提供した

2017年ぐらいからReact360を触っていた方で、スライドもWebARで斬新でした。
2017年当時はWebARの情報がなかった＆売り上げもなかったそうです。
最近は毎日ARのお問い合わせが何件もきていて、売り上げUPしてるそうです！（芸能事務所とか依頼がきたり）

iOSは動画系の対応が厳しかった事や透過対応の仕方、JSシングルスレッドで認識の瞬間重くなってラグったりなどなど、現場ノウハウに少し闇を感じましたね。

「AR.jsでも誤認識が多いです。閾値をとるとか色々と工夫しましょう！」という言葉が印象的でした。
今後は、社内でOSSを立ち上げて巻き込んでいきたいそうなので、ぜひ応援したいですね！
懇親会で話してみたら、まだ設立4年目で20代中心の若い会社みたいです。

以前からFigmaやReact360でぐぐって[ブログ](https://bagelee.com/)を結構みていたので、情報発進に積極的で素晴らしい。

# LT3：ここがつらいよ8th Wall
登壇者：[はんちょさん](https://twitter.com/a_hancho)

こちらもLT資料がまだ公開されていないですが、ざっくりと以下の感じです。

- 鎌倉で面白い事をやる会社のエンジニア（今はフリーランス）
- 横浜みなとみらいでlocation baseのイベントをやってる（NIGHT SYNC YOKOHAMA）
- 2ヶ月間8thWallコンテンツの開発を行い、先月アプリ公開した
![ELlU9_vU0AE_oxR.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/fd80585f-2732-e1ab-3b2a-10c67cbabe9a.jpeg)

- [横浜のナイトアートプログラムでWebARの特別演出を実施中](https://www.moguravr.com/night-sync-yokohama2019/amp/?__twitter_impression=true)

8thはiOSでfpsが遅い（30fpsぐらい）らしいです。
コンテンツ制作にもう一人エンジニアがいてポストエフェクトなど重い処理を試したらFPSがやばい...。
ポストエフェクトはさけるべき、Cannon.jsなども物理演算も重いので避けるべきという知見を得たそうです。
iOSのバージョンごとにエラーを回避するコードを書かれていて、これもまたiOSの闇が深いなと感じました。
![ELlWPIrUUAE2AAy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15028/8f9b7840-8693-d789-b960-d431a162abf5.jpeg)

# 最後に
今回は参加者20名ぐらいだったと思いますが、色んな人と話せて楽しかったです！
ikkouさんにお借りして、話題のOculus Questのハンドトラッキングも初めて体験して感動しました。次回はLTとしてぜひ参加したいと思います。

# 参考
-  コミュニティを立ち上げたDamienさんのアドカレ
 -  [bagelee - WebARの本質的価値を考えてみる](https://bagelee.com/webar-vr/webar-value/)
- はんちょさんの[[8thwall]必要な画面(ローディング・エラー)まとめ](https://qiita.com/atsuhan/items/e9ad164739148e435564)