[寫作練習] 用WebRTC框架,讓瀏覽器即時渲染高品質圖像

更新於 發佈於 閱讀時間約 3 分鐘
透過Unity先進的圖像串流技術,你可以不再受限於裝置的硬體效能,設計畫面更炫麗的遊戲了!我們的新玩意兒 — 「WebRTC」函式庫已整合到Unity中。簡單易用的框架可讓用戶快速的瞭解,如何透過瀏覽器串流你的產品。
WebRTC技術的強大功能讓你透過瀏覽器,渲染高質量的Unity專案。該框架可以在運行期或編輯器中使用,因此它可用於各種用途,例如運行使用HDRP製作的汽車儀表板,或查看需要高階顯卡才能顯示流暢完整的建築模型。

WebRTC補上了瀏覽器到即時渲染間的差距

WebRTC由Google於2011年開發,是一種開源軟件,支持瀏覽器和行動平台之間,即時的點對點通訊。任何支援WebRTC的最新版瀏覽器的設備,都可以使用Unity的開源框架進行渲染串流(render streaming)。 這包括iPad,iPhone和Android的所有主流瀏覽器。 該函式庫基於Apache2.0授權,可由Github取得,也可透過PackageManager更輕鬆的加入到你的專案使用。

瀏覽器端的用戶輸入

透過PackageManager將Unity開發好的「Render Streaming」插件(框架)安裝好後,用戶在瀏覽器的輸入就會被轉送過來,「輸入」包含了鍵盤,游標點擊,甚至是HTML的按鈕。你要做的就是在專案中針對不同的輸入做適當的處理,就像你本來在任何一個Unity專案做的事情相同。這個框架使用了WebRTC的DataChannel API,將用戶的輸入導向到Unity的輸入系統,因此在瀏覽器的輸入結果,將可和單機的開發體驗相同。

同時廣播到各個設備

使用Render Streaming插件,你可以同時向多個設備廣播影片。設備的最大數量取決於廣播機的硬體規格和影片規格 — 在正常情況下,普通機器可以同時向大約四個設備廣播。使用Render Streaming包時的一個重要考慮因素是網路環境。 WebRTC處理影音串流,因此穩定的網路對於保持影片品質至關重要。 同樣重要的是要記住,每個附加設備都會增加廣播機的負擔。
用Render Streaming插件,可建立內聯網(Intranet)影音串流系統,但若是要建立基於互聯網(Internet)的影音串流服務,則需要一個更複雜的系統。通常,如果目標是向十多個設備廣播,我們建議將SFU分散式服務器與系統結構以及用於WebRTC的單獨STUN / TURN服務器結合使用。

影片硬體編碼

為了提供高品質圖像和穩定的串流速率以獲得良好的用戶體驗,我們不得不解決兩個問題:性能和延遲。 為了減少延遲,Render Streaming框架使用NVIDIA Video Codec SDK將程序廣播到瀏覽器,以便在frame buffer上執行GPU硬體編碼。 這意味著要使用該框架,你目前一定要使用NVIDIA的GPU,但計劃將來將會支援其他GPU。

有什麼教程?從哪裡開始?

