CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

WebXR Tech Tokyo #2 の全講演をまとめてみました

前回に続き、参加させていただきました。いつも通り、全講演の内容を紹介します。

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/

会場の様子です。

Virtual conference hall of WebXR Tech Tokyo#2

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

speakerdeck.com

静岡大学の「静大xR同好会はまりあ」による発表です。

先日発表されていた、VRで大学全体が体験できる「静岡大学バーチャル情報学部」の作り方の紹介です。

静岡大学 バーチャル情報学部

・開発から本公開まで2ヶ月程度

・GitHub Pagesを採用 (容量無制限、組織単位で管理したので今回の開発メンバーが卒業した後も更新可能のため)

・3D部分はThree.jsで描画、2D部分はdiv要素を重ねてCSSで位置指定

・Blender用のアドオン「Blender-osm」を使って、OpenStreetMapのデータを取得

Blender-osmの導入方法、使い方については、以下の記事が詳しかったです。

redhologerbera.hatenablog.com

・モデルは118,300ポリゴンまで調整

・Three.jsをWebXR対応するため、WebXR polyfillを使って対応

・スマートフォンではバーチャルパッドを自前で準備した

・ソースコードはMITライセンスでGitHubで公開

github.com

2.2 xRブラウザを作っている話

発表者:@ohomagic

xRブラウザ[WebXR Tech Tokyo #2].pdf - Google ドライブ

HoloLens2で複数のアプリを起動したいが、Unityでその方法が提供されなかったので、自分で作ってみたというお話です。

実現のため、HoloLens2のWebブラウザを使用し、A-frameベースのWebアプリを複数起動させるという方法を取られています。

Configuration of Orthoverse on HoloLens2

Metaverse (メタバース) よりも現実に近いところという意味を込めて、Orthoverse (オルソバース) と名付けたそうです。

以下、特徴です。

・A-Frameベースで記述してアプリを作れる

・「Lua」というスクリプト言語を使用

・インターネットの「昨日」とXRの「表現」をつなぐインターフェース

2.3 2か月で軽率にWebARフェイスフィルターを作ってみた

発表者:@ninisan_drumath

WebARで試着ができるサービス「Faciop」のプロトタイプを開発されたお話です。

Faciop prototype image developed by @ninisan_drumath

一番の問題はWebブラウザでface trackingができるのか、ということで、調べた結果TensorflowのFacemeshを使ったそうです。

github.com

実際に作ったものはGitHubで公開されています。

github.com

デモ動画はこちらで公開されています。管理画面から作られており、ECサイトでメガネを選び、Face Trackingで自分が試着したような体験ができます。

drive.google.com

2.4 WebXR Hand Input (ハンド トラッキング) 入門

@ms_yuhara

@ms_yuharaさんはマイクロソフトでEdgeブラウザ、Internet Explorerの技術サポートを担当されている方です。前回のWebXR Tech Tokyoでも発表されています。

今回は、WebXR Hand Inputに関する紹介です。W3Cによる標準化の策定中で、詳しい説明はこちらにあります。

github.com

・Babylon.jsで試されてたとのこと

WebXR hand tracking trial on Babylon.js

・WebXR Had Input対応ブラウザは、Oculus Browser 10.2以降、 Firefox Reality for HoloLens2 (2020/8/24時点)

・ハンドトラッキングの精度は高い印象。「つまむ」なども可能

・両手をくっつけるとトラッキングできない

2.5 jsが分からないのでUnity WebXR Exporterで自前ゲームをWebにアップしてみた話

発表者:@busido90

speakerdeck.com

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でシューティングゲームを作られたお話です。

まずはブラウン管でガンシューティングゲームができる仕組みです。銃から光を発射しているのではなく、銃を撃った瞬間にターゲット位置が光り、その光を銃が受光することで当たり判定をしているようです。(知らなかった、、)

configuration of gun shooting game on CRT display

今回は、この仕組みをベースに、VRコントローラをターゲットに向けてボタンを押したとき、ターゲットのピクセルから照射したrayがコントローラに当たれば命中とされたようです。

著作権に絡むようなので、スクリーンショットは載せませんでしたが、Oculus Questを使ってファミコンのゲームのような画面で銃ゲームができていました。

これを実現するためのコードはわずか170行程度だそうです。

174 line of code to implement a gun shooting game like NES

参考にされた既存コード

jsnes : ファミコンのエミュレータ
・three.js

3. おわりに

WebXRというカテゴリでも、大学でのVRコンテンツ、ECサイト、ゲームなど、幅が広いのは面白いですね。
最近はBabylon.js Editorの調査を中心にして、WebXR関係をあまり見られていなかったので勉強になりました。