基于WebGL的換熱器三維Web應用設計與開發

宋小鵬 古小敏 石姣玲

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

關鍵詞：制冷設計;Web應用;WebGL;換熱器

DOI：10. 11907/rjdk. 201670 開放科學（資源服務）標識碼（OSID）：

中圖分類號：TP319文獻標識碼：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 引言

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

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

WebGL技術門檻較高，需要完備的計算機三維圖形圖像學知識，而three.js引擎較好地封裝了WebGL，使得非專業技術人員也能快速開發基于WebGL的應用程序。如馮姣等[15]使用Three.js引擎開發了飛機仿真系統;劉冬林等[16]基于Three.js的在線編輯器開發了機器人模型運動學仿真系統;陳林等[17]基于Three.js引擎開發了管線三維建模可視化系統;侯嚴庭等[18]基于Three.js引擎開發了機械產品自動裝配演示Web應用。

2.4 應用效果

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

3 結語

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

（1） 由于HTML5的跨平臺優勢，Web應用能夠支持各大主流操作系統和硬件平臺。

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

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

參考文獻：

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

[2] 立創EDA.PCB設計工具[EB/OL]. ?https：//lceda.cn/.

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

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

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

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

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

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

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

[10] 陳坤，逯躍鋒，王少渤，等. 基于WebGIS的四川省營山縣農村公路基礎數據管理系統設計與實現[J]. 科技風，2020（15）：19-20.

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

[12] 邊金龍，周偉健，曹曉強. 交通監控管理系統中互聯網WebGL三維可視化技術的應用[J]. 中國交通信息化，2020（3）：130-133.

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

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

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

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

[17] 陳林. 基于Three.js的地下管線三維建模可視化研究[J]. 測繪與空間地理信息，2018，41（8）：93-96.

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

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

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

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

[22] 劉秀峰，張詩，周志杰，等. 換熱器結構優化與換熱性能評價指標研究[J]. 化工學報，2020，71（S1）：98-105.

[23] 文鍵，王春龍，劉華清，等. 板翅式換熱器波紋翅片性能數值模擬及其優化[J]. 高校化學工程學報，2020，34（2）：335-341.

[24] 吳業正. 小型制冷裝置設計指導[M]. 北京：機械工業出版社，2004.

（責任編輯：黃 健）