PWANight Vol.56 ～WebXR～ 3高なWebXR開発を目指した戦い

この度、2023 年6 月にBtoBtoC のメタバースプラットフォームサービス＝VMVerse をリリースいたしました。

今回の登壇では開発を進めるうえで、私が目指した３高（高品質、高画質、高パフォーマンス）に対して、どのように戦ってきたか（戦っているか）？を解説していきます。

Transcript

1. 2023年10月18日 バルテス・モバイルテクノロジー株式会社 PWANight Vol.56 ~WebXR～ ３高なWebXR開発を目指した戦い
2. 会社概要 2 VALTES MOBILE TECHNOLOGY CO.,LTD. 商号 バルテス・モバイルテクノロジー株式会社（VMT） 所在地 大阪本社 〒550-0011 大阪市西区阿波座1-3-15 関電不動産西本町ビル8F TEL：06-6534-6568 FAX：06-6534-6562 東京本社 〒102-0083 東京都千代田区麹町1-10-5 澤田麹町ビル5F TEL：03-5210-2087 FAX：03-5210-2081 資本金 5,000万円 設立 2012年10月17日 役員 代表取締役会長 田中 真史 代表取締役社長 西村 祐一 取締役 石原 一宏 関連会社 バルテス株式会社 VALTES Advanced Technology, Inc.（VAT） 株式会社アール・エス・アール（RSR） 株式会社ミント、株式会社シンフォー 事業内容 モバイルデバイス向けアプリケーション開発 Webシステム開発、xRシステム開発 Webセキュリティサービス 主要株主 バルテス・ホールディングス株式会社 100％
3. 自己紹介 名前 山下大輔（やました だいすけ） 所属 開発部 マネージャー 出身 横浜市青葉区（たまプラーザ） 住まい 宝塚市（兵庫県） 趣味 競馬、陸上 得意分野 ３D全般（３D/VR/AR、Unity、Unreal Engine） SNS Facebook：@longjumper.daisuke Instagram：@deepimpact_daisuke Twitter：@jumper_daisuke 資格 Android Basic、JSTQB FL、Monacaソムリエ、 コーヒーインストラクター2級、未病栄養コンサルタント
4. 自己紹介 ◼ 職歴 ◼ 2000年：社会人としてスタート ◼ ３D/VR/３DCAD/2DCADのソフトウェア開発 ◼ 新卒時代は3名のうち、私だけプログラム経験0 ◼ ３DはC++を使って、OpenGLで開発 ◼ 大学の研究や独立行政法人の仕事 ◼ 住宅関係や製造関係開発 ◼ ３次元センサー、力覚デバイス等を使って開発 ◼ 得意な言語 C/C++、C#は少々 ◼ 2014年：バルテス・モバイルテクノロジー(株)入社 ◼ 社員は11名、モバイルアプリ、Web開発が中心 ◼ 2017年 3D/AR開発開始（再開） ◼ 2018年 Unity導入 ◼ 2018年 Monacaソムリエ（2年連続） ◼ 2020年 VMT-Tech Blogで毎月執筆中 ◼ 2021年 Unreal Engine導入 ◼ 2022年 メタバースプラットフォーム開発
5. はじめに
6. はじめに ◼この度、2023年6月にBtoBtoCのメタバースプラットフォームサービス ＝VMVerseをリリースいたしました。 ◼今回の登壇では開発を進めるうえで、私が目指した３高（高品質、 高画質、高パフォーマンス）に対して、どのように戦ってきたか（戦っ ているか）？を解説していきます。
7. はじまりは勉強会… とりあえずやってみる！？
8. はじまりは勉強会 ◼元々は社内勉強会として、私が立ち上げました。「WebXR技術を 使って何かサービスを作ってみよう！」という感じのスタートです。 ◼もちろん、勉強会なので業務外での活動として有志で集まりました。 ◼目的は３D技術だけでなく、Web技術の習得です。３D （WebXR）を入り口にして、３DとWebの技術者を育てていこうと 考えました。 もちろん、最終目的はサービス化！
9. はじまりは勉強会 ◼業務外なので細々と続けていましたが、展示会に向けてデモを創った り、会社行事で共有したり、目標を定めながら進めました。 ◼活動を進めて約1年半後、社内プロジェクトとして認定されサービス 化に向けて開発することになりました。 イメージしてたことが実現できた！
10. 技術選定 何使ってやろうか？
11. 技術選定 ◼WebXRという事で、メタバースエンジンのプラットフォームとして HubsCloudを選定しました。 ◼HubsCloudはCMSのバーチャル空間版でMozillaが開発したメタ バースプラットフォームのOSS ◼Enterprise版を使わずに、OSS版を使って弊社にてAWS環境を 構築して作成するようにしました。 AWS構築も勉強の一つ！
12. 技術選定 ◼HubsCloudをもう少し詳しく ◼Mozilla Hubsというクラウドベースの仮想現実のプラットフォーム ◼Mozillaクラウドサーバー上でホスティングされている ◼Mozilla Hubsを自己ホスティングしたのが、HubsCloud ◼独自のサーバーホスティングして、カスタマイズしたもの ◼オープンソースなので、無料で開発できる
13. 技術選定 ◼サーバーサイド（AWS） ◼サーバーレスを採用 ◼Amplify、Cognito、AppSync、S3、Lambda、RDS等 ◼フロントサイド ◼React.js（Next.js）、TypeScript ◼３Dエンジン ◼A-Frame（Three.js） ◼WebGL
14. 高品質への取り組み 不具合ゼロ＝高品質ではない？
15. 高品質への取り組み ◼品質とは＝不具合が０でなく「顧客の要求を満たすこと」 ◼そもそも不具合は０に出来ない。 ◼バルテスグループの品質への取り組みを実践 ◼上流工程からの品質作り、セキュリティの考慮 ◼プロトタイプによるUI/UXの検証 ◼仕様書レビュー、コードレビュー ◼社内ツール（BTS、テスト自動化（T-DASH））の活用 強みを最大限に活用
16. 高品質への取り組み ◼顧客満足というのをどう捉えたら良いか？ ◼世の中が求めている事（ゲーム、エンタメ以外） ◼コミュニティの形成 ◼自己承認 ◼ビジネス活動 ◼シンプルなUIで使いやすい ◼そこでしかできない体験（価値）を提供 WebXR技術で新たな体験を提供したい
17. 高品質への取り組み ◼メタバースプラットフォームを作ってみよう！ ◼BtoBtoCで顧客がプラットフォーマーになる ◼決済機能を付けて、メタバース内でコンバージョンする ◼クロスプラットフォーム（PC、スマホ、VRデバイス） ◼シンプルUI ◼SNS連携 ◼物理演算や演出効果 テーマは新しい体験をもっと身近に！
18. 高品質への取り組み
19. 高画質への取り組み なかなかこれが難しい。。。
20. 高画質への取り組み ◼高画質を実現するためのアプローチ ◼レンダリングエンジンの改修（Three.js） ◼3Dモデリングのワークフロー改善 ◼最大の敵は高画質＝パフォーマンス低下 ◼マルチデバイスなので、ハードウェアに頼りすぎるのもダメ ◼まずは何が出来るか？どこまで出来るか？をやってみる
21. 高画質への取り組み ◼レンダリングエンジンの改修（Three.js） ◼画質をあげるための要素 ◼シャドーマップ（影） ◼グローバルイルミネーション（大域照明） ◼ポストプロセス（カメラ効果、エフェクト） ゲームエンジンの開発ノウハウでトライ！
22. 高画質への取り組み 理想は、これ でも、これは無理
23. 高画質への取り組み ◼シャドーマップとグローバルイルミネーションは即却下 ◼リアルタイムレンダリングの負荷が高すぎる ◼UnityやUnreal Engine等のゲームエンジン向き ◼残るはポストプロセス ◼アンチエイリアス、Bloom、SSAOを取り込んでみる でもパフォーマンス低下は懸念。。。
24. 高画質への取り組み ◼アンチエイリアス ◼CGはピクセルで表現するので、そのギザギザを無くす処理 ◼HubsCloudではSMAA、MSAA、OFFの切り替えと細かいパラ メータ調整が可能 ◼SMAAにすると綺麗だが、やはり重くなった。。。 ◼WebGLデフォルトのアンチエイリアスとの比較 ◼品質はSMAAとほぼ同等 ◼パフォーマンスはWebGLのデフォルトの方が上 WebGLのデフォルトを採用
25. 高画質への取り組み ◼Bloom(ブルーム) ◼光源や明るい物体の周囲に光を拡散させる演出 ◼シーン全体が明るいと効果がかかりやすくなる ◼シーンによって静的な設定が必要、汎用的な設定は難しい。
26. 高画質への取り組み ◼SSAO（スクリーンスペースアンビエントオクルージョン） ◼画面上に表示されている領域に陰影をつける効果 ◼物体の立体感を表現するには効果的 結果は、重い。。。
27. 高画質への取り組み ◼結論 レンダリングは諦めた。。。 次はモデリング
28. 高画質への取り組み ◼３Dモデリングのワークフロー改善 ◼３Dモデリングは3dsMaxを使っている ◼データフォーマットはGLB（*.glb）を採用 ◼Hubsとの親和性が高い為、Blenderを使って最終的に変換 ◼そもそも、モデリングで３Dデータを高画質にするには？ ◼フォトグラメトリ ◼PBRテクスチャ ◼ライトマップ
29. 高画質への取り組み ◼フォトグラメトリ ◼３Dスキャンや複数の写真から３Dモデルを生成 ◼購入体験の商品モデルはこの方式を採用 ◼比較的リアルなモデルが出来た。
30. 高画質への取り組み ◼PBR（Physically Based Rendering）テクスチャ ◼光学的な物理法則に基づいて、リアルな質感や反射を表現 ◼凹凸感や金属などの質感表現には必須
31. 高画質への取り組み ◼LightMap（ライトマップ） ◼事前に光の反射や関節光を計算し、シーンに焼き付ける ◼質感をあげ、パフォーマンスも上がる ◼大きな課題 ◼モデリングデータやゲームエンジンでLightMapしても、そのデータを 出力できない。3dsMaxでLightMapを作っても意味がない。 ◼理論上はLightMapとは、テクスチャを作る事なので情報を持てな いという事は考えにくい。
32. 高画質への取り組み ◼BlenderとGLBの仕様に解決方法があった。 ◼Blender上でLightMap用のテクスチャ情報（UVマップ）を持つ ことが出来る。 ◼GLB、Hubsでライトマップ用のデータ表示できる仕様になっていた。 ◼出力出来た ◼Blender上でLightMap用のUV情報を作成して、GLBに出力 することでLightMapが適応できることが分かった。
33. 高画質への取り組み ◼3dsMax ◼HubsCloud
34. 高パフォーマンスへの取り組み 思い切って変えた
35. 高パフォーマンスへの取り組み ◼HubsCloudを使うメリット ◼メタバースエンジンとしての機能はすべてそろっている ◼3Dモデリング、アバター作成ツールとの親和性が高い ◼Mozilla Hubs改修が継続的に行われている ◼カスタマイズにおける懸念 ◼React.jsを使っているが、部分的にTypeScriptを使用 ◼今後追加されえる機能はTypeScriptで実装 ◼既存機能はTypeScriptに移植しない方針
36. 高パフォーマンスへの取り組み もっと、大きな問題が。。。
37. 高パフォーマンスへの取り組み ◼HubsCloudは同時接続は50人まで ◼サーバースペックを上げても解決できない ◼Mozilla HubsとHubsCloudのバージョン管理が異なるのでコード 管理しにくい。 ◼今現在もMozilla HubsとHubsCloudのMozilla Hubsの中身 が異なる。 ◼Mozilla Hubsは関係なく改修されていく ◼HubsCloudはMozilla Hubsに追従してくれていない ◼マージ作業などが大変
38. 高パフォーマンスへの取り組み 今年6月に面白いものがリリース
39. 高パフォーマンスへの取り組み Verse Engine P2Pオーバーレイネットワーク メタバースエンジン
40. 高パフォーマンスへの取り組み ◼Verse Engineとは？ ◼P2Pオーバーレイネットワークを採用したメタバースエンジン ◼オープンソースで商用利用は無料 ◼静的Webサーバーにコンテンツをアップロードするだけ ◼３Dライブラリに非依存（Three.js、Unity等で作れる） ◼各機能をコンポーネント化出来る 拡張性やカスタマイズ性に非常に優れている
41. 高パフォーマンスへの取り組み ◼P2Pオーバーレイネットワークとは？ ◼P2P（ピア・ツー・ピア）の拡張バージョン ◼インターネット上で接続された複数のデバイス（ピア）が互いに通 信できる ◼分散型でスケーラビリティの設計なので、拡張することが容易 ◼ファイル共有、ビデオストリーミング、コンテンツ配信、仮想通貨等の 用途で使われている 要は接続数が増えてもパフォーマンスが落ちない
42. 高パフォーマンスへの取り組み Entrance Server Web Browser Web Browser Web Browser Web Browser Web Browser Join PSP Communication ◼P2Pオーバーレイネットワーク概念図 Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web Browser Web BrowserWeb Browser Web Browser Web Browser Web Browser
43. 高パフォーマンスへの取り組み 5000人接続しても大丈夫！ 凄くない？？ という事で移植しました。
44. 高パフォーマンスへの取り組み ◼Verse Engine仕組み ◼「verse-core」・・・メタバースエンジン ◼WebAssembly（Wasm）で出来ている ◼これをベースにThree.jsやUnityで呼び出していく仕組み ◼キーボードやマウス操作、VR、アバターシステムなどをライブラリを組 み合わせていく １から作るのは流石に時間がかかる Three.js版があったのでそれをベースにすることに
45. 高パフォーマンスへの取り組み ◼こんな感じでVerseEngine版出来上がってます
46. 最後に 今後の拡張について
47. 最後に ◼Verse Engineの拡張予定 ◼WebGPUへの対応 ◼WebGPUによりデバイス能力を100%だす ◼Three.jsでも出来るが、Babylon.js版も作りたい ◼PWA対応でさらに最適化 ◼Verse Engine用の３Dモデリングフローの確率 ◼Hubs版同様にLightMapも対応しているがまだ課題はあり
48. 最後に ◼高品質、高画質、高パフォーマンスを目指して戦ってきました。 ◼画質とパフォーマンスは常に表裏一体です。 ◼画質はまだまだ改善の余地ありです。 ◼Verse Engineの将来性を見込んで移植を決断しました。 ◼これからも「新しい体験をもっと身近に！」をテーマに高品質、高画質、 高パフォーマンスなWebXRを追い求めてきます。 来週、幕張の展示会に出展するので来てね！
49. ご清聴ありがとうございました。 49