WebGL三维模型展示系统及方法

技术领域

本申请涉及实时音视频领域，尤其涉及一种WebGL三维模型展示系统及方法。

背景技术

WebGL(Web Graphics Library，web图形库)是一种3D绘图协议，可以为HTML5(超文本5.0)Canvas(画布)提供硬件3D加速渲染，可以借助系统显卡在浏览器展示3D场景以及模型。

目前在浏览器直接加载WebGL模型，会受到终端网速、模型资源大小、终端(浏览器)运行内存、终端渲染性能等因素影响，会出现加载时间过长甚至加载失败等现象，对于不同的终端用户而言，这严重地影响了WebGL模型的用户体验感。

发明内容

本申请提供了一种WebGL三维模型展示系统及方法，用以解决采用Canvas渲染WebGL三维模型加载时间长的问题。

第一方面，本申请实施例提供了一种WebGL三维模型展示系统，包括前端浏览器、后台服务器和节点机；所述节点机中包括音视频捕捉控件；

所述前端浏览器，用于将静态HTML文件构建成可执行程序，其中，所述静态HTML文件中包括WebGL三维模型，将所述可执行程序发送至所述节点机，接收所述后台服务器发送的展示链接，打开所述展示链接，在ice交换选举成功后，与所述节点机建立WebRTC连接，接收所述节点机通过所述WebRTC连接发送的音视频轨道，创建视频流，将所述音视频轨道添加至所述视频流，获取合成后的视频流，对所述合成后的视频流进行播放；

所述后台服务器，用于创建所述可执行程序对应的展示任务，将所述展示任务发送至所述节点机，生成所述展示任务对应的展示链接，将所述展示链接发送至所述前端浏览器；

所述节点机，用于接收所述前端浏览器发送的所述可执行程序，接收所述后台服务器发送的所述展示任务，启动所述展示任务对应的所述可执行程序，使用所述音视频捕捉控件录制屏幕数据流，生成音视频轨道，将所述音视频轨道通过所述WebRTC连接发送至所述前端浏览器。

可选地，所述展示链接中包括校验信息；

所述前端浏览器，还用于使用所述校验信息与所述后台服务器建立通信连接，向所述后台服务器发送offer信息，接收所述节点机发送的answer信息，所述answer信息用于指示ice交换选举成功；

所述后台服务器，还用于接收所述前端浏览器发送的所述offer信息，将所述offer信息发送至所述节点机；

所述节点机，还用于接收所述后台服务器发送的所述offer信息，使用所述音视频捕捉控件根据所述offer信息生成answer信息，将所述answer信息发送至所述前端浏览器。

可选地，所述通信连接为套接字连接。

可选地，所述前端浏览器，具体用于通过桌面应用程序框架将所述静态HTML文件构建成所述可执行程序。

可选地，所述前端浏览器，具体用于通过MediaStream创建视频流。

第二方面，本申请实施例提供了一种WebGL三维模型展示方法，应用于前端浏览器，包括：

将静态HTML文件构建成可执行程序，其中，所述静态HTML文件中包括WebGL三维模型；

将所述可执行程序发送至所述节点机；

接收所述后台服务器发送的展示链接，打开所述展示链接，在ice交换选举成功后，与所述节点机建立WebRTC连接；

接收所述节点机通过所述WebRTC连接发送的音视频轨道，其中，所述音视频轨道是所述节点机启动所述可执行程序后，通过音视频捕捉控件录制屏幕数据流生成的；

创建视频流，将所述音视频轨道添加至所述视频流，获取合成后的视频流；

对所述合成后的视频流进行播放。

可选地，所述展示链接中包括校验信息；

所述打开所述展示链接之后，所述与所述节点机建立WebRTC连接之前，所述方法还包括：

使用所述校验信息与所述后台服务器建立通信连接；

向所述后台服务器发送offer信息；

接收所述节点机发送的answer信息，其中，所述answer信息是所述节点机接收到所述后台服务器转发的offer信息，并使用所述音视频捕捉控件根据所述offer信息生成的，所述answer信息用于指示ice交换选举成功。

可选地，所述通信连接为套接字连接。

可选地，所述将静态HTML文件构建成可执行程序，包括：

通过桌面应用程序框架将所述静态HTML文件构建成所述可执行程序。

可选地，所述创建视频流，包括：

通过MediaStream创建视频流。

