|
|
应用场景：
说点废话，三维场景或者叫可视化或者叫数字孪生等等，其实就是三维的一个东西，游戏在很早很早之前就已经使用了，现在像建筑设计、汽车、机械等等也都开始使用了。毕竟从二维到三维这个进步的方向是不会错的，虽然很多都没真正落地。
当然不一定所有项目都要使用云渲染，例如你的项目本身就是CS架构的，就是电脑端的一个应用程序，只要电脑配置可以，那么就完全不需要云渲染了。
一般情况下，可能你的项目是BS架构的；为什么现在都做BS架构，其实简单来说就是方便，不需要热更新，容易分享，给别人一个连接就可以。
BS架构才会用到云渲染，当然也不一定所有的BS架构都需要云渲染，比如你的项目很小，模型面数也很小，打包之后不超过50M100M的，那你通过Unreal也好或者Unity打包个WebGL嵌入到前端就可以了，现在的网速加载个50M的东西应该还是可以的，而且以后会更快；也许以后网速快到1g都很快能加载完的话，浏览器也能带动超多面数的三维场景，那么云渲染似乎又没了用武之地了。
回归正题：
目前用云渲染的场景：智慧城市、智慧社区/园区、智慧楼宇、智慧工厂等等；反正就是各种智慧的东西，说真的，这吹牛的能力确实一般，词汇也真的是匮乏，搞来搞去全是智慧什么什么。
前置条件：
使用Windows10操作系统
要做云渲染，那你必须要有一个配置极高的电脑，最重要的是要有一个超级显卡，越牛越好越贵越好，推荐NVIDIA系列显卡。云渲染吗，就跟多年前的远程桌面是的；网页性能不行，就让服务器来渲染，然后给你推送像素流就行了。
一般情况下，推荐使用Chrome、Firefox。
一、像素流推送准备工作
1.安装vscode，选择扩展，搜索Vetur插件，安装一下。vscode中查看Terminal，切换到控制台Command Prompt，切换到命令行，node --version，查看一下装没装过node，没有的话，进入下一步，安装node环境。
2.安装node，重新看看js环境，node --version，还有npm --version，这个包管理器。
3.安装vue，这是一个目前主流的前端开发环境，大部分公司应该都是在用这个，查看你的电脑上有没有vue的环境，vue --version。安装vue直接在vscode控制台中输入npm install -g @vue/cli回车即可。
4.安装echarts图表插件，在vscode终端中输入npm install echarts --save回车即可。
5.新建ue项目，开启像素流送插件Pixel Streaming，打包win64版本。
二、使用步骤
1.进入ue打包的目录\WindowsNoEditor\Engine\Source\Programs\PixelStreaming\把WebServers拷贝到WindowsNoEditor同级目录下，有这个WebServers文件夹的前提是在ue中已经使用了Pixel Streaming插件。如果没有找到上述路径，那么应该是在\WindowsNoEditor\Samples\PixelStreaming\中，ue版本更新后，路径应该是改了。
2.修改信令配置\WebServers\SignallingWebServer\config.json
config.json默认是这样的
{
"UseFrontend": false,
"UseMatchmaker": false,
"UseHTTPS": false,
"UseAuthentication": false,
"LogToFile": true,
"HomepageFile": "/www/player.html",
"AdditionalRoutes": {},
"EnableWebserver": true,
"MatchmakerAddress": "",
"MatchmakerPort": "9999",
"PublicIp": "localhost",
"HttpPort": 80,
"HttpsPort": 443,
"StreamerPort": 8888
}然后，你需要删掉，修改成下面这样.如果下面的信令配置不对，那么你可以去官方看一下。
{
"UseFrontend": false,
"UseMatchmaker": false,
"UseHTTPS": false,
"UseAuthentication": false,
"LogToFile": true,
"HomepageFile": "player.htm",
"AdditionalRoutes": {},
"EnableWebserver": false,
"peerConnectionOptions": "{\"offerExtmapAllowMixed\":false}",
"StreamerPort": 7777,
"httpPort": 777,
"publicIp": "127.0.0.1"
}信令服务器的作用就是把前端和后端做一个连接。
3.\WebServers\Matchmaker文件夹下，双击run.bat，启动服务，等窗口内出现提示；自己看看是否与配置文件相符。启动成功后不要关闭窗口，关闭窗口就表示关闭了该服务。
如果你觉得run.bat这个启动信令不好找，当然你可以使用新的批处理，放在最外层级中；@echo off
call"WebServers\SignallingWebServer\run.bat"，这样你双击新的批处理启动服务就可以了。
4.“启动实例.bat”
你也可以使用批处理，@echo off
start WindowsNoEditor/Demo.exe -ResX=1920 -ResY=1080 -PixelStreamingIP=localhost -PixelStreamingPort=7777 -log -RenderOffScreen
5.新建文件夹WebVue，进入WebVue，在文件浏览器的地址栏中输入cmd，回车，在打开的命令行窗口中，输入vue create demo。
6.把安装好的demo文件夹拖到vscode中打开
7.把ue4Player文件夹拷贝到\WebVue\demo\src\下，App.vue的第七行改成import HelloWorld from ‘./ue4Player/example.vue’
8.选择vscode的查看页签，选择终端，在打开的终端中输入npm run serve，等待启动前端server后，打开浏览器可查看渲染效果。
三、公网方案
1.确保本地能正常运行。
2.公网服务器端口开发
tcp：3478、777、7777
udp：1-65535
3.修改信令配置，即上面说到的\WebServers\SignallingWebServer\config.json，其中120.55.50.49是公网服务器的ip地址。如果不行，你可以去官方看一下。
{
"UseFrontend": false,
"UseMatchmaker": false,
"UseHTTPS": false,
"UseAuthentication": false,
"LogToFile": true,
"HomepageFile": "player.htm",
"AdditionalRoutes": {},
"EnableWebserver": false,
"peerConnectionOptions": "{\"offerExtmapAllowMixed\":false,\"iceServers\":[{\"urls\":[\"stun:120.55.50.49\",\"turn:120.55.50.49:3478\"],
\"username\":\"PixelStreamingUser\",\"credential\":\"Another TURN in the road\"}]}",
"StreamerPort": 7777,
"httpPort": 777,
"publicIp": "120.55.50.49"
}4.新增两个shell文件,文件名+内容。
文件名：_start.sh
内容： nohup node cirrus --configFile='./config.json' >out.log 2> out.err &
echo $! > out.pid
文件名：_stop.sh
内容：PID=$(cat out.pid)
kill -9 $PID
5.上传SignallingWebServer文件夹到服务器，修改shell文件可执行权限
6.启动信令服务 sh _start.sh
7.检查端口监听情况 netstat -lunpt，确保7777和777端口正常监听
8.本地启动实例，其中参数PixelStreamingIP=120.55.50.49，为公网服务器ip
9.启动前端，连接120.55.50.49地址上的信令服务器，此时可以看到流送画面 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2022-5-23 08:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