基于HTML5的交互Web3D的實現

錢鑫博

摘要：針對網頁瀏覽器需要安裝額外插件顯示3D圖形場景和數據及時通信交互的問題，利用HTML5新標準中Canvas繪制圖形的方法，采用WebGL提供的硬件3D加速渲染，不需要安裝第三方插件就可實現在瀏覽器里流暢地展示3D場景和模型。通過HTML5的WebSocket技術形成瀏覽器與服務端之間的快速雙向通道，實現實時的雙向TCP通信，利用這些關鍵技術最終實現了一個交互的Web3D展示系統。

關鍵詞：Web3D實現；HTML5技術；WebGL技術；WebSocket

中圖分類號：TP391文獻標志碼：A文章編號：1008-1739（2020）01-60-4

0引言

自互聯網誕生以來，如何使網頁變得更生動更強大是人們一直在追求的目標。隨著Web技術的發展，Flash的出現使得網絡3D動畫逐漸流行起來，產生了很多令人印象深刻的動畫效果。但是Flash有一個缺點，需要安裝Flash Player瀏覽器插件，安全性也備受質疑。微軟發明了Silverlight，但是也需要安裝插件，跨平臺安裝插件尤其是嵌入式設備會使得客戶的體驗變差。

HTML語言演化的目的是為了實現更豐富的圖形化界面和更友好的人機交互。HTML5的出現提供了許多新標簽[1]，使得頁面上內容的交互性得到了增強。通過HTML5支持的JavaScript腳本[2]語言，可以實現網絡交互式3D場景，這個接口就是WebGL，它呈現3D場景時使用顯卡的底層圖形硬件加速，能夠保證繪制效率，而且接口是標準的、跨平臺的。用WebGL技術制作的Web交互式3D動畫與Flash，Silverlight等相比，可達到同樣效果，最重要的是無需安裝任何瀏覽器插件，幾乎不用修改就能以同樣的方式運行在多種平臺上。

1 WebGL技術

以往的技術在瀏覽器中進行3D展示是一件非常困難的事情，由于3D圖形的渲染計算量巨大，導致了顯示非常緩慢，直到提供硬件3D加速渲染的繪圖標準WebGL的誕生。在HTML5提供的Canvas標簽[3]里，設計開發人員可以使用WebGL精確控制到頁面的每個像素，這樣就能創建復雜3D結構和數據可視化應用。因為WebGL是直接工作在顯卡的圖形處理器層面，充分發揮了硬件的性能，使得在瀏覽器里展示的3D場景和模型能達到流暢運行[4]。

在WebGL中編程是通過JavaScript語言編寫程序來實現。程序里通常的目標都是要繪制渲染某種場景。3D圖形系統用于繪制模型最基本的元素是三角形，這些繪制信息包括三角形的繪制位置、顏色、形狀和紋理等。顯卡的圖形處理器并行的渲染操作稱之為繪制調用（Draw Call），這些調用都是利用渲染管線（Rendering Pipeline）的處理流程來實現的[5]，渲染管線流程如圖1所示。

渲染管線渲染的具體流程如下：

（1）建立頂點數組

渲染管線進行處理，先要建立頂點數組（Vertex Array）。頂點數組包括各種屬性信息，例如頂點紋理、顏色、光照方向和頂點在3D空間中的位置，這些數據主要包括Attribute變量和Uniform變量。Attribute變量存儲著關于點本身的數據，其中最重要的是點的位置及頂點顏色等信息，作為頂點數組的一部分傳進頂點著色器。Uniform變量用來修飾繪制過程中一直不變的全局變量，比如變換矩陣、光源位置等。此外還需要有一個數組用于存放頂點數組中元素的索引，作用是控制頂點組合到三角形里。

（2）頂點著色器將數組連接成三角形

頂點著色器（Vertex Shader）最主要的功能是計算頂點在屏幕上空間里的位置。頂點著色器讀取頂點屬性，并輸出一個新的屬性集合，而且會為每個頂點生成其他屬性，比如顏色或紋理坐標。顯卡的圖形處理器從頂點數組的緩沖中讀取頂點信息后在頂點著色器中處理這些信息，并且會根據頂點索引數組里的描述，把這些頂點按照指定的順序每3個點形成一個三角形。頂點著色器計算出每個頂點的值（比如紋理坐標、顏色等），然后把它們寫到Varying變量中。

（3）光柵器融合

光柵器（Rasterizer）的作用是過濾每一個三角形，只留下需要的可見形狀的部分進行融合，最后再填充到像素大小的片元（Fragment）中。頂點著色器利用頂點屬性里保存的顏色和紋理數據，為每個頂點分配了一個顏色值，光柵器將會在三角形表面上做線性插值混合這些顏色，為每一個片元（像素）產生一個平滑的漸變色。

（4）片元著色器處理

片元著色器的作用是處理由上一階段生成的每個片元，計算出每個像素的最終顏色。像素大小的片元被輸送到片元著色器（Fragment Shader）中。片元著色器會為每個像素進行獨立繪制，包括紋理映射和光照。片元著色器將會生成每個像素的顏色和深度值，為下一步在幀緩沖（Frame Buffer）中進行繪制提供了數據支持。

（5）幀緩沖處理

幀緩沖包含一個或多個顏色緩沖區，還包含模板緩沖區（Stencil Buffer）和深度緩沖區（Depth Buffer）。模板緩沖區的作用就是用規定的形狀約束幀緩沖中的可繪制區域。深度緩沖區的作用是把已經在前面繪制的物體，擋住后面物體的部分忽略掉。經過模板緩沖區和深度緩沖區過濾之后依然存在的就是要保留的，這些保留的顏色值與被它覆蓋的顏色值進行混合運算。最終的顏色值、模板值和深度值會保存到相應的緩沖區，然后被硬件設備輸出到顯示器上。