本申请实施例提供的上述技术方案与现有技术相比具有如下优点：本申请实施例中，前端浏览器将静态HTML文件构建成可执行程序，其中，静态HTML文件中包括WebGL三维模型，将可执行程序发送至节点机，后台服务器创建可执行程序对应的展示任务，将展示任务发送至节点机，生成展示任务对应的展示链接，将展示链接发送至前端浏览器，前端浏览器打开展示链接，在ice交换选举成功后，与节点机建立WebRTC连接，节点机启动展示任务对应的可执行程序，使用音视频捕捉控件录制屏幕数据流，生成音视频轨道，将音视频轨道通过WebRTC连接发送至前端浏览器，前端浏览器创建视频流，将音视频轨道添加至视频流，获取合成后的视频流，对合成后的视频流进行播放。相对于现有技术中采用Canvas渲染WebGL三维模型，本申请中通过WebRTC音视频流替换Canvas渲染WebGL三维模型，能够将终端网速、模型资源大小、运行内存、终端渲染性能等因素对于三维模型加载以及渲染的影响降到较低，进而具备稳定快速展示的特性。在同一网络设备上对比，从时间上看，Canvas加载以及渲染较大的三维模型时间约为几十秒至数分钟不等，改为视频流渲染后，降低到十几秒甚至数秒渲染展示。从三维模型软件载体看，只需要维持节点机的Chromium(主流浏览器内核)的稳定，而对于任何终端客户而言，三维模型的表现形式是视频流，提高了可控性以及稳定度。解决了采用Canvas渲染WebGL三维模型加载时间长的问题。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例中WebGL三维模型展示系统的结构示意图；

图2为本申请实施例中应用于前端浏览器的WebGL三维模型展示的方法流程示意图；

图3为本申请一个具体实施例中WebGL三维模型展示的方法流程示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请实施例中，提供了一种WebGL三维模型展示系统。如图1所示，WebGL三维模型展示系统包括前端浏览器10、后台服务器20和节点机30；节点机30中包括音视频捕捉控件31；

前端浏览器10，用于将静态HTML(Hyper Text Markup Language，超文本标记语言)文件构建成可执行程序，其中，静态HTML文件中包括WebGL三维模型，将可执行程序发送至节点机30，接收后台服务器20发送的展示链接，打开展示链接，在ice交换选举成功后，与节点机30建立WebRTC连接，接收节点机30通过WebRTC连接发送的音视频轨道，创建视频流，将音视频轨道添加至视频流，获取合成后的视频流，对合成后的视频流进行播放；

后台服务器20，用于创建可执行程序对应的展示任务，将展示任务发送至节点机30，生成展示任务对应的展示链接，将展示链接发送至前端浏览器10；

节点机30，用于接收前端浏览器10发送的可执行程序，接收后台服务器20发送的展示任务，启动展示任务对应的可执行程序，使用音视频捕捉控件31录制屏幕数据流，生成音视频轨道，将音视频轨道通过WebRTC连接发送至前端浏览器10。

WebRTC(Web Real-Time Communications，网页实时通信)是一项实时通讯技术，允许终端在不借助中间媒介的情况下，建立点对点连接实现视频流和音频流或者其他任意数据的传输，实现点对点任意数据分享。

其中，可执行程序可以是windows系统exe文件格式。节点机可以是windows系统。

音视频捕捉控件提供屏幕数据流的录制和操控功能，实时抓取最新屏幕画面。

展示用户可以在前端浏览器通过视频流的方式快速预览到原本WebGL模型内容，并通过音视频捕捉控件进行控制操作，而不需要等待模型资源的加载和渲染。

一个具体实施例中，展示链接中包括校验信息；

前端浏览器，还用于使用校验信息与后台服务器建立通信连接，向后台服务器发送offer信息，接收节点机发送的answer信息，answer信息用于指示ice交换选举成功；

后台服务器，还用于接收前端浏览器发送的offer信息，将offer信息发送至节点机；

节点机，还用于接收后台服务器发送的offer信息，使用音视频捕捉控件根据offer信息生成answer信息，将answer信息发送至前端浏览器。

例如，展示链接中包括appkey(API接口验证序号，即公匙，相当于账号)校验信息。

offer信息是主动发起方发送的信息。answer信息是被动接受方响应的信息。

前端浏览器基于WebRTC的RTCPeerConnection(实时通信对等连接)，参与coturn(免费的开源的TURN/STUN服务器)服务的ice(交互式连接设施)交换选举。

