OpenGL硬體加速提供奧援
手持式裝置繪圖能力大躍進

根據規格定義，OpenVG可分為核心應用程式中介層(Core API)和選擇性VGU工具函式庫(Optional VGU Utility Library)兩大模組，其畫分的準則與硬體加速的需求有關。Core API模組中定義了須藉由硬體加速支援的基本功能，而那些暫時被認定為不須由硬體加速，或可由Core API模組複合而成的功能，則在選擇性VGU工具函式庫模組中定義。  

Core API模組主要提供二維向量圖形處理與繪圖的核心功能，除了OpenVG繪製流程(Rendering Pipeline)各階段的功能外，還包括座標系統與轉換(Coordinate Systems and Transformations)、路徑(Path)、影像(Image)、影像濾鏡(Image Filters)、填色(Paint)(包含梯度與圖樣)及混合與遮罩(Blending and Masking)等功能項目。選擇性VGU工具函式庫模組主要是以輔助並擴充Core API向量圖形處理的功能，其內容包含高階層幾何元件(Higher-level Geometric Primitives)和影像變形(Image Warping)等功能項目。  

核心應用程式中介層模組中的座標系統轉換功能，可提供使用者將座標系統轉換到以畫素為單位的平面座標系統的功能；路徑繪製功能則是提供描述幾何物件的功能。  

一般來說，顯示圖形的形狀都是由路徑定義，一個路徑或多個路徑可構成幾何物件，而路徑亦是由一連串的線段(Segment)所組成的。線段可選擇由直線線段、二次或三次貝式曲線(Bezier Curve)或橢圓形弧線定義。影像繪製、濾鏡功能則分別提供影像相關製作及處理與濾鏡處理的能力；畫素著色、混合及遮罩處理功能則負責處理畫素著色時的顏色、型態、混色、遮罩等工作。  

選擇性VGU工具函式庫模組則包含高階幾何元件與影像變形繪製兩種功能，分別提供應用程式設定高階幾何元件與影像變形轉換處理的能力。  

OpenVG的繪圖管線定義了一套基本的向量圖形物件與處理流程。在設計上OpenVG與OpenGL架構上頗為相似，每個OpenVG執行緒都擁有一分文本(Context)紀錄所有廣域的狀態，如矩陣、填色法則、疊合模式等，所有針對文本中的狀態存取都必須透過特定的函式，如vgSet與vgGet來進行。除此之外，文本也負責管理所有被產生出來的繪圖物件，在OpenVG中所有的圖形都由三種基本物件所組成：路徑、填色與影像，物件中的參數也都必須經由特定函式存取，如vgSetParameter與vgGetParameter。三種基本物件各自管理構成圖形所需的幾何、顏色、點陣影像，其間關係如圖1所示。

圖1　OpenVG主要物件間之關係

路徑是OpenVG中最主要的一項物件，也是向量圖形中最基本的繪圖單位，OpenVG的路徑中存放了圖形的幾何描述，在OpenVG中這類的描述主要可分為：位移(Move)、線段(Line)、曲線(Curve)、以及弧線(Arc)，一條路徑則可由各種描述的組合所構成，如圖2。

圖2　路徑的種類與組成

由於路徑是紀錄抽象的形狀資訊，沒有辦法直接呈現於畫面上，在繪製路徑前必須先建立該路徑的在繪圖空間中的繪製範圍。路徑有兩種不同的繪製法：填滿(Fill)與線條(Stroke)。

填色是將路徑中連續的軌跡視為一個頭尾相連的區域(圖3左)，並針對這個區域進行填色，如果路徑中有MOVE描述，則會將MOVE的前後視為個別的區域做處理。此外，如果路徑的軌跡發生交疊的狀況，則依據填色法則(Fill Rule)來決定哪些區域要進行填色(圖3右)。

圖3　OpenVG中路徑的填色幾何

線條(Stroke)則是將幾何描述中的軌跡加上一定的寬度。除了寬度外，線條還可以針對起終點設置不同形狀，如半圓(Round)、方形(Square)或平坦(Butt)的端點(End Cap)(圖4左上)，路徑上各種描述間的交界處則可設置尖角(Miter)、圓角(Round)或填平(Bevel)的接合區(Join)(圖4左下)。如果要繪製虛線，可在路徑中設置虛線圖樣(Dash Pattern)，在產生線條幾何時便可依據圖樣中的開(ON)與關(OFF)之間距產生相對應的虛線線條(圖4右)。