總體來說，WebGL的接口靈活、功能強大，但是比較底層，開發難度較大。目前，已經有很多專業人士把它們封裝成了很多很好用的WebGL框架庫，使用起來很方便。

2 Websocket

在瀏覽器和服務器的通信中，通過HTTP僅能實現請求/響應模式通信，客戶端加載一個網頁，加載完畢后直到用戶再次發送請求之前，網頁數據不會有任何更新。為了保持通信，有2種常見方法。①輪詢技術：客戶端以一定的間隔向服務端發出請求，保持客戶端和服務器端的聯系，導致有可能服務器端的數據不能及時更新到客戶端，或者一直沒有數據更新，但客戶端總發出請求，帶來很多無用的網絡傳輸。②COMET：可以一定程度上模擬雙向通信，客戶端會在處理完服務器返回的信息后，再次發出請求，重新建立連接。服務器端保存信息直到客戶端重新建立連接，客戶端會一次性把當前服務器端所有的信息取回，在此期間服務器端會阻塞請求直到有數據或超時才返回。但是，這些方案都有一個共同的問題是單向通信，并且帶有HTTP的開銷，這就導致這些方案不適用于低延遲應用。

W3C為HTML5定義了WebSocket協議，只需要通過一次握手[6]，就會形成一個瀏覽器和服務端之間的快速雙向通道。WebSocket稱為網絡TCP，包括通信協議格式和編程API，建立連接后就可以使數據直接在二者之間相互傳送。

Chrome瀏覽器里嗅探的握手通信過程如下：由客戶端發起請求連接，服務器端進行響應識別，服務端用請求連接中的“Sec-WebSocket-Key”值來構造出一個SHA-1的信息摘要。它的構造過程是用隨機生成的“Sec-WebSocket-Key”進行SHA-1加密再進行BASE-64編碼，將計算的結果做為“Sec-WebSocket-Accept”Header頭的值，發送給客戶端驗證。如果正確，客戶端和服務器端就可以通過TCP連接直接交換數據。這讓瀏覽器實現了實時通信能力。有了WebSocket就可以擴展Web應用程序，使得程序基于事件的方式觸發，增強了實時交互性，提高了應用程序的性能。

3原型系統實現

3.1系統結構

原型系統實現了一個交互的Web3D系統來展現HTML5給Web領域帶來的巨大變化，系統結構如圖2所示。

功能上主要實現了遠程數據采集終端采集原始數據，通過Socket連接發送到服務端。服務端部分采用Java，C#，Node.js[7]等語言實現。服務端響應客戶端的請求，并通過與服務端之間建立的WebSocket雙向TCP通道，把得到的數據信息實時推送到客戶端，最終把數據展示在瀏覽器的3D界面里。

3.2實現效果

通過Web3D可以在瀏覽器端構建較為原始的三維模型，如果用三維建模去接近現實世界中的形體和外觀是不現實的，現實世界中的物體往往是非常復雜的。繪制細節將給3D建模帶來巨大的工作量，同時會導致加載模型緩慢。這就要在模型的外觀紋理上想辦法，而不用去追求模型的高精細度。尤其是3D模型用真實物體的圖片作為模型紋理，效果馬上就會很接近真實物體。

貼在模型表面的圖片不是普通的圖片，需要用UV貼圖。UV貼圖是經過類似極坐標變換后的圖片，把三維圖展開變換成二維圖。UV圖的制作可以借用一些軟件工具完成[8]。在實際的展示系統中，繪制的一座3D山地地形的效果如圖3所示。

按住鼠標移動，3D模型會隨著場景視角轉動，轉動后可以看到其他方向的貼圖渲染效果。采集端通過服務器把消息轉發推送到客戶端，如圖4所示。

采集端把采集到的數據發送到服務器，服務端通過WebSocket和瀏覽器建立實時通道，把消息推送到客戶端瀏覽器上相應的位置。鼠標移動到標注上會顯示提示窗口，提示窗口把遠程接收到的數值信息展示出來，而且實時更新數據。

4結束語

HTML5標準的出現，將以前復雜的需要大量代碼才能實現的功能，定義為標簽元素，只需設置好標簽的屬性即可實現相應的功能；HTML5提供了支持WebGL標準化的繪制3D圖形的方法，還改變了數據的傳輸方式，讓用戶可以實時地和服務端進行交互，并且將瀏覽器作為一種通用的平臺后，不用安裝專用的軟件就能實現在任何地方進行跨平臺操作。客戶端零維護，系統的擴展也非常容易。

參考文獻

[1]徐佩鋒.基于Flash的Web3D開發方法研究[J].價值工程， 2010，29（32）：179-180.

[2] FLANAGAN D.JavaScript權威指南[M].北京：機械工業出版社，2003.

[3]李慧云，何震葦，李麗，等.HTML5技術與應用模式研究[J].電信科學，2012，28（5）：24-29.

[4]譚文文，丁世勇，李桂英.基于webGL和HTML5的網頁3D動畫的設計與實現[J].電腦知識與技術，2011，7（28）： 6981-6983.

[5]阿尤魯.WebGL高級編程—開發Web3D圖形[M].北京：人民郵電出版社，2013.

[6] LENGSTORF J，LEGGETTER P.構建實時Web應用：基于 HTML5 WebSocket、PHP和jQuery[M].北京：機械工業出版社，2013.

[7] BYVoid.Node.js開發指南[M].北京：人民郵電出版社，2012.

[8]陳煜，殷鳳華.基于開源Web 3D引擎的三維系統的開發[J].軟件導刊，2011，10（2）：150-152.