一个具体实施例中，通信连接为套接字(socket)连接。

套接字Socket＝(IP地址：端口号)，套接字的表示方法是点分十进制的lP地址后面写上端口号，中间用冒号或逗号隔开。每一个传输层连接唯一地被通信两端的两个端点(即两个套接字)所确定。例如：如果IP地址是210.37.145.1，而端口号是23，那么得到套接字就是(210.37.145.1:23)。

一个具体实施例中，前端浏览器，具体用于通过桌面应用程序框架将静态HTML文件构建成可执行程序。

其中，桌面应用程序框架是指Electron。例如，桌面应用程序框架为BrowserWindow(浏览器窗口)。

一个具体实施例中，前端浏览器，具体用于通过MediaStream创建视频流。

MediaStream接口是一个媒体内容的流，一个流包含几个轨道，比如视频和音频轨道，作用是从用户本地摄像机和麦克风访问媒体流。

综上，本申请实施例中，前端浏览器将静态HTML文件构建成可执行程序，其中，静态HTML文件中包括WebGL三维模型，将可执行程序发送至节点机，后台服务器创建可执行程序对应的展示任务，将展示任务发送至节点机，生成展示任务对应的展示链接，将展示链接发送至前端浏览器，前端浏览器打开展示链接，在ice交换选举成功后，与节点机建立WebRTC连接，节点机启动展示任务对应的可执行程序，使用音视频捕捉控件录制屏幕数据流，生成音视频轨道，将音视频轨道通过WebRTC连接发送至前端浏览器，前端浏览器创建视频流，将音视频轨道添加至视频流，获取合成后的视频流，对合成后的视频流进行播放。相对于现有技术中采用Canvas渲染WebGL三维模型，本申请中通过WebRTC音视频流替换Canvas渲染WebGL三维模型，能够将终端网速、模型资源大小、运行内存、终端渲染性能等因素对于三维模型加载以及渲染的影响降到较低，进而具备稳定快速展示的特性。在同一网络设备上对比，从时间上看，Canvas加载以及渲染较大的三维模型时间约为几十秒至数分钟不等，改为视频流渲染后，降低到十几秒甚至数秒渲染展示。从三维模型软件载体看，只需要维持节点机的Chromium(主流浏览器内核)的稳定，而对于任何终端客户而言，三维模型的表现形式是视频流，提高了可控性以及稳定度。解决了采用Canvas渲染WebGL三维模型加载时间长的问题。

基于同一构思，本申请实施例中提供了一种WebGL三维模型展示方法，应用于前端浏览器。该方法的具体实施可参见系统实施例部分的描述，重复之处不再赘述，如图2所示，该方法主要包括：

步骤201，将静态HTML文件构建成可执行程序。

其中，静态HTML文件中包括WebGL三维模型。

其中，可执行程序可以是windows系统exe文件格式。

一个具体实施例中，将静态HTML文件构建成可执行程序，包括：通过桌面应用程序框架将静态HTML文件构建成可执行程序。

其中，桌面应用程序框架是指Electron。例如，桌面应用程序框架为BrowserWindow(浏览器窗口)。

步骤202，将可执行程序发送至节点机。

节点机可以是windows系统。

步骤203，接收后台服务器发送的展示链接，打开展示链接，在ice交换选举成功后，与节点机建立WebRTC连接。

WebRTC(Web Real-Time Communications，网页实时通信)是一项实时通讯技术，允许终端在不借助中间媒介的情况下，建立点对点连接实现视频流和音频流或者其他任意数据的传输，实现点对点任意数据分享。

一个具体实施例中，展示链接中包括校验信息。打开展示链接之后，与节点机建立WebRTC连接之前，应用于前端浏览器的WebGL三维模型展示方法还包括：使用校验信息与后台服务器建立通信连接；向后台服务器发送offer信息；接收节点机发送的answer信息，其中，answer信息是节点机接收到后台服务器转发的offer信息，并使用音视频捕捉控件根据offer信息生成的，answer信息用于指示ice交换选举成功。

例如，展示链接中包括appkey(API接口验证序号，即公匙，相当于账号)校验信息。

offer信息是主动发起方发送的信息。answer信息是被动接受方响应的信息。

