[发明专利]一种前端图像渲染方法、装置和电子设备

说明书

本发明提供了一种前端图像渲染方法、装置和电子设备，所述方法包括：获取待渲染的帧图像，并将其拆分为最小粒度的绘制对象；根据所述绘制对象的顶点信息，将相同顶点信息的多个所述绘制对象合并为一个对象类；每个所述对象类的信息中包含一个顶点信息和多个可变信息；将所述对象类的信息传输至渲染器；所述渲染器根据所述对象类的信息生成渲染后的帧图像。这样，将相同的顶点信息进行合并，这样，可以将该帧图像的绘制或渲染过程中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量级)，从而大大增加图像渲染的效率(信息传输的最小化带来的是绘制效率的提升)。

可选的，所述绘制对象包括顶点信息和可变信息，所述可变信息包括偏移属性、缩放比、颜色信息、材质信息和边长信息中的至少一项。

可选的，在所述根据所述绘制对象的顶点信息，将相同顶点信息的多个所述绘制对象合并为一个对象类之前，所述方法还包括：

开辟存储空间，所述存储空间用于分别存储所述顶点信息和所述可变信息；

通过开辟存储空间，可以使得绘制多个图形的过程中不会重复发生多次内存(存储空间)的申请及销毁，大幅提升绘制效率，降低绘制过程中内存回收导致的卡顿问题。

可选的，所述存储空间的存储量大于所述绘制对象的数据量。这样可以便于后期进行数据的更新操作。

可选的，所述前端图像渲染方法还包括：