CN109448088A - 渲染立体图形线框的方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本发明涉及一种渲染立体图形线框的方法、装置、计算机设备和存储介质，该方法包括步骤：对三维画布中的立体图形进行渲染后，获取该立体图形各像素点的着色编码，根据着色编码确定多个关键点的位置和连接关系，在二维画布中根据各关键点的位置和连接关系渲染出立体图形的线框，通过二维和三维相结合渲染方式渲染立体图形的线框，在三维画布中对立体图形进行渲染能够快速获取各像素点的着色编码从而得到关键点的位置和连接关系，再在二维画布中进行线框的渲染，避免了直接在三维画布中渲染立体图形线框复杂度高的问题，提高了对立体图形的线框进行渲染的效率，渲染后的线框还可以与三维图形进行画布叠加，实现对三维图形进行描框。

Description

渲染立体图形线框的方法、装置、计算机设备和存储介质

技术领域

本发明涉及图像处理技术领域，特别是涉及一种渲染立体图形线框的方法、渲染立体图形线框的装置、计算机设备和计算机可读存储介质。

背景技术

随着图像处理技术的进步，个人计算机和平板电脑等智能终端具有强大的图像数据处理能力，能够支持用户在智能终端的绘图工具中绘制二维平面图形甚至复杂的三维立体图形。在绘制立体图形的过程当中，为了更加突出立体图形的结构特点，通常需要对立体图形的线框进行渲染。

传统技术在对立体图形的线框进行渲染时通常会采用如用圆柱形来模拟立体图形的线框的各个线段，但是圆柱的点比较多，在渲染时计算过程比较复杂，渲染线框的效率低；还会采用一个近小远大的梯形来模拟线框的各个线段，但由于梯形从不同角度去看呈现的差异很大，因此在旋转该立体图形的时候，这个梯形必须时刻旋转以保持梯形平面与实线的垂直关系，而且这种方式存在线段之间的接头类型难以确定、难以模拟虚线线型以及要适应光照随时变换颜色等问题，导致对立体图形的线框进行渲染的复杂度很高，降低渲染立体图形的线框的效率。

发明内容

基于此，有必要针对传统技术渲染立体图形线框的效率低的技术问题，提供一种渲染立体图形线框的方法、渲染立体图形线框的装置、计算机设备和计算机可读存储介质。

一种渲染立体图形线框的方法，包括步骤：

对三维画布中的立体图形进行渲染后，获取所述立体图形的各像素点的着色编码；

根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系；其中，所述关键点为用于渲染所述立体图形的线框的像素点；

根据所述位置和连接关系在二维画布中渲染所述线框。

在一个实施例中，所述根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系的步骤包括：

根据所述各像素点的着色编码从所述各像素点中识别所述多个关键点；其中，所述关键点的着色编码中设有特征码，用于从所述各像素点中识别所述关键点；根据各个所述关键点的着色编码获取各个所述关键点的连接关系；获取各个所述关键点的二维坐标，根据所述二维坐标得到各个所述关键点的位置。

在一个实施例中，所述根据所述各像素点的着色编码从所述各像素点中识别所述多个关键点的步骤包括：

根据所述各像素点的着色编码中的颜色编码识别第一特征码；其中，所述特征码包括所述第一特征码，所述第一特征码设于所述关键点的着色编码的颜色编码当中，用于从所述各像素点中识别所述关键点；将与所述第一特征码对应的像素点设为所述关键点。

在一个实施例中，所述根据各个所述关键点的着色编码获取各个所述关键点的连接关系的步骤包括：

从所述关键点的着色编码中提取第二特征码；其中，所述特征码包括所述第二特征码，所述第二特征码设于所述关键点的着色编码的透明度编码当中，用于标识所述关键点的序号；根据所述第二特征码确定所述关键点的序号；根据各个所述关键点的序号以及设定的序号连接关系得到各个所述关键点的连接关系。

在一个实施例中，所述根据所述位置和连接关系在二维画布中渲染所述线框的步骤包括：

根据各个所述关键点的位置确定各个所述关键点在所述二维画布中的二维坐标；根据各个所述关键点的连接关系确定各个所述关键点的连接顺序；根据所述连接顺序在所述二维画布中将与所述二维坐标相对应的像素点进行连接，渲染所述线框。

