[發明專利]一種前端圖像渲染方法、裝置和電子設備

在審

• 申請號: 201911417460.3
• 申請日: 2019-12-31
• 公開（公告）號: CN111143018A
• 公開（公告）日: 2020-05-12
• 發明（設計）人: 夏天晗;姚曉誼;譚家瑋
• 申請（專利權）人: 北京曠視機器人技術有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06T11/00;G06T15/00
• 代理公司: 北京隆源天恒知識產權代理事務所(普通合伙) 11473
• 代理人: 鞠永帥

本發明提供了一種前端圖像渲染方法、裝置和電子設備，所述方法包括：獲取待渲染的幀圖像，并將其拆分為最小粒度的繪制對象；根據所述繪制對象的頂點信息，將相同頂點信息的多個所述繪制對象合并為一個對象類；每個所述對象類的信息中包含一個頂點信息和多個可變信息；將所述對象類的信息傳輸至渲染器；所述渲染器根據所述對象類的信息生成渲染后的幀圖像。這樣，將相同的頂點信息進行合并，這樣，可以將該幀圖像的繪制或渲染過程中JS到WebGL的頂點信息傳輸次數降低到最少，從而大大增加圖像渲染的效率。

技術領域

本發明涉及圖像渲染技術領域，具體而言，涉及一種前端圖像渲染方法、裝置和電子設備。

背景技術

在現實圖像的具體顯示中，現實中的場景和實體用三維形式表示，便于操縱和變換，而圖形的顯示設備大多是二維的光柵化顯示器和點陣化打印機，對三維實體場景進行N維光柵和點陣化的表示就是圖像渲染。

WebGL(Web Graphics Library)是圖像渲染的重要工具，是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜3D結構的網站頁面，給現有的圖像渲染帶來了極大的便利。

但是現有的渲染方法，都存在渲染效果不夠高效的問題；在渲染較低數量級的渲染對象時，尚可保持一定的流暢性，但是在同時渲染千量級或更多的2d渲染對象時就會開始嚴重掉幀，在需要對視口畫面整體縮放移動時，大部分框架存在較嚴重卡頓的問題。

因此，迫切需要一種渲染效率高的前端圖像渲染方法及裝置。

發明內容

本發明解決的問題是如何高效地進行前端二維圖像的渲染。

為解決上述問題，本發明實施例首先提供一種前端圖像渲染方法，其包括：

獲取待渲染的幀圖像，并將其拆分為最小粒度的繪制對象；

根據所述繪制對象的頂點信息，將相同頂點信息的多個所述繪制對象合并為一個對象類；每個所述對象類的信息中包含一個頂點信息和多個可變信息，所述多個可變信息與所述對象類中的多個繪制對象一一對應；

將所述對象類的信息傳輸至渲染器；

所述渲染器根據所述對象類的信息生成渲染后的幀圖像。

這樣，將相同的頂點信息進行合并，這樣，可以將該幀圖像的繪制(或渲染)過程中JS到WebGL的頂點信息傳輸次數降低到最少(原本十萬量級的次數降低到10量級)，從而大大增加圖像渲染的效率(信息傳輸的最小化帶來的是繪制效率的提升)。

可選的，所述繪制對象包括頂點信息和可變信息，所述可變信息包括偏移屬性、縮放比、顏色信息、材質信息和邊長信息中的至少一項。

可選的，在所述根據所述繪制對象的頂點信息，將相同頂點信息的多個所述繪制對象合并為一個對象類之前，所述方法還包括：

開辟存儲空間，所述存儲空間用于分別存儲所述頂點信息和所述可變信息；

通過開辟存儲空間，可以使得繪制多個圖形的過程中不會重復發生多次內存(存儲空間)的申請及銷毀，大幅提升繪制效率，降低繪制過程中內存回收導致的卡頓問題。

可選的，所述存儲空間的存儲量大于所述繪制對象的數據量。這樣可以便于后期進行數據的更新操作。

可選的，所述前端圖像渲染方法還包括：