滿足嵌入式創新應用　3D介面設計別出心裁

3D人機介面應用在裝置主畫面、主選單或是應用程式如相簿管理程式的操作介面。3D人機介面的呈現可以簡單分成幾種模式，包括全3D空間式的呈現、3D幾何物件的呈現、二維(2D)圖卡式之3D呈現以及透過3D硬體強化之2D介面。

圖1　3DNA 3D桌上型電腦

「3D幾何物件的呈現」是指利用一個或多個3D模型的組合來形成3D操作介面。此種介面常見於3D遊戲中。圖2是Anark公司Gameface工具所製作出的3D選單。選單的主體是一個球型機器人，依據使用者的操作，呈現不同的肢體動作與展開對應選單。這類設計讓介面操作具有豐富的娛樂性，若能應用在主題性手機的環境設定選單介面，對使用者將有強烈吸引力。

圖片來源：Anark 圖2　Anark 3D

在「2D圖卡式之3D呈現」模式中，資料或選單的呈現為2D，但排放方式則是3D，常見的組成方式包括資料夾式排列如CoverFlow、立體正方體的方式如Cube使用者介面(UI)，以及旋轉木馬式排列如NVIDIA Tegra所展示的使用者介面，或上述方式組合變形。目前此模式最常出現在手機產品上，包括iPad/iPhone的CoverFlow、樂金(LG)S-class、三星(Samsung)Cube UI以及索尼愛立信(Sony Ericsson)Xperia的Timescape等(圖3～7)。此模式可以讓更多資料同時呈現，對使用性與操作娛樂性皆有助益。

圖片來源：蘋果 　　　　　　　　　　　　　　　　圖片來源：樂金 圖3　iPad/iPhone上之CoverFlow 　　　 圖4　樂金S-class操作介面

圖片來源：三星 圖5　三星i8000操作介面

圖片來源：索尼愛立信　　　　　　 圖片來源：NVIDIA 圖6　Sony Ericsson　　　　圖7　NVIDIA Tegra之demo UI　　　　　　　　　　　　　Xperia Timescape

「透過3D硬體強化之2D介面」所呈現的畫面仍以2D為主，而畫面間的轉場銜接則採用類似3D方塊轉動的方式，或是利用3D硬體所提供之貼圖混色(Texture Blending)能力或是繪圖緩衝儲存區(Frame-buffer)、後處理(Post-processing)能力，讓2D介面可以呈現出利用一般2D GDI系統所無法呈現的效果。

採用高階引擎　提高流暢度

如同發展一個3D小遊戲，發展3D人機介面較不同的是程式必須緊密連結底層的作業系統，以及其他同時執行或透過介面開啟的程式，以便能達到無縫、順暢的使用經驗。因此，3D人機介面中3D內容展示功能的開發，必須考量的技術議題至少有兩項，一是程式開發介面，另一則是與主流素材製作工具的接軌。

3D人機介面的程式特質必須包含能提高生產力，能重覆使用、容易維護性及容易上手等。主流素材製作工具，特別是3D模型建模軟體如3DS MAX，有其內建的輸出格式，也可以輸出其他共通的資料格式如標註語言(VRML)或COLLADA。

而3D人機介面內通常會有動畫效果來強化轉場或是事件觸發等，若透過3DS MAX這類軟體來編輯將可以快速完成，因此，3D人機介面的製作必須思考如何載入這些軟體所輸出的貼圖、模型、場景結構、或是動畫軌跡描述(Key Frame)等資料。

以Android平台為例，目前要在Android環境開發3D人機介面，必須使用Android內建之OpenGL ES Java應用程式。OpenGL ES應用程式輸入的資料格式為頂點(Vertex)、網格(Mesh)之組成三角型的拓撲資訊、貼圖及設定繪圖模式(Render State)。

若要載入一個3DS MAX輸出的模型與動畫資料，工程師須要自定義場景描述檔，開發一個3DS MAX Plugin把資料輸出成其場景描述檔格式，或是開發一個轉換程式把輸出資料由共通格式轉換成其自訂的場景描述檔格式；此外，工程師仍必須自己發展其場景管理系統與動畫系統等，導致整個開發過程將曠日費時。

因此，3D人機介面的發展流程慢慢走向與遊戲開發的類似流程，透過導入一種高階(High-level)的UI引擎或是遊戲引擎，降低工程師及美術設計人員的負擔，進一步提高開發過程中往返修改(Iteration)的效率。

圖8為一個應用UI引擎發展3D人機介面的簡易流程。開發一個3D人機介面，一開始會由產品經理與UI設計師構思出一個介面設計的文案，若所針對的是新的硬體平台，則工程人員得利用效能評估(Benchmark)軟體工具，先量測出硬體平台的3D繪圖能力包括符合目標幀率(Frame-rate)之最大多邊型(Polygon)數、可使用之貼圖量以及設定不同繪圖模式(Render State)對效能的影響等。

