基于WebGL的三維物理模型設計與開發(fā)

何博　王祖源　萬昆

摘 要：目前，各種各樣的學習平臺和學習終端層出不窮。因此，面對多樣化的終端設備，我們在開發(fā)應用程序時考慮如何實現在不同設備的無差異化移植顯得越來越重要。如何運用相關技術保證跨終端、跨平臺的統(tǒng)一用戶體驗，這是值得探索的問題。針對一般的三維物理模型存在跨平臺問題，文章通過研究WebGL技術在構建三維物理模型中的應用，提出了利用瀏覽器對WebGL的支持來解決跨平臺問題的方法。該方法通過HTML5中Canvas畫布獲得三維繪制場景，在該場景中利用WebGL第三方庫（three.js）構建三維物理模型，然后由瀏覽器對模型進行渲染，從而解決跨平臺問題。研究結果表明，WebGL技術的應用為三維物理模型的構建提供了新的思路，克服了跨平臺問題，極大地支持泛在學習，適應教育新常態(tài)——創(chuàng)客教育。

關鍵詞：三維模型；WebGL；跨平臺；設計與開發(fā)；

中圖分類號：G434 文獻標志碼：A 文章編號：1673-8454（2016）06-0075-05

一、引言

隨著計算機技術和網絡技術的快速發(fā)展，虛擬現實和三維可視化技術已成為時下Web技術的焦點。近年來3D技術因其開發(fā)和設計上的突出優(yōu)勢而被廣泛應用在軟件行業(yè)、3D硬件行業(yè)、數字娛樂行業(yè)、制造業(yè)、建筑業(yè)、虛擬現實、地理信息GIS以及3D互聯網等行業(yè)[1]。然而當互聯網時代的熱潮還未褪去時，移動互聯網時代已悄然來臨。隨著手機、Pad等移動設備的普及，越來越多的學校逐步開始嘗試開放移動終端進入課堂，更進一步將移動設備引入教與學的過程。為更好地實現信息化創(chuàng)新教學，實現教師教學方式的改變與學生學習方式的轉變，促進學生的知識建構，實現泛在學習、無縫學習，實現創(chuàng)客教育。那么如何使教學資源體現出交互性、移動性、智能化，以更好地適應課堂教學方式的變革？這對我們開發(fā)相關應用程序和教學資源提出了更大挑戰(zhàn)：如何運用相關技術保證跨終端、跨平臺的統(tǒng)一用戶體驗？

在過去，Web3D技術主要依賴不同的插件，為了展示3D效果，用戶不得不安裝各種插件，跨平臺性較差。隨著HTML5技術近年來的迅猛發(fā)展[2]，這種狀況得到了極大改善。特別是隨著HTML5標準的進一步規(guī)范和完善，其提供的新特性和新標簽能更好地適應現今多終端訪問需求。目前，更多的主流瀏覽器如Chrome、Firefox、Safari、Opera以及IE11等對HTML5和WebGL提供了較好的支持。因此，我們可以在瀏覽器內部實現3D圖形的硬件加速，創(chuàng)建3D游戲或其他高級的3D圖形應用程序，從而使其在不同終端運行成為可能。

在此背景下，本文針對一般三維物理模型存在開發(fā)復雜、硬件要求高以及移植不便等問題，研究了WebGL技術在構建三維物理模型中的應用，提出了利用瀏覽器對WebGL的支持來解決跨平臺問題的方法。該方法利用圖形硬件加速圖形繪制，有著較快的調用速度，通過HTML5中Canvas畫布獲得三維繪制場景，在該場景中利用WebGL第三方庫（three.js）構建三維物理模型，然后由瀏覽器對模型進行渲染和運行。該技術使用方便，不需要任何插件，增加了復用性和靈活性，且更容易得到跨平臺的支持，如Windows、Mac OS、Linux、Android和iOS等操作系統(tǒng)的支持。WebGL技術的應用不僅可以克服跨平臺問題，為無縫學習提供很好的支持，而且為構建三維物理模型做出了有益的探索和嘗試。

二、無縫學習與創(chuàng)客教育

1.學習新常態(tài)——無縫學習

無縫學習是以社會學習、情景學習、知識建構為理論基礎，在移動設備下進行的一對一數字化學習[3]。

