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可支持更多并发。不占用客户端算力，灵活动态调节。
经过实时云渲染后生成的新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 的 innerText
targetDiv.innerText = data;
}
// 接收当前的taskId
function onTaskStatus(taskId) {
console.log("Received task status with taskId:", taskId);
}
// 页面加载完成后调用初始化函数
window.onload = function () {
larkxr_init();
};
</script>
</body>
</html>