在一个实施例中，所述渲染所述线框的步骤包括：

获取设定的线框属性；根据所述线框属性对所述线框进行渲染。

在一个实施例中，在所述根据所述位置和连接关系在二维画布中渲染所述线框的步骤之后，还包括：

将所述二维画布中的所述线框叠加在所述三维画布中的所述立体图形上。

在一个实施例中，提供了一种渲染立体图形线框的装置，包括：

获取模块，用于对三维画布中的立体图形进行渲染后，获取所述立体图形的各像素点的着色编码；

确定模块，用于根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系；其中，所述关键点为用于渲染所述立体图形的线框的像素点；

渲染模块，用于根据所述位置和连接关系在二维画布中渲染所述线框。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上任一项实施例所述的渲染立体图形线框的方法的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项实施例所述的渲染立体图形线框的方法的步骤。

上述渲染立体图形线框的方法、装置、计算机设备和存储介质，对三维画布中的立体图形进行渲染后，获取该立体图形各像素点的着色编码，根据该着色编码确定用于渲染该立体图形线框的多个关键点的位置以及连接关系，然后在二维画布中根据各个关键点的位置和连接关系渲染出该立体图形的线框，通过二维和三维相结合渲染方式实现对立体图形的线框进行渲染，在三维画布中对立体图形进行渲染能够快速获取各像素点的着色编码从而得到关键点的位置以及各关键点的连接关系，并在二维画布中进行线框的渲染，该渲染后的线框还可以用于与三维图形进行画布叠加，实现对三维图形的描框，避免了直接在三维画布中渲染立体图形线框复杂度高的问题，提高了对立体图形的线框进行渲染的效率。

附图说明

图1为一个实施例中渲染立体图形线框的方法的应用场景图；

图2为一个实施例中渲染立体图形线框的方法的流程示意图；

图3(a)为一个实施例中立体图形的示意图；

图3(b)为一个实施例中线框的示意图；

图3(c)为一个实施例中渲染线框后的立体图形的示意图；

图4为另一个实施例中渲染立体图形线框的方法的流程示意图；

图5为一个实施例中渲染立体图形线框的装置的结构框图；

图6为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

需要说明的是，本发明实施例所涉及的术语“第一\第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序。应该理解“第一\第二”区分的对象在适当情况下可以互换，以使这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。

本发明实施例提供的渲染立体图形线框的方法，可以应用到如图1所示的场景当中，图1为一个实施例中渲染立体图形线框的方法的应用场景图，立体图形10可以是用户在浏览器环境下绘制的长方体，可以对该立体图形10的线框进行渲染，对于该立体图形10来说，其线框包括12条线段，其中，线段100是该立体图形10的线框的其中一条线段，对立体图形10的线框进行渲染是指生成该立体图形10的线框，即绘制出该长方体的12条线段，在对线框渲染的过程当中，还可以根据用户设置的线宽、线型等线框属性对该线框进行渲染。

具体来说，当用户在三维画布中绘制立体图形10后，对该三维画布中的立体图形10进行渲染，获取立体图形10的各像素点的着色编码，根据该着色编码可以确定各个关键点的位置以及连接关系，由于该立体图形10是长方体，该关键点可以是长方体的8个顶点，然后可以创建二维画布，在二维画布中根据各个顶点的位置以及连接关系渲染出该立体图形的线框，渲染完成的线框可以用于叠加到三维画布的立体图形10中，以便同时显示用户绘制的立体图形10和渲染出来的线框。

在一个实施例中，提供了一种渲染立体图形线框的方法，参考图2，图2为一个实施例中渲染立体图形线框的方法的流程示意图，该渲染立体图形线框的方法可以包括以下步骤：

步骤S101，对三维画布中的立体图形进行渲染后，获取该立体图形的各像素点的着色编码。

其中，画布为终端显示的绘图区域，通常是一个矩形的绘图区域，可以通过控制该绘图区域中的任一个像素来绘制相应的图形，而三维画布是指用于绘制三维图形的画布；对三维画布中的立体图形进行渲染主要是指对该三维画布中的立体图形进行着色，在对立体图形进行渲染的过程当中，一般会根据该图形相对于设定光线的角度以及光源的距离来计算立体图形中各像素点的颜色、透明度等参数，而着色编码是指携带该各像素点的颜色、透明度等参数的编码，主要用于对立体图形的各像素点进行着色，例如RGBA是一种常用的对立体图形进行渲染着色的着色编码，其中，RGB代表颜色通道，R表示红色、G表示绿色和B表示蓝色，A是指alpha通道，用于表示像素颜色的透明。