圖8　發展3D人機介面之簡易流程

根據過去的測試經驗，因嵌入式平台中所配置的記憶體通常不多且匯流排的頻寬多由多個硬體模組所共享，所以如果素材的資料量如貼圖(Texture)超過其快取記憶體(On-chip Cache)，通常繪圖效能都會因資料必須至動態隨機存取記憶體(DRAM)搬移而急遽下降。

因此，先了解硬體平台的3D繪圖能力，方能進一步針對介面設計文案之內容構思可行的實施細節，這包括同一個畫面中最多可以用的多邊型量、貼圖總量、如何應用引擎來達成介面特效或操作方式等。這些實施細節將記錄在素材實作規格書與程式實作規格書中。

通常，素材的實作如建構模型，會外包給其他廠商來處理，而介面中素材之整合或是動畫與特效的整合等，則透過一個UI內容編輯工具來進行。這部分的程序概念類似遊戲的關卡編輯。目前有許多廠商提供這方面的解決方案，包括Rightware之Kanzi、明導國際(Mentor Graphics)之Inflexion，以及Net Dimension之MatrixEngine等。這類產品通常必須搭配其專屬UI引擎，因此引擎的功能與擴充性等，都會影響實施一個介面設計文案的複雜度與生產力。

完成整合編輯後的介面場景將先與開發好的介面程式在模擬器進行功能驗證，待功能皆正確後再移到實機上進行功能驗證與使用性測試。由於模擬器無法實際反應真正的程式執行速度與操作環境，所以在實機上的測試與往返修改會多次進行，直到介面的操作達到流暢無礙。

應用Shader技術　提升精緻度

時下眾多新興智慧型手機，如iPhone 3GS或是Android Nexus One，甚至是高階的機上盒(STB)平台，皆支援OpenGL ES 2.0。OpenGL ES 2.0與OpenGL ES 1.x最大的差異就是支援頂點遮影器(Vertex Shader)與畫素遮影器(Pixel Shader)，讓OpenGL ES 2.0的應用程式呈現出類似Xbox360的畫面特效。

Shader是執行在GPU中的小程式，在OpenGL ES 2中，其程式之撰寫方式類似C語言，但程式中能使用的功能有限制，例如沒有動態配置記憶體，且程式之輸入與輸出必須依循OpenGL ES所定義的Shader Model。圖9說明了OpenGL ES 1.x與OpenGL ES 2.0在繪製效果上的差異。

不同於遊戲透過Shader強化遊戲內容精緻度，此技術最大的助益在於3D介面風格化與更豐富的動畫呈現。如圖9所示，透過Shader可以對同一個模型產生卡通繪圖或速描的效果，而Shader也可以用來對繪圖結果進行後處理(Frame-buffer Post-processing)，達到改變顏色分布等效果。

圖9　OpenGL ES 1.x與OpenGL ES 2.0在繪製效果上的差異

Shader亦可以用來進行動畫計算，如角色骨架動畫(Skeleton Animation)或是網格型變(Mesh Morphing)，不但可以減輕CPU的負荷，亦能利用GPU強大的浮點運算能力進行更複雜與精緻如考慮物理特性的動畫效果。

圖10為資策會網多所在Android Nexus One上所開發的Shader-based UI雛型。此雛型套用了兩個Shader特效，一個是Normal Map法向量貼圖，另一個是Motion Blur動作混合。Normal Map讓方塊選單上的圖標(Icon)看起來更為立體，而Motion Blur則讓方塊選單在旋轉的過程中出現殘影的效果。根據過去所進行的測試，使用者普遍能感受到此介面雛型與OpenGL ES 1.x的3D方塊選單有明顯差異。

圖片來源：NVIDIA 圖10　Shader-based UI Prototype

Shader的導入讓3D介面設計有更大的揮灑空間，但Shader也讓3D介面設計有更高的複雜度。如前所述，Shader在GPU中執行，因此由程式人員依照介面設計文案開發，但Shader所產生的是視覺效果，而整體介面效果的設定則是由設計人員決定，所以對設計人員而言，其意味另一種決定視覺效果的素材。

Shader的設計與開發，必須能明確定義讓設計人員調整的參數組合，而且UI內容編輯工具必須允許設計人員對開放的參數組合進行編輯與設定專屬模型或畫面所要套用的Shader功能。此部分將會是UI內容編輯工具在未來能否讓設計人員充分應用Shader的關鍵。

(本文作者任職於資策會網路多媒體研究所)