WebXR Tech Tokyo #0 聴講してきました．
WebXRに関しては知らないことが多いため，どういうものなのかを知るために参加しました．

f:id:xrdnk:20200427235528p:plain

connpass

YouTube

www.youtube.com

まずWebXRとは何か
A-Frameで日本語フォントを自在にする
[8thWall x three.js] お家で楽しむWebARを作る
Babylon.js Editorを使ったWebXRアプリの開発方法
WEBARを施策で実装してみた所感
HMDをかぶったままでのWebVR開発
Unity WebXR ExporterでVR刺身タンポポを動かしてみた
ブラウザベースのAR/VR動画ライブストリーミングシステムの開発
終わりに

まずWebXRとは何か

WebXR（ウェブエックスアール）とは、ウェブブラウザでデバイスの位置，向き，加速度などの情報を取得するために用いられていたJavaScriptのアプリケーションプログラミングインタフェース（API）である。WebVR Device APIから用途をARまで広げたWebXR Device APIへの置き換えが進行している。

WebブラウザからアクセスするだけでXRコンテンツが体験できる．
URLをシェアするだけでお手軽に他人に体験できるのが強み．
（インストールのプロセスを省くだけで，とっつきやすさは上がっている）

開発プラットフォームはthree.js，A-Frame，PlayCanvas，AR.js，babylon.js，React 360，Amazon Sumerian，Unity，UE4，
対応ブラウザはFirefox，Microsoft Edge，Oculus Browser，Chromeなど．

A-Frameで日本語フォントを自在にする

@studioTeaTwoさんの発表．

Macから発表無理でした。。予定していた資料です。次回はVR ready Windowsパソコンを用意してリベンジします！https://t.co/C0aVhJ8O2q #xRTech #clusterVR
— Tanaka Toshiya (@studioTeaTwo) 2020年4月27日

実際には発表できず…，Macだと無理なのか．

WebXRライブラリはA-Frameを利用

A-Frameは日本語が表示できない問題がある．
それに関する対応手段についてスライドがまとめられている．

docs.google.com

無かったので作って公開しました。

A-Frameの日本語フォントを用意する - Crieit https://t.co/ncyAIAqzVC #Crieit @crieitcommunityさんから
— Tanaka Toshiya (@studioTeaTwo) 2020年4月12日

[8thWall x three.js] お家で楽しむWebARを作る

@a_hanchoさんの発表．

WebXR Tech Tokyo#0にオンライン登壇します！よろしくお願いします！ #xRTech #clusterVR #WebXR

↓ 8thWallとthree.jsで何か作る話https://t.co/L3WxWGPG4b
— 班長 (@a_hancho) 2020年4月27日

[8thWall ＋ three.js] #stayhomeを楽しくするWebARを一から作る from Atsuto Inoue

www.slideshare.net

SNSでバズっている星野源さんの動画にWebARを適用したお話．8thWallとthree.jsを利用している．
8thWallは空間認識が使えて操作が自由にできるということで，WebARライブラリといえば8thWall．
8thWallはA-Frame，Babylon.js，three.jsをサポートしている．今回はthree.jsを利用．

8thWall基盤実装とthree.js実装についての知見が得られた．自分もこちらのスライドを参考に作ってみよう．
Sceneの原点は起動時のスマホの真下で，z軸はスマホ正面方向（＝人の後ろ方向で右手系）なのか．
図が丁寧に書かれていてわかりやすい．

大草原https://t.co/hmzpQGA08Y #xRTech #clusterVR pic.twitter.com/RI6DPPvbnU
— xrdnk (@xrdnk) 2020年4月27日

パフォーマンス問題，iOS13問題がある模様．一筋縄ではいかないか…．

Babylon.js Editorを使ったWebXRアプリの開発方法

@wheettweetさんの発表．

#xRTech #clusterVR #WebXR

本日の発表スライドです。https://t.co/TQ0CzGKrMA
— Limes (@WheetTweet) 2020年4月27日

WebXR TechTokyo #0 in Cluster発表資料 from WheetTweet

www.slideshare.net

デモ内容はこちら．
flushpot1125.github.io

開発ライブラリはbabylon.jsを利用．

#clusterVR で #xRTech 勉強会の参加中！

Microsoft MVP @wheettweet さんによる、
Babylon.js (ばびろんジェーエス) の話だ！

Babylon.js は、Microsoft による、
WebGL フレームワークです！

Web ブラウザでも VR アプリが実行できるよっていう💡https://t.co/MlREYHdc0W pic.twitter.com/FFPfdMNzcy
— ちょまど🎀ITエンジニア兼マンガ家 (@chomado) 2020年4月27日

