The main reason why UE uses streaming rendering technology is to improve rendering efficiency and reduce costs. Streaming rendering technology can distribute rendering tasks to multiple computing nodes for parallel processing, thus speeding up rendering. At the same time, streaming rendering technology can also distribute rendering tasks to the cloud for processing, reducing the burden on the local computer and reducing costs. In addition, streaming rendering technology can also achieve real-time rendering, allowing users to preview scene effects in the editor in real time, improving work efficiency. For a long time, the display of UE on the front end has been using streaming rendering technology based on webrtc real-time audio and video transmission. But at present, cloud rendering based on UE is a big problem for most people to deploy. It is a big threshold for server selection and learning of UE PixelStreaming, and because the server cost of UE's cloud rendering is too high, it needs a server It has dynamic elastic scaling capability.
Relying on Tencent's rich edge computing nodes, flexible GPU virtualization technology, and stable and low-latency audio and video streaming capabilities, Tencent's application cloud rendering helps you cloudify application clients, so that users do not need to download application packages, but only need to open The video screen can operate and experience the application on the cloud. At the same time, Applied Cloud Rendering provides cloud API + full-end SDK to meet the needs of your users in various terminals and business scenarios. It not only solves the problem of cloud rendering of UE, but theoretically, it can satisfy all the needs of the cloud that cannot be directly front-end. Rendering needs (since it is aimed at most of the large-scale software that requires 3D rendering, there is no targeted optimization for a certain platform, which also limits the use of certain functions).
Steps to apply cloud rendering
1. Enter https://cloud.tencent.com/product/car of Tencent Cloud应用云渲染
The module is applied for use, and after the approval, the cloud rendering console will be used. For first-time users, there is a free application (future scenario-demo application) by default, and two free concurrent packages are provided (the demo application method cannot be modified into your own application)
2. Upload your own application
At present, this application can only support 3D applications of windows, and supports uploading zip/rar compressed packages. The upload process is a bit long. My 1.6G UE application took about half an hour to upload (so the program should go through a relatively strict process. Test, otherwise this time is still a bit long).
After the upload is complete, you need to configure the startup parameters.
- It is best to wait for the startup path to be selected after the application is uploaded and the background is fully decompressed. It is best not to write the path yourself, and it is very likely to make a mistake.
- The startup parameters are easy to understand, that is, the command line parameters we bring when we use an exe (the cloud rendering parameters brought by UE itself do not need to be used, because this is not the cloud rendering plug-in that comes with UE)
- It can be seen from the general usage pattern that cloud rendering is obtained by capturing the desktop of the cloud server, and is not bound to any application. Only capturing the application window is essentially to obtain the information of that window in windows, and then perform rendering binding ( https://cloud.tencent.com/document/product/1547/72369 )
3. Create a project
Create a project to set the project type, associated application, and concurrency specification (consistent with the concurrency package that needs to be purchased later, otherwise it cannot be used)
4. Assign and issue packages for the project
One route is one concurrent package. If there are 300 routes, you need to buy 300 concurrent packages. If there are 100 concurrent packages, if there is no discount, it will cost 260,000 yuan a month (you can apply for a discount with Tencent Cloud customers). Sponsorships cost more. If it is only for testing, there is a discount, about 500 yuan for a medium-sized server in the first month of the first channel.
After the purchase is completed, the project can be allocated and packaged.
5. Effect test
Generate an experience code for each effect test
Use the application cloud rendering API
After the effect test is completed, we need to use the official API to build our own front-end and back-end scheduling, so that we can use our own domain name and customize our own pages. For specific documents, please refer to https://cloud.tencent.com/document/product/1547/72707
1. Build the backend
The business background must be deployed and cannot be omitted. After downloading the backend deployment program from the official website (nodejs backend), you need to provide the SecretId and SecretKey of the Tencent Cloud account (available in the console API key management ), for the safety of your property and services , this information needs to be processed in the background. In addition, you also need a business background to manage user sessions and complete functions such as user queuing. Start after deployment.
Build the front end
Download the code from github , configure it according to the documentation, and write a simple demo
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<title>Tencent Cloud - Real-Time Cloud Rendering - CAR - demo</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'SimHei', 'Microsoft YaHei', 'Arial', 'sans-serif';
}
#demo-container {
width: 100%;
height: 100%;
}
#plugin-point {
position: absolute;
left: 100px;
bottom: 150px;
width: 0px;
height: 0px;
}
</style>
</head>
<body>
<div id="demo-container">
<div id="mount-point"></div>
<div id="plugin-point"></div>
</div>
<script type="text/javascript" src="index.js"></script> //我把第三方库TCGSDK的js文件单独放在同目录下了
<script type="text/javascript" src="joystick.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
<script>
//自定义生成USERID。
const getPassword = (legnth) => {
// 定义一个空数组保存我们的密码
let passArrItem = [];
// 定义获取密码成员的方法
const getNumber = () => Math.floor(Math.random() * 10); // 0~9的数字
const getUpLetter = () => String.fromCharCode(Math.floor(Math.random() * 26) + 65); // A-Z
const getLowLetter = () => String.fromCharCode(Math.floor(Math.random() * 26) + 97); // a-z
// 将获取成员的方法保存在一个数组中方便用后面生成的随机index取用
const passMethodArr = [getNumber, getUpLetter, getLowLetter];
// 随机index
const getIndex = () => Math.floor(Math.random() * 3);
// 从0-9，a-z，A-Z中随机获取一项
const getPassItem = () => passMethodArr[getIndex()]();
Array(legnth - 3).fill('').forEach(() => {
passArrItem.push(getPassItem());
})
const confirmItem = [getNumber(), getUpLetter(), getLowLetter()];
// 加上我们确认的三项，从而使生成的密码，大写字母、小写字母和数字至少各包含一个
passArrItem.push(...confirmItem);
// 转为字符串返回
return passArrItem.join('');
}
const StartProject = async () => {
const url = 'http://134.175.62.177:4100/StartProject'; // 这个是自己的业务后端的地址.
// For more information on other optional parameters, see the document of the `ApplyConcurrent` API.
const {
data } = await axios.post(url, {
ProjectId: 'cap-nfkjzrj8',
UserId: getPassword(8), // Random UserId
ClientSession: TCGSDK.getClientSession(),
});
console.log('%c StartProject res', 'color: blue; font-size: 14px', data);
const {
Code, SessionDescribe: {
ServerSession } } = data;
if (Code === 0) {
TCGSDK.start(ServerSession);
} else {
// Process the request exception
}
}
// For two-finger touch, record the position of the last touch point to facilitate coordinate calculation.
let lastX = null;
let lastY = null;
// For more information on the SDK lifecycle, visit https://ex.cloud-gaming.myqcloud.com/cloud_gaming_web/docs/index.html.
TCGSDK.init({
appid: 1317511421,
mount: 'mount-point',
debugSetting: {
showLog: true,
},
// Connected successfully.
onConnectSuccess: async (res) => {
console.log('onConnectSuccess', res);
// // Add joystick
// const j = new CloudGamingPlugin.joystick({
// zone: document.querySelector('#plugin-point'),
// });
},
// The network was disconnected or the user was kicked out.
onDisconnect: (res) => {
console.log('onDisconnect', res);
},
onWebrtcStatusChange: (res) => {
console.log('onWebrtcStatusChange', res);
},
// The user touched the mobile client to simulate an instruction sent on a PC.
onTouchEvent: async (res) => {
// console.log('onTouchEvent', res);
// The code for a single-finger touch operation
if (res.length === 1) {
const {
id, type, pageX, pageY } = res.pop();
// console.log('onTouchEvent', id, type, pageX, pageY);
TCGSDK.mouseMove(id, type, pageX, pageY);
if (type === 'touchstart') {
TCGSDK.sendRawEvent({
type: 'mouseleft', down: true });
}
if (type === 'touchend' || type === 'touchcancel') {
TCGSDK.sendRawEvent({
type: 'mouseleft', down: false });
}
}
// The code for a two-finger pinch zoom operation. Here, the two fingers simulate a mouse scroll wheel event on a PC.
if (res.length === 2) {
const [{
pageX: oneX, pageY: oneY }, {
pageX: twoX, pageY: twoY }] = res;
const currentX = Math.ceil(Math.abs(oneX - twoX));
const currentY = Math.ceil(Math.abs(oneY - twoY));
// `lastX` and `lastY` indicates the previous position and can be defined globally like this: `let lastX = null, lastY = null`.
lastX ||= currentX;
lastY ||= currentY;
if (lastX && currentX - lastX < 0 && lastY && currentY - lastY < 0) {
TCGSDK.sendRawEvent({
type: 'mousescroll', delta: 1 });
lastX = currentX;
lastY = currentY;
}
if (lastX && currentX - lastX > 0 && lastY && currentY - lastY > 0) {
TCGSDK.sendRawEvent({
type: 'mousescroll', delta: -1 });
lastX = currentX;
lastY = currentY;
}
}
},
onInitSuccess: async (res) => {
console.log('%c onInitSuccess', 'color: red', res);
await StartProject();
}
});
</script>
</body>
</html>
Advantages and disadvantages of UE cloud rendering and Tencent cloud rendering
1. Advantages and disadvantages of UE cloud rendering
- Based on the official pixel stream plug-in implementation, it can be flexibly deployed in its own server as needed, and the cost is a one-time investment.
- Supports the interaction between UE and front-end pages, and can be highly customized.
- Without a set of mature and simple server deployment methods, it is a relatively big trouble for the configuration of large-scale servers, and it is also a relatively big problem for server selection.
2. Tencent Cloud App Cloud Rendering
- Simple deployment, dynamic allocation, stable, and less prone to network problems.
- Not just UE deployment, but more general 3D rendering deployment
- Long-term use is expensive
- Does not support privatized deployment, not suitable for units with high confidentiality
- Interaction with 3D internal programs is not supported, and needs to be implemented separately.