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

by VMT_Yamashita

Slide 1

Slide 1 text

2023年10月18日バルテス・モバイルテクノロジー株式会社 PWANight Vol.56 ~WebXR～３高なWebXR開発を目指した戦い

Slide 2

Slide 2 text

会社概要 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％

Slide 3

Slide 3 text

自己紹介名前山下大輔（やましただいすけ）所属開発部マネージャー出身横浜市青葉区（たまプラーザ）住まい宝塚市（兵庫県）趣味競馬、陸上得意分野３D全般（３D/VR/AR、Unity、Unreal Engine） SNS Facebook：@longjumper.daisuke Instagram：@deepimpact_daisuke Twitter：@jumper_daisuke 資格 Android Basic、JSTQB FL、Monacaソムリエ、コーヒーインストラクター2級、未病栄養コンサルタント

Slide 4

Slide 4 text

自己紹介 ◼ 職歴 ◼ 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年メタバースプラットフォーム開発

Slide 5

Slide 5 text

はじめに

Slide 6

Slide 6 text

はじめに ◼この度、2023年6月にBtoBtoCのメタバースプラットフォームサービス＝VMVerseをリリースいたしました。 ◼今回の登壇では開発を進めるうえで、私が目指した３高（高品質、高画質、高パフォーマンス）に対して、どのように戦ってきたか（戦っているか）？を解説していきます。

Slide 7

Slide 7 text

はじまりは勉強会… とりあえずやってみる！？

Slide 8

Slide 8 text

はじまりは勉強会 ◼元々は社内勉強会として、私が立ち上げました。「WebXR技術を使って何かサービスを作ってみよう！」という感じのスタートです。 ◼もちろん、勉強会なので業務外での活動として有志で集まりました。 ◼目的は３D技術だけでなく、Web技術の習得です。３D （WebXR）を入り口にして、３DとWebの技術者を育てていこうと考えました。もちろん、最終目的はサービス化！

Slide 9

Slide 9 text

はじまりは勉強会 ◼業務外なので細々と続けていましたが、展示会に向けてデモを創ったり、会社行事で共有したり、目標を定めながら進めました。 ◼活動を進めて約1年半後、社内プロジェクトとして認定されサービス化に向けて開発することになりました。イメージしてたことが実現できた！

Slide 10

Slide 10 text

技術選定何使ってやろうか？

Slide 11

Slide 11 text

技術選定 ◼WebXRという事で、メタバースエンジンのプラットフォームとして HubsCloudを選定しました。 ◼HubsCloudはCMSのバーチャル空間版でMozillaが開発したメタバースプラットフォームのOSS ◼Enterprise版を使わずに、OSS版を使って弊社にてAWS環境を構築して作成するようにしました。 AWS構築も勉強の一つ！

Slide 12

Slide 12 text

技術選定 ◼HubsCloudをもう少し詳しく ◼Mozilla Hubsというクラウドベースの仮想現実のプラットフォーム ◼Mozillaクラウドサーバー上でホスティングされている ◼Mozilla Hubsを自己ホスティングしたのが、HubsCloud ◼独自のサーバーホスティングして、カスタマイズしたもの ◼オープンソースなので、無料で開発できる

Slide 13

Slide 13 text

技術選定 ◼サーバーサイド（AWS） ◼サーバーレスを採用 ◼Amplify、Cognito、AppSync、S3、Lambda、RDS等 ◼フロントサイド ◼React.js（Next.js）、TypeScript ◼３Dエンジン ◼A-Frame（Three.js） ◼WebGL

Slide 14

Slide 14 text

高品質への取り組み不具合ゼロ＝高品質ではない？

Slide 15

Slide 15 text

高品質への取り組み ◼品質とは＝不具合が０でなく「顧客の要求を満たすこと」 ◼そもそも不具合は０に出来ない。 ◼バルテスグループの品質への取り組みを実践 ◼上流工程からの品質作り、セキュリティの考慮 ◼プロトタイプによるUI/UXの検証 ◼仕様書レビュー、コードレビュー ◼社内ツール（BTS、テスト自動化（T-DASH））の活用強みを最大限に活用

Slide 16

Slide 16 text

高品質への取り組み ◼顧客満足というのをどう捉えたら良いか？ ◼世の中が求めている事（ゲーム、エンタメ以外） ◼コミュニティの形成 ◼自己承認 ◼ビジネス活動 ◼シンプルなUIで使いやすい ◼そこでしかできない体験（価値）を提供 WebXR技術で新たな体験を提供したい

Slide 17

Slide 17 text

