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博客