資料來源：Khronos 圖4　OpenVG中路徑的Stroke填色幾何

值得注意的一點是路徑雖然是基本的繪圖單位，但只負責記錄軌跡，經過填色或線條產生出的幾何形狀代表的是尚未填色的區域，要讓這些區域呈現於螢幕畫面上還必須配合填色物件對其填入顏色。  

填色物件是用來定義在路徑產生的幾何範圍內要如何填入顏色，由於填色物件本身沒有幾何性質，在使用上必須配合路徑來呈現。OpenVG中同一時間可以啟動兩個填色物件，一個針對線條，一個針對填色，所有路徑的繪製都會使用啟動中的填色物件進行填色。填色物件的屬性可分為四種：單色(Solid Color)、線性漸層(Linear Gradient)、放射漸層(Radial Gradient)與圖樣(Paint Pattern)，其色彩分布如圖5所示。

圖5　四種填色物件屬性的表現

單色填色單純的在路徑所產生的幾何範圍內填滿指定的顏色。線性漸層與放射漸層是由使用者指定一分色彩分布，針對線性與放射方向產生漸層色彩，如果須填色的範圍大於填色物件中所定義的範圍，超出的部分可以透過設定色彩漸層(Color Ramp)的模式產生重複(Repeat)、延伸(Pad)、或鏡像(Reflect)的效果(圖6左)。

資料來源：Khronos 圖6　色彩漸層與圖樣拼貼模式的表現方式

圖樣則是利用指定的點陣影像進行類似貼圖的填色動作，如果須填色的範圍超過指定的點陣影像，則可透過設定拼貼模式(Tiling Mode)產生填色(Fill)、延伸、重複或鏡像的效果(圖6右)。  

由於透過路徑與填色只能產生較單純的顏色分布，因此OpenVG也提供透過影像物件繪製點陣圖形的功能，以顯示更複雜的圖形。影像物件與路徑物件在繪製上有一項重要的差異，在轉換至繪圖空間時，路徑物件所使用的是仿射轉換(Affine Transformations)，因此只能做出二維的位移(Translate)、縮放(Scale)、旋轉(Rotation)與切變(Shear)；影像物件則是使用透視轉換(Perspective Transformation)，可以額外做出類似景深變形的效果，如圖7。

圖7　仿射轉換與透視轉換之差異

除了基本的繪製外，OpenVG中還有針對影像物件的影像處理函式，像是顏色矩陣(Color Matrix)、顏色查表(Lookup Table)、摺積(Convolution)等。在繪製影像物件時，有三種不同的繪製模式可以使用。一般(Normal)模式單純的將影像物件繪製到螢幕上，相乘(Multiply)模式會將影像資料乘上啟動中的填色物件，這種作法配合漸層填色可以做出影像暗角以及倒影的效果。

模板(Stencil)模式則是將影像本身當作模板或是遮罩般定義繪製的區域，再將該區域填入填色物件所定義的顏色，這種作法可以在特定情形下讓影像物件產生路徑物件的效果，像是繪製文字時使用。  

OpenVG中還定義了一套繪圖管線的概念(圖8)，這套繪圖流程中可分為數個階段：首先將路徑的描述資料轉換為線條/填色的幾何資料。接著進行座標轉換，將物件轉換至將要繪製的位置上。路徑在經過轉換後便會進行點陣化(Rasterization)，將幾何資料轉為二維的點陣資料，在這過程中同時會考慮畫面裁切(Clipping)範圍，只有在有效範圍內的畫素會繼續處理。接下來啟動中的填色物件針對有效的畫素進行填色，如果有影像物件在此階段也會進行影像內插與相關處理。最後則是將產生的畫素依據所需的疊合與反鋸齒效果繪至畫面上。在實做時，OpenVG的繪圖管線不須完全依據上述流程，只要讓繪製結果符合OpenVG的相容性測試即可。

資料來源：Khronos 圖8　OpenVG中所定義的繪圖管線