移動終端設備的普及，人們對教與學資源的碎片化、可視化需求，在WebGL技術下能很好地實現三維物理模型的可視化，使學生能更好地理解，符合學生的認知?；赪ebGL技術的三維物理模型能適合于各種系統(tǒng)軟件和移動設備，在互聯網+時代，能更好地適應學生利用碎片化時間進行無縫學習，促進學生學習方式的轉變，也能很好地適應翻轉課堂教學。

2.教育新常態(tài)——創(chuàng)客教育

創(chuàng)客教育是一種融合信息技術、秉承“開放創(chuàng)新、探究體驗”教育理念，以“創(chuàng)造中學”為主要學習方式和以培養(yǎng)各類創(chuàng)新人才為目的的新型教育模式[4]。在創(chuàng)客教育中，教師角色的轉變，從關注知識技能教學，轉向培養(yǎng)學生終身發(fā)展能力和思維的教學，學生角色的轉變，從知識的灌輸到知識建構，在做中學，促進學生知識建構和創(chuàng)造性思維培養(yǎng)?；赪ebGL技術開發(fā)的三維物理模型能促進學生的知識建構，培養(yǎng)學生高級思維技能，引領學生高級思維的發(fā)展，能引導教師從淺層學習走向深層學習的教學策略，有利于學生創(chuàng)造性思維的培養(yǎng)。

隨著信息技術的發(fā)展、智能手機的普及，面對信息技術與教育教學深度融合的今天，人們對移動學習資源建設越來越重視，能更好地促進學生的無縫學習，在互聯網時代，學生對碎片化思維與碎片化知識的需求，有利于學生學習方式的轉變?；赪ebGL技術開發(fā)的三維物理模型在物理課堂中的應用將是信息化教學創(chuàng)新必不可少的，三維物理模型的可視化與交互性能更好地促進學生的知識建構，有利于培養(yǎng)學生的創(chuàng)造性思維，為實現智慧教育提供可能。

三、WebGL技術簡介

1.WebGL技術

WebGL是一個用來在Web上生成三維圖形效果的應用編程接口，也是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定[5]，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場景和模型，還能創(chuàng)建更為復雜的導航和數據視覺化。WebGL技術直接利用JavaScript編程創(chuàng)建3D場景和動畫，非常復雜且容易出錯?？蚣艿膽脴O大地簡化了開發(fā)步驟，提高了開發(fā)效率，且更易維護和更新。目前已有大量基于WebGL技術的JavaScript庫正在開發(fā)以加快創(chuàng)建3D圖形的速度，如GLGE、SceneJS、Three.js等。本文主要采用Three.js開發(fā)框架來實現三維物理模型的開發(fā)。Three.js是一個很出色的開發(fā)框架，該框架以簡單、直觀的方式封裝了WebGL底層的圖形接口，從而降低了WebGL的使用難度，并且完全開源[6]。它提供了一個JavaScript應用程序接口，允許在瀏覽器端未安裝任何插件的情況下進行2D/3D硬件加速渲染。

2.三維場景Web顯示設計

在三維場景繪制之前，首先需要獲取HTML5的canvas元素，然后通過該元素獲得WebGL的繪制環(huán)境。在該上下文環(huán)境中，由Three.js通過以下6個基本步驟創(chuàng)建三維模型：

（1）設置場景：場景變量是一個三維空間，相當于一個大容器，用于存儲和跟蹤我們要渲染的所有物體的軌跡。場景設置沒有很復雜的操作，只需要進行實例化，然后再依次將相機、燈光、模型等加入場景即可。

（2）設置相機：要渲染一個場景，我們需要一個相機來決定我們在渲染場景時能看到什么。在 Three.js 中能夠指定透視投影和正投影兩種方式的相機。

（3）設置光源：在一個場景中可以設置多個光源。Three.js中可以設置點光源、聚光燈、平行光源和環(huán)境光等?？筛鶕唧w場景模型和需求，添加適合的一種光源或幾種光源的組合。

（4）設置模型：場景可以添加需要渲染的任何對象。對象主要由幾何形狀和材質構成。材質定義了對象的樣式。我們可以通過編程來控制對象的位置，旋轉和縮放。場景中添加的模型可以使用Three.js中的形狀類，也可以使用JSON格式或二進制格式文件，也可以使用其它流行的3D建模工具（3DMAX、Maya）導出的obj文件，然后由Three.js的不同加載器對其解析。

