CN111275782B - 一种图形绘制方法、装置、终端设备及存储介质 - Google Patents

一种图形绘制方法、装置、终端设备及存储介质 Download PDF

Info

Publication number
CN111275782B
CN111275782B CN202010058144.8A CN202010058144A CN111275782B CN 111275782 B CN111275782 B CN 111275782B CN 202010058144 A CN202010058144 A CN 202010058144A CN 111275782 B CN111275782 B CN 111275782B
Authority
CN
China
Prior art keywords
image
webgl
context object
tag
webgl context
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010058144.8A
Other languages
English (en)
Other versions
CN111275782A (zh
Inventor
杨湧
陈城
黄波
黄耀鸿
郭怡适
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Imagedt Co ltd
Original Assignee
Imagedt Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Imagedt Co ltd filed Critical Imagedt Co ltd
Priority to CN202010058144.8A priority Critical patent/CN111275782B/zh
Publication of CN111275782A publication Critical patent/CN111275782A/zh
Application granted granted Critical
Publication of CN111275782B publication Critical patent/CN111275782B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/20—Processor architectures; Processor configuration, e.g. pipelining
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T1/00—General purpose image data processing
    • G06T1/60—Memory management
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Graphics (AREA)
  • Geometry (AREA)
  • Software Systems (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种图形绘制方法、装置、终端设备及存储介质。所述方法包括：构建HTML5 canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象；对所述WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制。本发明能够调用WebGL API实现图形绘制，从而提高图形的显示效果和绘制效率。

Description

一种图形绘制方法、装置、终端设备及存储介质
技术领域
本发明涉及计算机图形绘制技术领域，尤其涉及一种图形绘制方法、装置终端设备及存储介质。
背景技术
图像标注作为计算机视觉的一个重要任务，主要采用基于DOM渲染的方法和基于Canvas API的方法实现图形化标注。其中，基于DOM渲染的方法可绘制的图形受HTML的标签类型和DOM节点的操作范围限制，仅能绘制矩形、圆形等简单的2D图形，难以绘制多边形、不规则曲线等复杂的2D图形。基于Canvas API的方法虽能绘制复杂的2D图形，但仅支持绘制基本的3D图形，且在绘制基本的3D图形或者同时对多个图像进行图形绘制的情况下，容易导致Canvas API出现卡顿现象。
发明内容
本发明提供一种图形绘制方法、装置、终端设备及存储介质，以克服现有技术的缺陷，本发明能够调用WebGL API实现图形绘制，从而提高图形的显示效果和绘制效率。
为了解决上述技术问题，第一方面，本发明一实施例提供一种图形绘制方法，包括：
构建HTML5 canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象；
对所述WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制。
进一步地，所述构建HTML5 canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象，包括：
构建所述HTML5 canvas标签，并根据所述HTML5 canvas标签获取DOM；
将所述WebGL上下文对象的类型参数输入所述DOM，得到所述WebGL上下文对象。
进一步地，所述对所述WebGL上下文对象进行校验，包括：
判断所述WebGL上下文对象是否为空值；
若所述WebGL上下文对象不为空值，则所述WebGL上下文对象校验成功；
若所述WebGL上下文对象为空值，则所述WebGL上下文对象校验失败。
进一步地，所述在校验成功时调用WebGL API对目标图像进行图形绘制，包括：
获取操作图像，并判断所述操作图像是否为本地缓存图像；其中，所述本地缓存图像是预先将解析所述操作图像得到的图像缓存于本地而获得；
若所述操作图像为所述本地缓存图像，则将所述操作图像作为所述目标图像，并调用WebGL API对所述目标图像进行图形绘制；
若所述操作图像不为所述本地缓存图像，则将解析所述操作图像得到的图像作为所述目标图像缓存于本地，并调用WebGL API对所述目标图像进行图形绘制。
第二方面，本发明一实施例提供一种图形绘制装置，包括：
WebGL上下文对象获取模块，用于构建HTML5 canvas标签，并根据所述HTML5canvas标签获取WebGL上下文对象；
图形绘制模块，用于对所述WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制。
进一步地，所述WebGL上下文对象获取模块，包括：
DOM获取单元，用于构建所述HTML5 canvas标签，并根据所述HTML5 canvas标签获取DOM；
WebGL上下文对象获取单元，用于将所述WebGL上下文对象的类型参数输入所述DOM，得到所述WebGL上下文对象。
进一步地，所述对所述WebGL上下文对象进行校验，包括：
判断所述WebGL上下文对象是否为空值；
若所述WebGL上下文对象不为空值，则所述WebGL上下文对象校验成功；
若所述WebGL上下文对象为空值，则所述WebGL上下文对象校验失败。
进一步地，所述在校验成功时调用WebGL API对目标图像进行图形绘制，包括：
获取操作图像，并判断所述操作图像是否为本地缓存图像；其中，所述本地缓存图像是预先将解析所述操作图像得到的图像缓存于本地而获得；
若所述操作图像为所述本地缓存图像，则将所述操作图像作为所述目标图像，并调用WebGL API对所述目标图像进行图形绘制；
若所述操作图像不为所述本地缓存图像，则将解析所述操作图像得到的图像作为所述目标图像缓存于本地，并调用WebGL API对所述目标图像进行图形绘制。
第三方面，本发明一实施例提供一种图形绘制的终端设备，包括显示器、处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述显示器和所述存储器分别与所述处理器耦接，且所述处理器执行所述计算机程序时实现如上所述的图形绘制方法。
第四方面，本发明一实施例提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上所述的图形绘制方法。
本发明的实施例，具有如下有益效果：
通过根据构建的HTML5 canvas标签获取WebGL上下文对象，并对WebGL上下文对象进行校验，以在WebGL上下文对象校验成功时调用WebGL API对目标图像进行图形绘制。相比于现有技术，本发明通过在WebGL API中引入可调用OpenGL ES 2.0API的HTML5 canvas标签，实现调用WebGL API对目标图像进行图形绘制，不仅能够借助WebGL API绘制多种2D图形和3D图形，还利用WebGL API可直接操作GPU指令的特性，通过显卡实现硬件加速，从而提高图形的显示效果和绘制效率。
附图说明
图1为本发明第一实施例中的一种图形绘制方法的流程示意图；
图2为本发明第一实施例中的优选实施例的流程示意图；
图3为本发明第一实施例中的一优选实施例的流程示意图；
图4为本发明第一实施例中的另一优选实施例的流程示意图；
图5为本发明第二实施例中的一种图形绘制装置的结构示意图；
图6为本发明第三实施例中的一种图形绘制的终端设备的结构示意图。
具体实施方式
下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，文中的步骤编号，仅为了方便具体实施例的解释，不作为限定步骤执行先后顺序的作用。本实施例提供的方法可以由相关的服务器执行，且下文均以服务器作为执行主体为例进行说明。
请参阅图1-4。
如图1所示，第一实施例提供一种图形绘制方法，包括步骤S1～S2：
S1、构建HTML5 canvas标签，并根据HTML5 canvas标签获取WebGL上下文对象。
S2、对WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制。
需要说明的是，Canvas通过JavaScript来绘制2D图形。Canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
OpenGL(Open Graphics Library，开放图形库或者"开放式图形库")是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。这个接口由近350个不同的函数调用组成，用来绘制从简单的图形比特到复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。
在步骤S1中，可通过在HTML片段中声明canvas标签来构建HTML5 canvas标签，并根据HTML5 canvas标签获取WebGL上下文对象。
其中，在HTML片段中声明canvas标签包括在HTML5主体内写入canvas语句声明，定义canvas的ID和画布尺寸，以便利用HTML5 canvas标签呈现后续的图形绘制内容。
在步骤S2中，由于某些版本的浏览器或某些设备不支持调用WebGL API，为保证成功调用WebGL API，需要对WebGL上下文对象进行校验来确定当前版本的浏览器或当前设备是否支持调用WebGL API。
其中，支持WebGL标准的浏览器包括Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12alpha及以上版本和IE11+浏览器版本。
另外，由于WebGL只关注投影矩阵的坐标和投影矩阵的颜色两个方面，调用WebGLAPI对目标图像进行图形绘制仅要求实现具有投影矩阵坐标和颜色的WebGL对象即可。例如，顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色，这些着色器的操作都是在WebGL API中提供的操作着色器对象相关的方法中调用。
通过根据构建的HTML5 canvas标签获取WebGL上下文对象，并对WebGL上下文对象进行校验，以在WebGL上下文对象校验成功时调用WebGL API对目标图像进行图形绘制。
本实施例通过在WebGL API中引入可调用OpenGL ES 2.0API的HTML5 canvas标签，实现调用WebGL API对目标图像进行图形绘制，不仅能够借助WebGL API绘制多种2D图形和3D图形，还利用WebGL API可直接操作GPU指令的特性，通过显卡实现硬件加速，从而提高图形的显示效果和绘制效率。
如图2所示，在优选的实施例当中，所述步骤S1，包括步骤S11～S12：
S11、构建HTML5 canvas标签，并根据HTML5 canvas标签获取DOM。
S12、将WebGL上下文对象的类型参数输入DOM，得到WebGL上下文对象。
需要说明的是，文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
在步骤S11中，由于DOM作为浏览器载入网页的入口，其提供的文档接口描述了任何类型文档的通用属性和方法，因此根据构建的HTML5 canvas标签，可通过文档接口的查询语句获取HTML5 canvas标签的对象模型，即DOM。
在步骤S12中，通过将-webgl字段等表示WebGL上下文对象的类型参数输入到HTML5 canvas标签的对象模型，即DOM提供的获取WebGL上下文对象的接口，从而得到WebGL上下文对象。
如图3所示，在一优选的实施例当中，所述对WebGL上下文对象进行校验(步骤S2-1)，包括步骤S2-11～S2-13：
S2-11、判断WebGL上下文对象是否为空值。
S2-12、若WebGL上下文对象不为空值，则WebGL上下文对象校验成功。
S2-13、若WebGL上下文对象为空值，则WebGL上下文对象校验失败。
本实施例通过判断WebGL上下文对象是否为空值来确定当前版本的浏览器或当前设备是否支持调用WebGL API。若WebGL上下文对象不为空值，则认为当前版本的浏览器或当前设备支持调用WebGL API，WebGL上下文对象校验成功。若WebGL上下文对象为空值，则认为当前版本的浏览器或当前设备不支持调用WebGL API，判定WebGL上下文对象校验失败，应该更换浏览器版本或设备。
如图4所示，在另一优选的实施例当中，所述在校验成功时调用WebGL API对目标图像进行图形绘制(步骤S2-2)，包括步骤S2-21～S2-23：
S2-21、获取操作图像，并判断操作图像是否为本地缓存图像；其中，本地缓存图像是预先将解析操作图像得到的图像缓存于本地而获得。
S2-22、若操作图像为本地缓存图像，则将操作图像作为目标图像，并调用WebGLAPI对目标图像进行图形绘制。
S2-23、若操作图像不为本地缓存图像，则将解析操作图像得到的图像作为目标图像缓存于本地，并调用WebGL API对目标图像进行图形绘制。
本实施例通过判断获取的操作图像是否为本地缓存图像来确定操作图像是否为本地缓存图像，即是否已被解析并缓存于本地中。若操作图像为本地缓存图像，则认为无需再解析操作图像，直接将操作图像作为目标图像，调用WebGL API对目标图像进行图形绘制。若操作图像不为本地缓存图像，则认为需要解析操作图像，在将解析操作图像得到的图像作为目标图像缓存于本地后，才可调用WebGL API对目标图像进行图形绘制。
本实施例通过预先将解析操作图像得到的图像缓存于本地，有利于在后续图像绘制过程中降低计算机的处理压力，进一步提高图形的绘制效率。
从获取图像到页面显示的流程可大致分为图像获取、图像解析和图像渲染。针对多个图像进行图形绘制，图像传输需要一定的等待时间，且页面显示区域有限，并不需要一开始就解析所有图像。通过对图形绘制加入图像解析缓存机制，可根据实际需求将优先显示的图像加入图像加载队列，并对图像加载队列中的图像进行解析后缓存于本地，得到本地缓存图像，以便后续可以直接从本地缓存中获取操作图像进行图形绘制。
其中，图像解析缓存机制的具体流程如下：
(1)定义图像加载队列：假设整个货架的图像有N张，则定义图像加载队列的长度为N。
(2)将优先显示的图像加入到队列中：假设页面显示区域的宽为W，高为H，每张图像的宽为w，高为h，图像的缩放比例为r，则需要显示的图像数量最小值为最终实际需要加载的图像数量为l＝k lmin，其中k≥1，表示扩展系数，可以根据实际的情况(比如GPU硬件加速能力越厉害，可扩展的程度越高)来对需要加载的图像数量进行扩展，最终需要加载的图像数量不能小于lmin。
假设，整组货架图像有n张，拍照顺序为从上到下再到从左到右，则整个货架图像集可以定义为一个a行b列的二维矩阵p：初始化的时候，用户可以从货架的任何位置开始查看图像，需要加载的图像数量为l，取出中间需要加载的图像数量为l的集合矩阵p2，其中心点位置为pcenter，然后按照图像下标的顺序将其加入到缓冲队列中。其他剩下的图像按照就近原则依次加入到图像加载队列中，假设剩下的图像集合为p3，依次计算第i张图像跟pcenter之间的下标距离的绝对值di＝|i-center|，最后将p3中每张图像对应的下标距离d按照从小到大的顺序依次加入到图像加载队列中。
(3)对图像加载队列的图像进行解析和渲染，优先读取缓存中已经分析的数据：图形绘制处理器开始消耗队列，采取WebGL上下文对象提供的WebGL API对缓冲队列的图像进行解析和渲染。首先优先检查该图像是否存在于本地数据中，如果存在，则直接渲染该图像，不需要经过解析。
(4)对已经解析后图像数据进行缓存：已经解析后的图像可以将数据缓存到本地。后续等待需要在显示区域呈现该图像的时候，可以直接向缓存块直接读取已经解析后的图像数据，无需再经过解析的操作。
请参阅图5。
如图5所示，第二实施例提供一种图形绘制装置，包括：WebGL上下文对象获取模块21，用于构建HTML5 canvas标签，并根据HTML5 canvas标签获取WebGL上下文对象；图形绘制模块22，用于对WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制。
需要说明的是，Canvas通过JavaScript来绘制2D图形。Canvas是逐像素进行渲染的。在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
OpenGL(Open Graphics Library，开放图形库或者"开放式图形库")是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。这个接口由近350个不同的函数调用组成，用来绘制从简单的图形比特到复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。
WebGL上下文对象获取模块21通过在HTML片段中声明canvas标签来构建HTML5canvas标签，并根据HTML5 canvas标签获取WebGL上下文对象。
其中，在HTML片段中声明canvas标签包括在HTML5主体内写入canvas语句声明，定义canvas的ID和画布尺寸，以便利用HTML5 canvas标签呈现后续的图形绘制内容。
由于某些版本的浏览器或某些设备不支持调用WebGL API，为保证成功调用WebGLAPI，需要通过图形绘制模块22对WebGL上下文对象进行校验来确定当前版本的浏览器或当前设备是否支持调用WebGL API。
其中，支持WebGL标准的浏览器包括Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12alpha及以上版本和IE11+浏览器版本。
另外，由于WebGL只关注投影矩阵的坐标和投影矩阵的颜色两个方面，图形绘制模块22调用WebGL API对目标图像进行图形绘制仅要求实现具有投影矩阵坐标和颜色的WebGL对象即可。例如，顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色，这些着色器的操作都是在WebGL API中提供的操作着色器对象相关的方法中调用。
通过WebGL上下文对象获取模块21，根据构建的HTML5 canvas标签获取WebGL上下文对象，并通过图形绘制模块22，对WebGL上下文对象进行校验，以在WebGL上下文对象校验成功时调用WebGL API对目标图像进行图形绘制。
本实施例通过在WebGL API中引入可调用OpenGL ES 2.0API的HTML5 canvas标签，实现调用WebGL API对目标图像进行图形绘制，不仅能够借助WebGL API绘制多种2D图形和3D图形，还利用WebGL API可直接操作GPU指令的特性，通过显卡实现硬件加速，从而提高图形的显示效果和绘制效率。
在优选的实施例当中，所述WebGL上下文对象获取模块21，包括：DOM获取单元211，用于构建HTML5 canvas标签，并根据HTML5 canvas标签获取DOM；WebGL上下文对象获取单元212，用于将WebGL上下文对象的类型参数输入DOM，得到WebGL上下文对象。
需要说明的是，文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
由于DOM作为浏览器载入网页的入口，其提供的文档接口描述了任何类型文档的通用属性和方法，因此DOM获取单元211可根据构建的HTML5 canvas标签，通过文档接口的查询语句获取HTML5 canvas标签的对象模型，即DOM。
WebGL上下文对象获取单元212通过将-webgl字段等表示WebGL上下文对象的类型参数输入到HTML5 canvas标签的对象模型，即DOM提供的获取WebGL上下文对象的接口，从而得到WebGL上下文对象。
在优选的实施例当中，所述对WebGL上下文对象进行校验，包括：判断WebGL上下文对象是否为空值；若WebGL上下文对象不为空值，则WebGL上下文对象校验成功；若WebGL上下文对象为空值，则WebGL上下文对象校验失败。
本实施例通过判断WebGL上下文对象是否为空值来确定当前版本的浏览器或当前设备是否支持调用WebGL API。若WebGL上下文对象不为空值，则认为当前版本的浏览器或当前设备支持调用WebGL API，WebGL上下文对象校验成功。若WebGL上下文对象为空值，则认为当前版本的浏览器或当前设备不支持调用WebGL API，判定WebGL上下文对象校验失败，应该更换浏览器版本或设备。
在优选的实施例当中，所述在校验成功时调用WebGL API对目标图像进行图形绘制，包括：获取操作图像，并判断操作图像是否为本地缓存图像；其中，本地缓存图像是预先将解析操作图像得到的图像缓存于本地而获得；若操作图像为本地缓存图像，则将操作图像作为目标图像，并调用WebGL API对目标图像进行图形绘制；若操作图像不为本地缓存图像，则将解析操作图像得到的图像作为目标图像缓存于本地，并调用WebGL API对目标图像进行图形绘制。
本实施例通过判断获取的操作图像是否为本地缓存图像来确定操作图像是否为本地缓存图像，即是否已被解析并缓存于本地中。若操作图像为本地缓存图像，则认为无需再解析操作图像，直接将操作图像作为目标图像，调用WebGL API对目标图像进行图形绘制。若操作图像不为本地缓存图像，则认为需要解析操作图像，在将解析操作图像得到的图像作为目标图像缓存于本地后，才可调用WebGL API对目标图像进行图形绘制。
本实施例通过预先将解析操作图像得到的图像缓存于本地，有利于在后续图像绘制过程中降低计算机的处理压力，进一步提高图形的绘制效率。
从获取图像到页面显示的流程可大致分为图像获取、图像解析和图像渲染。针对多个图像进行图形绘制，图像传输需要一定的等待时间，且页面显示区域有限，并不需要一开始就解析所有图像。通过对图形绘制加入图像解析缓存机制，可根据实际需求将优先显示的图像加入图像加载队列，并对图像加载队列中的图像进行解析后缓存于本地，得到本地缓存图像，以便后续可以直接从本地缓存中获取操作图像进行图形绘制。
其中，图像解析缓存机制的具体流程如下：
(1)定义图像加载队列：假设整个货架的图像有N张，则定义图像加载队列的长度为N。
(2)将优先显示的图像加入到队列中：假设页面显示区域的宽为W，高为H，每张图像的宽为w，高为h，图像的缩放比例为r，则需要显示的图像数量最小值为最终实际需要加载的图像数量为l＝k lmin，其中k≥1，表示扩展系数，可以根据实际的情况(比如GPU硬件加速能力越厉害，可扩展的程度越高)来对需要加载的图像数量进行扩展，最终需要加载的图像数量不能小于lmin。
假设，整组货架图像有n张，拍照顺序为从上到下再到从左到右，则整个货架图像集可以定义为一个a行b列的二维矩阵p：初始化的时候，用户可以从货架的任何位置开始查看图像，需要加载的图像数量为l，取出中间需要加载的图像数量为l的集合矩阵p2，其中心点位置为pcenter，然后按照图像下标的顺序将其加入到缓冲队列中。其他剩下的图像按照就近原则依次加入到图像加载队列中，假设剩下的图像集合为p3，依次计算第i张图像跟pcenter之间的下标距离的绝对值di＝|i-center|，最后将p3中每张图像对应的下标距离d按照从小到大的顺序依次加入到图像加载队列中。
(3)对图像加载队列的图像进行解析和渲染，优先读取缓存中已经分析的数据：图形绘制处理器开始消耗队列，采取WebGL上下文对象提供的WebGL API对缓冲队列的图像进行解析和渲染。首先优先检查该图像是否存在于本地数据中，如果存在，则直接渲染该图像，不需要经过解析。
(4)对已经解析后图像数据进行缓存：已经解析后的图像可以将数据缓存到本地。后续等待需要在显示区域呈现该图像的时候，可以直接向缓存块直接读取已经解析后的图像数据，无需再经过解析的操作。
请参阅图6。
如图6所示，第三实施例提供一种图形绘制的终端设备，包括显示器31、处理器32、存储器33以及存储在存储器33中且被配置为由处理器32执行的计算机程序，显示器31和存储器33分别与处理器32耦接，且处理器32执行计算机程序时实现如第一实施例所述的图形绘制方法，且达到与之相同的有益效果。
第四实施例提供一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行如第一实施例所述的图形绘制方法，且达到与之相同的有益效果。
综上所述，实施本发明的实施例，具有如下有益效果：
通过根据构建的HTML5 canvas标签获取WebGL上下文对象，并对WebGL上下文对象进行校验，以在WebGL上下文对象校验成功时调用WebGL API对目标图像进行图形绘制。本实施例通过在WebGL API中引入可调用OpenGL ES 2.0 API的HTML5 canvas标签，实现调用WebGL API对目标图像进行图形绘制，不仅能够借助WebGL API绘制多种2D图形和3D图形，还利用WebGL API可直接操作GPU指令的特性，通过显卡实现硬件加速，从而提高图形的显示效果和绘制效率。
以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。
本领域普通技术人员可以理解实现上述实施例中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

Claims (6)

1.一种图形绘制方法，其特征在于，包括：
构建HTML5canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象；
对所述WebGL上下文对象进行校验，并在校验成功时调用WebGL API对目标图像进行图形绘制，包括：判断所述WebGL上下文对象是否为空值；若所述WebGL上下文对象不为空值，则所述WebGL上下文对象校验成功；若所述WebGL上下文对象为空值，则所述WebGL上下文对象校验失败；
获取操作图像，并判断所述操作图像是否为本地缓存图像；其中，所述本地缓存图像是预先将解析所述操作图像得到的图像缓存于本地而获得；若所述操作图像为所述本地缓存图像，则将所述操作图像作为所述目标图像，并调用WebGL API对所述目标图像进行图形绘制；若所述操作图像不为所述本地缓存图像，则将解析所述操作图像得到的图像作为所述目标图像缓存于本地，并调用WebGL API对所述目标图像进行图形绘制。
2.如权利要求1所述的图形绘制方法，其特征在于，所述构建HTML5 canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象，包括：
构建所述HTML5canvas标签，并根据所述HTML5 canvas标签获取DOM；
将所述WebGL上下文对象的类型参数输入所述DOM，得到所述WebGL上下文对象。
3.一种图形绘制装置，其特征在于，包括：
WebGL上下文对象获取模块，用于构建HTML5canvas标签，并根据所述HTML5 canvas标签获取WebGL上下文对象；
图形绘制模块，用于对所述WebGL上下文对象进行校验，并在校验成功时调用WebGLAPI对目标图像进行图形绘制，具体用于：判断所述WebGL上下文对象是否为空值；若所述WebGL上下文对象不为空值，则所述WebGL上下文对象校验成功；若所述WebGL上下文对象为空值，则所述WebGL上下文对象校验失败；获取操作图像，并判断所述操作图像是否为本地缓存图像；其中，所述本地缓存图像是预先将解析所述操作图像得到的图像缓存于本地而获得；若所述操作图像为所述本地缓存图像，则将所述操作图像作为所述目标图像，并调用WebGL API对所述目标图像进行图形绘制；若所述操作图像不为所述本地缓存图像，则将解析所述操作图像得到的图像作为所述目标图像缓存于本地，并调用WebGL API对所述目标图像进行图形绘制。
4.如权利要求3所述的图形绘制装置，其特征在于，所述WebGL上下文对象获取模块，包括：
DOM获取单元，用于构建所述HTML5canvas标签，并根据所述HTML5canvas标签获取DOM；
WebGL上下文对象获取单元，用于将所述WebGL上下文对象的类型参数输入所述DOM，得到所述WebGL上下文对象。
5.一种图形绘制的终端设备，其特征在于，包括显示器、处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述显示器和所述存储器分别与所述处理器耦接，且所述处理器执行所述计算机程序时实现如权利要求1～2任一项所述的图形绘制方法。
6.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如权利要求1～2任一项所述的图形绘制方法。
CN202010058144.8A 2020-01-17 2020-01-17 一种图形绘制方法、装置、终端设备及存储介质 Active CN111275782B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010058144.8A CN111275782B (zh) 2020-01-17 2020-01-17 一种图形绘制方法、装置、终端设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010058144.8A CN111275782B (zh) 2020-01-17 2020-01-17 一种图形绘制方法、装置、终端设备及存储介质

Publications (2)

Publication Number Publication Date
CN111275782A CN111275782A (zh) 2020-06-12
CN111275782B true CN111275782B (zh) 2023-09-08

Family

ID=71003059

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010058144.8A Active CN111275782B (zh) 2020-01-17 2020-01-17 一种图形绘制方法、装置、终端设备及存储介质

Country Status (1)

Country Link
CN (1) CN111275782B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2022104786A1 (zh) * 2020-11-23 2022-05-27 深圳晶泰科技有限公司 多Web 3D场景离屏渲染方法

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105204853A (zh) * 2015-09-14 2015-12-30 新浪网技术(中国)有限公司 一种网页浏览器的Canvas绘图方法及装置
CN107832108A (zh) * 2016-09-14 2018-03-23 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备
CN110609677A (zh) * 2018-06-15 2019-12-24 搜游网络科技(北京)有限公司 一种基于WebGL的图形绘制方法、装置及系统

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103713891B (zh) * 2012-10-09 2017-11-24 阿里巴巴集团控股有限公司 一种在移动设备上进行图形渲染的方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105204853A (zh) * 2015-09-14 2015-12-30 新浪网技术(中国)有限公司 一种网页浏览器的Canvas绘图方法及装置
CN107832108A (zh) * 2016-09-14 2018-03-23 阿里巴巴集团控股有限公司 3D canvas网页元素的渲染方法、装置及电子设备
CN110609677A (zh) * 2018-06-15 2019-12-24 搜游网络科技(北京)有限公司 一种基于WebGL的图形绘制方法、装置及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
聂帅 等.基于WebGL技术三维模型呈现研究.《计算机产品与流通》.2019,第87-89页. *

Also Published As

Publication number Publication date
CN111275782A (zh) 2020-06-12

Similar Documents

Publication Publication Date Title
US10497086B2 (en) Methods and apparatuses for providing a hardware accelerated web engine
JP5209051B2 (ja) データシステム及び方法
CN110544290A (zh) 数据渲染方法及装置
KR20150079867A (ko) Html5-프로토콜 기반 웹페이지 표시 방법 및 장치
CN109377554B (zh) 大型三维模型绘制方法、设备、系统及存储介质
Anyuru Professional WebGL programming: developing 3D graphics for the Web
US20100064209A1 (en) Method for transforming web page objects
CN103678631A (zh) 页面渲染方法及装置
CN115439609B (zh) 基于地图服务的三维模型渲染方法、系统、设备及介质
CN112711729A (zh) 基于页面动画的渲染方法、装置、电子设备及存储介质
EP3050605B1 (en) A method for event detection in real-time graphic applications
US20150262322A1 (en) Rendering of graphics on a display device
CN111275782B (zh) 一种图形绘制方法、装置、终端设备及存储介质
CN110069254B (zh) 文本显示方法、装置及服务器
US10467332B2 (en) Graphics display capture system
US8264503B1 (en) Batch early engagement rules graphics processing
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN114092590B (zh) 电子设备及其图像渲染性能的评估方法、介质
Anttonen et al. Building 3d webgl applications
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN111932689B (zh) 一种采用id像素图的三维对象快速选取方法
Joshi et al. Graphics programming for the web
CN117271936B (zh) 基于Web的大数据关系图谱渲染方法、系统及设备
CN115328768A (zh) 浏览器调试方法、调试装置、电子设备及存储介质
CN117710554A (zh) 3d图形绘制方法、装置及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant