web 3d 與仿真

時(shí)間：2022-08-27 07:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-27 07:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web進(jìn)入3d時(shí)代的時(shí)間并不長(zhǎng)，web在3d領(lǐng)域的發(fā)展卻十分迅速。web 3d技術(shù)已經(jīng)在房地產(chǎn)房型展示、博物館藝術(shù)品或文物展示、電商平臺(tái)的商品展示領(lǐng)域獲得廣泛應(yīng)用。然而web 3d技術(shù)在仿真領(lǐng)域的應(yīng)用卻比較鮮見(jiàn)。

目前而言，3d仿真還是PC軟件的天下，大部分仿真軟件都會(huì)使用UE4或unity3d這樣的重量級(jí)引擎，我司用的OGRE也是一款重量級(jí)引擎。以O(shè)GRE為例，其誕生于2000年左右，最后更新截至于2012年，ROS系軟件RVIZ和gazebo都是使用OGRE開(kāi)發(fā)。當(dāng)初我司選用OGRE作為開(kāi)發(fā)引擎，主要是因?yàn)橄Ｍ芎虲++無(wú)縫結(jié)合，開(kāi)源，能夠在ubuntu下運(yùn)行，畢竟大部分人工智能算法投入生產(chǎn)后都是使用C++。

但是，基于一年的開(kāi)發(fā)使用經(jīng)驗(yàn)，OGRE的缺陷正在逐漸暴露出來(lái)，這是一個(gè)常年不更新的框架，一個(gè)與最新技術(shù)水平脫鉤六年的框架，技術(shù)理念十分陳舊，資料也很匱乏。比如繪制凹凸的多邊形，沒(méi)有現(xiàn)成的類型可以使用，三角化算法沒(méi)有集成，網(wǎng)上又很難找到案例。3D文字的繪制官方本身沒(méi)有提供api，非官方提供的代碼運(yùn)行效率卻又不佳。對(duì)3d對(duì)象的幾何數(shù)據(jù)、空間節(jié)點(diǎn)和材質(zhì)的管理是各自獨(dú)立的，靈活性太高，方便性不足。單例、智能指針和普通指針混用，缺乏統(tǒng)一的風(fēng)格。我把較多的時(shí)間花在彌補(bǔ)這些缺陷上，不能專心于仿真本身的設(shè)計(jì)。鑒于此，我向公司多次提出使用新的三維引擎，但是沒(méi)有引起足夠的重視。由于模擬器已經(jīng)深度集成OGRE，重新使用新的三維引擎必然是傷筋動(dòng)骨的，積重難返成為使用新技術(shù)的主要障礙。

傳統(tǒng)意義上，使用C++代表著運(yùn)行效率高，但是通過(guò)使用OGRE發(fā)現(xiàn)，C++運(yùn)行效率高還有一個(gè)前提，就是寫C++的人的水平也要高，指導(dǎo)怎么充分利用計(jì)算資源，并能設(shè)計(jì)出簡(jiǎn)單有效的框架。在我們小組內(nèi)，我能設(shè)計(jì)出簡(jiǎn)單有效的框架，有人掌握豐富的C++技巧，但是沒(méi)人知道怎么和底層緊密結(jié)合，所以我們的C++并沒(méi)有高的運(yùn)行效率，反而有時(shí)候運(yùn)行很慢。所以如果做不到和底層緊密結(jié)合，還不如把這些工作交給開(kāi)發(fā)三維引擎的人，因?yàn)樗麄兓舜罅康臅r(shí)間在研究這個(gè)。

基于我之前使用qml開(kāi)發(fā)3d可視化軟件和標(biāo)注工具的經(jīng)驗(yàn)，我萌生了一個(gè)想法，3d使用web開(kāi)發(fā)仿真界面也未必不可行，如果公司在短時(shí)間內(nèi)不能采用新的三維引擎，那么我可以先自行嘗試一下使用web3d技術(shù)。

