WebGL应用实时云渲染改造后如何与网页端实现数据通信

原创

Paraverse平行云

发布于 2025-08-05 17:36:11

2120

WebGL是一种基于OpenGL ES 2.0的Web技术，属于BS架构，它允许在浏览器中渲染交互式3D和2D图形。

随着大场景高精度的开发要求深入，对于较高级的 WebGL 应用程序，需要性能更强的系统要求，如仍然维持低端硬件或浏览器，会导致 WebGL 性能下降或无法正常运行；使用复杂的 3D 模型或大型 360° 图像可能会导致性能不佳或阻止在移动设备上加载空间。

如何解决WebGL性能局限性的问题，可以借鉴3D实时云渲染的技术路线，即将WebGL的BS架构，再包一层壳，实现真正解放算力的BS化。

1. 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网页链接，如何与可视化业务系统进行对接？可以使用“数据通道”功能组件来实现这一效果。

2. WebGL应用集成数据通道功能组件

初始化数据通道

在WebGL页面加载完成后，需要初始化数据通道。此函数会调用 window.larkxr_dc_init() 方法，完成数据通道的初始化。

2. 接收文本数据

当用户端页面发送文本数据时，页面会调用 onDcTxtData 函数。此函数会将接收到的文本数据显示在WebGL页面上的指定 div 元素中。

3. 接收TaskId

当数据通道连通，WebGL页面会调用 onTaskStatus 函数。此函数会接收到TaskId参数。

发送消息到用户端页面

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>