基于HTML5的交互Web3D的實(shí)現(xiàn)

錢鑫博

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

關(guān)鍵詞：Web3D實(shí)現(xiàn)；HTML5技術(shù)；WebGL技術(shù)；WebSocket

中圖分類號(hào)：TP391文獻(xiàn)標(biāo)志碼：A文章編號(hào)：1008-1739（2020）01-60-4

0引言

自互聯(lián)網(wǎng)誕生以來，如何使網(wǎng)頁變得更生動(dòng)更強(qiáng)大是人們一直在追求的目標(biāo)。隨著Web技術(shù)的發(fā)展，F(xiàn)lash的出現(xiàn)使得網(wǎng)絡(luò)3D動(dòng)畫逐漸流行起來，產(chǎn)生了很多令人印象深刻的動(dòng)畫效果。但是Flash有一個(gè)缺點(diǎn)，需要安裝Flash Player瀏覽器插件，安全性也備受質(zhì)疑。微軟發(fā)明了Silverlight，但是也需要安裝插件，跨平臺(tái)安裝插件尤其是嵌入式設(shè)備會(huì)使得客戶的體驗(yàn)變差。

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

1 WebGL技術(shù)

以往的技術(shù)在瀏覽器中進(jìn)行3D展示是一件非常困難的事情，由于3D圖形的渲染計(jì)算量巨大，導(dǎo)致了顯示非常緩慢，直到提供硬件3D加速渲染的繪圖標(biāo)準(zhǔn)WebGL的誕生。在HTML5提供的Canvas標(biāo)簽[3]里，設(shè)計(jì)開發(fā)人員可以使用WebGL精確控制到頁面的每個(gè)像素，這樣就能創(chuàng)建復(fù)雜3D結(jié)構(gòu)和數(shù)據(jù)可視化應(yīng)用。因?yàn)閃ebGL是直接工作在顯卡的圖形處理器層面，充分發(fā)揮了硬件的性能，使得在瀏覽器里展示的3D場(chǎng)景和模型能達(dá)到流暢運(yùn)行[4]。

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

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

（1）建立頂點(diǎn)數(shù)組

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

（2）頂點(diǎn)著色器將數(shù)組連接成三角形

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

（3）光柵器融合

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

（4）片元著色器處理

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

（5）幀緩沖處理

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

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

2 Websocket

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

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

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

3原型系統(tǒng)實(shí)現(xiàn)

3.1系統(tǒng)結(jié)構(gòu)

原型系統(tǒng)實(shí)現(xiàn)了一個(gè)交互的Web3D系統(tǒng)來展現(xiàn)HTML5給Web領(lǐng)域帶來的巨大變化，系統(tǒng)結(jié)構(gòu)如圖2所示。

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

3.2實(shí)現(xiàn)效果

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

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

按住鼠標(biāo)移動(dòng)，3D模型會(huì)隨著場(chǎng)景視角轉(zhuǎn)動(dòng)，轉(zhuǎn)動(dòng)后可以看到其他方向的貼圖渲染效果。采集端通過服務(wù)器把消息轉(zhuǎn)發(fā)推送到客戶端，如圖4所示。

采集端把采集到的數(shù)據(jù)發(fā)送到服務(wù)器，服務(wù)端通過WebSocket和瀏覽器建立實(shí)時(shí)通道，把消息推送到客戶端瀏覽器上相應(yīng)的位置。鼠標(biāo)移動(dòng)到標(biāo)注上會(huì)顯示提示窗口，提示窗口把遠(yuǎn)程接收到的數(shù)值信息展示出來，而且實(shí)時(shí)更新數(shù)據(jù)。

4結(jié)束語

HTML5標(biāo)準(zhǔn)的出現(xiàn)，將以前復(fù)雜的需要大量代碼才能實(shí)現(xiàn)的功能，定義為標(biāo)簽元素，只需設(shè)置好標(biāo)簽的屬性即可實(shí)現(xiàn)相應(yīng)的功能；HTML5提供了支持WebGL標(biāo)準(zhǔn)化的繪制3D圖形的方法，還改變了數(shù)據(jù)的傳輸方式，讓用戶可以實(shí)時(shí)地和服務(wù)端進(jìn)行交互，并且將瀏覽器作為一種通用的平臺(tái)后，不用安裝專用的軟件就能實(shí)現(xiàn)在任何地方進(jìn)行跨平臺(tái)操作?？蛻舳肆憔S護(hù)，系統(tǒng)的擴(kuò)展也非常容易。

參考文獻(xiàn)

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

[2] FLANAGAN D.JavaScript權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2003.

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

[4]譚文文，丁世勇，李桂英.基于webGL和HTML5的網(wǎng)頁3D動(dòng)畫的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2011，7（28）： 6981-6983.

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

[6] LENGSTORF J，LEGGETTER P.構(gòu)建實(shí)時(shí)Web應(yīng)用：基于 HTML5 WebSocket、PHP和jQuery[M].北京：機(jī)械工業(yè)出版社，2013.

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

[8]陳煜，殷鳳華.基于開源Web 3D引擎的三維系統(tǒng)的開發(fā)[J].軟件導(dǎo)刊，2011，10（2）：150-152.