WebRTC基於Apache 2.0許可證,並作為社群支持的技術進行管理。 我們鼓勵你參與該技術的持續開發。 隨意分支存儲庫或擴展您喜歡的任何功能。 要開始使用,請查看教程文件(英語日語),如有任何其他問題,請參閱文件中的常見問題解答。 還有一個WebRTC和Render Streaming論壇,我們很樂意收到您的反饋。 我們很高興看到你將把WebRTC和Unity的強大功能放在一起。
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
Google實驗室Area120釋出了一個「製作遊戲」的遊戲叫「Game Builder」。 主要的用戶是遊戲編導,方便他們以拖拉卡片的型式來驗證遊戲性好不好。 因此這個專題就是「Game Builder」的"真心話(好用難用都會說)"和"大冒險(真的來挑戰看看能做什麼遊戲)"囉!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
幾個月前,我訂了人生第一個付費文章「科技島讀」。本來是從Podcast聽到的,聽著覺得真不錯,作者深入精闢的商業及科技分析,都讓我聽到許多印象深刻的觀點。後來…
動搖 最近,反Unreal的聲音一直在我耳邊出現。 他們的聲音不外乎是,沒有人在意App的穩定度啦,遊戲不需要那麼炫的效果和效能啦,找Unity的人很好找啦,授權太貴了啊等等。講到我真的是都有點動搖了…
上一次我們已經完成了玩家端的部署,接下來就是要有敵人囉。和「Plant vs Zombies」相同,敵人也是分五道過來,不一定會先從哪一道過來,也不一定都會是哪一種敵人會過來。這次的主題就是設計一個簡單的敵人,並亂數的配置它們從不同的方向過來。
在這個遊戲的workshop中,看到一個【Aqua Defense】,訂閱下來小玩了一下。除了一直有奇怪的重複音效以外,大致上完成度算是夠高了。基本上這就是一個【Plants vs Zombies】規格的作品,不過它沒有向日葵這種單位可以生產錢幣,而是定時生產,剩下的就是其他單位不同而已。
這其實不是個遊戲,真的是卡片展示。就是一個個區塊展示不同的卡片用途。這裡我們一樣會挑一些之前教程沒接觸到的卡片或遊戲規格來分析說明。
這個遊戲在關卡的設計上也很有新意,分成了地上及地下世界,最後會飛上天空才過關哦!這裡也會介紹一些動作過關遊戲常見的規格及該使用哪些卡片。雖然介紹的內容稍少了些(因為許多基礎已無須再說),但還是值得看一下囉!
幾個月前,我訂了人生第一個付費文章「科技島讀」。本來是從Podcast聽到的,聽著覺得真不錯,作者深入精闢的商業及科技分析,都讓我聽到許多印象深刻的觀點。後來…
動搖 最近,反Unreal的聲音一直在我耳邊出現。 他們的聲音不外乎是,沒有人在意App的穩定度啦,遊戲不需要那麼炫的效果和效能啦,找Unity的人很好找啦,授權太貴了啊等等。講到我真的是都有點動搖了…
上一次我們已經完成了玩家端的部署,接下來就是要有敵人囉。和「Plant vs Zombies」相同,敵人也是分五道過來,不一定會先從哪一道過來,也不一定都會是哪一種敵人會過來。這次的主題就是設計一個簡單的敵人,並亂數的配置它們從不同的方向過來。
在這個遊戲的workshop中,看到一個【Aqua Defense】,訂閱下來小玩了一下。除了一直有奇怪的重複音效以外,大致上完成度算是夠高了。基本上這就是一個【Plants vs Zombies】規格的作品,不過它沒有向日葵這種單位可以生產錢幣,而是定時生產,剩下的就是其他單位不同而已。
這其實不是個遊戲,真的是卡片展示。就是一個個區塊展示不同的卡片用途。這裡我們一樣會挑一些之前教程沒接觸到的卡片或遊戲規格來分析說明。
這個遊戲在關卡的設計上也很有新意,分成了地上及地下世界,最後會飛上天空才過關哦!這裡也會介紹一些動作過關遊戲常見的規格及該使用哪些卡片。雖然介紹的內容稍少了些(因為許多基礎已無須再說),但還是值得看一下囉!
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 影音也是如此, 即時! 即時! 即時! 已經是目前使用者體驗的必要元素了, 在這邊我們要分享的主題是如何在python程式語言的情境下使用ffmpeg來將音檔串流的轉換格式, 為什麼會有這樣的需求呢? 因為我們處理音檔時可能會需要統一輸出的格式, 當然背後也
Thumbnail
PairDrop 免費、開源的網頁版檔案傳輸工具,無須註冊免安裝,將裝置連線同一個 WiFi 網路,打開網站會自動建立連線,點選裝置名稱即可開始傳送檔案,使用 WebRTC 技術進行傳輸,服務穩定且傳檔速度,各種系統置都能方便、安全地傳送檔案。
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Chat With RTX 為 NVIDIA RTX AI PC 量身打造聊天機器人 此一技術展示內容讓所有 RTX GPU 用戶都能享受到強大的個性化 GPT 聊天機器人 https://blogs.nvidia.com.tw/2024/02/16/chat-with-rtx-availabl
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
Thumbnail
在當今科技高速發展的時代,遠端工作與學習已成為一種新常態。為了迎合這一需求,我們推出了『雲端真實投影機』(CloudReal),一款創新的投影設備,旨在提供最接近面對面交流體驗的遠程互動解決方案。本文將從產品的獨特特色、使用場景、技術優勢等多方面進行詳細介紹,全面解析『雲端真實投影機』如何顛覆您對遠
Thumbnail
Websocket是一種網路傳輸的協定,讓建立一次handshake的過程就可以相互傳遞資料,而非同步的過程能夠讓處理事情更有效率,這篇文章將帶你深入瞭解Websocket如何運作、以及其特點與優勢。
Thumbnail
gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
訊息的即時傳遞已然成為現代社會的趨勢了, 影音也是如此, 即時! 即時! 即時! 已經是目前使用者體驗的必要元素了, 在這邊我們要分享的主題是如何在python程式語言的情境下使用ffmpeg來將音檔串流的轉換格式, 為什麼會有這樣的需求呢? 因為我們處理音檔時可能會需要統一輸出的格式, 當然背後也
Thumbnail
PairDrop 免費、開源的網頁版檔案傳輸工具,無須註冊免安裝,將裝置連線同一個 WiFi 網路,打開網站會自動建立連線,點選裝置名稱即可開始傳送檔案,使用 WebRTC 技術進行傳輸,服務穩定且傳檔速度,各種系統置都能方便、安全地傳送檔案。
Thumbnail
作為一個非常不專業的前端初學者,有陣子常常卡在公司官網,要插入 Youtube 影片無法RWD(響應式)的問題。 跟不熟悉 網頁技術的朋友們介紹,RWD 就是指網頁的排版能跟著螢幕的大小縮放、變化編排,在這個人手一機的時代,特別重要。
Chat With RTX 為 NVIDIA RTX AI PC 量身打造聊天機器人 此一技術展示內容讓所有 RTX GPU 用戶都能享受到強大的個性化 GPT 聊天機器人 https://blogs.nvidia.com.tw/2024/02/16/chat-with-rtx-availabl
Thumbnail
CSR(Client Side Rendering)是一種將渲染資料的過程交由瀏覽器端處理的方法。
Thumbnail
伺服器端渲染(SSR)是一種在伺服器端渲染 HTML 頁面的技術。
Thumbnail
在當今科技高速發展的時代,遠端工作與學習已成為一種新常態。為了迎合這一需求,我們推出了『雲端真實投影機』(CloudReal),一款創新的投影設備,旨在提供最接近面對面交流體驗的遠程互動解決方案。本文將從產品的獨特特色、使用場景、技術優勢等多方面進行詳細介紹,全面解析『雲端真實投影機』如何顛覆您對遠
Thumbnail
Websocket是一種網路傳輸的協定,讓建立一次handshake的過程就可以相互傳遞資料,而非同步的過程能夠讓處理事情更有效率,這篇文章將帶你深入瞭解Websocket如何運作、以及其特點與優勢。
Thumbnail
gRPC是一款跨平台、高性能的RPC框架,他可以在任何環境下執行,主要用於後端為服務開發。在用戶端應用程式中,可以像本地物件那樣呼叫遠端伺服器的方法,因此可以創建出分散式應用。 使用 到https://github.com/protocolbuffers/protobuf/releases下