基于WebGL 的流體力學(xué)虛擬仿真實驗教學(xué)探索

摘要：文章探索了WebGL技術(shù)在流體力學(xué)虛擬仿真實驗教學(xué)中的應(yīng)用。以本科工程流體力學(xué)課程中的經(jīng)典圓柱繞流問題為例，運用該技術(shù)于瀏覽器中實現(xiàn)流體動力學(xué)模擬。學(xué)生可于虛擬環(huán)境中開展實驗，調(diào)節(jié)流動參數(shù)，從而深入理解不同條件下流體的行為特性，掌握流體動力學(xué)原理與相關(guān)實驗技能。通過構(gòu)建交互式流體力學(xué)虛擬仿真實驗平臺，旨在提升實驗教學(xué)的效果與趣味性，為學(xué)生提供更加具體、直觀的學(xué)習(xí)體驗。

關(guān)鍵詞：WebGL；流體力學(xué)；虛擬仿真；實驗教學(xué)

中圖分類號：G642文獻標識碼：A

文章編號：1009-3044（2024）34-0147-03開放科學(xué)（資源服務(wù)）標識碼（OSID）：

0引言

隨著計算機技術(shù)的迅速發(fā)展，虛擬仿真技術(shù)在教育領(lǐng)域展現(xiàn)出巨大的潛力，為傳統(tǒng)實驗教學(xué)提供了全新的可能性[1]。流體力學(xué)作為工科專業(yè)本科教學(xué)的基礎(chǔ)課程之一，其實驗教學(xué)對學(xué)生掌握與理解課程內(nèi)容具有重要意義。然而，實驗教學(xué)往往受到實驗室設(shè)備維護、實際操作復(fù)雜以及實驗與教學(xué)環(huán)節(jié)脫節(jié)等問題的影響[2]，致使學(xué)生難以深入理解流體力學(xué)的復(fù)雜現(xiàn)象。WebGL技術(shù)是一種在網(wǎng)頁瀏覽器中實現(xiàn)高性能圖形渲染的技術(shù)[3-4]。借助WebGL，學(xué)生能夠在瀏覽器中實時渲染三維圖形[5]，利用GPU的高速運算能力實現(xiàn)流體力學(xué)現(xiàn)象的實時模擬，并通過交互操作，使學(xué)生能夠更加深入、直觀地理解流體運動的復(fù)雜規(guī)律。基于WebGL的虛擬仿真有望成為一種創(chuàng)新的教學(xué)方法，為流體力學(xué)虛擬仿真實驗提供理想的平臺。這種教學(xué)模式不僅彌補了傳統(tǒng)實驗的不足，亦降低了實驗成本，提升了實驗安全性，使流體力學(xué)教育更具普及性。因此，本文旨在借助WebGL技術(shù)，結(jié)合流體力學(xué)原理[6]，探索并實施一種基于WebGL虛擬仿真的流體力學(xué)實驗教學(xué)模式，促進教育領(lǐng)域更廣泛地采用虛擬仿真技術(shù)[7]，從而提升學(xué)生對流體力學(xué)理論的理解與應(yīng)用能力。

1WebGL技術(shù)概述

WebGL是一個內(nèi)嵌于瀏覽器的JavaScript應(yīng)用程序編程接口（API）[8]，用于在現(xiàn)代Web瀏覽器中顯示2D與3D圖形，并允許用戶與之進行交互。該技術(shù)結(jié)合了HTML5與JavaScript，使開發(fā)者能夠在網(wǎng)頁上創(chuàng)建與渲染三維圖形[9]。WebGL具有以下三個顯著優(yōu)勢：

1）跨平臺性。WebGL可以在各種現(xiàn)代Web瀏覽器上運行，如Chrome、Firefox、Safari與Edge，確保虛擬實驗在不同操作系統(tǒng)與設(shè)備上無縫展示。學(xué)生可通過計算機、平板或手機訪問這些虛擬實驗，無須安裝額外的軟件或插件，從而提升教學(xué)的靈活性[10]。

2）快速高效性。WebGL利用計算機的圖形處理單元（GPU）進行硬件加速，實現(xiàn)高性能的圖形渲染[11]，使流體力學(xué)模擬更加流暢與真實。這對于處理大規(guī)模流場數(shù)據(jù)與復(fù)雜仿真場景至關(guān)重要。

3）實時交互性。WebGL提供了豐富的用戶交互性[12]，學(xué)生可通過鼠標、鍵盤等輸入設(shè)備操控虛擬實驗。這種交互性不僅增強了學(xué)習(xí)過程的參與感，亦促進了深層次的理解與實踐經(jīng)驗。