高品質への取り組み ◼メタバースプラットフォームを作ってみよう！ ◼BtoBtoCで顧客がプラットフォーマーになる ◼決済機能を付けて、メタバース内でコンバージョンする ◼クロスプラットフォーム（PC、スマホ、VRデバイス） ◼シンプルUI ◼SNS連携 ◼物理演算や演出効果テーマは新しい体験をもっと身近に！

Slide 18

Slide 18 text

高品質への取り組み

Slide 19

Slide 19 text

高画質への取り組みなかなかこれが難しい。。。

Slide 20

Slide 20 text

高画質への取り組み ◼高画質を実現するためのアプローチ ◼レンダリングエンジンの改修（Three.js） ◼3Dモデリングのワークフロー改善 ◼最大の敵は高画質＝パフォーマンス低下 ◼マルチデバイスなので、ハードウェアに頼りすぎるのもダメ ◼まずは何が出来るか？どこまで出来るか？をやってみる

Slide 21

Slide 21 text

高画質への取り組み ◼レンダリングエンジンの改修（Three.js） ◼画質をあげるための要素 ◼シャドーマップ（影） ◼グローバルイルミネーション（大域照明） ◼ポストプロセス（カメラ効果、エフェクト）ゲームエンジンの開発ノウハウでトライ！

Slide 22

Slide 22 text

高画質への取り組み理想は、これでも、これは無理

Slide 23

Slide 23 text

高画質への取り組み ◼シャドーマップとグローバルイルミネーションは即却下 ◼リアルタイムレンダリングの負荷が高すぎる ◼UnityやUnreal Engine等のゲームエンジン向き ◼残るはポストプロセス ◼アンチエイリアス、Bloom、SSAOを取り込んでみるでもパフォーマンス低下は懸念。。。

Slide 24

Slide 24 text

高画質への取り組み ◼アンチエイリアス ◼CGはピクセルで表現するので、そのギザギザを無くす処理 ◼HubsCloudではSMAA、MSAA、OFFの切り替えと細かいパラメータ調整が可能 ◼SMAAにすると綺麗だが、やはり重くなった。。。 ◼WebGLデフォルトのアンチエイリアスとの比較 ◼品質はSMAAとほぼ同等 ◼パフォーマンスはWebGLのデフォルトの方が上 WebGLのデフォルトを採用

Slide 25

Slide 25 text

高画質への取り組み ◼Bloom(ブルーム) ◼光源や明るい物体の周囲に光を拡散させる演出 ◼シーン全体が明るいと効果がかかりやすくなる ◼シーンによって静的な設定が必要、汎用的な設定は難しい。

Slide 26

Slide 26 text

高画質への取り組み ◼SSAO（スクリーンスペースアンビエントオクルージョン） ◼画面上に表示されている領域に陰影をつける効果 ◼物体の立体感を表現するには効果的結果は、重い。。。

Slide 27

Slide 27 text

高画質への取り組み ◼結論レンダリングは諦めた。。。次はモデリング

Slide 28

Slide 28 text

高画質への取り組み ◼３Dモデリングのワークフロー改善 ◼３Dモデリングは3dsMaxを使っている ◼データフォーマットはGLB（*.glb）を採用 ◼Hubsとの親和性が高い為、Blenderを使って最終的に変換 ◼そもそも、モデリングで３Dデータを高画質にするには？ ◼フォトグラメトリ ◼PBRテクスチャ ◼ライトマップ

Slide 29

Slide 29 text

高画質への取り組み ◼フォトグラメトリ ◼３Dスキャンや複数の写真から３Dモデルを生成 ◼購入体験の商品モデルはこの方式を採用 ◼比較的リアルなモデルが出来た。

Slide 30

Slide 30 text

高画質への取り組み ◼PBR（Physically Based Rendering）テクスチャ ◼光学的な物理法則に基づいて、リアルな質感や反射を表現 ◼凹凸感や金属などの質感表現には必須

Slide 31

Slide 31 text

高画質への取り組み ◼LightMap（ライトマップ） ◼事前に光の反射や関節光を計算し、シーンに焼き付ける ◼質感をあげ、パフォーマンスも上がる ◼大きな課題 ◼モデリングデータやゲームエンジンでLightMapしても、そのデータを出力できない。3dsMaxでLightMapを作っても意味がない。 ◼理論上はLightMapとは、テクスチャを作る事なので情報を持てないという事は考えにくい。

Slide 32

Slide 32 text