qml是什么？qml是qt公司力推的新UI框架qtquick的主要開(kāi)發(fā)語(yǔ)言。qtquick是從web借鑒而來(lái)，qml則是從js衍生而來(lái)。其大體的原理是使用qml像html、css那樣設(shè)計(jì)界面，像nodejs那樣用C++作為和系統(tǒng)交互的語(yǔ)言，本質(zhì)上與electron類似。我之前的工作中，因?yàn)橄矚g新技術(shù)，threejs上手比較快，用qml嵌套canvas3d，集成了threejs構(gòu)建3d場(chǎng)景，開(kāi)發(fā)了一款實(shí)時(shí)顯示的可視化的軟件。盡管也存在運(yùn)行效率的問(wèn)題，但是已經(jīng)顛覆我對(duì)腳本語(yǔ)言的看法。腳本語(yǔ)言不僅可以開(kāi)發(fā)大型的實(shí)時(shí)軟件，并且擁有更高的開(kāi)發(fā)效率，在沒(méi)有軟硬件通吃的3d開(kāi)發(fā)人員的情況下，使用腳本語(yǔ)言開(kāi)發(fā)3d軟件也是一個(gè)不錯(cuò)的選擇。

在我司，我承接了3d標(biāo)注工具的開(kāi)發(fā)。最開(kāi)始，3d標(biāo)注工具是打算用OGRE開(kāi)發(fā)，而且網(wǎng)上那個(gè)已有案例。當(dāng)時(shí)需求催的比較緊，本來(lái)是打算把已有的3d代碼打包成比較通用的庫(kù)之后，再開(kāi)發(fā)，后來(lái)評(píng)估發(fā)現(xiàn)這樣還不如重新寫一個(gè)，因?yàn)楫?dāng)時(shí)的3d代碼的通用性實(shí)在是太差了。于是我提出我曾經(jīng)用threejs快速開(kāi)發(fā)過(guò)3d軟件，我可以再次使用threejs開(kāi)發(fā)一個(gè)全新的標(biāo)注工具。這樣我花了一個(gè)月時(shí)間，用qml和threejs把他們要的3d標(biāo)注工具開(kāi)發(fā)了出來(lái)。這么開(kāi)發(fā)還有一個(gè)好處，就是當(dāng)標(biāo)注人員越來(lái)越多的時(shí)候，標(biāo)注工具需要web化，本來(lái)標(biāo)準(zhǔn)工具就是用threejs寫的話，web化起來(lái)比較容易。

幾個(gè)月過(guò)去后，我司成立了標(biāo)注公司，標(biāo)注需要大量的人，標(biāo)注工具也需要web化了。于是之前的代碼再次派上了用場(chǎng)?；谥拔沂褂眠^(guò)vue和element-ui，這次web化的時(shí)候我再次使用這兩個(gè)框架。web開(kāi)發(fā)和qml開(kāi)發(fā)有所不同，web開(kāi)發(fā)沒(méi)有編譯過(guò)程，調(diào)試可以在瀏覽器內(nèi)完成，谷歌瀏覽器提供了強(qiáng)大的開(kāi)發(fā)工具，能夠所改即所見(jiàn)，dom組件對(duì)應(yīng)代碼，相比qt提供的工具來(lái)說(shuō)方便了不少。而且直接使用web開(kāi)發(fā)后，可以使用threejs的最新版本，功能沒(méi)有限制，可以直接使用一些配套腳本，并且渲染效率有所提高。

本來(lái)我是想，所有功能都在前端完成，如果可能的話。但是我在開(kāi)發(fā)過(guò)程中我發(fā)現(xiàn)了一個(gè)問(wèn)題，就是前端無(wú)法獲取本地的文件目錄，這個(gè)只能在后端完成，后端使用什么語(yǔ)言，什么框架又成了一個(gè)問(wèn)題。因?yàn)橹坝眠^(guò)java和C++寫過(guò)簡(jiǎn)單的服務(wù)器，所以我知道java過(guò)于重量級(jí)，而C++沒(méi)有什么好的服務(wù)器框架。我想能不能使用websocket，因?yàn)閣ebsocket可以從后端主動(dòng)發(fā)數(shù)據(jù)給前端，讓前端實(shí)時(shí)顯示，在數(shù)據(jù)播放的時(shí)候也可以做一些標(biāo)注工作。于是我找到了websocketd，一個(gè)簡(jiǎn)單易用，并且支持多種的腳本的軟件。這個(gè)軟件本身就是一個(gè)可執(zhí)行程序，可以通過(guò)命令行運(yùn)行，參數(shù)設(shè)置為要執(zhí)行的腳本即可，實(shí)在是比一個(gè)有一大堆需要學(xué)習(xí)的api的成熟框架要好用的多。而且這個(gè)時(shí)候我僅僅是需要用后端獲取一下本地目錄，這是一個(gè)很簡(jiǎn)單的需求。我已經(jīng)學(xué)會(huì)了python，知道怎么用glob獲取目錄，所以python是后臺(tái)腳本的第一選擇。

