“只是簡單的刻度盤！他們怎么能夠設計的這么糟糕？”信不信由你，這個問題我已經提到過很多次了。

如果你想知道我們究竟在說什么，請看下文。

我們所談論的是數字儀表盤上的刻度盤，我們可以在越來越多的現代汽車上找到它。自上世紀80年代首次設計出現，這種數字式儀表盤現在又重新流行起來，這是未來發展的趨勢。數字儀表盤比傳統的刻度盤能夠提供更精確、更豐富而且更加清晰的信息。它可以是自適應的、動態的，準確的顯示駕駛員在任何時刻需要看到的信息。如果得到制造商的許可，儀表盤還可以根據駕駛員的個人喜好進行定制。它們也可以看起來非常的酷炫，這在當今時代是非常重要的。

與其他數字顯示器一樣，這些數字儀表盤需要GPU來驅動，作為汽車領域的主要參與者，Imagination提供的解決方案已經在行業得到了廣泛的應用。

當組裝一臺新的汽車時，OEM廠商就會使用最新的GPU來測試他們的數字儀表盤設計——這就回到了我們的問題——刻度盤。事實是這些儀表盤在幾何形狀方面往往設計得很糟糕，刻度盤是最糟糕的設計之一。

讓我解釋一下，正如你所期望的那樣，這些刻度盤需要完全是圓形的。事實上在一些社區中任何不是圓形的設計都被認為是不太好的品味，而且在汽車行業肯定是不被接受的。

而這種圓形的設計是存在問題的，因為創建這種圓形的方法通常會使用非常密集的網格，這將導致在汽車中使用的嵌入式GPU的性能非常差。

這是一個問題，為了解決這個問題，GPU往往會被過度的設計，相比最開始簡單的刻度盤設計需要更強大的性能。

怎么會變成這樣呢？我的理解是這樣的：

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

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

仔細觀察下右圖中的線框，我們可以看到它采用了更多的三角形（總共超過了一萬個三角形），但問題不在于三角形數量，而是低端的GPU也要能夠以相當快的速度來處理一定數量級的數據。

真正的問題是密度：在只有幾個像素大小的區域內聚集了大量的三角形，GPU的設計是為了加速三角形的渲染速度，而且這些三角形會跨越不同的像素區域——但我們這里的問題正好相反，這就導致了嚴重的性能損失。

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

超越幾何模式

一個好消息是刻度盤實際上是一個非常簡單的幾何圖形，從一個角度來看通常是非常平整的。因此它可以很容易的近似看作是一個簡單的透明紋理的四邊形，本質上預先計算所有幾何圖形和光照資源GPU可以非常容易的處理這些任務，額外的好處是紋理部分可以很容易的進行調整，使邊緣變得非常平滑，從而不需要依賴MSAA技術。

透明的四邊形

這種在透明四邊形上的紋理處理方式如上圖所示，雖然這種渲染在成本上很低，但是有幾個潛在的問題可能需要處理，當然這取決于設計師希望達到的質量：

整個對象必須使用透明度（通常不推薦），即使實際上只需要使用一小部分

刻度盤周圍的整個區域是完全透明的，透明部分的像素可以進行柵格化處理并通過著色器處理，這難免會有些浪費。

當放大時我們可以看到線框，這在某些情況下是可以接受的

光照完全是內置的，如果需要更加逼真的效果可能就是問題

我們可以通過使形狀更圓一些來減少浪費的像素，這本質上是像素和頂點數之間的權衡，一個鑲嵌式的圓盤可能會更加接近原始形狀，并且需要更少的透明度。在實踐中沒有必要在定點數方面做得太高，十來條邊就足夠了。

透明的圓盤設計

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

現在因為只有表盤的外邊緣需要是透明的，我們可以把這個對象一分為二：中間的圓盤是不透明的，外圈是透明的。這樣我們不用在整個對象上使用alpha混合處理，就可以在邊緣保持平滑的效果。但這意味著我們必須調用更多的處理同時渲染更多的三角形。

設計有透明環的不透明圓盤

到目前為止我們設計了渲染效果非常好且光照也是靜態的刻度盤，這意味著一旦光線或幾何圖形需要旋轉，表面細節的效果將會完全被打破，根據設計師希望實現的風格，這是可以接受的，在這種情況下，本節的其余部分將是無關緊要的

如果需要動態的光照環境，這個渲染技巧則是值得大家知道的：它可以幫助模擬小的表面細節，而不需要調整實際的幾何形狀。最常用的方法就是法線映射，使用法線貼圖在每個紋理的基礎上調整表面法線（即計算光照時使用的方向）。

生成的法線貼圖

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

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

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

法線修正后的結果