高画質への取り組み ◼BlenderとGLBの仕様に解決方法があった。 ◼Blender上でLightMap用のテクスチャ情報（UVマップ）を持つことが出来る。 ◼GLB、Hubsでライトマップ用のデータ表示できる仕様になっていた。 ◼出力出来た ◼Blender上でLightMap用のUV情報を作成して、GLBに出力することでLightMapが適応できることが分かった。

Slide 33

Slide 33 text

高画質への取り組み ◼3dsMax ◼HubsCloud

Slide 34

Slide 34 text

高パフォーマンスへの取り組み思い切って変えた

Slide 35

Slide 35 text

高パフォーマンスへの取り組み ◼HubsCloudを使うメリット ◼メタバースエンジンとしての機能はすべてそろっている ◼3Dモデリング、アバター作成ツールとの親和性が高い ◼Mozilla Hubs改修が継続的に行われている ◼カスタマイズにおける懸念 ◼React.jsを使っているが、部分的にTypeScriptを使用 ◼今後追加されえる機能はTypeScriptで実装 ◼既存機能はTypeScriptに移植しない方針

Slide 36

Slide 36 text

高パフォーマンスへの取り組みもっと、大きな問題が。。。

Slide 37

Slide 37 text

高パフォーマンスへの取り組み ◼HubsCloudは同時接続は50人まで ◼サーバースペックを上げても解決できない ◼Mozilla HubsとHubsCloudのバージョン管理が異なるのでコード管理しにくい。 ◼今現在もMozilla HubsとHubsCloudのMozilla Hubsの中身が異なる。 ◼Mozilla Hubsは関係なく改修されていく ◼HubsCloudはMozilla Hubsに追従してくれていない ◼マージ作業などが大変

Slide 38

Slide 38 text

高パフォーマンスへの取り組み今年6月に面白いものがリリース

Slide 39

Slide 39 text

高パフォーマンスへの取り組み Verse Engine P2Pオーバーレイネットワークメタバースエンジン

Slide 40

Slide 40 text

高パフォーマンスへの取り組み ◼Verse Engineとは？ ◼P2Pオーバーレイネットワークを採用したメタバースエンジン ◼オープンソースで商用利用は無料 ◼静的Webサーバーにコンテンツをアップロードするだけ ◼３Dライブラリに非依存（Three.js、Unity等で作れる） ◼各機能をコンポーネント化出来る拡張性やカスタマイズ性に非常に優れている

Slide 41

Slide 41 text

高パフォーマンスへの取り組み ◼P2Pオーバーレイネットワークとは？ ◼P2P（ピア・ツー・ピア）の拡張バージョン ◼インターネット上で接続された複数のデバイス（ピア）が互いに通信できる ◼分散型でスケーラビリティの設計なので、拡張することが容易 ◼ファイル共有、ビデオストリーミング、コンテンツ配信、仮想通貨等の用途で使われている要は接続数が増えてもパフォーマンスが落ちない

Slide 42

Slide 42 text

高パフォーマンスへの取り組み 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

Slide 43

Slide 43 text

高パフォーマンスへの取り組み 5000人接続しても大丈夫！凄くない？？という事で移植しました。

Slide 44

Slide 44 text

高パフォーマンスへの取り組み ◼Verse Engine仕組み ◼「verse-core」・・・メタバースエンジン ◼WebAssembly（Wasm）で出来ている ◼これをベースにThree.jsやUnityで呼び出していく仕組み ◼キーボードやマウス操作、VR、アバターシステムなどをライブラリを組み合わせていく１から作るのは流石に時間がかかる Three.js版があったのでそれをベースにすることに

Slide 45

Slide 45 text

高パフォーマンスへの取り組み ◼こんな感じでVerseEngine版出来上がってます

Slide 46

Slide 46 text

最後に今後の拡張について

Slide 47

Slide 47 text

最後に ◼Verse Engineの拡張予定 ◼WebGPUへの対応 ◼WebGPUによりデバイス能力を100%だす ◼Three.jsでも出来るが、Babylon.js版も作りたい ◼PWA対応でさらに最適化 ◼Verse Engine用の３Dモデリングフローの確率 ◼Hubs版同様にLightMapも対応しているがまだ課題はあり

Slide 48

Slide 48 text

最後に ◼高品質、高画質、高パフォーマンスを目指して戦ってきました。 ◼画質とパフォーマンスは常に表裏一体です。 ◼画質はまだまだ改善の余地ありです。 ◼Verse Engineの将来性を見込んで移植を決断しました。 ◼これからも「新しい体験をもっと身近に！」をテーマに高品質、高画質、高パフォーマンスなWebXRを追い求めてきます。来週、幕張の展示会に出展するので来てね！

Slide 49

Slide 49 text

ご清聴ありがとうございました。 49