OpenVG/OpenGL相輔相成

由於目前針對OpenVG做加速的硬體並不普及，若要實作具有硬體加速的OpenVG，可藉由已有廣泛硬體支援的OpenGL/OpenGLES來達成。

OpenGL是針對3D硬體加速所制定的介面，處理的資料是以頂點構成的三角形以及材質貼圖，若要靠OpenGL實作OpenVG，則必須將OpenVG中產生的幾何資料轉變為頂點資料，一旦有了頂點資料，座標轉換、點陣化、填色與貼圖等動作便可交由OpenGL的硬體加速完成。  

圖9為利用OpenGL加速的OpenVG繪圖管線實作，在影像繪製上主要的加速在於將影像利用OpenGL的材質貼圖進行繪製，在相乘模式與模板模式中則是會使用多重貼圖達到所需的效果。

圖9　利用OpenGL加速之OpenVG繪圖管線

在進行路徑繪製時，其流程相對複雜。由於OpenVG中所記載的幾何資料並不適用於OpenGL的繪圖管線，必須透過額外的處理將其轉換為OpenGL中所使用的三角形與材質貼圖進行繪製。在實作中路徑繪製可分為三個步驟：平坦化、三角形產生與填色。平坦化是利用OpenGL處理向量圖形資料時相當重要的一個步驟，由於向量圖形記載的資料是抽象的幾何描述，並不具有面積、解析度等繪圖所需的資訊。平坦化步驟便是要將路徑中的曲線與弧線描述利用連續的短線段取代，使其成為具有特定解析度的幾何線段，接著便可由這組幾何線段中產生OpenGL繪圖管線所能使用的三角形頂點資料。由於利用短線段取代曲線是以逼近的方式產生新的幾何圖形，逼近的精確度可以根據路徑最後在畫面上放大的程度調整，以達到肉眼無法查覺的程度。  

在平坦化程序中，設計人員可利用遞迴的方式，透過控制點將曲線進行二分(圖10)，由於曲線不斷細分的結果會越來越趨近直線，一旦細分的曲線與直線間的誤差小於特定的閥值(Threshold)時，便可以直線取代該曲線段。當閥值設定的越小時，平坦化的結果便會越接近原始曲線。透過適應性方法，設計人員可以使用路徑被繪製到畫面時放大倍率的倒數為誤差閥值，這代表著所有趨近線段與原始曲線間的誤差將小於一個畫素，由於畫素是成像的最小單位，利用此方式可以在任意的縮放比例下在畫面上達到無失真的逼近效果。

圖10　曲線平坦化程序

平坦化後路徑的抽象描述轉變為一系列的線段座標，此時的路徑仍然沒有面積資訊，無法轉換為點陣資料並對其填入顏色。為了利用OpenGL的硬體加速能力，設計者必須進一步利用這些座標產生三角形頂點資料。在OpenVG的定義中，路徑本身並不帶有顏色相關的資訊，因此路徑產生的三角型代表的是需要填色的區域，為了區隔需要繪製的區域，可以將三角形繪入OpenGL的模板緩衝區(Stencil Buffer)中，利用模板緩衝區的模板特性進行接下來的填色。

由於平坦化的結果即可視為路徑本身，當路徑繪製成填色時可直接利用平坦化的短線段座標依序以扇形方式產生三角形，如圖11。

圖11　路徑直接使用平坦化的結果產生Fill填色幾何

由於路徑本身可能發生自交疊的情形，要正確得到需要繪製的區域，可以根據填色法則在將三角形寫入模板緩衝區時控制模板函數(Stencil Function)來達成。當填色法則為Even_Odd時，將該函數設為反轉(Invert)模式，一旦有三角形覆蓋到相同的區域，只有被覆蓋到奇數次的區域被視為需要填色(圖12左)。

圖12　利用模板緩衝區產生不同填色法則的效果

當填色法則為Non_Zero時，則是針對三角形的面向指定模板函數，當三角形為正面時加一，背面時減一，當三角形互相交疊時，只有數值不為零的區域需要進行填色(圖12右)。

