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
320
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
830
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
AIプログラミング雑キャッチアップ
yuheinakasaka
11
2.1k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
200
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Open source software: how to live long and go far
gaelvaroquaux
0
650
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
昭和の職場からアジャイルの世界へ
kumagoro95
1
410
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
870
sappoRo.R #12 初心者セッション
kosugitti
0
270
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
640
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Producing Creativity
orderedlist
PRO
344
40k
Writing Fast Ruby
sferik
628
61k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Thoughts on Productivity
jonyablonski
69
4.5k
KATA
mclloyd
29
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Designing Experiences People Love
moore
140
23k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
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