前回に続き、参加させていただきました。いつも通り、全講演の内容を紹介します。
1. WebXR Tech Tokyoとは？
これまでこのブログでも何度か紹介したxRTechTokyoと同じく、@ikkou さんが主催されています。以下、公式HPの説明を引用します。
xR Tech Tokyo は「発表」だけでなく個々の開発者/クリエイターによる「展示」にも重きを置いています。
この「展示」に関しては xR と言えど物理会場なし有意な体験を得ることが難しいのが実情です。そのため、昨今の新型コロナウイルス感染症の流行を鑑み、当面の間は xR Tech Tokyo の開催を見合わせています！
そこで当面の間はブラウザさえあれば体験可能な WebXR ( WebVR, WebAR ) に特化した WebXR Tech Tokyo を、バーチャル空間のイベントスペースである cluster を会場として開催します！
引用：https://vrtokyo.connpass.com/event/181759/
会場の様子です。
XRに関する勉強会は多数ありますが、私の知る限りこのイベントでは毎回100人近くの参加者がいる規模の大きなものです。上の画像では、描画負荷を抑えるため一定人数以上のアバターが表示されていません。そのため少ないように見えますが、実際は参加者が200人を超えていました。
また、connpass上のxR Tech Tokyo登録メンバーは前回よりも増えていました。
2019/2/17 (14回目) ：2042人
2019/4/20 (15回目)：2173人
2019/6/23 (16回目)：2324人
2019/8/18 (17回目)：2493人
2020/4/27 (0回目 @ cluster) ：2794人
2020/6/29 (1回目 @ cluster) ：2948人
2020/8/24 (2回目 @ cluster) ：3193人
過去のイベント内容はこちらを参照ください。
【2019/3/16講演スライドリンク追記】xR Tech Tokyo #14 で聴いた講演内容をまとめてみました - CrossRoad
【2019/8/18更新】平成最後のxR Tech Tokyo #15 の全講演をまとめてみました - CrossRoad
A meetup report : highlight of xR Tech Tokyo #15 in Japan - CrossRoad
【2018/6/26更新】令和最初のxR Tech Tokyo #16 の全講演をまとめてみました - CrossRoad
【2019/8/28追記】xR Tech Tokyo #17 の全講演をまとめてみました - CrossRoad
【2020/5/5追記】WebXR Tech Tokyo #0 の全講演をまとめてみました - CrossRoad
WebXR Tech Tokyo #1 の全講演をまとめてみました - CrossRoad
2. 講演
2.1 Three.jsで大学をVR化した
発表者：@xR_Hamamatsu
静岡大学の「静大xR同好会はまりあ」による発表です。
先日発表されていた、VRで大学全体が体験できる「静岡大学バーチャル情報学部」の作り方の紹介です。
・開発から本公開まで２ヶ月程度
・GitHub Pagesを採用 (容量無制限、組織単位で管理したので今回の開発メンバーが卒業した後も更新可能のため）
・3D部分はThree.jsで描画、2D部分はdiv要素を重ねてCSSで位置指定
・Blender用のアドオン「Blender-osm」を使って、OpenStreetMapのデータを取得
Blender-osmの導入方法、使い方については、以下の記事が詳しかったです。
・モデルは118,300ポリゴンまで調整
・Three.jsをWebXR対応するため、WebXR polyfillを使って対応
・スマートフォンではバーチャルパッドを自前で準備した
・ソースコードはMITライセンスでGitHubで公開
2.2 xRブラウザを作っている話
発表者：@ohomagic
xRブラウザ[WebXR Tech Tokyo #2].pdf - Google ドライブ
HoloLens2で複数のアプリを起動したいが、Unityでその方法が提供されなかったので、自分で作ってみたというお話です。
実現のため、HoloLens2のWebブラウザを使用し、A-frameベースのWebアプリを複数起動させるという方法を取られています。
Metaverse (メタバース) よりも現実に近いところという意味を込めて、Orthoverse (オルソバース） と名付けたそうです。
以下、特徴です。
・A-Frameベースで記述してアプリを作れる
・「Lua」というスクリプト言語を使用
・インターネットの「昨日」とXRの「表現」をつなぐインターフェース
2.3 2か月で軽率にWebARフェイスフィルターを作ってみた
発表者：@ninisan_drumath
WebARで試着ができるサービス「Faciop」のプロトタイプを開発されたお話です。
一番の問題はWebブラウザでface trackingができるのか、ということで、調べた結果TensorflowのFacemeshを使ったそうです。
実際に作ったものはGitHubで公開されています。
デモ動画はこちらで公開されています。管理画面から作られており、ECサイトでメガネを選び、Face Trackingで自分が試着したような体験ができます。
2.4 WebXR Hand Input (ハンド トラッキング) 入門
www.slideshare.net
@ms_yuharaさんはマイクロソフトでEdgeブラウザ、Internet Explorerの技術サポートを担当されている方です。前回のWebXR Tech Tokyoでも発表されています。
今回は、WebXR Hand Inputに関する紹介です。W3Cによる標準化の策定中で、詳しい説明はこちらにあります。
・Babylon.jsで試されてたとのこと
・WebXR Had Input対応ブラウザは、Oculus Browser 10.2以降、 Firefox Reality for HoloLens2 (2020/8/24時点)
・ハンドトラッキングの精度は高い印象。「つまむ」なども可能
・両手をくっつけるとトラッキングできない
2.5 jsが分からないのでUnity WebXR Exporterで自前ゲームをWebにアップしてみた話
発表者：@busido90
WebXRを使うためには、Three.js、A-Frame、Babylon.jsなどが必要ですが、それらを使わず、UnityだけでWebXRアプリが作れる「Unity WebXR Exporter」を使って実際に開発したというお話です。詰まりどころをいろいろと解説されています。
詰まったところ
・Unityで開くときは、Universal Rendering Pipeline (URP)を使って開く
・Chromeのバージョンに注意 (flagsでWebXR を有効にするなど)
・Unity2019.4以降を推奨 (URP採用が2019.4以降のため)
・VRモードでブラウザのページを閉じると、ブラウザ全体が落ちる
・WebGL TempleteをWebXRにしないとVRモードにならない
・AWSの設定に注意
2.6 WebXRで遊んでみた
発表者：@toyoshim
昔のブラウン管ベースのシューティングゲームの原理をもとに、WebXRでシューティングゲームを作られたお話です。
まずはブラウン管でガンシューティングゲームができる仕組みです。銃から光を発射しているのではなく、銃を撃った瞬間にターゲット位置が光り、その光を銃が受光することで当たり判定をしているようです。（知らなかった、、）
今回は、この仕組みをベースに、VRコントローラをターゲットに向けてボタンを押したとき、ターゲットのピクセルから照射したrayがコントローラに当たれば命中とされたようです。
著作権に絡むようなので、スクリーンショットは載せませんでしたが、Oculus Questを使ってファミコンのゲームのような画面で銃ゲームができていました。
これを実現するためのコードはわずか170行程度だそうです。
参考にされた既存コード
・jsnes : ファミコンのエミュレータ
・three.js
3. おわりに
WebXRというカテゴリでも、大学でのVRコンテンツ、ECサイト、ゲームなど、幅が広いのは面白いですね。
最近はBabylon.js Editorの調査を中心にして、WebXR関係をあまり見られていなかったので勉強になりました。