我花大概一個(gè)月的時(shí)間將原有的qt開(kāi)發(fā)的標(biāo)注工具轉(zhuǎn)化成了web軟件，相比原版，web版的點(diǎn)云加載和點(diǎn)選速度更快，操作更簡(jiǎn)便，界面更現(xiàn)代化。其中點(diǎn)云加載和點(diǎn)選速度更快是我沒(méi)有料想到的。因?yàn)閝t不支持js讀取文件所以原來(lái)是用C庫(kù)加載的，而且我還因?yàn)榇簏c(diǎn)云點(diǎn)選速度較慢對(duì)點(diǎn)云做了分割處理，就這樣加載速度還不及后來(lái)直接用前端的js加載速度快，點(diǎn)選速度也不及后來(lái)沒(méi)有分割的速度。需要指出的是，雖然后來(lái)的web版中我沒(méi)有寫算法分割，但是可能在使用的新版threejs的點(diǎn)云算法中已經(jīng)做了分割。qt允許集成的threejs版本是74，而最新的threejs已經(jīng)進(jìn)化到了99，這之間的25個(gè)版本點(diǎn)云算法可能已經(jīng)有了巨大的提升。至于加載速度，我有測(cè)過(guò)，加載時(shí)間主要在調(diào)用C庫(kù)api的階段，而后數(shù)據(jù)發(fā)到qml耗時(shí)并不長(zhǎng)。而js加載點(diǎn)云是直接讀文件，不存在語(yǔ)言之間的數(shù)據(jù)傳遞。所以js加載速度快本來(lái)就是情有可原的，并且可能在加載算法上還要優(yōu)于我使用的C庫(kù)。

講了這么多，還是在web 3d上，和仿真沒(méi)有產(chǎn)生關(guān)系，我前面提到websocket通信支持后端對(duì)前端主動(dòng)發(fā)數(shù)據(jù)，那么只要網(wǎng)絡(luò)夠好，延遲夠低，那么web也可以實(shí)現(xiàn)實(shí)時(shí)刷新。比如我們有一輛車在前端顯示，那么后端不斷的發(fā)送新的位姿數(shù)據(jù)，前端的車輛就會(huì)動(dòng)起來(lái)。鑒于我正在開(kāi)發(fā)車輛的動(dòng)力學(xué)模型，正需要一個(gè)3d的顯示界面，之前使用模擬器作為可視化工具時(shí)，把大量的時(shí)間花在怎么修改模擬器上，反而沒(méi)多少時(shí)間調(diào)試模型，所以我使用之前標(biāo)注工具的代碼，將其改造成一個(gè)實(shí)時(shí)仿真工具。

這時(shí)候再用websocketd就不行了，因?yàn)閣ebsocketd不支持python腳本引用非標(biāo)準(zhǔn)庫(kù)，就是使用numpy還行，使用pytorch這樣的第三方庫(kù)就不行了，所以有必要再找一個(gè)再?gòu)?fù)雜一點(diǎn)的框架。于是我開(kāi)始搜索python的web框架，基本上就三個(gè)，DJango、Tornado和Flask。DJango是一個(gè)重型框架，F(xiàn)lask是一個(gè)微內(nèi)核框架，而Tornado介于兩者之間。在比較websocket方面的支持力度上，似乎只有Tornado是原生支持的，畢竟Tornado宣稱的優(yōu)點(diǎn)就是適應(yīng)長(zhǎng)連接。

對(duì)于仿真而言，最有趣的地方在于能夠看到一個(gè)事物朝著自己預(yù)想的方向發(fā)展，如果沒(méi)有可以通過(guò)各種方法找出問(wèn)題所在。如果模型正確，還可以預(yù)測(cè)出未來(lái)的發(fā)展方向。對(duì)于我來(lái)說(shuō)，我現(xiàn)在有一個(gè)python寫的車輛模型，有一個(gè)顯示車輛位姿的界面，如果在界面上加上一些輸入控制參數(shù)的控件，那么可以在界面上實(shí)時(shí)觀察到控制參數(shù)對(duì)車輛位姿的影響。由于python有ros的全套api，在后臺(tái)接受ros消息驅(qū)動(dòng)車輛行走也是可能的。