（5）設置渲染器：三維空間里的物體映射到二維平面的過程被稱為三維渲染。一般來說我們都把進行渲染操作的軟件叫做渲染器[7]。具體需要生成渲染器對象、指定渲染器的高寬、設置渲染器的清除色等。通常設置好相機、添加完模型就可以調用渲染器的渲染函數來渲染整個場景了。

（6）設置交互：Web頁面最終呈現模型，以及提供用戶交互操作。良好的交互設計不僅能夠吸引用戶，增強用戶體驗，而且能夠使用戶對模型有更全面的認識?？梢詮娜齻€技術模塊進行設置：HTML5技術設計界面的結構、CSS技術對顯示樣式進行設定、DOMEvent處理鼠標鍵盤事件。

通過以上幾個步驟，具有交互功能的三維模型就可以在網頁上顯示。圖1為WebGL的繪圖流程。

四、雙節(jié)擺物理模型的設計與實現

雙節(jié)擺模型是理論力學的一個基本模型，也是比較重要的一個模型。該模型的運動規(guī)律較為復雜，通過模擬雙節(jié)擺的運動規(guī)律，能夠使抽象的規(guī)律具體化和形象化。該模型主要是兩根長度為L1和L2的無質量的細棒的頂端系有質量分別為m1和m2的兩個球，初始狀態(tài)如圖2所示。我們將利用WebGL標準下的Three.js框架來模擬該模型從初始狀態(tài)釋放之后的兩小球的運動軌跡。

1.雙節(jié)擺物理模型的設計思路

首先對該模型進行功能分析，該模型需要實現改變兩個小球初始位置或者質量觀察兩個小球的運動軌跡，并能夠繪制兩個細棒張力的變化曲線圖，可以對各物理量變化情況如坐標、速度、能量等進行采集保存。基于以上功能描述，我們可以將本模型的實現歸結為以下幾點：

（1）畫布、燈光、相機和渲染器等基本場景的設置；

（2）兩個小球、細桿、固定點等初始狀態(tài)繪制；

（3）運行過程中小球、細桿位置及變化曲線圖的動態(tài)繪制；

（4）模型交互功能的實現（模型移動、旋轉、縮放、參數改變、數據采集）。

本模型的關鍵是對小球進行受力分析以及運動軌跡的運算。在運動過程中忽略空氣的阻力和細桿的質量。在整個系統(tǒng)中，不斷變化的量是桿的張力、小球的速度、位置以及細桿的位置，而細桿的長度則是保持不變的。我們將固定點坐標設為（y，x，z），小球m1的坐標設為（y1，x1，z1），小球m2的坐標設為（y2，x2，z2），在處理小球速度時，我們將其分別沿著三個軸正交分解。

根據雙節(jié)擺運動的速度、時間、細桿的張力以及系統(tǒng)的能量等來不斷獲得兩個小球的坐標，從而在不同位置繪制小球和細桿來模擬其運動軌跡。細桿L1的繪制用繪制直線方法表示，通過固定點坐標和球m1坐標來確定，細桿L2的繪制通過球m1的坐標和球m2的坐標來確定。

2.雙節(jié)擺物理模型的實現步驟

首先基于對模型的設計與分析，接下來開始模型的具體實現：

（1）基本場景設置

整個模型的繪制以及實現是基于Canvas畫布實現的，Canvas元素有兩個屬性width和height來定義其大小。我們在Web頁面中定義一個div元素，在JavaScript中通過id來獲取該容器元素，隨后引入Three.js庫文件，通過WebGL渲染器來獲得Canvas的上下文三維繪制場景。我們可以對renderer的尺寸、顏色等進行更加詳細的設置，通過編寫initCamera、initScene和initLight三個函數實現相機、場景和燈光的初始化。

（2）雙節(jié)擺模型初始化設置

