日本初Pixel Streamingを使用したwebサービスの開発事例【UNREAL FEST EXTREME '22 SUMMER】
79.7K Views
May 25, 22
スライド概要
講演アーカイブ：
https://www.youtube.com/watch?v=e1pTSrnjBqQ&list=PLr_Cbd4sUDTxsGqpTyasfI1yRzY5Uy8CE&index=7
講演内容：
Unreal Engineはフォトリアルな描画が可能ですが、そのためには相応のスペックを持つPCが必要です。
しかし、Pixel Streamingを使用すれば、webブラウザを通じて多くのユーザーに高品質なコンテンツを届けることが可能になります。
本講演では、ひょっとすると日本初かもしれないPixel Streamingを使用した建築／インテリア・シミュレーターの開発事例をご紹介します。
講演者：
今和泉 学 (Amocc Pte. Ltd. 代表取締役)
米田 拓男 (Amocc Pte. Ltd. エンジニア)
UNREAL FEST EXTREME 2022 SUMMER公式サイト：
https://unrealengine.jp/unrealfest/extreme2022summer/
#uefest
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
関連スライド
各ページのテキスト
日本初Pixel Streamingを使用した Webサービスの開発事例 Amocc Pte. Ltd.
アモックとは？ ・家具メーカー（ベトナムに工場） ・アプリケーション開発事業 ・3Dのインテリアシミュレーター ・自社でアプリケーション開発 ・グローバルなアプリケーション開発チーム（共通言語は英語） ・ベトナムに3Dモデリングチーム 2
PCアプリケーション R.Design（アール・デザイン） R.Design（アール・デザイン） ・3Dのインテリアシミュレーター。 ・Unreal Engineの特性を生かした、ハイクオリティーでフォトリアルなグラフィックが特色。 ・実績：長谷工コーポレーション様（分譲マンションのインテリアコーディネート） ・弊社以外の製品も配置可能。 3
PCアプリケーション R.Design（アール・デザイン） メリット ・現実と見間違えるくらいの描画が可能。 デメリット ・相応のスペックを持つPCが必要になる点がネック。 Pixel Streamingの使用を検討 4
Pixel Streamingについて ・アプリケーションをあらゆるプラットフォームのウェブブラウザにストリーミングできる。 ・スマホやタブレット、ノートPCからでもOK。 ・ユーザー側のダウンロードやインストールは一切不要。 ・キーボードやマウス、タッチイベントに対応。 ・デバイスの制約を受けない。 ・リモートコンピュータで実行。 ・リモートコンピュータのCPU や GPU、メモリに依存。 5
Pixel Streamingを使用した弊社コンテンツ Property Studio ・部屋の壁紙や床材を変更でき、外の景色を切り替えることができる。視点移動可。 Art Studio ・壁に配置された額縁のアート作品を変更したり、額縁の素材・サイズを変更できる。 EC Studio ・ソファのファブリックや形を切り替えることができる。視点移動可。 6
Pixel Streamingの開発体制 ４つの領域のエンジニアが協力 データベース アプリケーション サーバ Web 7
Pixel Streamingの開発体制 ４つの領域のエンジニアが協力 データベース アプリケーション サーバ Web 8
サーバサイドについて ・オンプレミスからクラウドへ移行。 クラウド サーバ インスタンス インスタンス インスタンス インスタンス インスタンス ・１ユーザにつき、１アプリインスタンス。 ・５ユーザであれば、５アプリインスタンス。 ・１サーバにつき、最大１５インスタンス起動できる。 ユーザ 9
サーバサイドについて 転送 スタンバイ サーバ HAProxy サーバ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス スタンバイ スタンバイ スタンバイ TCP接続 リクエスト ・HAProxyによって、サーバの数をオートスケール。 ・HAProxyでクライアントからのTCP接続をスタンバイサー バに転送。 ・１つのサーバで、１５のインスタンスがスタンバイ。 ・ユーザー数が１２を超えると、新たにサーバを起動。 ユーザ 10
サーバサイドについて 転送 スタンバイ サーバ HAProxy サーバ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス スタンバイ スタンバイ TCP接続 リクエスト サーバ１ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ スタンバイ ユーザ 11
サーバサイドについて 転送 スタンバイ サーバ HAProxy サーバ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス 転送 TCP接続 リクエスト サーバ１ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス スタンバイ スタンバイ スタンバイ スタンバイ ユーザ 12
サーバサイドについて 転送 スタンバイ サーバ HAProxy サーバ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス スタンバイ スタンバイ スタンバイ TCP接続 リクエスト ・ユーザの数が１２より少なくなったら、サーバ数をス ケールダウン。 ・一定時間トラフィックがなかった場合、スタンバイサー バをスウィッチオフ。 ユーザ 13
フロントエンドについて ・Pixel Streamingを表示するWebページを用意する。 ・モバイルにもPCにも対応する必要がある。 ・Jue.jsでレスポンシブデザインに対応。 モバイル PC 14
フロントエンドについて ・アイテム変更ボタンやカートは、Webページ 上に組み込まれている。 アイテム変更ボタン ・Webページからコマンドを送信して、アプリ ケーションを制御している。 ・アイテムやカートの情報は、Webページ側が、 データベースから直接取得。 カート 15
フロントエンドについて ・UIは、Pixel StreamingのSignaling and Webサーバーにあるサンプルプレイヤーページをカスタマイズして作 成。 ・コマンドの送信は、Pixel StreamingにビルトインされているWebRTCファンクションを使用。 １つのアプリケーションを使いまわしながら、 PCにもモバイルにも対応したレスポンシブなデザインを実現。 16
アプリケーションについて ・Pixel Streamingプラグインを有効にすることでPixel Streamingの機能を使えるようになる。 ・マウスラグの問題をはじめ、パフォーマンスの最適化に多くの時間を要した。 １：使用リソースの削減 ２：ブロックノイズの除去 17
アプリケーションについて １：使用リソースの削減 ・ひとつのサーバにつき、なるべく多くのインスタンスを起動できるようにする。 ・はじめは、1、2インスタンスしか起動することができなかった。 インスタンスが使用するCPUやGPU、メモリなどのリソースを削減。 18
アプリケーションについて 工夫①：ライティングの方法を見直した ・ダイナミックライティングからスタティックなBakedライティングへ変更。 ・アイテムを回転させる代わりに、アイテムの周りをカメラが移動。 19
アプリケーションについて 工夫②：フレームレートの制御 ・Pixel Streamingプラグインが内部で使用しているWebRTCライブラリのフレームレートを制御し、フレーム レートのデフォルト値を60FPSから25FPSへ引き下げた。 使用したコマンド例 PixelStreaming.WebRTC.MaxFps 25 ・WebRTCの最大フレームレートを25に指定。 20
アプリケーションについて 工夫③：使用状況を監視 ・ユーザのアプリの使用状況を監視し、状況に応じて、サーバのメモリ消費を抑制するための独自の仕組みを 導入。 これらの工夫により、１つのサーバにつき、 最大１５のインスタンスを同時に起動させることができるようになった。 サーバ インスタンス インスタンス サーバ インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス インスタンス 21
アプリケーションについて ２：ブロックノイズの除去 工夫①：解像度の指定 Pixel Streamingのコンソールコマンドを使用し、解像度を固定した。 使用したコマンド例 PixelStreaming.Capturer.UseBackBufferSize 0 PixelStreaming.Capturer.CaptureSize 1280x720 ・Pixel Streamingの解像度を1280x720に指定。 r.SetRes 1280x720w ・アプリケーション側の解像度も同様に1280x720に指定。 22
アプリケーションについて 工夫②：WebRTCの設定変更 ・Pixel Streamingプラグインが内部で使用するWebRTCライブラリの設定を変更した。 使用したコマンド例 PixelStreaming.WebRTC.DegradationPreference BALANCED ・DegradationPreferenceは、通信環境が悪くなった時に、フレームレートと解像度のどちらを優先するかを指 定できる。 ・BALANCEDにすることで症状が改善された。 23
アプリケーションについて 工夫③：Unreal Engineのバージョン更新 ・Unreal Engineのバージョンを最新にすることでも改善した。 ・現在は、UE5を使用。 これらの工夫により、ブロックノイズの発生を抑制することができた。 24
Pixel Streamingを使用したWebコンテンツ Pixel Streamingを使用した弊社Webコンテンツはこちらからご確認いただけます。 https://r.design/ja/web-configurator/ 25
PC用アプリケーション R.Design（アール・デザイン） 弊社のPC用アプリケーションR.Design（アール・デザイン）は、現在、Beta版を公開中です。 https://r.design/ 26
東京ショウルーム 弊社東京ショウルームでもアプリケーションを体験していただくことが可能です。 https://shop.r.design/house-tokyo 27
導入支援のご相談 Unreal Engine、ならびにPixel Streamingの導入支援に関するご相談はこちらにお問い合わせください。 https://r.design/ja/streaming-implementation-support/ 28
アンケートへのご協力をよろしくお願いします https://forms.gle/QHkw4R7MvdYYNXyT6 29