原標(biāo)題：新的圖形框架可以帶來什么？ 揭秘OpenHarmony新圖形框架

3月30日，OpenHarmony v3.1 Release版本正式發(fā)布了。此版本為大家?guī)砹巳碌膱D形框架，實(shí)現(xiàn)了UI框架顯示、多窗口、流暢動(dòng)畫等基礎(chǔ)能力，夯實(shí)了OpenHarmony系統(tǒng)能力基座。下面就帶大家詳細(xì)了解新圖形框架。

一、完整能力視圖

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

圖1 OpenHarmony圖形完整能力視圖

按照分層抽象和輕模塊化的架構(gòu)設(shè)計(jì)原則，新圖形框架分為接口層、架構(gòu)層和引擎層。各層級(jí)說明如下：

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

● 框架層：由Render Service、Animation、Effect、Drawing、顯示與內(nèi)存管理等核心模塊組成。框架層各模塊說明如下：

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

二、新圖形框架的亮點(diǎn)

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

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

（1）渲染方面

通常來講，UI界面顯示分為兩個(gè)部分：一是描述的UI元素在應(yīng)用內(nèi)部顯示，二是多個(gè)應(yīng)用的界面在屏幕上同時(shí)顯示。對(duì)此，新圖形框架從功能上做了相應(yīng)的設(shè)計(jì)：控件級(jí)渲染和窗口級(jí)渲染。“控件級(jí)渲染”重點(diǎn)考慮如何跟UI框架前端進(jìn)行對(duì)接，需要將ArkUI框架的控件描述轉(zhuǎn)換成繪制指令，并提供對(duì)應(yīng)的節(jié)點(diǎn)管理以及渲染能力。而“窗口級(jí)渲染”重點(diǎn)考慮如何將多個(gè)應(yīng)用合成顯示到同一個(gè)屏幕上。

（2）動(dòng)畫流暢性方面

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

（3）接口方面

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

下面為大家一一詳細(xì)介紹新圖形框架的亮點(diǎn)特性。

1. 控件級(jí)渲染

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

圖2 控件級(jí)渲染

控件級(jí)渲染功能具有以下特點(diǎn)：

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

● 動(dòng)畫邏輯從主線程中剝離，提供獨(dú)立的步進(jìn)驅(qū)動(dòng)機(jī)制。

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

2. 窗口級(jí)渲染

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

圖3 窗口級(jí)渲染

窗口級(jí)渲染功能具有以下特點(diǎn)：

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

● 支持硬件VSync/軟件Vsync。

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

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

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

3. 更流暢的動(dòng)畫體驗(yàn)

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

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

（1） 應(yīng)用創(chuàng)建動(dòng)畫，設(shè)置動(dòng)畫參數(shù)。

（2） 每幀回調(diào)，修改控件參數(shù)，重新測(cè)量、布局、繪制。

（3） 內(nèi)容渲染。

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

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

（1）UI與動(dòng)畫一起執(zhí)行，UI的業(yè)務(wù)阻塞會(huì)影響動(dòng)畫的執(zhí)行，導(dǎo)致動(dòng)畫卡頓。

（2）每幀回調(diào)修改控件屬性，會(huì)觸發(fā)測(cè)量布局錄制，導(dǎo)致耗時(shí)增加。

針對(duì)以上兩點(diǎn)缺陷，我們對(duì)新圖形框架進(jìn)行了新的動(dòng)畫實(shí)現(xiàn)設(shè)計(jì)，如圖5所示。

圖5 新框架的動(dòng)畫實(shí)現(xiàn)

（1）動(dòng)畫與UI分離。

動(dòng)畫在渲染線程步進(jìn)，與UI業(yè)務(wù)線程分離。

（2）動(dòng)畫僅測(cè)量、布局、繪制一次，降低動(dòng)畫負(fù)載。

通過計(jì)算最終界面屬性值，對(duì)有改變的控件添加動(dòng)畫，動(dòng)畫過程中不測(cè)量、布局、繪制，提升性能。

4. 對(duì)外提供的接口

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

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

WebGL開發(fā)指導(dǎo)：

https://docs.openharmony.cn/pages/zh-cn/app/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%8A%9F%E8%83%BD%E5%BC%80%E5%8F%91/WebGL/WebGL%E5%BC%80%E5%8F%91%E6%8C%87%E5%AF%BC/#:~:text=%23-,%E7%9D%80%E8%89%B2%E5%99%A8%E7%BB%98%E5%88%B6%E5%BD%A9%E8%89%B2%E4%B8%89%E8%A7%92%E5%BD%A2,-%E6%AD%A4%E5%9C%BA%E6%99%AF%E4%B8%BA

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

圖6 OpenGL ES使用示例

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

審核編輯：湯梓紅