現在我們有了一個平面幾何圖形，它對光線的反應和原始網格是一樣的，快速檢查一下：你能說出哪一個是原始的，哪一個是法線修正過的嗎？

一個是法線修正過的，一個不是，你能分辨出來嗎？

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

通過對法線映射和切線空間的理解，我們可以進一步改進對于紋理資源的使用。基本上我們不需要渲染整個對象的紋理，我們只需要提取楔形的法線貼圖即可，然后進行循環復制。因為法線貼圖是相對切線空間的，而且切線空間會隨著它的幾何形狀進行旋轉，因此在數學上是成立的，一切都會向預期那樣進行。

圍繞中心復制的楔形對象

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

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

刻度盤的中心可以清晰的看到分片效果

我不完全確定根本原因是什么，但這可能是紋理和過濾精度的問題：當我們觀察中心部分時楔形的面積變得越來越小，即使一個微小的問題都可能產生嚴重的影響。大部分法線映射圖都可以在紋理中進行填充，這會在一定程度上減少這個問題，但是本例中并沒有這樣做。實際的解決方案是在中間設計一個更小的圓形進行單獨的處理。

同樣的楔形但是中間設計了一個更小的圓形區域

看看下圖的紋理設置，很明顯第二張圖節省了很多紋理空間：

從視覺上看細節的質量得到了很大的提升，即使在放大時楔形的方法仍然能夠保證刻度盤表面的光滑和真實的效果。

刻度盤放大后的細節

通過消除對大量冗余數據的需求，我們成功的增加了紋理密度，同時降低了實際的紋理分辨率，效果還是不錯的。

經過這么多次迭代之后，現在可以想一想我們已經向前走了多遠。曾經采用密集的網格來生成混疊的效果，而且無法估計采用MSAA技術處理的過程。我們現在采用一個非常小的網格對象并結合更少的紋理資源就可以實現更好的效果，而且不需要采用MSAA技術。

那么性能會是怎樣的?我們已經移除了幾何圖形，但是我們在其他方面增加了復雜度：現在我們不得不需要更多的對象，采用Alpha混合技術，并執行更加復雜的分片著色器進行處理。

性能分析

為了測量性能。我們設計了一個自動化的基準測試，顯示由單個動態光源點亮的多個刻度盤。。然后用我能找到的最小規模的GPU（PowerVR GE8300）在設備上完成部署并運行起來，最后采用PVRTune工具進行檢測并分析性能數據。

讓我們從采用最原始方法創建的刻度盤開始，下圖顯示的是渲染的不同刻度盤以及刻度線的清晰度：

專業提示：如果刻度線渲染效果是固定的那么說明設計方式采用了太多的三角形。

下圖顯示了GPU在渲染基準測試時所花費的時間，下面的塊表示人物，顏色由幀號進行編碼。任務是處理幾何圖形包括運行頂點著色器，剔除反向三角形以及屏幕外的三角形等。渲染任務是在像素級別下完成的，例如對三角形進行柵格化處理，還有執行像素著色器。

采用原始方法設計的渲染器

正如預期的那樣，幾何圖形的處理占用了相當多的時間，這對于移動端的GPU這樣的工作負載也是可以接受的。更令人驚訝的是將幾何圖形轉換為像素所需的時間只有19ms，對于整個畫面顯示的時間預算在16ms，那么這個轉換時間占用還是太高了。這里采用的像素著色器還是很簡單的，對任何GPU來說應該都是沒有問題的，那么到底是哪部分花費了這么長的時間呢？

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

啟用4X MSAA技術后情況變得更糟糕了，應用運行時畫面的幀率從50fps降低到30fps，現在30fps對于全高清的渲染本身并不可怕，實際上對于許多3D應用和游戲來說是相當標準的，我懷疑（并希望）這種情況最好不要出現在如此關鍵的汽車系統組件上。

現在讓我們繼續優化刻度盤的渲染器，在視覺上并沒有什么不同：線框看起來很合理，而且最后一幀看起來也很完美。

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

優化后的渲染器

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

總結

我們所展示的是雖然移動端GPU在性能方面已經取得了長足的進步，但我們還沒有達到讓其執行所有操作的程度，我們介紹了如何以一種更微妙和更聰明的方式來完成這些任務，設計也不一定要非常的復雜。的確這可能需要更多的技術支持和指導，因為需要工程師和設計者都要參與進來，并且要更大程度的進行合作，這帶來的好處也是巨大的。在展示的示例中我們已經從難以接受的圖形顯示幀率過渡到甚至能夠超越設備本身的性能，而且圖像的處理過程也更加的清晰。

結果就是即使是我們中端GPU在移動端器件中也能夠支持數字儀表盤在確保流暢顯示的同時，支持最新且外觀設計最漂亮的數字儀表盤，最重要的是有完美的圓形刻度盤。