基于WebGL的流體力學(xué)虛擬仿真實驗?zāi)軌驅(qū)崟r提供數(shù)據(jù)反饋，使學(xué)生得以觀察與分析流體行為。這種實時性使學(xué)生能夠即時了解實驗結(jié)果，迅速調(diào)整參數(shù)，從而更好地理解流體力學(xué)的基本原理。

2圓柱繞流虛擬仿真實驗教學(xué)設(shè)計

2.1LBM流體仿真基本原理

LBM（LatticeBoltzmannMethod），即格子玻爾茲曼法，是一種基于統(tǒng)計物理原理的計算流體力學(xué)方法，用于模擬與研究流體的行為。該方法基于玻爾茲曼方程，通過將流體區(qū)域分割為一塊塊規(guī)則的格子與一組離散的分布函數(shù)來描述流體的宏觀行為。LBM的核心思想是將連續(xù)介質(zhì)的流體流動問題轉(zhuǎn)化為離散空間中的粒子運動問題。在LBM中，流體被建模為由不同速度分量構(gòu)成的分布函數(shù)。這些分布函數(shù)在各個格點上的值表示了流體在該點上不同速度分量的分布。通過在每個時間步驟中對這些分布函數(shù)進行碰撞與遷移操作，LBM模擬了流體的宏觀行為，包括速度、密度與壓力等。該實驗采用經(jīng)典的D2Q9模型，其為LBM中常用的一種二維格點模型，如圖1所示。

在D2Q9模型中，每個格點上有9個速度方向，通常使用下列的速度向量來表示每個格點上的速度分布：

e0=（0，0）；e1=（1，0）；e2=（0，1）；e3=（-1，0）；e4=（0，-1）；e5=（1，1）；e6=（-1，-1）；e7=（-1，-1）；e8=（1，-1）。采用BGK（Bhatnagar-Gross-Krook）碰撞模型，其計算公式如下：

式中：x為格點坐標；t為當前時間步；ei為流體粒子的離散速度集；fi為以速度ei運動的粒子分布函數(shù)；δt為離散時間步長；Ωi為碰撞算子；τ為松弛時間；ν為流體運動黏度；cs為格子聲速；c為格子速度，是離散格子長度與時間步長的比值；feq為平衡態(tài)分布函數(shù)；wi為權(quán)系數(shù)（w0=4／9，w1～4=1／9，w5～8=1／36）；ρ為密度；u為速度。這些方程在離散網(wǎng)格上進行迭代求解，通過在每個格點上更新分布函數(shù)來模擬流體的行為，從而得到流體的宏觀行為，如流速、密度等。

2.2虛擬實驗設(shè)計

本虛擬實驗要求學(xué)生配備計算機、文本編輯器與Web瀏覽器。文本編輯器用于編寫代碼，可選用Vi?sualStudioCode、Notepad++、SublimeText、GNUEmacs或VIM等。Web瀏覽器用于測試代碼，推薦使用Firefox、Chrome、Safari與MicrosoftEdge[13]。本實驗選擇二維圓柱繞流問題作為研究對象，以展示基于We?bGL的流體力學(xué)虛擬仿真的教學(xué)潛力。實驗?zāi)繕嗽谟谑箤W(xué)生深入了解圓柱繞流的流體動力學(xué)現(xiàn)象，掌握流體力學(xué)參數(shù)對流場的影響。通過虛擬仿真，學(xué)生可調(diào)整流體的初始條件，觀察流體的流動特性，探討不同參數(shù)對圓柱尾渦生成與流速分布的影響。流體黏性、初始速度、圓柱形狀等參數(shù)可由學(xué)生自行調(diào)節(jié)，以觀察不同參數(shù)值對流場的影響。此設(shè)計旨在激發(fā)學(xué)生的實驗探索興趣[14]，使其于虛擬環(huán)境中體驗實驗的靈活性。通過設(shè)計直觀的交互式實驗界面，學(xué)生可使用鼠標或觸摸屏等設(shè)備調(diào)節(jié)參數(shù)，觀察實時流體模擬效果。這種互動設(shè)計有助于學(xué)生深入?yún)⑴c實驗，提升學(xué)習(xí)體驗。

2.3利用WebGL實現(xiàn)流體力學(xué)仿真

WebGL具有強大的圖形渲染功能，其并行計算能力使流體力學(xué)模擬過程更為高效[15]。借助此技術(shù)，學(xué)生通過文本編輯器運行代碼（注：代碼可由Abubu.js庫獲?。跒g覽器中進行展示。

