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
430
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
970
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
WindowInsetsだってテストしたい
ryunen344
1
200
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
970
ニーリーにおけるプロダクトエンジニア
nealle
0
560
Is Xcode slowly dying out in 2025?
uetyo
1
200
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
210
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
640
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
230
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
100
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A designer walks into a library…
pauljervisheath
207
24k
Six Lessons from altMBA
skipperchong
28
3.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
It's Worth the Effort
3n
185
28k
KATA
mclloyd
29
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Code Reviewing Like a Champion
maltzj
524
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
YesSQL, Process and Tooling at Scale
rocio
173
14k
Adopting Sorbet at Scale
ufuk
77
9.4k
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