本文翻譯自：Working with 3D graphics and visual effects in Qt Design Studio

原文作者：Qt公司產(chǎn)品營(yíng)銷經(jīng)理 Matteo Capelletti

校審：Haipeng Yu

為了打造宜人的汽車體驗(yàn)，設(shè)計(jì)師需要先進(jìn)的工具，以最少的時(shí)間和精力創(chuàng)建出色的圖形用戶界面。Qt Design Studio包含所有資源，可以輕松創(chuàng)建令人驚嘆的UI應(yīng)用程序，包括最先進(jìn)的3D圖形，并可在任意嵌入式系統(tǒng)上以最佳性能運(yùn)行。

現(xiàn)代車內(nèi)體驗(yàn)越來越傾向于使用3D圖形來增強(qiáng)車內(nèi)體驗(yàn)。環(huán)繞視圖顯示器、停車助手和抬頭顯示導(dǎo)航（HUD）系統(tǒng)就是幾類重度依賴3D圖形的應(yīng)用程序。這些高級(jí)駕駛輔助系統(tǒng)（ADAS）正變得越來越普遍，因?yàn)樗鼈兺ㄟ^實(shí)時(shí)環(huán)境中汽車的真實(shí)渲染，廣泛擴(kuò)展了駕駛員的態(tài)勢(shì)感知能力。在所有這些情況下，所謂的“數(shù)字鏡像”已經(jīng)成為一種流行的方式，通過先進(jìn)的3D圖形將車輛的狀態(tài)和性能在車內(nèi)可視化。

我們來看看這些出色的3D圖形是如何成為驅(qū)動(dòng)現(xiàn)代汽車數(shù)字座艙UI應(yīng)用程序一部分的。

3D增強(qiáng)HUD導(dǎo)航系統(tǒng)

3D設(shè)計(jì)及UI創(chuàng)建

首先，3D模型是在3D內(nèi)容創(chuàng)建工具中創(chuàng)建的，如Blender、Maya或3ds Max。3D汽車模型能夠渲染燈光啟閉、車門開關(guān)等動(dòng)畫。借助目前最先進(jìn)的圖形工具和能力，這種3D圖像的質(zhì)量可以達(dá)到以假亂真的水平，以至于用戶很難將它們與真實(shí)物體的高分辨率圖片或視頻區(qū)分開來。

但就其本身而言，這樣的3D設(shè)計(jì)只是圖像，而為了推動(dòng)更有意義的車內(nèi)體驗(yàn)，它們應(yīng)該成為UI應(yīng)用程序的一部分，其行為與其他功能、服務(wù)和連接視覺與現(xiàn)實(shí)的傳感器相關(guān)聯(lián)。這就是Qt Design Studio能夠做到的事情。

在Qt Design Studio中，3D模型的每個(gè)組件都可以連接到來自汽車傳感器的數(shù)據(jù)。通過這種方式，當(dāng)真正的汽車的車燈打開時(shí)，汽車UI中的3D模型的燈就會(huì)打開，同樣，門也會(huì)隨之打開和關(guān)閉。出現(xiàn)在UI中的3D模型的行為現(xiàn)在與真實(shí)汽車的功能相連接。在更復(fù)雜的ADAS應(yīng)用程序中，我們看到道路上的3D汽車模型與其他3D渲染的汽車以及周圍可能的行人，以反映汽車實(shí)際情況的3D表現(xiàn)形式出現(xiàn)。

Outrun ADAS場(chǎng)景

通過數(shù)據(jù)綁定，Qt Design Studio實(shí)現(xiàn)了設(shè)計(jì)與現(xiàn)實(shí)世界的連接。在這里，通過來自設(shè)計(jì)的視覺效果和來自汽車傳感器的數(shù)據(jù)，UI應(yīng)用程序變得栩栩如生。

設(shè)計(jì)與開發(fā)

當(dāng)在Qt Design Studio中導(dǎo)入3D圖形資源時(shí)，沒有任何細(xì)節(jié)丟失，設(shè)計(jì)保持完整，看起來與在3D內(nèi)容創(chuàng)建工具中完全相同。

Technical Artist能夠利用Qt Design Studio中所有的工具，通過添加狀態(tài)、過渡和屬性綁定將視覺內(nèi)容（設(shè)計(jì)、預(yù)置控件、紋理、光線）轉(zhuǎn)換為真正的UI應(yīng)用程序。

