Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Pixel Streaming使用して 企業紹介ページ作ってみた
Search
Maichele
February 29, 2024
Programming
0
480
Pixel Streaming使用して 企業紹介ページ作ってみた
【オンライン】Unreal Engine もくもく会 in 富山 (UEMT)#20 で使用したLT資料になります。
Maichele
February 29, 2024
Tweet
Share
More Decks by Maichele
See All by Maichele
そろそろVR Pixel Streamingを試してみたい
genki28
1
1k
Other Decks in Programming
See All in Programming
Webサーバーサイド言語としてのRustについて
kouyuume
0
2.3k
What's new in Spring Modulith?
olivergierke
1
160
Le côté obscur des IA génératives
pascallemerrer
0
150
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
AkarengaLT vol.38
hashimoto_kei
1
110
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
1
150
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
340
CSC509 Lecture 04
javiergs
PRO
0
300
Catch Up: Go Style Guide Update
andpad
0
240
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
450
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
A Tale of Four Properties
chriscoyier
161
23k
Designing Experiences People Love
moore
142
24k
Done Done
chrislema
185
16k
Side Projects
sachag
455
43k
For a Future-Friendly Web
brad_frost
180
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Scaling GitHub
holman
463
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building an army of robots
kneath
306
46k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
Pixel Streaming使用して 企業紹介ページ作ってみた 【オンライン】Unreal Engine もくもく会 in 富山 (UEMT)#20 2023年10月14日
まいけるさん(@MasoronaT)
まいけるさん(@MasoranaT) 都内に住むITエンジニア。 UEは2023年に入って少ししてから始めました! 業務では今回紹介するPixel Streaming関連やVR関連を 触っています! まだまだ修行中の身です📜 趣味: ドラム 自己紹介
早速ですが、Unreal Engineを使用してWebコンテンツを作 りたくないですか?
そんなあなたにPixel Streaming!!
今回触れない内容 - × Pixel Streamingの実装方法 - × Pixel Streamingをさくっと試すためにやるべきことの解説 -
〇 Pixel Streamingの概要 - 〇 Pixel Streamingを利用して実際に自社ホームページに採用するにあたって良かった点・考慮した点・辛み点 ※ 試す場合には、 公式以外に加えて以下の解説ページがわかりやすいかと思います。 - 1.ローカル編 UE4 Pixel Streamingを試す #クラウドゲーミング - 誰でもどこでも、 PCでもスマホでも。❝ Microsoft Azure x Pixel Streaming❞を活用した万能テストプレイ環境を構築してみる
Pixel Streamingとは? 一言で表すと... サーバーでUEのゲームを動かして、 それをWebブラウザで楽しもう! という機能です。
Pixel Streamingとは? Unreal Engine製のアプリケーションをサーバーで動作させ、レンダリング結果を WebRTCという技術を利用して映像や音声をユーザーへ送信したり、 ユーザーの入力をUnreal Engine側に送ったりすることで WebブラウザでUnreal Engineアプリケーションを体験できる機能のこと
具体的な仕組みは? ① ユーザーがSignalling Serverへアクセス(Webページへアクセス) ② Signalling Serverがユーザー(ブラウザ)と UEアプリ間の接続確立を行う(ユーザー、 UEとはそれぞれ WebSocket通信)
③ ユーザーとUE間でWebRTC(P2P)接続を開始し、UE側から映像や音声・イベントの送信、ユーザー側か らイベントの送信ができるようになる なお、この接続中もSignalling ServerとユーザーやUEアプリはWeb Socket通信で常時接続を行っていま す(何らかの事象でストリームを中断することがなどがあるため)
何が嬉しいの? - サーバーでレンダリング等を行うため、多くの場合において ユーザーの端末のスペックに左右されず に複雑なシーン を体験してもらうことが可能 - ユーザーは実行ファイルやコンテンツファイルをダウンロードやインストールする必要がなく、ストリームのダウンロード のみでアプリケーションを体験できる。このため、ユーザー側は手軽に、 作成側は流出されたくない
3Dモデルを使用 することができます。 - マルチプラットフォーム対応する際、 個別のパッケージを作る必要がない 詳細: https://docs.unrealengine.com/5.2/ja/overview-of-pixel-streaming-in-unreal-engine/
採用するにあたって工夫した点ある? - サーバー1台で複数のUEアプリを立ち上げたかったため、 クオリティをできる限り維持しながら処理負荷を下げるよう な工夫をしました - FPSの固定化 - スケーラビリティの調整 -
UEアプリの起動時にコマンドライン引数にて UEアプリ自体の解像度を少し落とした状態で固定 - ライティング・シャドウの調整 - UIはできるだけWebフロントで処理 - ネットワーク状況によっては、(基本的には)ストリームの品質が落ち、画質が荒れる場合があります。そのた め、UIはWebフロントで制御をし、クリックイベントなどを WebRTCのData Channelを通じてUE側へ送信(それ ぞれUEのプラグインやWebフロントのライブラリで対応しています) - 同時接続者数の制限や体験可能時間を制限するといった仕様であることやユーザーからリクエストされた時に UEア プリを起動する形としたため、サーバー実装をテンプレートから改造
工夫を踏まえて実際どんな感じに組んだの? こちらを利用したサイトは、 2023/10/23公開予定です!!問題が発生したため、公開を延期しています。
採用してみて辛かった点・困った点ある? - GPUを搭載する関係でサーバー代が気になる。 - 注: 中古でGPUを購入し、自分でホスティングする場合は初期費用 + 月々の電気代 + 月々のネットワークや負荷分散用に導入したサービス費
用で済む場合もあります。 - 必要な技術範囲が広かった - 配信系のWebサービスに求められる知識 + ゲーム開発に必要な知識 - 但し、サーバーのサンプル実装やフロントエンドのライブラリ、サーバーセッティングの方法がまとめられたgithubリポ ジトリなど参考にできるものがいくつもあったため大分助けられました - 1台で複数のUEアプリケーションを立ち上げる関係上、GPU負荷を考えて実装や調整などを行ったため、本当にPixel Streamingという選択肢で良かったのか?といった不安に駆られた(これは、普通にWebGL・WebGPUなどで十分満たせる のではないかという不安) - 後ほど説明しますが、デザイナーさんと 2人での開発であったため、 UEを使えて良かったことから不安と書きつつも採用して良かったと感じては います。 - なぜかChromeだと映像が止まる瞬間が多い( 原因不明の未解決事件)
採用してみて良かった点はある? - ゲーム開発に豊富な知見がある状態ではないところからデザイナーさんと二人三脚で始めたため、 最初から高クオリ ティ絵が出てくるUnreal Engineで開発できた点が本当によかったです。 - 容易に複数のプラットフォーム対応できた 点 -
特に制限なく、Unreal Engineの機能を使用できた点 - サーバーレンダリングのため、通信環境さえ安定していたら「この端末で動かない(自分の環境では動いたのに ...)」 「この端末ではスペックが ...」といったことが起きにくいため、 営業時などに自社の宣伝をする際に手軽に触ってもらい やすかった点
よく参考にしていたサイト - https://github.com/TensorWorks/PixelStreamingCloudGuide - https://github.com/EpicGames/PixelStreamingInfrastructure - https://www.docswell.com/s/EpicGamesJapan/Z2EL9K-UE_UFE22S_Amocc - https://tech.isid.co.jp/entry/unreal-engine-pixel-streaming -
https://tensorworks.com.au/blog/ - https://tensorworks.com.au/blog/an-open-architecture-for-scalable-pixel-streaming