有了3d顯示界面，還需要仿真控制按鈕，開(kāi)始、暫停、重置、是否加載神經(jīng)網(wǎng)絡(luò)模型，這些和simulink類似。我還需要曲線來(lái)顯示車速和加速度，這也和simulink類似。在顯示曲線上，我也頭疼了一番，比較了echart，chartjs，這兩個(gè)都是開(kāi)源庫(kù)，echart是國(guó)產(chǎn)的，百度出品，而chartjs是github上的開(kāi)源庫(kù)，相較而言，我更喜歡chartjs的國(guó)際范，chartjs社區(qū)相當(dāng)活躍，有更多人使用的產(chǎn)品，其問(wèn)題肯定更少。chartjs雖然沒(méi)有專門的實(shí)時(shí)更新的例子，但是實(shí)現(xiàn)實(shí)時(shí)更新只是一句話的是，就是把dataset改了。

chartjs解決了而為曲線的顯示問(wèn)題，但是我在開(kāi)發(fā)神經(jīng)網(wǎng)絡(luò)模型的時(shí)候需要顯示3d的散點(diǎn)圖，我最開(kāi)始使用的是matplotlib，卡的一筆，而且沒(méi)有交互功能，查詢點(diǎn)的數(shù)據(jù)要自己寫事件響應(yīng)的代碼，太麻煩，所以我在同事的推薦下使用plotly，結(jié)果沒(méi)賬號(hào)不能用，后來(lái)注冊(cè)了賬號(hào)還是不能用，我直接放棄了。接著我使用了一個(gè)開(kāi)源的免費(fèi)的競(jìng)品bokeh，同樣是用python控制數(shù)據(jù)，前端顯示數(shù)據(jù)，但是是生成一個(gè)離線網(wǎng)頁(yè)，2d散點(diǎn)圖用的很好，當(dāng)我覺(jué)得就是你的時(shí)候，才知道這家伙不支持3d，后來(lái)想想也是web里2d和3d是兩套不同的技術(shù)。絕望中我又想起了pytorch有一套自己的可視化工具visdom。

visdom和plotly和bokeh一樣都是基于web的可視化框架。不同在于visdom是開(kāi)源免費(fèi)的，自帶服務(wù)器程序，并且支持3d。其實(shí)visdom也是使用plotly的，估計(jì)付了費(fèi)。但是visdom的用戶不用付費(fèi)。他的3d的api設(shè)計(jì)也十分人性化，可以直接渲染矩陣，2d和3d公用同一個(gè)散點(diǎn)圖api，函數(shù)內(nèi)部會(huì)自動(dòng)判斷矩陣的維數(shù)。visdom可以在一個(gè)頁(yè)面內(nèi)同事顯示多個(gè)子窗口，布局管理是自動(dòng)的，這個(gè)也為數(shù)據(jù)監(jiān)控提供了極大方便，我可以拿visdom的默認(rèn)界面作為我的仿真軟件的數(shù)據(jù)監(jiān)控界面。也就是說(shuō)chartjs也可以不用了，直接在python后臺(tái)發(fā)送數(shù)據(jù)就行。

大概總結(jié)一下，我所面臨的問(wèn)題是如何快速開(kāi)發(fā)有3d顯示界面的車輛動(dòng)力學(xué)仿真軟件。我的解決方案是使用web 3d+websocket+python。

python模型-tornado=>data via websocket=>threejs/chartjs

仿真的模型是用pytorch構(gòu)建，車輛的運(yùn)動(dòng)學(xué)公式加上pytorch從數(shù)據(jù)中學(xué)習(xí)而來(lái)的表格構(gòu)成了整個(gè)模型，然后tornado的定時(shí)事件中定時(shí)調(diào)用模型的步進(jìn)函數(shù)，可以完全不依賴ros就能跑。

由于目前算法的調(diào)試還比較粗糙，仿真往往還只是邏輯驗(yàn)證的過(guò)程，發(fā)現(xiàn)算法中的流程或邏輯錯(cuò)誤，還不能支持調(diào)參的需要。其中主要的問(wèn)題是仿真和實(shí)際的差距還比較大。例如車輛的剎車距離和實(shí)際不一致，這個(gè)問(wèn)題主要是因?yàn)檐囕v的實(shí)際加速度并不是控制指令發(fā)過(guò)來(lái)的加速度，這兩者之間不是直接的等于關(guān)系，VCU在接受控制指令中的加速度和其他車輛狀態(tài)信號(hào)后，會(huì)根據(jù)某種算法換算成變速器檔位和油門或剎車信號(hào)等，這種算法對(duì)我們來(lái)說(shuō)是黑盒的。這種情況下用傳統(tǒng)的動(dòng)力學(xué)公式建模并不是那么容易的事。所以我考慮到了使用機(jī)器學(xué)習(xí)方法，從數(shù)據(jù)中習(xí)得模型。