本步骤可以在对三维画布中的立体图形进行渲染后，获取到该立体图形的各个像素点的着色编码，由于对立体图形进行渲染应用了终端的GPU(Graphics ProcessingUnit，图形处理器)进行计算，因此对三维画布进行渲染能够快速得到各个像素点的着色编码。

步骤S102，根据着色编码确定多个关键点的位置，以及获取各个关键点的连接关系。

在渲染立体图形的线框的过程当中，需要先确定用于渲染该线框的像素点。其中，关键点是指用于渲染渲染该立体图形的线框的像素点，关键点的数量为多个。例如在渲染长方体的线框时，可以将该长方体的八个顶点作为用于渲染该长方体线框的关键点；在渲染圆柱体的线框时，则可以将其顶面和底面的部分像素点作为关键点进行线框渲染。

本步骤可以将关键点和非关键点的着色编码进行区分，以便从立体图形的各像素点中识别出各个关键点，其中，非关键点是指立体图形的像素点中除关键点以外的像素点。由于对立体图形进行渲染应用了终端的GPU进行计算，从而快速得到各像素点的着色编码，在此基础上，可以根据各个像素点的着色编码快速识别出各个关键点的着色编码，从而确定各个关键点的位置以及各个关键点之间的连接关系，关键点的位置可以包括关键点在三维画布中的坐标，可以是三维坐标或二维坐标，连接关系是指各个关键点分别与哪些关键点连接和各个关键点通过直线还是曲线连接等关系。需要说明的是，将哪些像素点作为立体图形的关键点和各个关键点的连接关系都可以是用户预先设定好的，例如长方体的各个顶点的连接关系一般是用户设定的，特别是对于复杂的立体图形，通过预先设定关键点以及连接关系能够更准确地渲染出立体图形的线框。

步骤S103，根据位置和连接关系在二维画布中渲染线框。

本步骤主要是在二维画布中渲染出上述立体图形的线框。具体来说，可以创建一个二维画布，根据立体图形的各个关键点的位置确定这些关键点在二维画布中的对应位置，然后根据连接关系在二维画布中将对应位置上的像素点进行连线，从而渲染出该立体图形的线框，该线框可以用于与立体图形进行画布叠加，进而得到绘制了线框的立体图形。

上述实施例提供的渲染立体图形线框的方法，对三维画布中的立体图形进行渲染后，获取该立体图形各像素点的着色编码，根据该着色编码确定用于渲染该立体图形线框的多个关键点的位置以及连接关系，然后在二维画布中根据各个关键点的位置和连接关系渲染出该立体图形的线框。该方法通过二维和三维相结合渲染方式实现对立体图形的线框进行渲染，在三维画布中对立体图形进行渲染能够快速获取各像素点的着色编码从而得到关键点的位置以及各关键点的连接关系，并在二维画布中进行线框的渲染，该渲染后的线框还可以用于与三维图形进行画布叠加，实现对三维图形的描框，避免了直接在三维画布中渲染立体图形线框复杂度高的问题，提高了对立体图形的线框进行渲染的效率。

在一个实施例中，根据着色编码确定多个关键点的位置，以及获取各个关键点的连接关系的步骤可以包括：

步骤S201，根据各像素点的着色编码从各像素点中识别多个关键点。

本步骤中，关键点的着色编码可以是预先设定好的，可以通过在各个关键点的着色编码中设置特征码，使得关键点的着色编码能够用于将关键点与非关键点进行区分，从各像素点中识别出关键点。由于关键点的着色编码设置有特征码，本步骤能够根据各像素点的着色编码从各像素点中识别出着色编码中设有特征码的各个关键点。

步骤S202，根据各个关键点的着色编码获取各个关键点的连接关系。

