實時云渲染將UE像素流嵌入業務系統，實現二維管理系統與數字孿生三維可視化程序的無縫交互

在數字孿生大屏可視化項目中，將實時云渲染技術嵌入業務系統已成為提升用戶體驗和工作效率的關鍵策略之一。將云渲染嵌入業務系統，用戶可以在執行業務操作時實時看到云渲染畫面的響應，同時對云渲染畫面的操作也能立即反饋到業務系統中。這種無縫交互增強了用戶的操作體驗，還為業務流程的優化提供了新的可能性。本文將詳細介紹使用LarkXR 實時云渲染平臺時，如何利用?WebSDK 和數據通道插件實現這一目標。

一、場景概述

假設你正在管理一個建筑可視化項目，你的業務系統允許用戶設計建筑模型，并實時查看渲染效果。為了實現這一功能，你需要將實時云渲染嵌入到業務系統中，讓用戶在業務系統中進行操作時，云渲染畫面能夠實時響應；同時，用戶在云渲染畫面中的操作也能反饋到業務系統中，實現雙向交互。

二、準備工作

在開始實現之前，你需要確保已經具備以下條件：

LarkXR實時云渲染平臺：可自建https://www.pingxingyun.com/devCenter.html或者使用平行云實時云渲染托管平臺https://www.pingxingyun.com/console/#/console。
已有業務系統+云渲染WebSDK：可以利用WebSDK Demo基礎上去構建源碼：github.com
數據通道插件：支持 Unity、Unreal Engine（UE）和 WebGL 等各類 3D/XR 引擎，并為每種技術棧提供了不同的集成方式。

三、實現步驟

（一）集成 WebSDK

1. 獲取 WebSDK ID

您可以通過 LarkXR 實時云渲染平臺的個人開發者入口，自助申請 SDK（見下圖），也可以聯系客服等工作人員獲取本地測試的 SDK 。

2. 引入WebSDK

WebSDK 提供了多種 Demo 示例源碼：github.com。，其中 ui-mobile-vue-new 是一個非常推薦的選擇。這個 Demo 基于 Vue 2.0 開發，不僅與標準客戶端保持一致，還提供了完整的 UI 組件，并支持高度定制化。

# npm
npm i larksr_websdk
# plain html
<script src="larksr-web-sdk.min.js"></script>

3. 初始化 WebSDK & 加載云渲染場景

你需要提供一些配置參數，例如，您是自建的LarkXR實時云渲染平臺：

// serverAddress LarkXR云渲染平臺地址, exp：http://222.128.6.137:8181/// 您的 SDK ID 如果您是從開發者平臺申請的云授權碼，請在開發者平臺申請 SDK 授權碼，否則請聯系business@paraverse.cc // appliId 請在 LarkXR 管理后臺查看.var larksr= new LarkSR({ // 設置掛載顯示的元素// 注意*不要*設置為 document.documentElementrootElement: document.getElementById('container'),// 服務器地址,實際使用中填寫您的服務器地址// 如：http://222.128.6.137:8181/serverAddress: "Lark 服務器前臺地址",
});// 授權碼,驗證成功之后才能調用 connect
larksr.initSDKAuthCode('您的 SDK ID')
.then(() => {// start connect;client.connect({// 要使用的云端資源的應用 ID，從LarkXR管理后臺查看.// 參考查詢應用一欄文檔// https://showdoc.pingxingyun.com/web/#/75/1697appliId: "應用ID"}).then(() => {console.log('enter success');}).catch((e) => {console.error(e);}); 
})
.catch((e) => {console.error(e);
});

（二）配置數據通道插件

我們支持 Unity、Unreal Engine（UE）和 WebGL 應用，并為每種技術棧提供了不同的集成方式。以下是詳細的集成指南?https://showdoc.pingxingyun.com/web/#/42/1047

（三）發送消息到云渲染畫面

在業務系統中，當用戶執行操作時，通過WebSDK中封裝好的方法發送到云渲染畫面。例如：

<template><div><!-- 綁定發送消息到云端應用的操作 --><button @click="handleClick">點擊我，發送一條數據到云端應用</button></div></template><script>export default {methods: {handleClick() {/*** 發送文字消息給數據通道* 注意 云端應用要集成數據通道功能* > V3.2.314 版本對應服務器版本和數據通道版本為 3.2.5.1 及以上* @param text 文字*/
larksr.sendTextToDataChannel("業務系統發送消息到云端應用");  }}
};
</script>

（四）處理云渲染畫面的消息

以UE為例，可以監聽業務系統發送過來的消息：

// on_data:為接收到web或其他客戶端發來的數據，禁止為NULLLARKXR_API int  DC_CALL lr_client_start(const char* taskid, on_connected cb_connected,on_data cb_data,on_disconnected cb_disconnected,void* user_data);

（五）云端應用發消息到業務端

發送數據，支持字符串和二進制數據。

參數描述

type: 發送數據類型 ,字符串或者二進制數據
data: 數據指針
size: 數據長度 (字符串建議包含’\0’的長度)

返回值: 小于0 代表發送失敗參考類型定義，等于發送長度代表發送成功

LARKXR_API int DC_CALL lr_client_send(enum data_type type, const char* data, size_t size);
?

（六）業務端監聽云端應用發來的消息

在 LarkXR的整個生命周期中，會觸發多種事件通知。

其中，數據通道連通成功事件和數據通道接收到消息事件是本次實現中重點關注的事件類型。

// 數據通道是否打開 -- 重要，可以判斷數據通道是否連通
larksr.on('datachannelopen', function(e) { console.log("LarkSRClientEvent datachannelopen", e); 
});
// 數據通達收到文字消息
larksr.on('datachanneltext', function(e) { console.log("LarkSRClientEvent datachanneltext", e); 
});
// 數據通道收到字節消息 
larksr.on('datachannelbinary', function(e) { console.log("LarkSRClientEvent datachannelbinary", e); 
});
?

本文已發布于官網：https://www.pingxingyun.com/

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/90800.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/90800.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/90800.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！