先月に続いて、clusterでの勉強会に参加して発表させていただきました。いつも通り、全講演の内容を紹介していきます。
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/178319/
会場の様子です。
XRに関する勉強会は多数ありますが、私の知る限りこのイベントでは毎回100人近くの参加者がいる規模の大きなものです。上の画像では、描画負荷を抑えるため一定人数以上のアバターが表示されていません。そのため少ないように見えますが、実際は参加者が400人を超えていました。
また、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人
【ｵﾝﾗｲﾝ開催】WebXR Tech Tokyo #1 @ cluster - connpass
過去のイベント内容はこちらを参照ください。
【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
2. 講演
2.1 3D作品をスピード公開！Three.jsとGatsbyで作るポートフォリオ作成方法
発表者：@shunpei42ba_
まず、私はGatsby (ギャツビー）を初めて知ったのでいくつか記事を集めてみました。
Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールです
引用元：Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
GatsbyはReactベースの静的サイトジェネレーターです。
生成される静的サイトはシングルページアプリケーションでもあるため、優れたUXをユーザーに提供できます。
GatsbyはReactの公式サイトを始め、多くのサイトで採用されています。
引用元：Gatsbyはどうやって静的サイトをジェネレートしているのか - Eureka Engineering - Medium
今回、@shunpei42ba_さんは、GatsbyでThree.jsを直接使えるように整形する方法を紹介されていました。詳しくは下記のQiita記事をご確認ください。
2.2 WebXR と Bot Composer で表現力の高いチャット ボットを作ろう
発表者：@ms_yuhara
www.slideshare.net
@ms_yuharaさんはマイクロソフトでEdgeブラウザ、Internet Explorerの技術サポートを担当されている方です。
今回は、WebXRとBotをくっつける例をビデオで紹介されていました。 具体的にはオンラインショッピングで買うものをBotと一緒に選んで、気になるものを3D表示してみるというものです。
今回のデモに使われた技術は以下の通りです。
AR：SceneViewer
Using Scene Viewer to display interactive 3D models in AR from an Android app or browser
VR：Babylon.js
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
Azure Bot Service
docs.microsoft.com
Bot Framework
github.com
2.3 テクスチャ変えてカスタマイズ！オリジナルデザインAR
発表者：@tanufuku
WebARを使ったコンテンツ開発の事例や知見の共有に関するご発表です。大きく２種類のお話がありました。
前半は、QRコードをARのトリガーとして使うことでこいのぼりをWebAR表示させるイベントコンテンツに対応されたお話です。
後半は、あらかじめ3Dモデルのテクスチャマッピングの場所を指定し、そこにユーザがアップロードした画像をマッピングすることでオリジナルのARモデルを表示させるというものです。
ちなみに、後半の内容については、東京ミッドタウンのHPで体験することができます。
2.4 THETA x Matterportで月1000円のバーチャルショールーム
Matterportとは、深度も取得できる特殊な360度カメラです。また、他社製カメラやiPadにも対応して3Dスキャンができるソリューションも備えています。
Matterport: 3D Camera, Capture & Virtual Tour Platform | Matterport
今回の発表では、Matterportを使う時のノウハウを紹介されていました。以下、いくつか抜粋します。
・RICOH THETAZ1、iPad Pro、なるべく長い三脚を使うを準備するだけでよい
・THETAZ1は手軽に撮影できてとてもよい。深度情報がないのでスキャンデータをVRChatで使うのは難しい
・建物内部を回るように撮影を繰り返すと、誤差が蓄積してモデルがきれいにならない。部屋の外周から内側に移動する
・メモリ不足を避けるため、iPadよりはiPad Proがよい
2.5 コロナ時代にできる、WebARリモートハンズオン
発表者：@sentomo594
アトリエリアリティというXRの社内コミュニティで活動されている方です。コロナ影響で人が集まるイベントができなくなり、オンラインのハンズオンを開催するためのノウハウを解説されています。
リモートハンズオンの工夫
・「ここまでできた人は手を挙げてください」を実現するために、Teamsの挙手機能を使用。まだ終わっていない人がいた場合、他のチューターが該当者と個別のビデオ会議を開催
・途中までできたものを事前に用意し、追いつけなくなった人をフォローできるようにする
・再生確認は、Netlifyを使う
Netlifyとは以下のサービスです。アカウント登録だけでhttps対応のサイトが作れるという利点があります。
https対応についてですが、スマートフォンでWebXR対応サイトを開く場合、https通信に対応していないとジャイロセンサが使用できないという仕様があるためです。
2.6 Unityを知っている人がBabylon.jsを使ったゲームを作るためのTips紹介
発表者：@WheetTweet
私の発表です。スライドは以下におきました。
www.slideshare.net
発表で説明したリポジトリ（改造版）、および解説記事はこちらです。
2.7 ウェブベースのVR/AR対応3Dメッシュライブストリーミングシステム
発表者：@AmadeusSVX
前回のご発表の改良版です。前回については以下を参照ください。
https://www.crossroad-tech.com/entry/webxrtechtokyo-cluster-vol1#27-ブラウザベースのARVR動画ライブストリーミングシステムの開発
あるしおうねさんによると、前回は距離画像を使用して離れたXRとして情報を表示していました。しかし、距離画像の特性上、前半分しか伝送できないという問題がありました。
そこで、今回は距離画像ではなく3Dメッシュを変換して伝送する方法を考案されたとのことです。これにより、ローポリのモデルが後ろを向いてもちゃんと表示されるようになりました。
今後は人体のメッシュ化データでのトライ、双方向性を持たせた応用などを検討されているとのことです。
3. おわりに
この記事で書いたように、最近WebXR関連を勉強中なので今回もいろいろ勉強になりました。