本步骤主要是根据关键点的着色编码确定各关键点的连接关系，其中，关键点的连接关系通常需要根据立体图形的形状结构特点预先设定，参考图3(a)，图3(a)为一个实施例中立体图形的示意图，该立体图形20为长方体，第一关键点200a和第二关键点200b是该立体图形20的其中两个关键点，其连接关系可以设定为第一关键点200a和第二关键点200b以直线连接。作为其中一种实施方式，在连接关系确定后，可以将各个关键点分别与其他关键点的连接关系通过编码的形式预先编写到各个关键点的着色编码当中，这样，在得到各个关键点的着色编码后，就能根据各个关键点的着色编码获取各个关键点与其他关键点之间的连接关系。

步骤S203，获取各个关键点的二维坐标，根据二维坐标得到各个关键点的位置。

本步骤主要是在确定立体图形的各个关键点之后，获取到各个关键点的二维坐标从而确定各个关键点的位置。其中，确定各个关键点的位置的主要作用是为了明确这些关键点在二维画布中的位置，便于后续基于这些关键点在二维画布中的位置准确地渲染出相应的线框。

上述实施例通过预先在关键点的着色编码中设置特征码，从而能够根据立体图形的各个像素点的着色编码从这些像素点中识别各个关键点并确定各关键点的连接关系，然后可以通过获取各个像素点的二维坐标来确定各个像素点在二维画布中的位置，这样能够基于对立体图形进行3D渲染后快速获取到的着色编码识别出各关键点，并获取其各个关键点之间的连接关系以及确定各个关键点在二维画布中的位置，便于快速且准确地在二维画布中渲染出相应立体图形的线框。

在一个实施例中，进一步的，根据各像素点的着色编码从各像素点中识别多个关键点的步骤可以包括：

根据各像素点的着色编码中的颜色编码识别第一特征码；将与第一特征码对应的像素点设为所述关键点。

本实施例主要是通过像素点的着色编码中的颜色编码识别出立体图形的各个关键点。其中，设于关键点的着色编码中的特征码可以包括第一特征码，该第一特征码可以设置在各个关键点的着色编码的颜色编码当中，使之能够用于将各关键点与非关键点进行区分，从各像素点中识别出这些关键点，为了便于识别，各个关键点的第一特征码一般是相同的。

具体来说，着色编码可以包括颜色编码和透明度编码，可以将第一特征码预先编写到各个关键点的着色编码的颜色编码当中，由于立体图形的像素点较多，对关键点的颜色编码进行特殊设定不会对立体图形的整体渲染效果造成很大影响，所以将关键点的第一特征码设置在着色编码的颜色编码当中在不影响立体图形的整体渲染效果的情况下能够将关键点与非关键点进行区分，从各像素点的颜色编码中识别关键点的第一特征码，然后将与这些第一特征码相对应的像素点识别为立体图形的关键点。

在一个实施例中，进一步的，根据各个关键点的着色编码获取各个关键点的连接关系的步骤可以包括：

从关键点的着色编码中提取第二特征码；根据第二特征码确定关键点的序号；根据各个关键点的序号以及设定的序号连接关系得到各个关键点的连接关系。

本实施例中，设置与关键点的着色编码中的特征点可以包括第二特征码，该第二特征码可以设于各个关键点的着色编码的透明度编码当中，主要用于标识各个关键点的序号。

参考图3(a)，立体图形20为立方体，可以对该立体图形20的八个关键点进行编号，例如第一关键点200a的序号为0、第二关键点200b的序号为1，以此类推可以将立体图形20的八个关键点的序号设置为如图所示的0至7，然后将这些序号分别对应编码到各个关键点的透明度编码当中，由于立体图形的像素点较多，对关键点的透明度编码进行特殊设置不会对立体图形的整体渲染效果造成过大影响，因此将关键点的用于标识序号的第二特征码设置在透明度编码当中，在不影响立体图形的整体渲染效果的情况下能够根据关键点的透明度编码确定关键点的序号。

在确定关键点的序号以后，可以获取用户预先设置好的各序号之间的连接关系，然后根据各个关键点的序号以及序号连接关系得到各个关键点的连接关系。这样只需要将关键点以序号的形式进行标识，并编码到各个关键点的着色编码的透明度编码当中，用于对序号进行编码的数据量较小，计算复杂度也较低，基于关键点的序号以及预先设定的序号连接关系即可实现将各个关键点进行准确连接。

在一个实施例中，根据位置和连接关系在二维画布中渲染线框的步骤可以包括：

