基于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-），男，漢族，天津人，主任工程師，中級工程師，本科，研究方向：信息技術、軟件開發、大數據分析、互聯網技術。