MicrosoftによるWebGL フレームワークなのか．
babylon.jsでの開発方法が書かれている．最初の一歩として参考になる．

f:id:xrdnk:20200427230331j:plain

WEBARを施策で実装してみた所感

@hinatanana7さんの発表．
バーチャルキャラクターが発表しているのが当たり前に感じるようになってきた…．
アバターと声がかわいくて推せる．YouTubeチャンネル登録したった😊

www.youtube.com

WebAR開発事例について説明

カルビーAR神社！開発ライブラリはAR.jsを利用．
www.juken-ganbare.jp

スナックのASMRを聴くことが出来る．スナック音の永遠と聞けて助かる．
今度かっぱえびせんを買うときにやってみよう．まだやってるかな？

カルビーオリジナル春の顔フィルタ！開発ライブラリはjeelizFaceFilter，A-Frame，Vueを利用．
calbee-ohanami.com

こっちも商品購入したときに確かめてみよう…．あー腹減ってきた．

技術面の課題として，最新機能・安定性のトレードオフ，ドキュメント・情報の少なさが，
施策面の課題として，要素を組み合わせすぎないこと，デジタルだけに偏らないコミュニケーション，
眺める以外の体験が挙げられた．やってみたい体験まで道のりが長いとやる気がなくなるよね．
WebARに関する企画についての知見が得られた．

HMDをかぶったままでのWebVR開発

@wakufactoryさんの発表．

疫病退散の願いを込めて。VR空間でこのパーティクルを浴びると疫病に罹らないとかなんとか。 #OculusQuest #OculusGo のブラウザ、PC-VR(firefox) の #WebVR 環境で見れます。例によってこの動画じゃよくわからんのでぜひVRで。https://t.co/lecXUS8Znj pic.twitter.com/D3ozDh9rEs
— wakufactory (@wakufactory) 2020年4月5日

wakufactory.jp

qiita.com

ライブラリを利用せずにフルスラクッチでWebVR開発…凄すぎィ！

QuestのブラウザでもRemoteDesktopできるのかhttps://t.co/hmzpQGA08Y #xRTech #clusterVR pic.twitter.com/JAhVepTnMI
— xrdnk (@xrdnk) 2020年4月27日

ChromeRemoteDesktopはQuestブラウザでも使えるの頭になかった．
Questv16から追加されたパススルー機能を使えば，リモート先の画面をQuestで見つつ，
パススルーでキーボードをたたく．最高か？スタンドアロン＋BTキーボードの組み合わせも可能．

VR環境プログラミングの可能性を感じさせた．いやーすごい．

Unity WebXR ExporterでVR 刺身タンポポを動かしてみた

@korinVR こりんさんの発表．

本日のスライド「Unity WebXR ExporterでVR 刺身タンポポを動かしてみた」を公開しました！ https://t.co/ekNObSd4ha Questで https://t.co/yMvRRqKO1s にアクセスしてみてください！ #xRTech
— こりん@VR (@korinVR) 2020年4月27日

speakerdeck.com

vrsashimi.com

VR 刺身タンポポWebXR版！Unity WebXR Exporterを利用している．
Unity WebXR ExporterはUnityのWebGL出力をWebXR APIでVRに対応させるようにできる．
Asset Storeでフリーで使える！使い方についてはスライドを参考に行えばできそうだ．
Unity WebXR Exporterの注意点についても言及されているので，参考にします．

assetstore.unity.com

LoadScene使うとVRモード解除されてまう #xRTech #clusterVR
— xrdnk (@xrdnk) 2020年4月27日

ちなみにボクはVR 刺身タンポポ，昨年のUnity忘年会で体験しました．

ハンドトラッキングたんぽぽ体験しました　#Unity忘年会 pic.twitter.com/3QUUsETQKW
— xrdnk (@xrdnk) 2019年12月21日

ブラウザベースのAR/VR動画ライブストリーミングシステムの開発

@AmadeusSVX あるしおうねさんの発表．

本日夜、#WebXR Tech TokyoにてAR/VR向け3D動画配信システムの紹介と、生配信による実演デモを行います！各ARCore対応スマートフォンや、OculusQuestなどの各種ブラウザからAR/VRでデモ体験が可能です！再生方法やブラウザ設定など、詳細については下記URLを参照くださいhttps://t.co/PCYlrCU860 https://t.co/cPKCNDfI4C
— あるしおうね (@AmadeusSVX) 2020年4月27日

github.com

ブラウザベースのAR/VR動画ライブストリーミングシステムの開発！
これはリアルタイムで発表を追えてよかった…．開発ライブラリはthree.jsを利用．