步骤S301，根据各个关键点的位置确定各个关键点在二维画布中的二维坐标。

本步骤主要是根据获取的立体图形的各个关键点的位置从而确定每个关键点在二维画布中的二维坐标。具体来说，可以在由从三维画布的立体图形的各个关键点的三维位置信息中提取出关键点的二维坐标，从而将该二维坐标设置为关键点在二维画布中的二维坐标。

步骤S302，根据各个关键点的连接关系确定各个关键点的连接顺序。

本步骤通过各关键点之间的连接关系确定各个关键点的连线顺序，避免在将关键点进行连接的时候进行多次重复连线。参考图3(a)，第一关键点200a的序号为0，该第一关键点200a与序号为1、3和4的关键点连接，第二关键点200b的序号为1，该第二关键点200b与序号为0、2和5的关键点连接，则根据该连接关系，可以将第一关键点200a和第二关键点200b的连接顺序设置为，第一关键点200a依次连接序号为1、3和4的关键点，第二关键点200b依次连接序号为2和5的关键点，以此类推确定立体图形20的八个关键点的连接顺序。

步骤S303，根据连接顺序在二维画布中将与二维坐标相对应的像素点进行连接，渲染线框。

本步骤是在二维画布中渲染出立体图形的线框。参考图3(b)，图3(b)为一个实施例中线框的示意图，在创建的二维画布中，可以根据立体图形的各个关键点的二维坐标确定与这些二维坐标相对应的像素点的位置，然后根据各个关键点的连接顺序，在二维画布中将与各个关键点的二维坐标对应位置的像素点进行连接，在该二维画布中渲染出立体图形的线框30。

上述实施例能够基于各个关键点在三维画布的位置确定关键点在二维画布的二维坐标，由于线框描边属于二维的图像处理概念，所以在二维画布中就能够实现线框的渲染处理，在明确关键点在二维画布的二维坐标以及各个关键点的连接顺序以后，即可按照该连接顺序将二维画布中对应的各个像素点进行连接，进而在二维画布中完成对立体图形的线框的渲染处理，避免了直接在三维画布中渲染线框带来的复杂度高的问题，而且根据连线顺序将关键点进行连接还能够避免重复连线，提高线框渲染的效率。

在一个实施例中，进一步的，渲染线框的步骤可以包括：

获取设定的线框属性；根据线框属性对线框进行渲染。

本实施例主要是在二维画布中根据设定的线框属性对立体图形的线框进行渲染。其中，线框属性可以包括线宽、线型等参数属性，可以分别对线框的每一条线段进行设置，也就是说用户可以在二维画布中对立体图形线框的线框属性进行设置，在设置完成后，即可根据设置好的线框属性对线框进行二维渲染处理。

本实施例可以在二维画布中依据用户设定的线框属性对立体图形的线框进行渲染，灵活性更高，用户可以根据实际需求调整线框的属性重新渲染，而且二维渲染的处理速度快，在满足渲染需求的同时也保证了渲染效率。

在一个实施例中，在根据位置和连接关系在二维画布中渲染线框的步骤之后，还可以包括：

将二维画布中的线框叠加在三维画布中的立体图形上。

本实施例主要是将渲染好的线框与立体图形进行画布叠加。参考图3(a)，立体图形20为三维画布中的立体图形，参考图3(b)，假设线框30是在二维画布中渲染好的该立体图形20的线框，则可以将该二维画布与该三维画布进行画布叠加，将二维画布中的线框叠加在三维画布中的立体图形上，这样能够将立体图形及其线框进行同时显示，由于线框与立体图形的各个像素的位置是相匹配的，因此将线框30叠加至立体图形20可以得到如图3(c)所示的渲染线框后的立体图形40。由于在二维画布中渲染线框的速度很快，即使在三维画布中对立体图形进行旋转，二维画布中渲染好的线框也能够实时地叠加到三维画布的立体图形上进行显示，实现三维物体和线框的同时渲染。