在整個模型繪制過程中，其工作主要分為初始化和運行兩部分，分別由initObject和loop函數實現。我們將雙節(jié)擺系統(tǒng)構建成Pendulum對象，主要包括支點對象（Cube）、小球對象（Ball）、細桿張力、長度、夾角余弦、系統(tǒng)能量等屬性。小球對象包含的屬性主要有質量、坐標和速度等，我們給這些屬性設置一定的初始值，也可通過前端用戶輸入獲得。通過封裝對象的方式簡化了調用過程，也便于靈活操作其相關屬性，同時能夠擴展相關屬性。在創(chuàng)建物體時，需要傳入兩個參數，一個是形狀（Geometry），本文用到的是立方體和球體，另一個是材質（Material），通過設置材質可以改變物體的顏色和紋理。

（3）繪制小球運動軌跡

小球運動軌跡的繪制主要是通過不斷更新元素的狀態(tài)位置等來實現動畫。設置一定的時間間隔，不斷獲取小球的坐標，根據不同位置繪制小球，模擬出小球運動。通過編寫loop函數來實現該功能，并調用如下代碼實現小球的循環(huán)繪制。

window.requestAnimationFrame（） 是由瀏覽器專門為動畫提供的API，該方法將告知瀏覽器要開始動畫效果了，它在運行時瀏覽器會自動優(yōu)化方法的調用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷。使用這個函數時需要在下次動畫前調用相應方法來更新畫面，這個方法就是傳遞給window.requestAnimationFrame的回調函數。通過遞歸調用同一方法來不斷更新畫面以達到動起來的效果。

在繪制細桿時我們使用new THREE.Line（）方法實時繪制，另外需要注意的是，在下次繪制之前需要清除本次繪制的細桿，調用scene.remove（）方法清除。為了使小球運動的軌跡更加符合運動規(guī)律，減小繪制誤差，我們使用標準4級4階的龍格庫塔法（Runge–Kutta）[8]對小球位置和速度的微分方程進行高精度求解。

至此，雙節(jié)擺的三維物理模型構建完成，我們需要調用Three.js庫中的渲染器對整個場景和模型進行渲染，在渲染之前需要調用renderer的clear（）方法，來清除其顏色、深度和模板繪制緩沖區(qū)。隨后該雙節(jié)擺三維物理模型便可在Web上顯示。為了能夠使兩個細桿的張力變化可視化，我們通過引入flotr2.js繪制兩個細桿的張力變化曲線圖。Flotr2[9]是HTML5繪制圖表和圖形庫，它是一個獨立框架，可以擴展，能夠自定義圖表類型，并且支持移動設備顯示。

（4）交互功能實現

該模型對交互功能的實現主要包括三個方面：首先是參數的改變，在Web頁面我們設置了可以讓用戶改變兩個小球坐標位置和質量的輸入文本框，用戶可以輸入不同參數以觀察不同數據下小球運動的狀態(tài)；其次是監(jiān)聽鼠標事件，主要包含mousedown、mouseup、mousemove和mousewheel等事件。這些事件是綁定在用于展示三維物理模型的div容器元素上。通過對這些事件的監(jiān)聽，模擬觀察者，使用戶能夠將雙節(jié)擺模型平移、旋轉、縮放，以調整到自己喜歡和所需的角度或方式觀看三維模型的每個局部細節(jié)；最后是數據采集和保存。在模型運行過程中，用戶可以隨時開始和暫停動畫，我們使用的是按鈕形式，有開始、暫停、繼續(xù)和輸出四個按鈕。用戶可保存任意時刻采集到的速度、張力和能量等數據，該功能利用HTML5新功能實現。

3.測試環(huán)境部署和運行

基于上述模型實現關鍵步驟和技術，我們實現了雙節(jié)擺模型的構建。接下來需要對其進行部署和測試。WebGL對服務器端沒有特殊要求，任意支持HTTP服務的Web服務器都可，我們將其配置在tomcat服務器上，接下來對其在不同操作系統(tǒng)、不同終端設備上進行測試。WebGL對硬件沒有太高要求，CPU在1Ghz，內存在512MB以上即可。通過測試我們發(fā)現該模型可以通過PC端瀏覽器瀏覽，也可以通過手機、平板電腦等瀏覽器瀏覽，動畫效果較為流暢，模型能夠較為真實地模擬物理運動規(guī)律（如圖3、圖4、圖5所示）。

五、總結與展望

1.總結