所有這些操作都可以通過單擊并將屬性拖放到模型上直觀地實(shí)現(xiàn)，而不需要編寫任何代碼。同時(shí)，在Qt Design Studio中創(chuàng)建的UI會(huì)自動(dòng)轉(zhuǎn)換為QML代碼。在任何時(shí)候，用戶都可以自由選擇是在圖形化更改UI還是編輯代碼。這兩種表現(xiàn)形式是實(shí)時(shí)同步的，因此對(duì)其中一種表現(xiàn)形式的任何更改都會(huì)立即反映到另一個(gè)當(dāng)中。這種調(diào)動(dòng)代碼的能力為后端開發(fā)者鋪平了道路，他們可以使用與設(shè)計(jì)師相同的工具來處理UI的其他方面，如數(shù)據(jù)集成和測(cè)試。

讓設(shè)計(jì)師和開發(fā)者能夠在同一個(gè)工具上一同協(xié)作，不僅能夠確保從原型設(shè)計(jì)到部署都能保留UI引人注目的外觀，而且還確保了用戶體驗(yàn)在后端得到了優(yōu)化，并符合UX設(shè)計(jì)師最初的計(jì)劃。

打造驚鴻一瞥的亮點(diǎn)

強(qiáng)大的3D圖形在汽車應(yīng)用中存在豐富而重要的用例，并增加汽車品牌的聲望。Qt Design Studio為基于物理的渲染（PBR）提供了完全支持，以與標(biāo)準(zhǔn)材料模型完全兼容。遵循PBR標(biāo)準(zhǔn)大幅簡(jiǎn)化了導(dǎo)入3D資源的任務(wù)，因?yàn)樗_保了模型在Qt Design Studio中的外觀與在內(nèi)容創(chuàng)建工具中的完全相同，而不需要為不同的表面類型創(chuàng)建自定義著色器。PBR還支持訪問在線可用的數(shù)千個(gè)3D模型，它們可以根據(jù)UI應(yīng)用程序的需求使用和定制。但Qt Design Studio所能做的遠(yuǎn)不止于此。

光、陰影和反射對(duì)于創(chuàng)建逼真的3D場(chǎng)景是必不可少的。Qt Design Studio提供了幾種類型的光，包括帶有HDR地圖的IBL，用于超現(xiàn)實(shí)主義的渲染。此外，Global Illumination支持模型間接光照，使場(chǎng)景更加真實(shí)。

后期處理效果為3D模型和場(chǎng)景添上了點(diǎn)睛一筆。Qt Design Studio目前有21個(gè)后期處理效果可供選擇，未來還計(jì)劃發(fā)布更多。模糊，景深，抗鋸齒，色調(diào)映射只是一些現(xiàn)成的效果（3D效果 | Qt Design Studio手冊(cè)3.8.0）。后期處理效果可以很容易地通過拖放來添加，使3D場(chǎng)景更具沉浸感，并為完整的UI添加電影化的風(fēng)格。

最后，粒子效果非常適合創(chuàng)建引人注目的動(dòng)畫，模擬汽車內(nèi)外的流體和空氣流動(dòng)。粒子可以用于包括變形、火花、灰塵和煙霧在內(nèi)的令人驚嘆的動(dòng)畫。另外對(duì)駕駛可能產(chǎn)生不利影響的外部天氣條件，如雨、風(fēng)或雪，也可以通過粒子效果有效地表現(xiàn)出來。

Qt Design Studio為在嵌入式環(huán)境中創(chuàng)建粒子效果進(jìn)行了優(yōu)化，在該環(huán)境中處理能力可能受到限制，就像在汽車中使用的設(shè)備一樣。

Outrun演示中車內(nèi)通風(fēng)的粒子效果建模

---

深圳市優(yōu)飛迪科技有限公司成立于2010年，是一家專注于產(chǎn)品開發(fā)平臺(tái)解決方案與物聯(lián)網(wǎng)技術(shù)開發(fā)的國(guó)家級(jí)高新技術(shù)企業(yè)。

十多年來，優(yōu)飛迪科技在數(shù)字孿生、工業(yè)軟件尤其仿真技術(shù)、物聯(lián)網(wǎng)技術(shù)開發(fā)等領(lǐng)域積累了豐富的經(jīng)驗(yàn)，并在這些領(lǐng)域擁有數(shù)十項(xiàng)獨(dú)立自主的知識(shí)產(chǎn)權(quán)。同時(shí)，優(yōu)飛迪科技也與國(guó)際和國(guó)內(nèi)的主要頭部工業(yè)軟件廠商建立了戰(zhàn)略合作關(guān)系，能夠?yàn)榭蛻籼峁┩暾漠a(chǎn)品開發(fā)平臺(tái)解決方案。

優(yōu)飛迪科技技術(shù)團(tuán)隊(duì)實(shí)力雄厚，主要成員均來自于國(guó)內(nèi)外頂尖學(xué)府、并在相關(guān)領(lǐng)域有豐富的工作經(jīng)驗(yàn)，能為客戶提供“全心U+端到端服務(wù)”。