WebGL是一種基于OpenGL ES 2.0的Web技術，屬于BS架構，它允許在瀏覽器中渲染交互式3D和2D圖形。
隨著大場景高精度的開發要求深入，對于較高級的 WebGL 應用程序，需要性能更強的系統要求，如仍然維持低端硬件或瀏覽器，會導致 WebGL 性能下降或無法正常運行；使用復雜的 3D 模型或大型 360° 圖像可能會導致性能不佳或阻止在移動設備上加載空間。
如何解決WebGL性能局限性的問題，可以借鑒3D實時云渲染的技術路線，即將WebGL的BS架構，再包一層殼，實現真正解放算力的BS化。
WebGL技術與實時云渲染技術對比
同為BS架構的呈現效果，實時云渲染與WebGL的不同之處在于：
-
實時云渲染是將計算渲染在服務端完成，將交互視頻流推送到客戶端，不再占用客戶端算力，只要能觀看高清視頻的設備就可以進行實時交互操作；WebGL則需要依托客戶端的硬件設備，有比較高的配置要求，無法做到強兼容各個時期的電腦設備
-
實時云渲染自帶各類操作系統/終端設備的自適應，可將一套Windows/Linux系統程序在各類操作系統（含國產信創/手機移動端OS等）上直接運行；WebGL對瀏覽器有架構要求，比如Safari會受到影響而不能完全使用
-
實時云渲染的可拓展性極強，對于數字孿生行業，老場景低精度用WebGL，大場景高精度用UE/Unity等三維引擎是行業普遍認知，云渲染可以兼容各類操作系統，如Linux/Windows/iOS/Android/MacOS/Ubuntu/國產銀河麒麟/國產統信UOS/深度DeeplnOS等，也可以支持各類主流設備，如服務器/工作站/筆記本/平板/手機/互動大屏/全息投影/VR/AR/MR等各類終端，其中VR支持市面上所有主流VR一體機眼鏡，包括Meta/Apple Vision Pro/PICO/HTC/Xreal/NOLO/Xvisio/奇遇/HUAWEI/玩出夢想，為拓展項目生命周期和項目建設規模提供了極大的技術支持。而這些是WebGL技術不具備的。
-
實時云渲染性能更佳，支持一卡多并發和多卡集群部署大并發：每個GPU默認可以支持多路并發，多GPU的場景下，單GPU可支持更多并發。不占用客戶端算力，靈活動態調節。
實時云渲染賦能WebGL應用無需加載、秒級打開
經過實時云渲染后生成的新URL網頁鏈接，如何與可視化業務系統進行對接？可以使用“數據通道”功能組件來實現這一效果。
WebGL應用集成數據通道功能組件
1. 初始化數據通道
在WebGL頁面加載完成后，需要初始化數據通道。此函數會調用 window.larkxr_dc_init() 方法，完成數據通道的初始化。
2. 接收文本數據
當用戶端頁面發送文本數據時，頁面會調用 onDcTxtData 函數。此函數會將接收到的文本數據顯示在WebGL頁面上的指定 div 元素中。
3. 接收TaskId
當數據通道連通，WebGL頁面會調用 onTaskStatus 函數。此函數會接收到TaskId參數。
4. 發送消息到用戶端頁面
WebGL頁面上有一個按鈕，點擊該按鈕會調用 larkxr_dc_send 函數，將消息發送到用戶端頁面。
頁面結構：以下是頁面的WebGL HTML 結構 Demo：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LarkXR Data Channel Example</title><style>.fixed-size-div {width: 100px;height: 100px;background-color: lightblue;display: flex;justify-content: center;align-items: center;font-size: 14px;}</style></head><body><h1>LarkXR Data Channel Example</h1><button onclick="larkxr_dc_send('Hello from WebGL page!')">發送消息"Hello from WebGL page!"到用戶端頁面</button><div class="fixed-size-div">This is the target div，接收用戶端頁面發送的數據:<span id="targetDiv"></span></div><script>// 初始化數據通道function larkxr_init() {console.log("Data Channel Initialized");window.larkxr_dc_init();}// 接收用戶端頁面發送的文本數據function onDcTxtData(data) {console.log("Received text data from user end:", data);// 獲取目標 div 元素const targetDiv = document.getElementById('targetDiv');// 將參數值賦值給 div 的 innerTexttargetDiv.innerText = data;}// 接收當前的taskIdfunction onTaskStatus(taskId) {console.log("Received task status with taskId:", taskId);}// 頁面加載完成后調用初始化函數window.onload = function () {larkxr_init();};</script></body></html>客戶端集成WebSDK實現與服務端的雙向通信
1. 下載源碼
從[GitHub - ParaverseTechnology/lark\_sr\_websdk\_demos 下載 WebSDK 源碼。此項目提供了如何使用 LarkSR WebSDK 創建云渲染客戶端的簡單介紹。
2. 參考手冊
詳細操作請參考?[LarkSR WebClient SDK 文檔]。文檔中包含了如何安裝、使用 SDK 以及如何實現數據通道的具體步驟。
本文已發布于官網：https://www.pingxingyun.com/
![[激光原理與應用-156]：光學器件 - 激光器為什么會出現多余的能量，哪些地方會出現多余能量？](http://pic.xiahunao.cn/[激光原理與應用-156]：光學器件 - 激光器為什么會出現多余的能量，哪些地方會出現多余能量？)
