基于WebGL的換熱器三維Web應(yīng)用設(shè)計與開發(fā)

宋小鵬 古小敏 石姣玲

摘 要：為提高設(shè)計速度，避免手工計算中的錯誤，提高可重用性，實現(xiàn)設(shè)計效果的3D實時預(yù)覽，以空調(diào)與制冷領(lǐng)域的換熱器設(shè)計為例，介紹WebGL在工業(yè)工程設(shè)計中的應(yīng)用，具體過程包括前處理、計算及后處理。在后處理中基于WebGL實現(xiàn)對制冷設(shè)計效果的三維預(yù)覽，最終通過Web應(yīng)用實現(xiàn)制冷換熱器設(shè)計與簡單圖紙輸出。實踐結(jié)果表明，該應(yīng)用可有效減少換熱器設(shè)計與試算過程中的手工計算工作量，程序可直接生成二維或三維圖紙，以避免因手工計算失誤或工況改變而需要反復(fù)大幅度手動修改圖紙的情況。

關(guān)鍵詞：制冷設(shè)計;Web應(yīng)用;WebGL;換熱器

DOI：10. 11907/rjdk. 201670 開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

中圖分類號：TP319文獻(xiàn)標(biāo)識碼：A 文章編號：1672-7800（2020）008-0147-04

Abstract：Web application in industrial engineering design process has been discussed with the aim to improve the calculation speed involved， avoid errors in manual calculation， improve reusability， and realize 3D real-time preview of design. Taking the design of heat exchanger for air conditioning and refrigeration as an example， this paper introduces the Web application and WebGL in industrial engineering design， including pre-processing， calculating and post-processing. In the post-processing， the 3D preview of refrigeration design has been realized based on WebGL. The drawing sheet for the heat exchanger have been completed through Web application. The practice shows that the Web application can effectively reduce the manual calculation workload in the design process of heat exchanger， also reduce the manual calculation workload in the trial calculation. And two-dimensional or three-dimensional drawing sheets could be directly generated via the Web application， so as to avoid the calculation error via manual calculation， and to avoid the modification of drawing sheets manually when working conditions are changed.

Key Words： refrigeration design;Web application;WebGL;heat exchanger

0 引言

得益于計算機性能的進(jìn)步，以及現(xiàn)代瀏覽器對WebGL和WebAssembly的支持，Web應(yīng)用能夠承載的內(nèi)容越來越豐富，實現(xiàn)的功能越來越多，計算能力也越來越強。已有Web應(yīng)用可用于電路仿真工具（如英飛凌 的電路在線仿真工具[1]）、印刷電路板（PCB）布線軟件（如立創(chuàng) 的PCB設(shè)計工具[2]）、三維模型設(shè)計軟件（基于three.js的三維編輯器[3]）、三維幾何體內(nèi)流計算前后處理界面[4]、基于開源求解器（OpenFOAM 和CalculiX等）的Web工具和服務(wù)[5] ，甚至完全在線版的PhotoShop[6]等。這些在線程序的出現(xiàn)表明Web應(yīng)用在替代原有傳統(tǒng)計算機程序方面具有很大潛力，同時因其具備良好的跨平臺性能，以及免編譯、輕量級、富有交互性等優(yōu)點，可應(yīng)用于工業(yè)設(shè)計過程的大量場景中。例如甘杜芬等[7]使用Web應(yīng)用開發(fā)船舶通信數(shù)據(jù)可視化系統(tǒng)，其數(shù)據(jù)過濾性能優(yōu)于傳統(tǒng)方法。

