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
980
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
640
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
ふつうの技術スタックでアート作品を作ってみる
akira888
1
830
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
技術同人誌をMCP Serverにしてみた
74th
1
640
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building an army of robots
kneath
306
45k
The Language of Interfaces
destraynor
158
25k
How GitHub (no longer) Works
holman
314
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Automating Front-end Workflow
addyosmani
1370
200k
Rails Girls Zürich Keynote
gr2m
95
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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