前端浏览器基于WebRTC的RTCPeerConnection(实时通信对等连接)，参与coturn(免费的开源的TURN/STUN服务器)服务的ice(交互式连接设施)交换选举。

一个具体实施例中，通信连接为套接字连接。

步骤204，接收节点机通过WebRTC连接发送的音视频轨道。

其中，音视频轨道是节点机启动可执行程序后，通过音视频捕捉控件录制屏幕数据流生成的。

步骤205，创建视频流，将音视频轨道添加至视频流，获取合成后的视频流。

一个具体实施例中，创建视频流，包括：通过MediaStream创建视频流。

MediaStream接口是一个媒体内容的流，一个流包含几个轨道，比如视频和音频轨道，作用是从用户本地摄像机和麦克风访问媒体流。

步骤206，对合成后的视频流进行播放。

展示用户可以在前端浏览器通过视频流的方式快速预览到原本WebGL模型内容，并通过音视频捕捉控件进行控制操作，而不需要等待模型资源的加载和渲染。

相对于现有技术中采用Canvas渲染WebGL三维模型，本申请中通过WebRTC音视频流替换Canvas渲染WebGL三维模型，能够将终端网速、模型资源大小、运行内存、终端渲染性能等因素对于三维模型加载以及渲染的影响降到较低，进而具备稳定快速展示的特性。在同一网络设备上对比，从时间上看，Canvas加载以及渲染较大的三维模型时间约为几十秒至数分钟不等，改为视频流渲染后，降低到十几秒甚至数秒渲染展示。从三维模型软件载体看，只需要维持节点机的Chromium(主流浏览器内核)的稳定，而对于任何终端客户而言，三维模型的表现形式是视频流，提高了可控性以及稳定度。解决了采用Canvas渲染WebGL三维模型加载时间长的问题。

一个具体实施例中，如图3所示，WebGL三维模型展示的方法流程包括：

步骤301，前端浏览器将静态HTML文件构建成可执行程序，将可执行程序发送至节点机。

其中，静态HTML文件中包括WebGL三维模型。

前端浏览器可以是通过Electron(BrowserWindow)将静态HTML文件构建成可执行程序，可执行程序可以是windows系统exe文件格式，节点机可以是windows系统。

步骤302，后台服务器创建可执行程序对应的展示任务，将展示任务发送至节点机，生成展示任务对应的展示链接，将展示链接发送至前端浏览器。

其中，展示链接中包括校验信息。例如，展示链接中包括appkey(API接口验证序号，即公匙，相当于账号)校验信息。

步骤303，节点机接收前端浏览器发送的可执行程序，接收后台服务器发送的展示任务，启动展示任务对应的可执行程序，使用音视频捕捉控件录制屏幕数据流，生成音视频轨道。

音视频捕捉控件提供屏幕数据流的录制和操控功能，实时抓取最新屏幕画面。

步骤304，前端浏览器接收后台服务器发送的展示链接，打开展示链接，使用校验信息与后台服务器建立通信连接，向后台服务器发送offer信息。

通信连接可以为套接字(socket)连接。

步骤305，后台服务器接收前端浏览器发送的offer信息，将offer信息发送至节点机，节点机使用音视频捕捉控件根据offer信息生成answer信息，将answer信息发送至前端浏览器。

具体地，将offer信息发送至节点机的音视频捕捉控件。

offer信息是主动发起方发送的信息。answer信息是被动接受方响应的信息。

步骤306，前端浏览器接收节点机发送的answer信息，answer信息用于指示ice交换选举成功，在ice交换选举成功后，与节点机建立WebRTC连接。

前端浏览器基于WebRTC的RTCPeerConnection(实时通信对等连接)，参与coturn(免费的开源的TURN/STUN服务器)服务的ice(交互式连接设施)交换选举。

在前端浏览器收到answer信息后，前端浏览器所参与的coturn服务的ice交换选举将选举成功。

步骤307，节点机将音视频轨道通过WebRTC连接发送至前端浏览器，前端浏览器创建视频流，将音视频轨道添加至视频流，获取合成后的视频流，对合成后的视频流进行播放。

具体地，前端浏览器可以通过MediaStream创建视频流。

展示用户可以在前端浏览器通过视频流的方式快速预览到原本WebGL模型内容，并通过音视频捕捉控件进行控制操作，而不需要等待模型资源的加载和渲染。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本发明的具体实施方式，使本领域技术人员能够理解或实现本发明。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。