本发明上述实施例的技术方案可以用于解决浏览器环境下难以渲染立体图形线框的问题。在浏览器环境下，通常基于Canvas中的WebGL来绘制并渲染立体图形，然而WebGL对立体图形的线框进行渲染的支持是很弱的，例如WebGL中对于线段的属性中只有线宽的定义而没有线型定义，而线宽在很多浏览器的支持都是很差的，甚至无法支持WebGL中线段的线宽渲染，即无论线宽设置为多少，始终渲染为1px线宽，本实施例提供一种渲染立体图形线框的方法，可以解决浏览器环境下难以渲染立体图形线框的问题，参考图4，图4为另一个实施例中渲染立体图形线框的方法的流程示意图，该渲染立体图形线框的方法可以包括如下步骤：

步骤S1，创建WebGL画布。

本步骤主要是创建WebGL画布，该WebGL画布主要用于用户绘制立体图形，也就是说，用户可以在该创建的WebGL画布中绘制如长方体、圆柱体等立体图形。

步骤S2，在WebGL画布中渲染立体图形，获取立体图形的各像素点的着色编码。

本步骤是在绘制立体图形后，在WebGL画布中对该立体图形进行3D渲染，并获取该立体图形的各个像素点的着色编码。具体来说，可以通过readPixels指令遍历该WebGL画布的像素点并提取像素点的颜色信息，从而根据WebGL画布中像素点的颜色信息获取立体图形的各个像素点的着色编码。

步骤S3，根据着色编码确定立体图形的各个顶点的二维位置以及连线顺序。

在得到立体图形的各个像素的着色编码后，根据该着色编码识别出立体图形的各个顶点，在浏览器环境下，可以通过gl.POINTS点绘制模式结合shader里的顶点编码着色模式，将立体图形的各个顶点的第一特征码和第二特征码分别编码在r通道和alpha通道当中，其中r通道对应颜色编码中的红色，alpha通道则对应透明编码，第一特征码用于将立体图形的各个顶点与非顶点的其他像素点进行区分，第二特征码与各个顶点的序号一一对应。

具体的，本步骤可以从各个像素点的着色编码中识别出r通道为第一特征码的各个顶点，并获取顶点的横坐标和纵坐标从而得到各个顶点的二维坐标，然后可以从各个顶点的着色编码的alpha通道获取各个顶点的序号以及预先设定的各个序号之间的连接顺序，以图3(a)为例对连线顺序进行说明：序号为0的顶点分别与序号为1和4的顶点连接、序号为1的顶点分别连接序号为2和5的顶点、序号为2的顶点则与序号为6和3的顶点连接、序号为3的顶点连接序号为0和7的顶点、序号为4的顶点与序号为5的顶点连接、序号为5的顶点连接序号为6的顶点、序号为6的顶点与序号为7的顶点连接以及序号为7的顶点连接序号为4的顶点，从而可以得到各个顶点的连线顺序，确保连线时不会重复连线。

步骤S4，创建二维画布，根据各个顶点的二维位置以及连线顺序在二维画布中渲染立体图形的线框。

本步骤主要是创建二维画布，并根据立体图形的各个顶点的二维位置在二维画布中确定于这些二维位置相对应的像素点的位置，然后根据各个顶点的连线顺序将二维画布中的相应像素点连接生成立体图形的线框，最后可以按照用户设定的如线宽、线型等线框属性对该立体图形的线框进行渲染。

步骤S5，将二维画布中的线框叠加至三维画布中的立体图形上。

其中，看可以将二维画布与三维画布进行叠加，使得二维画布中的线框叠加到立体图形上，这样能够将立体图形及其线框进行同时显示。

上述实施例的技术方案，使用二维和三维相结合的渲染方式对浏览器环境下的立体图形进行线框渲染，实现复杂度低，计算效率高，还能够实现线宽、线型等不同线框属性下对线框进行快速渲染，该线框还可以跟随立体图形旋转而实时变化，实现了对三维物体和线框的同时渲染。

在一个实施例中，提供了一种渲染立体图形线框的装置，参考图5，图5为一个实施例中渲染立体图形线框的装置的结构框图，该渲染立体图形线框的装置可以包括：

获取模块101，用于对三维画布中的立体图形进行渲染后，获取立体图形的各像素点的着色编码；

确定模块102，用于根据着色编码确定多个关键点的位置，以及获取各个关键点的连接关系；其中，关键点为用于渲染立体图形的线框的像素点；

渲染模块103，用于根据位置和连接关系在二维画布中渲染线框。

在一个实施例中，确定模块102可以包括：