現(xiàn)代瀏覽器可支持WebGL技術(shù)，使得在網(wǎng)頁中顯示三維信息成為可能。學(xué)者們針對基于WebGL的軌道交通與地形地貌可視化進(jìn)行了大量研究。如童麗閨等[8]利用基于HTML5的Web應(yīng)用與虛擬現(xiàn)實技術(shù)開發(fā)管廊三維地理信息系統(tǒng)，能夠提供有價值的輔助決策信息;任宏康[9]基于第三方WebGL庫three.js實現(xiàn)了三維地形的可視化顯示，并通過實驗對該方法進(jìn)行驗證;陳坤等[10]基于Web應(yīng)用開發(fā)了公路基礎(chǔ)數(shù)據(jù)地理信息系統(tǒng);楊喆等[11]結(jié)合BIM與GIS技術(shù)開發(fā)了基于WebGL的軌道交通可視化Web應(yīng)用;邊金龍等[12]基于WebGL技術(shù)開發(fā)了交通監(jiān)控應(yīng)用程序;郭神福等[13]基于WebGL技術(shù)開發(fā)了列車運行及沿線虛擬地理環(huán)境仿真系統(tǒng)。

WebGL技術(shù)門檻較高，需要完備的計算機三維圖形圖像學(xué)知識，而three.js引擎較好地封裝了WebGL，使得非專業(yè)技術(shù)人員也能快速開發(fā)基于WebGL的應(yīng)用程序。如馮姣等[15]使用Three.js引擎開發(fā)了飛機仿真系統(tǒng);劉冬林等[16]基于Three.js的在線編輯器開發(fā)了機器人模型運動學(xué)仿真系統(tǒng);陳林等[17]基于Three.js引擎開發(fā)了管線三維建?？梢暬到y(tǒng);侯嚴(yán)庭等[18]基于Three.js引擎開發(fā)了機械產(chǎn)品自動裝配演示W(wǎng)eb應(yīng)用。

2.4 應(yīng)用效果

圖4為使用Web應(yīng)用生成圖紙在開源CAD軟件中的顯示效果，當(dāng)設(shè)計存在問題時，修改程序重新生成圖紙，直到滿足設(shè)計要求。該操作能在最大程度上規(guī)避因設(shè)計參數(shù)改變而需要重新繪圖的問題，節(jié)省了設(shè)計時間。

3 結(jié)語

本文介紹了具有輕量級、高交互性、設(shè)備無關(guān)以及免編譯等特點的Web應(yīng)用，并將其應(yīng)用于制冷設(shè)備的換熱器設(shè)計中，實踐結(jié)果表明：

（1） 由于HTML5的跨平臺優(yōu)勢，Web應(yīng)用能夠支持各大主流操作系統(tǒng)和硬件平臺。

（2） 通過JavaScript編程可減少手工計算工作量，且計算速度遠(yuǎn)高于手工計算，同時能最大程度上減少手工計算的失誤。

（3） 通過相關(guān)庫函數(shù)及WebGL可生成簡單的2D/3D圖紙，從而大幅減少因前期設(shè)計失誤導(dǎo)致需要反復(fù)手動繪制圖紙的工作量。

參考文獻(xiàn)：

[1] Infineon. 英飛凌電路在線仿真工具[EB/OL]. ?https：//www.infineon.com/cms/cn/tools/landing/ifxdesigner.html.

[2] 立創(chuàng)EDA.PCB設(shè)計工具[EB/OL]. ?https：//lceda.cn/.

[3] three.js官網(wǎng). 基于three.js的3D建模工具[EB/OL]. https：//threejs.org/editor/.

[4] SimCapsule. 云仿真平臺[EB/OL]. https：//www.simcapsule.cn/.

[5] 北京藍(lán)威技術(shù)有限公司. 基于開源求解器的Web工具和服務(wù)[EB/OL]. http：//www.easycae.cn/.

[6] Photopea.Web版PhotoShop [EB/OL]. ?https：//www.photopea.com/.

[7] 甘杜芬，陳小海，付功偉. WEB前端開發(fā)技術(shù)在船舶通信數(shù)據(jù)可視化中的應(yīng)用[J]. 艦船科學(xué)技術(shù)，2020，42（10）：127-129.

