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]：光学器件 - 激光器为什么会出现多余的能量，哪些地方会出现多余能量？)