关键点识别单元，用于根据各像素点的着色编码从各像素点中识别多个关键点；

关系确定单元，用于根据各个关键点的着色编码获取各个关键点的连接关系；

位置获取单元，用于获取各个关键点的二维坐标，根据二维坐标得到各个关键点的位置。

在一个实施例中，关键点识别单元进一步用于：

根据各像素点的着色编码中的颜色编码识别第一特征码；将与第一特征码对应的像素点设为所述关键点。

在一个实施例中，关系确定单元进一步用于：

从关键点的着色编码中提取第二特征码；根据第二特征码确定关键点的序号；根据各个关键点的序号以及设定的序号连接关系得到各个关键点的连接关系。

在一个实施例中，渲染模块103可以包括：

坐标确定单元，用于根据各个关键点的位置确定各个关键点在二维画布中的二维坐标；

顺序确定单元，用于根据各个关键点的连接关系确定各个关键点的连接顺序；

线框渲染单元，用于根据连接顺序在二维画布中将与二维坐标相对应的像素点进行连接，渲染线框。

在一个实施例中，线框渲染单元进一步用于：

获取设定的线框属性；根据线框属性对线框进行渲染。

在一个实施例中，还可以包括：

叠加模块，用于将二维画布中的线框叠加在三维画布中的立体图形上。

本发明的渲染立体图形线框的装置与本发明的渲染立体图形线框的方法一一对应，关于渲染立体图形线框的装置的具体限定可以参见上文中对于渲染立体图形线框的方法的限定，在上述渲染立体图形线框的方法的实施例阐述的技术特征及其有益效果均适用于渲染立体图形线框的装置的实施例中，在此不再赘述。上述渲染立体图形线框的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图6所示，图6为一个实施例中计算机设备的内部结构图。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种渲染立体图形线框的方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图6中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

对三维画布中的立体图形进行渲染后，获取该立体图形的各像素点的着色编码；根据着色编码确定多个关键点的位置，以及获取各个关键点的连接关系；根据位置和连接关系在二维画布中渲染线框。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据各像素点的着色编码从各像素点中识别多个关键点；根据各个关键点的着色编码获取各个关键点的连接关系；获取各个关键点的二维坐标，根据二维坐标得到各个关键点的位置。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据各像素点的着色编码中的颜色编码识别第一特征码；将与第一特征码对应的像素点设为所述关键点。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

从关键点的着色编码中提取第二特征码；根据第二特征码确定关键点的序号；根据各个关键点的序号以及设定的序号连接关系得到各个关键点的连接关系。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

根据各个关键点的位置确定各个关键点在二维画布中的二维坐标；根据各个关键点的连接关系确定各个关键点的连接顺序；根据连接顺序在二维画布中将与二维坐标相对应的像素点进行连接，渲染线框。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

获取设定的线框属性；根据线框属性对线框进行渲染。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将二维画布中的线框叠加在三维画布中的立体图形上。

上述计算机设备，通过所述处理器上运行的计算机程序，通过二维和三维相结合渲染方式实现对立体图形的线框进行渲染，在三维画布中对立体图形进行渲染能够快速获取各像素点的着色编码从而得到关键点的位置以及各关键点的连接关系，并在二维画布中进行线框的渲染，该渲染后的线框还可以用于与三维图形进行画布叠加，实现对三维图形的描框，避免了直接在三维画布中渲染立体图形线框复杂度高的问题，提高了对立体图形的线框进行渲染的效率。

本领域普通技术人员可以理解实现如上任一项实施例所述的渲染立体图形线框的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

据此，在一个实施例中提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

对三维画布中的立体图形进行渲染后，获取该立体图形的各像素点的着色编码；根据着色编码确定多个关键点的位置，以及获取各个关键点的连接关系；根据位置和连接关系在二维画布中渲染线框。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据各像素点的着色编码从各像素点中识别多个关键点；根据各个关键点的着色编码获取各个关键点的连接关系；获取各个关键点的二维坐标，根据二维坐标得到各个关键点的位置。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据各像素点的着色编码中的颜色编码识别第一特征码；将与第一特征码对应的像素点设为所述关键点。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

从关键点的着色编码中提取第二特征码；根据第二特征码确定关键点的序号；根据各个关键点的序号以及设定的序号连接关系得到各个关键点的连接关系。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

