行業(yè) | 如何優(yōu)化汽車(chē)儀表盤(pán)以實(shí)現(xiàn)高效渲染?

“只是簡(jiǎn)單的刻度盤(pán)！他們?cè)趺茨軌蛟O(shè)計(jì)的這么糟糕？”信不信由你，這個(gè)問(wèn)題我已經(jīng)提到過(guò)很多次了。

如果你想知道我們究竟在說(shuō)什么，請(qǐng)看下文。

我們所談?wù)摰氖菙?shù)字儀表盤(pán)上的刻度盤(pán)，我們可以在越來(lái)越多的現(xiàn)代汽車(chē)上找到它。自上世紀(jì)80年代首次設(shè)計(jì)出現(xiàn)，這種數(shù)字式儀表盤(pán)現(xiàn)在又重新流行起來(lái)，這是未來(lái)發(fā)展的趨勢(shì)。數(shù)字儀表盤(pán)比傳統(tǒng)的刻度盤(pán)能夠提供更精確、更豐富而且更加清晰的信息。它可以是自適應(yīng)的、動(dòng)態(tài)的，準(zhǔn)確的顯示駕駛員在任何時(shí)刻需要看到的信息。如果得到制造商的許可，儀表盤(pán)還可以根據(jù)駕駛員的個(gè)人喜好進(jìn)行定制。它們也可以看起來(lái)非常的酷炫，這在當(dāng)今時(shí)代是非常重要的。

與其他數(shù)字顯示器一樣，這些數(shù)字儀表盤(pán)需要GPU來(lái)驅(qū)動(dòng)，作為汽車(chē)領(lǐng)域的主要參與者，Imagination提供的解決方案已經(jīng)在行業(yè)得到了廣泛的應(yīng)用。

當(dāng)組裝一臺(tái)新的汽車(chē)時(shí)，OEM廠商就會(huì)使用最新的GPU來(lái)測(cè)試他們的數(shù)字儀表盤(pán)設(shè)計(jì)——這就回到了我們的問(wèn)題——刻度盤(pán)。事實(shí)是這些儀表盤(pán)在幾何形狀方面往往設(shè)計(jì)得很糟糕，刻度盤(pán)是最糟糕的設(shè)計(jì)之一。

讓我解釋一下，正如你所期望的那樣，這些刻度盤(pán)需要完全是圓形的。事實(shí)上在一些社區(qū)中任何不是圓形的設(shè)計(jì)都被認(rèn)為是不太好的品味，而且在汽車(chē)行業(yè)肯定是不被接受的。

而這種圓形的設(shè)計(jì)是存在問(wèn)題的，因?yàn)閯?chuàng)建這種圓形的方法通常會(huì)使用非常密集的網(wǎng)格，這將導(dǎo)致在汽車(chē)中使用的嵌入式GPU的性能非常差。

這是一個(gè)問(wèn)題，為了解決這個(gè)問(wèn)題，GPU往往會(huì)被過(guò)度的設(shè)計(jì)，相比最開(kāi)始簡(jiǎn)單的刻度盤(pán)設(shè)計(jì)需要更強(qiáng)大的性能。

怎么會(huì)變成這樣呢？我的理解是這樣的：

從本質(zhì)上講簡(jiǎn)單的在設(shè)計(jì)中添加更多的三角形是解決圓度問(wèn)題最簡(jiǎn)單的方法，因?yàn)檫@種方式不僅可以創(chuàng)建資源，還可以集成到現(xiàn)有的渲染程序中去。因此我們看到很多廠商這樣做，但是正如上文所述，一旦采用了這種方式就不可避免的出現(xiàn)性能低下的問(wèn)題，而硬件是首當(dāng)其沖。

如下圖所示：左邊的刻度盤(pán)是圓形的，但是不夠完美，我們要想將其設(shè)計(jì)的更圓（見(jiàn)上圖），太棒了完成了，那么就讓我們看看新設(shè)計(jì)的刻度盤(pán)：

