OpenHarmony 3.1 Release版本詳細了解新圖形框架

3 月 31 日，OpenAtom OpenHarmony（以下簡稱“OpenHarmony”） 3.1 Release 版本正式發(fā)布了。此版本為大家?guī)砹巳碌膱D形框架，實現(xiàn)了UI框架顯示、多窗口、流暢動畫等基礎能力，夯實了 OpenHarmony 系統(tǒng)能力基座，下面就帶大家詳細了解新圖形框架。

一、完整能力視圖

新圖形框架的能力在持續(xù)構建中，圖1展示了新圖形框架當前及未來提供的完整能力視圖。

圖1 OpenHarmony圖形完整能力視圖

按照分層抽象和模塊化的架構設計原則，新圖形框架分為接口層、框架層和引擎層。各層級說明如下：

●接口層：提供圖形 NDK（native development kit，原生開發(fā)包）能力，包括 OpenGL ES、Native Drawing 等繪制接口能力。

●框架層：由 Render Service、Animation、Effect、Drawing、顯示與內存管理等核心模塊組成?？蚣軐痈髂K說明如下：

●引擎層：包括 2D 圖形庫和 3D 圖形引擎兩個模塊。2D 圖形庫提供 2D 圖形繪制底層 API，支持圖形繪制與文本繪制底層能力。3D 圖形引擎能力尚在構建中。

二、新圖形框架的亮點

經過上一節(jié)介紹，我們對新圖形框架的完整能力有了基本的了解。那么，新圖形框架有什么亮點呢？

新圖形框架在渲染、動畫流暢性、接口方面重點發(fā)力：

（1）渲染方面

通常來講，UI 界面顯示分為兩個部分：一是描述的UI元素在應用內部顯示，二是多個應用的界面在屏幕上同時顯示。對此，新圖形框架從功能上做了相應的設計：控件級渲染和窗口級渲染?！翱丶変秩尽敝攸c考慮如何跟UI框架前端進行對接，需要將ArkUI框架的控件描述轉換成繪制指令，并提供對應的節(jié)點管理以及渲染能力。而“窗口級渲染”重點考慮如何將多個應用合成顯示到同一個屏幕上。

（2）動畫流暢性方面

我們深挖動畫處理流程中的各個環(huán)節(jié)，對新圖形框架進行了新的動畫實現(xiàn)設計，提升動畫的流暢性體驗。

（3）接口方面

新圖形框架在接口層提供了更豐富的接口能力。

下面為大家一一詳細介紹新圖形框架的亮點特性。

1. 控件級渲染

新圖形框架實現(xiàn)了基于 RenderService（簡稱 RS）的控件級渲染功能，如圖 2 所示。

圖2 控件級渲染

控件級渲染功能具有以下特點：

● 支持 GPU 渲染，提升渲染性能。

● 動畫邏輯從主線程中剝離，提供獨立的步進驅動機制。

● 將渲染節(jié)點屬性化，屬性與內容分離。

2. 窗口級渲染

新圖形框架實現(xiàn)了基于 RenderService 的窗口級渲染功能，如圖 3 所示。

圖3 窗口級渲染

窗口級渲染功能具有以下特點：

● 取代 Weston 合成框架，實現(xiàn)RS新合成框架。

● 支持硬件 VSync/軟件 Vsync。

● 支持基于 NativeWindow 接入 EGL/GLES 的能力。

● 更靈活的合成方式，支持硬件在線合成/CPU 合成/混合合成（GPU 合成即將上線）。

● 支持多媒體圖層在線 overlay。

3. 更流暢的動畫體驗

動畫流暢性是一項很基本、也很關鍵的特性，直接影響用戶體驗。為了提升動畫的流暢性體驗，我們深挖動畫處理流程中的各個環(huán)節(jié)，對新圖形框架進行了新的動畫實現(xiàn)設計。

如圖 4 所示，傳統(tǒng)動畫的實現(xiàn)流程如下：

（1） 應用創(chuàng)建動畫，設置動畫參數(shù)；

（2） 每幀回調，修改控件參數(shù)，重新測量、布局、繪制；

（3） 內容渲染。

圖4 傳統(tǒng)動畫實現(xiàn)

經過深入分析，我們發(fā)現(xiàn)傳統(tǒng)動畫實現(xiàn)存在以下缺點：

（1）UI 與動畫一起執(zhí)行，UI 的業(yè)務阻塞會影響動畫的執(zhí)行，導致動畫卡頓。

（2）每幀回調修改控件屬性，會觸發(fā)測量布局錄制，導致耗時增加。

針對以上兩點缺陷，我們對新圖形框架進行了新的動畫實現(xiàn)設計，如圖5所示。

圖5 新框架的動畫實現(xiàn)

（1）動畫與 UI 分離。

動畫在渲染線程步進，與 UI 業(yè)務線程分離。

（2）動畫僅測量、布局、繪制一次，降低動畫負載。

通過計算最終界面屬性值，對有改變的控件添加動畫，動畫過程中不測量、布局、繪制，提升性能。

4. 對外提供的接口

新圖形框架提供了豐富的接口：

（1）SDK：支持 WebGL 1.0、WebGL 2.0，滿足 JS 開發(fā)者的 3D 開發(fā)的需求。

WebGL 開發(fā)指導

https://docs.openharmony.cn/pages/v3.1/zh-cn/OpenHarmony-Overview_zh.md/

（2）NDK：支持 OpenGL ES3.X，可以通過 XComponent 提供的 nativewindow 創(chuàng)建 EGL/OPENGL 繪制環(huán)境，滿足游戲引擎等開發(fā)者對 3D 繪圖能力的需求。

圖6 OpenGL ES使用示例

新圖形框架還處于不斷完善過程中，我們將基于新框架提供更多的能力，相信以后會給大家?guī)砀嗟捏@喜，敬請期待~

審核編輯 ：李倩