本文針對一般三維圖形渲染過程中安裝插件的麻煩，提出一種無插件的渲染方法，采用WebGL技術，三維模型可直接在瀏覽器端繪制和展現，無需安裝任何插件。結合利用HTML5與WebGL相關技術，同時利用Three.js框架，在瀏覽器上構建出三維雙節(jié)擺物理模型。通過測試實踐，我們發(fā)現不管在PC端還是移動端，該模型三維動畫的實現都較為流暢，在場景中能很好地通過鼠標或者觸屏對模型進行移動、旋轉、縮放等操作，從而實現多角度、細粒度的與模型進行交互，并且該模型能夠進行相關數據采集和保存。研究結果表明，目前的主流瀏覽器都對WebGL都有較好的支持，這一技術的出現能夠很好地解決跨平臺問題。我們相信隨著標準的進一步完善和相關技術的進一步推動，WebGL技術在網絡交互、可視化及虛擬現實等領域都會有較大的推廣價值，基于Web的3D仿真系統(tǒng)必將在商業(yè)、教育等領域有廣闊的應用前景。

2.展望

開發(fā)基于WebGL的三維物理模型對開發(fā)建設移動學習資源的啟示：

（1）開發(fā)移動學習資源是信息技術與教育教學深度融合發(fā)展的基本要求

教育信息化的大力發(fā)展，三通兩平臺的實現，新技術新媒體等的發(fā)展，教育信息化將促進教育的全面改革，建設移動學習新資源能為教師和學生開展移動學習、泛在學習提供可能，能更好的促進課堂教學方式的變革，促進學校的變革，也是促進信息技術與教育教學深度融合的基本要求。

（2）開發(fā)移動學習資源是變革教與學方式的基礎

隨著信息技術的不斷發(fā)展，教與學也在不斷的發(fā)生變化，移動學習資源的建設為開展信息化創(chuàng)新教學提供了有利條件，促進學生的知識建構，是更好地實施翻轉課堂教學、開展創(chuàng)客教育的基礎，也為學生開展泛在學習、移動學習提供方便。

（3）開發(fā)移動學習資源為智慧教育的實現提供可能

隨著智慧教育的發(fā)展，人們對新型教與學資源的智能化需求越來越高，移動學習資源的智能化能進一步滿足學生的個性化學習需求，促進學習者知識建構。建設新型優(yōu)質教與學資源的共建共享，促進優(yōu)質教育均衡化發(fā)展，進一步促進智慧教育的發(fā)展與實現。

當然，利用WebGL技術開發(fā)三維物理模型不是我們最終的目的，如何利用WebGL技術模擬演示物理現象及原理，將抽象的知識直觀化、形象化，以激發(fā)學習者的學習興趣和動機，并通過良好的交互設計來引導學習者進行知識的自我建構，能夠給予學習者即時反饋是我們需要深入探究的重要課題。特別是處在移動互聯網時代，如何利用這些技術創(chuàng)建出優(yōu)質的移動學習資源，使學習者能夠隨時隨地，更加靈活地利用技術進行學習是我們下一步研究的方向。我們有理由相信，隨著技術的不斷發(fā)展，必將推動教育融合創(chuàng)新，使教育更加開放靈活。

參考文獻：

[1]艾達，喬明明，李敏等.Web 3D技術綜述[J].微型機與應用，2014（2）：4-7.

[2]Wikipedia.WebGL[EB/OL]. http：//en.wikipedia.org /wiki/WebGL.

[3]祝智庭，孫妍妍.無縫學習——數字化學習新常態(tài)[J].開放教育研究，2015（1）：11-16.

[4]楊現民，李翼紅.創(chuàng)客教育的價值潛能及其爭議[J].現代遠程教育研究，2015（3）：23-34.

[5]Khronos Group[EB/OL].http：//www.khronos.org/webgl.

[6]周敬敬，陳昕等.利用WebGL技術實現機房動態(tài)虛擬裝配設計的可視化[J].科研信息化技術與應用，2013（2） ：87-92.

[7]況衛(wèi)飛，彭四偉.三維渲染引擎編輯器的研究[J].電子設計工程，2009（9） ：91-92.

[8]陳哲.捷聯慣導系統(tǒng)原理[M].北京：宇航出版社，1986：31-32.

[9]Flotr2 website[EB/OL].http：//www.humblesoftware.com/flotr2/.

（編輯：魯利瑞）