何博　王祖源　萬昆

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

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

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

一、引言

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

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

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

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

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

無縫學習是以社會學習、情景學習、知識建構(gòu)為理論基礎(chǔ)，在移動設(shè)備下進行的一對一數(shù)字化學習[3]。

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

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

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

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

三、WebGL技術(shù)簡介

1.WebGL技術(shù)

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

2.三維場景Web顯示設(shè)計

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

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

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

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

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

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

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

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

四、雙節(jié)擺物理模型的設(shè)計與實現(xiàn)

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

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

首先對該模型進行功能分析，該模型需要實現(xiàn)改變兩個小球初始位置或者質(zhì)量觀察兩個小球的運動軌跡，并能夠繪制兩個細棒張力的變化曲線圖，可以對各物理量變化情況如坐標、速度、能量等進行采集保存?；谝陨瞎δ苊枋?，我們可以將本模型的實現(xiàn)歸結(jié)為以下幾點：

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

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

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

（4）模型交互功能的實現(xiàn)（模型移動、旋轉(zhuǎn)、縮放、參數(shù)改變、數(shù)據(jù)采集）。

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

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

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

首先基于對模型的設(shè)計與分析，接下來開始模型的具體實現(xiàn)：

（1）基本場景設(shè)置

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

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

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

（3）繪制小球運動軌跡

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

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

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

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

（4）交互功能實現(xiàn)

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

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

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

五、總結(jié)與展望

1.總結(jié)

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

2.展望

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

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

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

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

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

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

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

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

參考文獻：

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

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

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

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

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

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

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

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

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

（編輯：魯利瑞）