1 前言
????????最近在搞Unity云渲染的東西,所以研究了下官方提供的云渲染方案Unity Renderstreaming。注:本文使用的Unity渲染管線是URP。
2 文檔
????????本文也只是介紹基本的使用方法,更詳細內容參閱官方文檔。官方文檔:Unity Renderstreaming文檔。
3 簡單云渲染實現
3.1 系統結構
????????如上圖,一個Web服務器,兩個對等用戶。在渲染流媒體中,兩個對等方之間會創建一個P2P網絡,并且這個網絡會發送視頻/音頻/二進制數據。?Web服務器?使兩個對等方之間能夠進行通信。這種通信被稱為?信令(signaling)。
? ? ? ? 這是文檔中的部分內容,這里提一下可以先對整體結構有個了解。
3.2 安裝Unity Renderstreaming
????????在Unity 的Package Manager中通過git URL來添加包:
之后將com.unity.renderstreaming填入其中點擊Add即可。
添加時可能會提示需要Unity新的輸入系統Input System Package,點擊Yes即可。
? ? ? ? 之后可打開RenderStreaming的設置窗口,Unity Editor→Window→Render Streaming→Render Streaming Wizard:
初次打開時是設置窗口中會報有錯誤,點擊Fix All按鈕修復即可:
3.3 安裝WebRTC
? ? ? ? 這里通過Render Streaming提供的示例項目來導入WebRTC包,導入示例項目,然后WebRTC包就自動安裝了。
點擊Import安裝,這里因為我安裝過了,所以顯示的是Reimport。之后就可以看到WebRTC安裝完畢了:
3.4 安裝NodeJS
????????需要安裝到電腦上,來提供一個JavaScript運行環境。這個可以選擇安裝,具體什么時候需要會在后面說明,這里可以先不安裝。
NodeJS官網鏈接
? ? ? ? 進入官網,點擊左上角的Download按鈕,進入下載頁面:
這里我選擇的是Windows平臺64位,然后下載了安裝文件Windows installer。之后點擊安裝即可,路徑若無要求,則一路往下按就行。
? ? ? ? 安裝完成后需要檢查是否安裝成功。在電腦左下角搜索框輸入cmd,點擊回車打開命令行窗口,輸入如下命令檢查:
若安裝成功,將會如上圖所示輸出版本號;若失敗,則會無法識別輸入命令。
3.5 下載WebServer
????????官方提供的有一個WebServer,我們下載使用即可。GIt地址:WebServer。
【圖略,網頁當時打不開就沒截圖了】
????????在Release頁面中可以找到不同版本的WebServer。這里我們選擇3.1.0-exp.7版本,下載其中的webserver.exe,這是編譯好的可執行程序。源碼也可以下載一份留存,其中包含對應版本的UnityRenderStreaming包、webserver源碼。
????????3.1.0-exp.9版本則沒有提供可執行程序下載,若想使用此版本的,則需要自己編譯源代碼生成webserver.exe,那么這時就需要安裝NodeJS,按照前面章節的操作安裝即可。編譯源碼生成.exe可執行程序的方法如下:
- cmd打開命令行窗口。
- cd命令進入WebServer源碼文件中的WebApp文件夾。
- npm install,安裝依賴。
- npm run build,構建項目。
- npm run start,啟動項目(服務),等價于webserver.exe啟動,啟動后看看是否正常。
- npm run pack,啟動沒問題后使用此命令打包生成.exe可執行程序,方便后續啟動。
參考官方文檔:Customize web application。
? ? ? ? 那么如何使用webserver.exe啟動服務?這里不能點擊執行,需要通過命令行執行。流程如下:
- cmd打開命令行窗口。
- 進入到webserver.exe所在的文件夾(命令:cd + 路徑)。
- 執行webserver.exe(命令:webserver.exe,如果要制定端口的話為webserver.exe -p 端口號)。
如圖,啟動成功,此狀態即為服務運行中。
3.6 創建Unity場景
????????服務啟動成功了,但在開始體驗云渲染之前,我們還需要搭建好一個Unity場景。在Unity中創建一個空場景。
3.6.1 配置Renderstreaming組件
? ? ? ? 需要對Renderstreaming組件進行一些配置。這里主要是在Unity場景中配置一些包中提供的可用組件。
? ? ? ? 在場景中創建一個空對象命名隨意,這里我命名為“UnityRenderStreaming”。然后給此物體添加如下組件:
- SignalingManager
- Broadcast
- VideoStreamSender
- AudioStreamSender
然后對各組件進行設置:
這里設置了組件間的索引,同時將Video Source Type修改為Screen,Audio Listener設置為相機身上的Audio Listener。至于組件的其他屬性設置,目前保持默認即可。屬性具體含義可參考官方文檔。
3.6.2?配置Renderstreaming設置
? ? ? ? 點擊SignalingManager組件中的Open Project Setings按鈕,打開設置窗口。
若我們執行websever.exe時沒有指定端口,則這里使用默認的配置內容即可。若我們當時指定了端口,比如這里我指定的是8088,那么就要修改URL了。這里可以點擊Create New Settings Asset按鈕創一個新的配置資源文件(不是必須的),然后再修改URL,如圖:
使用了一個新的配置資源文件,并修改URL加上了端口號。
3.6.3 搭建場景
? ? ? ? 然后在場景中隨意創些模型,后續通過云渲染開查看此場景。目前只要能看到場景中的內容即可。
3.7 體驗云渲染
????????首先,在Unity編輯器中點擊Play運行。
????????然后打開瀏覽器(我這里使用的IE瀏覽器,瀏覽器支持情況附在本章節末尾),輸入服務地址127.0.0.1:8088,回車進入頁面(若在局域網內,其他人可通過輸入服務所在設備的IP地址+端口號來訪問)。
點擊Receiver Sample進入接收案例頁面,然后點擊窗口中的播放按鈕接收畫面。
可以看到我們成功看到了畫面,此時我們就成功實現了云渲染。畫面對網絡要求挺高的,在網絡較差時畫面會比較卡且模糊。
Unity Render Steaming對瀏覽器支持情況
4 外網訪問
????????參考官方文檔:Setting for TURN Servers。目前還未研究,暫時貼在這里。
? ? ? ? 按文檔說法,不一定需要這個,可以在運行webserber.exe后看命令行窗口中是否顯示公網IP,若顯示則應該可以讓外網訪問,我沒測試,自己測吧。不通了再考慮防火墻和Turn服務器等問題。
5 官方案例
? ? ? ? 官方文檔中也有提供幾個案例,這里挑一些說一說。當然,這里只是簡單介紹案例,案例提供的功能具體實現方式還是要去自己研究源碼。
????????首先需要做兩步:
- 運行webserver服務器(參考前面章節),這里我設置的端口為8088,所以用的地址為:http://127.0.0.1:8088。
- 打開Unity編輯器,可以在安裝的Unity Render Steaming案例文件中找到Menu場景,點擊進去,然后啟動Unity編輯器。
5.1 Receiver
? ? ? ? 接收畫面案例。
? ? ? ? 在運行的Unity編輯器的Menu場景中,點擊Broadcast按鈕,可以進入一個測試場景。然后打開web瀏覽器,輸入服務器地址(同前面章節),點擊Receiver即可看到場景內容。這個實例實際跟前面的“體驗云渲染”章節內容差不多,只不過這里的測試場景是官方提供的。
場景UI提供了一些可設置屬性:畫面源(分屏幕與相機)、帶寬、下采樣(降低畫面清晰度,減少帶寬壓力)、幀率、分辨率。左側是燈光開關、音頻播放按鈕。
? ? ? ? 另外,我們也可以在編輯器中將項目打包,初始場景設置為Menu場景。打包后,點擊可執行程序運行,然后在Menu場景中點擊Receiver進入接收場景,輸入一個隨意的ID,點擊Start按鈕后,也可以接收到測試場景畫面。只不過在可執行程序接收的畫面中不能操作,可能是是官方案例沒有提供非web的操作,也可能是我沒有配置好新的輸入系統,這里暫時不管了。
? ? ? ? 可以多個打包的可執行程序來接收畫面,也可以多個瀏覽器接收畫面,即多端接收,這些畫面是同一個畫面,一端操作,其他端也可以看到操作。
5.2?Broadcast
? ? ? ? 廣播畫面案例。
? ? ? ? 因為5.1在演示接收時使用了本節案例(官方行為)。所以本節內容與5.1是一樣的,不再說明。Broadcast案例的提供是為了說明畫面廣播功能,我們已在5.1中說明,即多端接收。
5.3?Web Browser Input
? ? ? ? web瀏覽器端輸入案例。
? ? ? ? 主要展示瀏覽器中輸入檢測,以及單獨的畫面展示。
????????與Broadcast很相似。首先輸入檢測Broadcast也有,它們原理是一樣的,都是借助新的輸入系統,只是輸入后的處理方法不同(Broadcast只展示輸入,這里是展示+移動視角)。關于單獨畫面展示,在瀏覽器接收的畫面中多展示了一個小窗畫面,主畫面是編輯器中WebBrowserInput場景的Camera1畫面,而小窗口畫面是Camera2畫面。
5.4?Multiplay
????????多端接收案例。
? ? ? ? 這里的多端是特殊的,Receiver與Broadcast案例中有提到多端接收,但它們的多端是指廣播接收,收到的畫面是一樣的,而本案例中的多端指它們可以接收到不同的畫面,如每個終端所接收的都是獨屬于自己的Camera的畫面。
? ? ? ? 同樣的在編輯器中的Mune場景中,點擊Multiplay按鈕:
然后可以選擇Host與Guest,即主機與用戶,這里我們將編輯器作為主機,需要勾選Host,用戶名可以自定義輸入。
然后點擊Start進入場景:
目前場景中就我們一個(小球貼圖丟失,問題不大),接下來使用瀏覽器或者打包的可執行程序都可以,我們這里用瀏覽器,在瀏覽器中點擊Multiplay Sample鏈接,然后點擊按鈕接收畫面:
可以看到,我們也進入了此場景,就像聯網游戲一樣,多個玩家在同一個場景中,大家都有各自的視角畫面展示。瀏覽器的用戶名是自動生成的,如果使用打包的可執行程序的話是可以自定義的,這里就不演示了。
6 問題
6.1 畫面顯示不全
? ? ? ? 問題:有時候在終端接收畫面時會出現畫面只顯示了一部分的情況。
? ? ? ? 解決:這是因為接收畫面設置的分辨率與畫面源的分辨率是設置不一致導致的,故將兩者設置相同即可。
7 后記
? ? ? ? 暫時這些吧。想深入了解,則文檔、Unity Render Streaming源碼、示例代碼都要看一看才行,不過最大的問題還是web服務器這塊,畢竟涉及JS方面的內容。
參考
- 官方文檔 Unity Render Streaming
- Unity Renderstreaming 云渲染入門教程 - 技術專欄 - Unity官方開發者社區
- Unity 云渲染本地部署方案_unity 中使用云渲染-CSDN博客