在計算域中，將靜止圓柱置于中心位置，域的上下邊界采用滑移邊界條件，左側(cè)入口處設(shè)置均勻速度入口條件，右側(cè)邊界應(yīng)用無應(yīng)力邊界條件，圓柱體表面則采用無滑移邊界條件。在運行過程中，學(xué)生可通過鼠標以交互方式添加障礙物。

實驗操作界面為學(xué)生提供了便捷操作的圖形用戶界面，簡化了與代碼的交互過程。學(xué)生可通過交互式方式調(diào)節(jié)實驗條件，如改變流體的黏度與速度，觀察渦量場隨時間的變化。

通過對尾跡區(qū)渦量場的觀察，加深學(xué)生對卡門渦街現(xiàn)象的認識，以及對卡門渦街生成原理的理解。

通過對圓柱繞流壓力場的觀察，了解圓柱表面壓力分布，更直觀地理解鈍體繞流壓差阻力形成的原因。

通過觀察升阻力系數(shù)，理解旋渦脫落頻率的概念，加強雷諾數(shù)與斯特勞哈爾數(shù)之間的聯(lián)系。同時，可以介紹渦街流量計的概念，將理論知識與工程實踐聯(lián)系起來。

學(xué)生還可以通過鼠標輕點界面，在圓柱體的下游區(qū)域添加障礙物，觀察旋渦脫落抑制，實時觀察渦量變化。

由此可見，WebGL在模擬與渲染流體動力學(xué)方面，能充分利用GPU的并行計算能力，對流體動力學(xué)模擬中大規(guī)模數(shù)據(jù)的處理具有顯著優(yōu)勢。通過We?bGL的高性能圖形渲染，可實現(xiàn)逼真的流體動力學(xué)模擬，包括流體流動、湍流效果與表面渲染等。WebGL亦支持學(xué)生與模擬平臺進行實時交互，調(diào)節(jié)參數(shù)、觀察結(jié)果，從而提供更具教育與學(xué)習(xí)意義的體驗。同時借助WebGL的可視化能力，流體力學(xué)模擬結(jié)果可以采用直觀方式呈現(xiàn)，將抽象的理論知識轉(zhuǎn)化為具象的圖形，有助于學(xué)生更好地理解流體行為。

3教學(xué)成效

工程流體力學(xué)是上海理工大學(xué)面向大二學(xué)生開設(shè)的專業(yè)基礎(chǔ)課，亦是學(xué)生最早接觸的幾門基礎(chǔ)課之一。學(xué)生對部分抽象的專業(yè)術(shù)語存在理解困難。在講授不可壓縮黏性流體的外部流動章節(jié)時，引入圓柱繞流虛擬仿真實驗，助力學(xué)生更好地理解流動分離、壓力損失、卡門渦街與雷諾數(shù)等概念。通過抽樣問卷調(diào)查評估虛擬仿真實驗對教學(xué)效果的影響，共發(fā)放問卷145份，收回有效問卷145份。

3.1提升學(xué)習(xí)興趣

所有參與的學(xué)生均表示，虛擬仿真實驗提升了其學(xué)習(xí)流體力學(xué)的興趣，并歡迎這種實驗與理論結(jié)合的教學(xué)方式。具體而言，98.6%的學(xué)生表示，通過圓柱繞流虛擬仿真實驗，其能夠更深入地理解圓柱繞流[16]的流體動力學(xué)現(xiàn)象。對于旋渦生成、流場分布等關(guān)鍵概念，學(xué)生獲得了更為具體與直觀的認識，這有助于鞏固其學(xué)術(shù)知識。

3.2提升觀察能力

通過參與實驗，學(xué)生的理論認識與實際操作能力得到顯著提升。在實驗中，學(xué)生能夠自主調(diào)節(jié)實驗參數(shù)，觀察流體行為，從而更好地理解理論知識與實際應(yīng)用間的關(guān)系。調(diào)查顯示，92.4%的學(xué)生認為，通過虛擬實驗，其觀察能力得到提升，能夠更有效地分析與解釋流動現(xiàn)象。

3.3加深學(xué)科融合