仔細(xì)觀察下右圖中的線框，我們可以看到它采用了更多的三角形（總共超過(guò)了一萬(wàn)個(gè)三角形），但問(wèn)題不在于三角形數(shù)量，而是低端的GPU也要能夠以相當(dāng)快的速度來(lái)處理一定數(shù)量級(jí)的數(shù)據(jù)。

真正的問(wèn)題是密度：在只有幾個(gè)像素大小的區(qū)域內(nèi)聚集了大量的三角形，GPU的設(shè)計(jì)是為了加速三角形的渲染速度，而且這些三角形會(huì)跨越不同的像素區(qū)域——但我們這里的問(wèn)題正好相反，這就導(dǎo)致了嚴(yán)重的性能損失。

不僅刻度盤(pán)渲染的很慢，而且會(huì)產(chǎn)生嚴(yán)重的重疊效果，每條邊和每個(gè)斜面都會(huì)呈現(xiàn)比較粗糙甚至重疊的效果，這種問(wèn)題唯一合理的解決方案是使用多樣本抗混疊技術(shù)Multi-Sample Anti-Aliasing (MSAA)來(lái)處理，這就使得渲染過(guò)程的處理速度變得更慢。

超越幾何模式

一個(gè)好消息是刻度盤(pán)實(shí)際上是一個(gè)非常簡(jiǎn)單的幾何圖形，從一個(gè)角度來(lái)看通常是非常平整的。因此它可以很容易的近似看作是一個(gè)簡(jiǎn)單的透明紋理的四邊形，本質(zhì)上預(yù)先計(jì)算所有幾何圖形和光照資源GPU可以非常容易的處理這些任務(wù)，額外的好處是紋理部分可以很容易的進(jìn)行調(diào)整，使邊緣變得非常平滑，從而不需要依賴(lài)MSAA技術(shù)。

透明的四邊形

這種在透明四邊形上的紋理處理方式如上圖所示，雖然這種渲染在成本上很低，但是有幾個(gè)潛在的問(wèn)題可能需要處理，當(dāng)然這取決于設(shè)計(jì)師希望達(dá)到的質(zhì)量：

整個(gè)對(duì)象必須使用透明度（通常不推薦），即使實(shí)際上只需要使用一小部分

刻度盤(pán)周?chē)恼麄€(gè)區(qū)域是完全透明的，透明部分的像素可以進(jìn)行柵格化處理并通過(guò)著色器處理，這難免會(huì)有些浪費(fèi)。

當(dāng)放大時(shí)我們可以看到線框，這在某些情況下是可以接受的

光照完全是內(nèi)置的，如果需要更加逼真的效果可能就是問(wèn)題

我們可以通過(guò)使形狀更圓一些來(lái)減少浪費(fèi)的像素，這本質(zhì)上是像素和頂點(diǎn)數(shù)之間的權(quán)衡，一個(gè)鑲嵌式的圓盤(pán)可能會(huì)更加接近原始形狀，并且需要更少的透明度。在實(shí)踐中沒(méi)有必要在定點(diǎn)數(shù)方面做得太高，十來(lái)?xiàng)l邊就足夠了。

透明的圓盤(pán)設(shè)計(jì)

在這種情況下幾何體的數(shù)量仍然是非常合理的，并且我們成功的消除了幾乎所有浪費(fèi)的透明空間。

現(xiàn)在因?yàn)橹挥斜肀P(pán)的外邊緣需要是透明的，我們可以把這個(gè)對(duì)象一分為二：中間的圓盤(pán)是不透明的，外圈是透明的。這樣我們不用在整個(gè)對(duì)象上使用alpha混合處理，就可以在邊緣保持平滑的效果。但這意味著我們必須調(diào)用更多的處理同時(shí)渲染更多的三角形。

設(shè)計(jì)有透明環(huán)的不透明圓盤(pán)