當路徑繪製成線段時，則必須從平坦化的短線段資料中依據線條寬度、端點與接合區的形狀以及虛線圖樣產生一組三角形資料(圖13)。在OpenVG中同一個路徑的線段是視為一個圖層進行填色，不管路徑有無重疊，只要三角形有覆蓋到的區域均視為須填色的區域。

圖13　利用平坦化結果產生線段填色幾何

將三角形寫入模板緩衝區後，原本路徑中的幾何描述便完全轉換成繪圖表面上的點陣區域。在OpenGL的管線中進行畫素處理時，可以對該畫素的模板值做檢查，一旦檢查不符合所設定的條件，該畫素處理便會被濾除，因此在填色步驟中只須確保填色的範圍有完整覆蓋到三角形所定義的填色區塊即可，最簡單的方法便是利用路徑的邊界框(Bounding Box)。由於邊界框是包含整個路徑的最小矩形，因此對邊界框填色時便可確保所有屬於該路徑的畫素會進行填色處理，再利用模版測試過濾掉超出填色區域的畫素(圖14)，即可完成對路徑的填色動作。

資料來源：資策會 圖14　利用模板測試使填色動作只發生在路徑產生的填色幾何中

除了單色填色可以直接指定頂點顏色外，線性漸層、放射漸層與圖樣都須透過材質貼圖進行，漸層的做法可以將使用者給定的顏色分布當做一維材質貼圖使用。  

線性漸層只要將材質轉換到指定的方向，並對邊界框進行材質貼圖即可(圖15上)；放射漸層的效果則可將原本使用的邊界框以邊界圓(Bounding Circle)取代，由於組成邊界圓的三角形是呈放射狀分布，因此對其進行材質貼圖即可得到放射漸層的效果(圖15下)。

資料來源：資策會 圖15　利用一維材質與貼圖幾何產生漸層效果

圖樣填色較為複雜，必須使用二維材質貼圖以及額外的填色幾何。由於材質貼圖的邊長必須是二的次，當欲繪製的範圍大於圖樣時，直接使用材質貼圖有可能會導致圖形出現空缺或是失真。可行的解決作法是將邊界框進一步分解成數個等於或小於圖樣大小的子邊界框，如此不但可以避開圖形空缺與失真的問題，透過控制每個子邊界框的貼圖座標即可產生拼貼的各種效果(圖16)。

資料來源：資策會 圖16　利用貼圖座標產生拼貼效果

利用上述的方法，OpenVG可將大部分的繪圖程序利用OpenGL的硬體加速能力完成。除了主要物件的繪圖外，許多OpenVG的特殊效果，如剪裁、透明遮罩(Alpha Mask)、半透明疊合等，也可以透過OpenGL所具備的功能做到。至於較為複雜的影像處理則須透過可程式化的畫素硬體加速(Programmable Pixel Shader)或是軟體方案達成。表1為目前資策會實作中OpenVG與OpenGL間的功能對應。

OpenGL硬體加速助力手持式裝置具備更高繪圖性能  

本文簡介OpenVG的架構以及利用OpenGL進行硬體加速之OpenVG向量繪圖。對高效能的Rich Media Player來說，快速的向量繪圖能力是最基本的要素，畫面呈現豐富、操作流暢的體驗才是其價值所在。  

在OpenVG+OpenGL實作中，利用硬體加速的OpenVG在效能上有非常大的優勢，軟體實作上相當吃重的畫素運算在支援硬體加速下，均交由高速的繪圖處理單元(GPU)進行處理，在一般的個人電腦環境中使用硬體加速的OpenVG向量繪圖效能，表現亦遠遠高過純軟體實作版本，在手持裝置上也可達到數倍的效能增益。簡化版可縮放向量圖形(SVG Tiny)底層利用OpenVG來實做向量繪圖部分，繪圖流程針對底層繪圖引擎OpenVG最佳化，再配合架構設計得到最佳效能以及顯示效果。  

資策會網路多媒體研究所行動多媒體中心已開發出供行動裝置上使用的多媒體服務介面所需之Rich Media Engine以及播放器，包括應用OpenGL ES硬體加速器發展搭配快速網格化軟體技術之OpenVG繪圖引擎、以及SVG Tiny檔案播放器。相關研究成果可在資策會網路多媒體研究所網站上找到更多細節。  

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