[8] 童麗閨，劉艷軍. 基于HTML5和虛擬現(xiàn)實的綜合管廊三維地理信息系統(tǒng)[J]. 科技資訊，2017，15（22）：9，11.

[9] 任宏康，祝若鑫，李風(fēng)光，等. 基于Three.js的真實三維地形可視化設(shè)計與實現(xiàn)[J]. 測繪與空間地理信息，2015，38（10）：51-54.

[10] 陳坤，逯躍鋒，王少渤，等. 基于WebGIS的四川省營山縣農(nóng)村公路基礎(chǔ)數(shù)據(jù)管理系統(tǒng)設(shè)計與實現(xiàn)[J]. 科技風(fēng)，2020（15）：19-20.

[11] 楊喆，付功云，袁文祥，等. 基于WebGL三維引擎的軌道交通工程BIM+GIS平臺研究[J/OL]. 土木建筑工程信息技術(shù)：1-11[2020- 06-14].http：//kns.cnki.net/kcms/detail/11.5823.TU.20200529.0859. 002.html.

[12] 邊金龍，周偉健，曹曉強. 交通監(jiān)控管理系統(tǒng)中互聯(lián)網(wǎng)WebGL三維可視化技術(shù)的應(yīng)用[J]. 中國交通信息化，2020（3）：130-133.

[13] 郭神福，趙孔陽，王孝龍，等. 基于WebGL的高速列車在線運行及沿線虛擬地理環(huán)境仿真[J]. 鐵道科學(xué)與工程學(xué)報，2020，17（3）：573-581.

[14] 譚傜月，張余強，何小海，等. 基于WebGL的勘探地形及探井信息三維可視化系統(tǒng)設(shè)計[J]. 現(xiàn)代計算機，2020（3）：99-103.

[15] 馮姣，劉志勤，黃俊，等. 基于Three.js的飛行仿真系統(tǒng)設(shè)計[J]. 計算機測量與控制，2020，28（2）：216-219.

[16] 劉冬林，樊留群，劉廣杰，等. 基于Three.js的COLLADA機器人模型在線運動學(xué)仿真[J]. 制造業(yè)自動化，2020，42（2）：82-85.

[17] 陳林. 基于Three.js的地下管線三維建?？梢暬芯縖J]. 測繪與空間地理信息，2018，41（8）：93-96.

[18] 侯嚴(yán)庭. 基于Three.js的機械產(chǎn)品自動裝配演示[J]. 軟件工程，2018，21（3）：23-26.

[19] 陳忠. 地源熱泵地埋管換熱器換熱性能研究[J]. 真空科學(xué)與技術(shù)學(xué)報，2020，40（5）：495-498.

[20] 謝洪濤，李星辰，繩春晨，等. 微通道換熱器結(jié)構(gòu)及優(yōu)化設(shè)計研究進(jìn)展[J/OL]. 真空與低溫：1-10. [2020-06-14]. http：//kns.cnki.net/kcms/detail/62.1125.O4.20200502.1057.002.html.

[21] 尹珩宇，杜梅芳，曹先常，等. 焦?fàn)t荒煤氣顯熱回收換熱器傳熱特性的實驗研究[J]. 能源工程，2020（2）：80-84.

[22] 劉秀峰，張詩，周志杰，等. 換熱器結(jié)構(gòu)優(yōu)化與換熱性能評價指標(biāo)研究[J]. 化工學(xué)報，2020，71（S1）：98-105.

[23] 文鍵，王春龍，劉華清，等. 板翅式換熱器波紋翅片性能數(shù)值模擬及其優(yōu)化[J]. 高?；瘜W(xué)工程學(xué)報，2020，34（2）：335-341.

[24] 吳業(yè)正. 小型制冷裝置設(shè)計指導(dǎo)[M]. 北京：機械工業(yè)出版社，2004.

（責(zé)任編輯：黃 ?。?/p>