到目前為止我們?cè)O(shè)計(jì)了渲染效果非常好且光照也是靜態(tài)的刻度盤(pán)，這意味著一旦光線或幾何圖形需要旋轉(zhuǎn)，表面細(xì)節(jié)的效果將會(huì)完全被打破，根據(jù)設(shè)計(jì)師希望實(shí)現(xiàn)的風(fēng)格，這是可以接受的，在這種情況下，本節(jié)的其余部分將是無(wú)關(guān)緊要的

如果需要?jiǎng)討B(tài)的光照環(huán)境，這個(gè)渲染技巧則是值得大家知道的：它可以幫助模擬小的表面細(xì)節(jié)，而不需要調(diào)整實(shí)際的幾何形狀。最常用的方法就是法線映射，使用法線貼圖在每個(gè)紋理的基礎(chǔ)上調(diào)整表面法線（即計(jì)算光照時(shí)使用的方向）。

生成的法線貼圖

在法線貼圖中顏色表示幾何法線必須在三個(gè)軸中進(jìn)行修改：紅色通道空間修改法線的橫向，綠色通道處理垂直方向，藍(lán)色通道修改的是向外投影。在視覺(jué)上理解紋理的一個(gè)好方法是謹(jǐn)記最藍(lán)的部分是顯示變化最少的部分。

大部分3D資源包都能夠很容易的從一對(duì)低密度和高密度的網(wǎng)格資源中生成這樣的紋理資源。

使用法線貼圖需要在渲染器中作一些修改，首先幾何數(shù)據(jù)現(xiàn)在還必須包含每個(gè)頂點(diǎn)的切線空間，這是一個(gè)由三個(gè)方向組成的集合（其中一個(gè)方向是法線方向）。正切空間是法線貼圖所指的三維空間——當(dāng)法線貼圖指示法線必須向左或向右傾斜時(shí)，正切空間將其轉(zhuǎn)換為一個(gè)真實(shí)的三維方向。這個(gè)切線空間必須在頂點(diǎn)著色器中處理，將數(shù)據(jù)傳遞給像素著色器，最后用于解碼法線貼圖，這意味著增加帶寬和處理成本。

法線修正后的結(jié)果

現(xiàn)在我們有了一個(gè)平面幾何圖形，它對(duì)光線的反應(yīng)和原始網(wǎng)格是一樣的，快速檢查一下：你能說(shuō)出哪一個(gè)是原始的，哪一個(gè)是法線修正過(guò)的嗎？

一個(gè)是法線修正過(guò)的，一個(gè)不是，你能分辨出來(lái)嗎？

答案其實(shí)很明顯，右邊是最初的那個(gè)，它有一些混疊效果。

通過(guò)對(duì)法線映射和切線空間的理解，我們可以進(jìn)一步改進(jìn)對(duì)于紋理資源的使用。基本上我們不需要渲染整個(gè)對(duì)象的紋理，我們只需要提取楔形的法線貼圖即可，然后進(jìn)行循環(huán)復(fù)制。因?yàn)榉ň€貼圖是相對(duì)切線空間的，而且切線空間會(huì)隨著它的幾何形狀進(jìn)行旋轉(zhuǎn)，因此在數(shù)學(xué)上是成立的，一切都會(huì)向預(yù)期那樣進(jìn)行。

圍繞中心復(fù)制的楔形對(duì)象

三角形的數(shù)量再次完全取決于你：更薄的三角形意味著采用更多的三角形，但是浪費(fèi)更少的紋理資源。

采用這種技術(shù)中心部分會(huì)變得比較混亂，從某些角度看上去三角形會(huì)變得非常的明顯。

刻度盤(pán)的中心可以清晰的看到分片效果

