基于WebGL的浏览器远程交互技术优化研究

关键词：WebGL协议;浏览器远程交互;技术优化

中图分类号：TP393.09     文献标识码：A 文章编号：2096-4706（2019）06-0067-03

Abstract：Remote interaction is a technology based on some communication protocol，which enables users to control another computer remotely on one computer and realize desktop/graphics sharing. VNC，DCV and VirtualGL used C/S interaction，focusing on three-dimensional accelerated rendering，but browser rendering technology is less studied，while B/S interaction lacks the direction and means of performance optimization. For this reason，this paper is based on VNC protocol and WebGL rendering graphics，new optimization ideas are explored from three levels of architecture，algorithm and code，and a comparative analysis is made.

Keywords：WebGL protocol;browser remote interaction;technological optimization

1  技术背景

众所周知，远程控制技术有C/S、B/S两种架构，C/S架构具有扩展性差、运维成本高等缺点[1]。在HTML5标准获得广泛认可和支持的背景下，可以判断现代浏览器将成为新的客户端，SVG/Canvas/WebGL将成为新的渲染引擎。企业运行过程中应用到的众多大型软件能够在不同终端实现在线渲染，实时交互。特别是考虑到数字化云平台形成以后，基于浏览器的远程交互将为虚拟桌面的推广应用提供新的方式;同时在远程交互技术市场化中，形成具有技术优势的先进产品。

浏览器实现远程交互有两种方法，一是将浏览器视为软件，拿到数据后就可以进行计算和渲染。这一方法的实现必须掌握软件的源代码，改写整个软件。部分企业不具有这个实力，并且通过进行初步的测试，发现延时很严重，浏览器开销很大。另一种方法是将浏览器视为显示工具，只需要重新实现VNC/RDP/DCV等客户端的协议解析和图形显示功能。目前，包括OpenStack在内的很多公司的开源项目都集成了noVNC组件。一些企业的数字化云平台中也集成了该组件，它是基于HTML5技术，通过浏览器为用户提供远程交互服务。但是，在实际应用和测试中我们发现，noVNC存在较大的性能瓶颈，对用户操作的响应速度较慢，有时延时长达10～30秒。这将严重影响用户的操作体验，不利于桌面虚拟化服务的推广。

2  技术思路

C/S架构下的VNC（Virtual Network Computing）主要由VNC Client、VNC Server和RFB（Remote Frame Buffer）协议组成。通过网络传送鼠标、键盘的消息以及桌面的更新图像数据，实现计算机间的远程共享和远程操作。图形在VNC Viewer通过系统的图形DirectX、OpenGL进行渲染。

noVNC的B/S架構是目前在基于浏览器远程交互的实现中使用最多的，我们的目标是基于noVNC进行改进。在明确了VNC输出到浏览器的性能瓶颈的基础上，按照“从开源中来到开源中去”的思路。首先，利用noVNC项目快速搭建一个能在浏览器中进行远程交互的开发环境。然后，按照“异步处理+多进程计算+分帧渲染”的优化策略，综合采用WebGL、WebWorker等新技术，逐步改造noNVC的交互显示流程。最后与云平台进行集成，在生产环境中对比应用效果。

3  基于WebGL的技术优化

3.1  WebGL原理

WebGL（Web Graphics Library）是一种绘图协议，允许把JavaScript和OpenGL ES2.0结合在一起。浏览器无须任何插件，即可实现交互式3D和2D图形渲染，并可利用显卡硬件进行加速。

3.2  浏览器远程交互调优

主要包括架构优化、算法优化、代码优化三个方面，具体如下：

（1）架构优化中NoVNC、Guacamole容器、源码性能测试牺牲5%的性能，换取更便捷的大规模部署，选择noVNC继续进行优化。

（2）算法优化直接创建一个虚拟的显卡驱动，在应用程序呼叫操作系统需要改变图形显示的时候，事先截取应用程序需要显示的区域和内容，并缓冲到内存中。与实时捕获屏幕并比较差异的方法比较具有CPU占用率小，实时性强;不需要比较差异，因为截取的就是差异部分的图像缓冲等优点。

（3）代码优化中老版本的WebSocket协议采用文本传输，所有的图片、音频等数据都必须经过base64.js实现编码转换，但是base64编解码器等运算复杂，最初做法是比照C、C++版本，实现相应的JS版本，现在通过WebAssembly实现，直接转码，该技术由Mozilla、谷歌、微软及苹果联合开发。

3.3  實验内容和效果对比

3.3.1  基线环境部署

（1）Linux环境：

操作系统：Ubuntu16.04;CPU：单核;VNC Server：X11VNC;

用途：测试架构优化效果;内存：1GB VNC Client：noVNC。

（2）Windows环境：

操作系统：Windows7;CPU：单核;VNC Server：UltraVNC;

用途：测试算法优化效果;内存：2GB;VNC Client：noVNC。

3.3.2  架构优化效果对比

（1）Docker部署Guacamole：

安装Docker;

拉取image;

配置、运行各容器。

（2）源码部署Guacamole：

安装基础包，eg.libpng12-dev，libvncserver-dev;

下载、编译、安装guacamole-server;

下载guacamole-client.war;

安装Java、Tomcat;

Tomcat部署guacamole。

1）通过登录、拖拽、输入三种场景操作反应时间对比可以看出（如图1所示），Docker部署代价≈20%，而Guacamole≈1.2*noVNC。

2）通过登录、拖拽、输入三种网络流量汇总对比可以看出（如图2所示），Guacamole≈7*noVNC;性能提升有网络带宽的代价。

部署UltraVNC+noVNC，安装mirror driver插件。应用System Hook策略，效果输入、拖拽、鼠标有较明显延迟;CPU占用≈10%。应该Mirror Driver策略效果输入、拖拽、鼠标非常流畅;CPU占用≈5%。mirror driver打开确实比system hook更流畅了，但是它压缩后已经不是一般图片了，无法查看。

3.3.4  代码优化效果对比

采用WebAssembly调用后效果是：更小的文件体积，base64.js：4.3KB、base64.wasm：988B<-base64.cpp：3.5KB;更快的执行速度，base64.wasm≈70%*base64.js。

采用WebGL调用后硬件加速有代价、分水岭≈100万点。

4  结  论

通过浏览器远程操控桌面是一种便捷方式，而性能优化是其推广应用中的关键问题。本项目首次在浏览器使用WebGL优化图形渲染，并且分别在Linux、Windows环境对技术的可行性和有效性进行了定量的测试与分析，在规定时间、规定经费条件下，以noVNC为标线，从架构、算法、代码三方面对比了调优效果。实验证明优化的关键在图像更新算法，其性能需要权衡网络带宽开销。研究成果指明了浏览器远程交互技术的性能瓶颈，为后续Web项目的开发、调优提供了全新思路。

参考文献：

[1] 白云.基于北斗导航与WebGIS的矿场人员监控系统详细设计 [J].现代信息科技，2018，2（10）：23-25.

[2] 李华伟，李芹，王瑜.浏览器辅助对象技术的应用与设计方法 [J].中国新技术新产品，2012（4）：9.

作者简介：魏国（1983.06-），男，汉族，天津人，主任工程师，中级工程师，本科，研究方向：信息技术、软件开发、大数据分析、互联网技术。