根据各个关键点的位置确定各个关键点在二维画布中的二维坐标；根据各个关键点的连接关系确定各个关键点的连接顺序；根据连接顺序在二维画布中将与二维坐标相对应的像素点进行连接，渲染线框。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

获取设定的线框属性；根据线框属性对线框进行渲染。

在一个实施例中，计算机程序被处理器执行时还实现以下步骤：

将二维画布中的线框叠加在三维画布中的立体图形上。

上述计算机可读存储介质，通过其存储的计算机程序，通过二维和三维相结合渲染方式实现对立体图形的线框进行渲染，在三维画布中对立体图形进行渲染能够快速获取各像素点的着色编码从而得到关键点的位置以及各关键点的连接关系，并在二维画布中进行线框的渲染，该渲染后的线框还可以用于与三维图形进行画布叠加，实现对三维图形的描框，避免了直接在三维画布中渲染立体图形线框复杂度高的问题，提高了对立体图形的线框进行渲染的效率。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种渲染立体图形线框的方法，其特征在于，包括步骤：

对三维画布中的立体图形进行渲染后，获取所述立体图形的各像素点的着色编码；

根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系；其中，所述关键点为用于渲染所述立体图形的线框的像素点；

根据所述位置和连接关系在二维画布中渲染所述线框。

2.根据权利要求1所述的渲染立体图形线框的方法，其特征在于，所述根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系的步骤包括：

根据所述各像素点的着色编码从所述各像素点中识别所述多个关键点；其中，所述关键点的着色编码中设有特征码，用于从所述各像素点中识别所述关键点；

根据各个所述关键点的着色编码获取各个所述关键点的连接关系；

获取各个所述关键点的二维坐标，根据所述二维坐标得到各个所述关键点的位置。

3.根据权利要求2所述的渲染立体图形线框的方法，其特征在于，所述根据所述各像素点的着色编码从所述各像素点中识别所述多个关键点的步骤包括：

根据所述各像素点的着色编码中的颜色编码识别第一特征码；其中，所述特征码包括所述第一特征码，所述第一特征码设于所述关键点的着色编码的颜色编码当中，用于从所述各像素点中识别所述关键点；

将与所述第一特征码对应的像素点设为所述关键点。

4.根据权利要求2所述的渲染立体图形线框的方法，其特征在于，所述根据各个所述关键点的着色编码获取各个所述关键点的连接关系的步骤包括：

从所述关键点的着色编码中提取第二特征码；其中，所述特征码包括所述第二特征码，所述第二特征码设于所述关键点的着色编码的透明度编码当中，用于标识所述关键点的序号；

根据所述第二特征码确定所述关键点的序号；

根据各个所述关键点的序号以及设定的序号连接关系得到各个所述关键点的连接关系。

5.根据权利要求1所述的渲染立体图形线框的方法，其特征在于，所述根据所述位置和连接关系在二维画布中渲染所述线框的步骤包括：

根据各个所述关键点的位置确定各个所述关键点在所述二维画布中的二维坐标；

根据各个所述关键点的连接关系确定各个所述关键点的连接顺序；

根据所述连接顺序在所述二维画布中将与所述二维坐标相对应的像素点进行连接，渲染所述线框。

6.根据权利要求5所述的渲染立体图形线框的方法，其特征在于，所述渲染所述线框的步骤包括：

获取设定的线框属性；

根据所述线框属性对所述线框进行渲染。

7.根据权利要求1至6任一项所述的渲染立体图形线框的方法，其特征在于，在所述根据所述位置和连接关系在二维画布中渲染所述线框的步骤之后，还包括：

将所述二维画布中的所述线框叠加在所述三维画布中的所述立体图形上。

8.一种渲染立体图形线框的装置，其特征在于，包括：

获取模块，用于对三维画布中的立体图形进行渲染后，获取所述立体图形的各像素点的着色编码；

确定模块，用于根据所述着色编码确定多个关键点的位置，以及获取各个所述关键点的连接关系；其中，所述关键点为用于渲染所述立体图形的线框的像素点；

渲染模块，用于根据所述位置和连接关系在二维画布中渲染所述线框。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的渲染立体图形线框的方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7任一项所述的渲染立体图形线框的方法的步骤。