我不完全確定根本原因是什么，但這可能是紋理和過(guò)濾精度的問(wèn)題：當(dāng)我們觀察中心部分時(shí)楔形的面積變得越來(lái)越小，即使一個(gè)微小的問(wèn)題都可能產(chǎn)生嚴(yán)重的影響。大部分法線映射圖都可以在紋理中進(jìn)行填充，這會(huì)在一定程度上減少這個(gè)問(wèn)題，但是本例中并沒(méi)有這樣做。實(shí)際的解決方案是在中間設(shè)計(jì)一個(gè)更小的圓形進(jìn)行單獨(dú)的處理。

同樣的楔形但是中間設(shè)計(jì)了一個(gè)更小的圓形區(qū)域

看看下圖的紋理設(shè)置，很明顯第二張圖節(jié)省了很多紋理空間：

從視覺(jué)上看細(xì)節(jié)的質(zhì)量得到了很大的提升，即使在放大時(shí)楔形的方法仍然能夠保證刻度盤(pán)表面的光滑和真實(shí)的效果。

刻度盤(pán)放大后的細(xì)節(jié)

通過(guò)消除對(duì)大量冗余數(shù)據(jù)的需求，我們成功的增加了紋理密度，同時(shí)降低了實(shí)際的紋理分辨率，效果還是不錯(cuò)的。

經(jīng)過(guò)這么多次迭代之后，現(xiàn)在可以想一想我們已經(jīng)向前走了多遠(yuǎn)。曾經(jīng)采用密集的網(wǎng)格來(lái)生成混疊的效果，而且無(wú)法估計(jì)采用MSAA技術(shù)處理的過(guò)程。我們現(xiàn)在采用一個(gè)非常小的網(wǎng)格對(duì)象并結(jié)合更少的紋理資源就可以實(shí)現(xiàn)更好的效果，而且不需要采用MSAA技術(shù)。

那么性能會(huì)是怎樣的?我們已經(jīng)移除了幾何圖形，但是我們?cè)谄渌矫嬖黾恿藦?fù)雜度：現(xiàn)在我們不得不需要更多的對(duì)象，采用Alpha混合技術(shù)，并執(zhí)行更加復(fù)雜的分片著色器進(jìn)行處理。

性能分析

為了測(cè)量性能。我們?cè)O(shè)計(jì)了一個(gè)自動(dòng)化的基準(zhǔn)測(cè)試，顯示由單個(gè)動(dòng)態(tài)光源點(diǎn)亮的多個(gè)刻度盤(pán)。。然后用我能找到的最小規(guī)模的GPU（PowerVR GE8300）在設(shè)備上完成部署并運(yùn)行起來(lái)，最后采用PVRTune工具進(jìn)行檢測(cè)并分析性能數(shù)據(jù)。

讓我們從采用最原始方法創(chuàng)建的刻度盤(pán)開(kāi)始，下圖顯示的是渲染的不同刻度盤(pán)以及刻度線的清晰度：

專(zhuān)業(yè)提示：如果刻度線渲染效果是固定的那么說(shuō)明設(shè)計(jì)方式采用了太多的三角形。

下圖顯示了GPU在渲染基準(zhǔn)測(cè)試時(shí)所花費(fèi)的時(shí)間，下面的塊表示人物，顏色由幀號(hào)進(jìn)行編碼。任務(wù)是處理幾何圖形包括運(yùn)行頂點(diǎn)著色器，剔除反向三角形以及屏幕外的三角形等。渲染任務(wù)是在像素級(jí)別下完成的，例如對(duì)三角形進(jìn)行柵格化處理，還有執(zhí)行像素著色器。

采用原始方法設(shè)計(jì)的渲染器