虛擬實驗涉及多個學(xué)科領(lǐng)域，包括計算機圖形學(xué)、流體力學(xué)與數(shù)值模擬等。學(xué)生在實驗中不僅學(xué)習(xí)了流體力學(xué)知識，同時也鍛煉了在跨學(xué)科背景下綜合運用知識的能力。89.7%的學(xué)生表示，其對計算流體力學(xué)有進一步學(xué)習(xí)的意愿，而82.8%的學(xué)生希望了解WebGL技術(shù)，這表明虛擬實驗激發(fā)了其學(xué)術(shù)興趣與探索精神。

3.4提升總結(jié)分析能力

通過對實驗數(shù)據(jù)的收集、分析與解釋，學(xué)生培養(yǎng)了科學(xué)實驗的基本方法與技能。這對其未來從事科研工作或工程實踐起到積極的推動作用。調(diào)查結(jié)果顯示，87.5%的學(xué)生認為，通過虛擬實驗，其總結(jié)分析能力得到提升，能夠更有效地進行數(shù)據(jù)處理與結(jié)果解釋。

4結(jié)束語

綜上所述，基于WebGL的流體力學(xué)虛擬仿真實驗教學(xué)為學(xué)生提供了一個直觀、互動的學(xué)習(xí)平臺，有助于其更深入地理解流體力學(xué)的基本原理與應(yīng)用。通過這種創(chuàng)新的教學(xué)模式，學(xué)生不僅提升了學(xué)習(xí)興趣與觀察能力，還增強了跨學(xué)科知識的應(yīng)用能力。未來，課題組將繼續(xù)優(yōu)化虛擬實驗平臺，探索更多的教學(xué)應(yīng)用，以進一步提升學(xué)生的學(xué)術(shù)水平與實踐能力。

參考文獻：

[1]楊海軍，張惠萍，程鵬.新冠肺炎疫情期間高校在線教學(xué)探析[J].中國多媒體與網(wǎng)絡(luò)教學(xué)學(xué)報（上旬刊），2020（4）：194-196.

[2]江海斌，黃發(fā)軍.流體力學(xué)實驗的教學(xué)改革研究[J].教育教學(xué)論壇，2011（18）：12-14.

[3]王德生.基于HTML5和WebGL的三維WebGIS系統(tǒng)構(gòu)建及應(yīng)用[D].福州：福建師范大學(xué)，2014.

[4]牛藝博.基于WebGL的地理信息三維可視化技術(shù)研究[D].蘭州：蘭州交通大學(xué)，2015.

[5]徐瑞.基于WebGL的三維GIS在城市規(guī)劃中的應(yīng)用研究[D].武漢：武漢大學(xué)，2018.

[6]何川.流體力學(xué)[M].重慶：重慶大學(xué)出版社，2018（5）：228.

[7]李平，毛昌杰，徐進.開展國家級虛擬仿真實驗教學(xué)中心建設(shè)提高高校實驗教學(xué)信息化水平[J].實驗室研究與探索，2013，32（11）：5-8.

[8]劉愛華，韓勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息，2012，10（5）：79-81+7.

[9]高云成.基于Cesium的WebGIS三維客戶端實現(xiàn)技術(shù)研究[D].西安：西安電子科技大學(xué)，2014.

[10]汪浩，田豐，張文俊.基于WebGL的交互平臺設(shè)計與實現(xiàn)[J].電子測量技術(shù)，2015，38（8）：119-122，128.

[11]黃若思，李傳榮，馮磊，等.基于幾何的WebGL矢量數(shù)據(jù)三維渲染技術(shù)研究[J].遙感技術(shù)與應(yīng)用，2014，29（3）：463-468.

[12]龔旭超.基于WebGL的交互繪制應(yīng)用研究[D].杭州：浙江大學(xué)，2015.

[13]方路平，李國鵬，洪文杰，等.基于WebGL的醫(yī)學(xué)圖像三維可視化研究[J].計算機系統(tǒng)應(yīng)用，2013，22（9）：25-30.

[14]郝進鋒，劉海君，才英俊，等.高校實驗教學(xué)模式的改革與創(chuàng)新[J].管理觀察，2009（5）：117-118.

[15]KABOUDIANA，CHERRYEM，F(xiàn)ENTONFH.Real-timein?teractivesimulationsoflarge-scalesystemsonpersonalcom?putersandcellphones：towardpatient-specificheartmodelingandotherapplications[J].ScienceAdvances，2019，5（3）：eaav6019.

[16]ZDRAVKOVICHMM.FlowAroundCircularCylinders，Vol?ume2：Applications[M].OxfordUnivPress，2003.

【通聯(lián)編輯：謝媛媛】

基金項目：國家自然科學(xué)基金（項目編號：12172227）；上海理工大學(xué)本研一體化課程建設(shè)項目