正如預(yù)期的那樣，幾何圖形的處理占用了相當(dāng)多的時(shí)間，這對(duì)于移動(dòng)端的GPU這樣的工作負(fù)載也是可以接受的。更令人驚訝的是將幾何圖形轉(zhuǎn)換為像素所需的時(shí)間只有19ms，對(duì)于整個(gè)畫(huà)面顯示的時(shí)間預(yù)算在16ms，那么這個(gè)轉(zhuǎn)換時(shí)間占用還是太高了。這里采用的像素著色器還是很簡(jiǎn)單的，對(duì)任何GPU來(lái)說(shuō)應(yīng)該都是沒(méi)有問(wèn)題的，那么到底是哪部分花費(fèi)了這么長(zhǎng)的時(shí)間呢？

如前文所述柵格化處理不好細(xì)長(zhǎng)的三角形，效果如上圖所示：像素處理負(fù)載計(jì)數(shù)器表示像素著色器處理部分像素所占用的時(shí)間，在正常情況下運(yùn)行時(shí)間預(yù)計(jì)將接近100%，然而在本例中它甚至沒(méi)有達(dá)到60%，這意味著GPU被卡住去處理其他的任務(wù)，最有可能是在幾何圖形的光柵化處理占用了太多性能。

啟用4X MSAA技術(shù)后情況變得更糟糕了，應(yīng)用運(yùn)行時(shí)畫(huà)面的幀率從50fps降低到30fps，現(xiàn)在30fps對(duì)于全高清的渲染本身并不可怕，實(shí)際上對(duì)于許多3D應(yīng)用和游戲來(lái)說(shuō)是相當(dāng)標(biāo)準(zhǔn)的，我懷疑（并希望）這種情況最好不要出現(xiàn)在如此關(guān)鍵的汽車(chē)系統(tǒng)組件上。

現(xiàn)在讓我們繼續(xù)優(yōu)化刻度盤(pán)的渲染器，在視覺(jué)上并沒(méi)有什么不同：線框看起來(lái)很合理，而且最后一幀看起來(lái)也很完美。

但是在下圖中我們現(xiàn)在可以看到它現(xiàn)在以60fps的速度運(yùn)行，這意味著在應(yīng)用程序中可以支持額外更多的特性和內(nèi)容，這是一個(gè)非常大的提升。

優(yōu)化后的渲染器

有趣的是盡管我們給像素著色器分配了更多的工作，但是渲染任務(wù)現(xiàn)在完成的更快了。這主要是由于幾個(gè)因素，一般的想法是不要將所有的處理操作都由GPU的某部分來(lái)單獨(dú)完成，這樣會(huì)使它最終完全超負(fù)荷工作，我們要做的是將任務(wù)分散給不同的專(zhuān)業(yè)單元來(lái)完成。此外合理的網(wǎng)格密度不會(huì)再導(dǎo)致光柵化效率低下，這可以在像素處理負(fù)載計(jì)數(shù)器中觀察到，現(xiàn)在幾乎可以達(dá)到100%的使用率。

總結(jié)

我們所展示的是雖然移動(dòng)端GPU在性能方面已經(jīng)取得了長(zhǎng)足的進(jìn)步，但我們還沒(méi)有達(dá)到讓其執(zhí)行所有操作的程度，我們介紹了如何以一種更微妙和更聰明的方式來(lái)完成這些任務(wù)，設(shè)計(jì)也不一定要非常的復(fù)雜。的確這可能需要更多的技術(shù)支持和指導(dǎo)，因?yàn)樾枰?a target="_blank">工程師和設(shè)計(jì)者都要參與進(jìn)來(lái)，并且要更大程度的進(jìn)行合作，這帶來(lái)的好處也是巨大的。在展示的示例中我們已經(jīng)從難以接受的圖形顯示幀率過(guò)渡到甚至能夠超越設(shè)備本身的性能，而且圖像的處理過(guò)程也更加的清晰。

結(jié)果就是即使是我們中端GPU在移動(dòng)端器件中也能夠支持?jǐn)?shù)字儀表盤(pán)在確保流暢顯示的同時(shí)，支持最新且外觀設(shè)計(jì)最漂亮的數(shù)字儀表盤(pán)，最重要的是有完美的圓形刻度盤(pán)。