CN110489693A - 一种绘制三维图形的方法、装置、介质和电子设备 - Google Patents

Abstract

本发明提供了一种绘制三维图形的方法、装置、介质和电子设备，该绘制三维图形的方法包括：选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；通过预设格式的函数添加预设图形；获取预设图形的各个预设关键点对应的二维坐标；以该选取点的二维坐标作为参照坐标，根据各个预设关键点对应的二维坐标绘制预设图形。本公开绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

Description

一种绘制三维图形的方法、装置、介质和电子设备

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种绘制三维图形的方法、装置、介质和电子设备。

背景技术

在实际工作和生活中，往往需要绘制一些三维图形，以给用户很直观的视觉体验；或者在各种生成式动画中，需要一些三维的线条和简单图形。

现有的做法是，使用类似three.js或者webgl来创建这些三维物体，但是上述这些方法都过于复杂和专业，而且上述这些方法是为解决复杂三维问题准备的，在使用上述方法绘制三维图形的绘制过程中，需要有繁琐的配置过程，而且需要用户花费大量的时间去学习操作上述这些专业的绘图软件。因此，在长期的研发当中，发明人对如何简化绘制三维图形的方法进行了大量的研究，提出了一种绘制三维图形的方法，以解决上述技术问题之一。

发明内容

本发明的目的在于提供一种绘制三维图形的方法、装置、介质和电子设备，能够解决上述提到的至少一个技术问题。具体方案如下：

根据本发明的具体实施方式，第一方面，本公开提供一种绘制三维图形的方法，包括：

选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；

通过预设格式的函数添加预设图形；

获取所述预设图形的各个预设关键点对应的二维坐标；

以该选取点的二维坐标作为参照坐标，根据各个预设关键点对应的二维坐标绘制所述预设图形。

可选的，所述方法还包括：

获取预设绘图API，并根据所述预设绘图API在Web页面上进行所述预设图形对应的二维图形的绘制。

可选的，在所述通过预设格式的函数添加预设图形之前，所述方法包括：

对所述预设图形进行渲染。

可选的，所述对所述预设图形进行渲染包括：

获取对所述预设图形进行渲染的渲染参数；

根据渲染参数生成渲染模板；

通过所述渲染模板对所述预设图形进行渲染；

其中，所述渲染参数至少包括：

标签名、标签相关属性、标签内部的超文本标记语言。

可选的，所述方法还包括：

获取摄像机矩阵和透视矩阵；

根据所述摄像机矩阵和所述透视矩阵生成乘积矩阵。

可选的，所述方法还包括：

获取摄像机矩阵生成参数；

根据所述摄像机矩阵生成参数生成所述摄像机矩阵；

其中，所述摄像机矩阵生成参数至少包括：

摄像机的位置、摄像机原点看向参数、用于表示所述摄像机朝向的正方向参数。

可选的，所述方法还包括：

获取透视矩阵生成参数；

根据所述透视矩阵生成参数生成所述透视矩阵；

其中，所述透视矩阵生成参数至少包括：

所述摄像机的角度参数、缩放图形的比例参数、近体面参数和远体面参数。

根据本发明的具体实施方式，第二方面，本发明提供一种绘制三维图形的装置，包括：

处理单元，用于选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；

添加单元，用于通过预设格式的函数添加预设图形；

获取单元，用于获取所述添加单元添加的所述预设图形的各个预设关键点对应的二维坐标；

绘制单元，用于以所述处理单元得到的该选取点的二维坐标作为参照坐标，根据所述获取单元获取到的各个预设关键点对应的二维坐标绘制所述预设图形。

根据本发明的具体实施方式，第三方面，本发明提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上任一项所述的绘制三维图形的方法。

根据本发明的具体实施方式，第四方面，本发明提供一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上任一项所述的绘制三维图形的方法。

本发明实施例的上述方案与现有技术相比，至少具有以下有益效果：本公开通过提供一种绘制三维图形的方法、装置、介质和电子设备，选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示出了根据本发明实施例的绘制三维图形的方法流程图；

图2示出了根据本发明的实施例的绘制三维图形的装置结构示意图；

图3示出了根据本发明的实施例的电子设备连接结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本发明实施例中可能采用术语第一、第二、第三等来描述……，但这些……不应限于这些术语。这些术语仅用来将……区分开。例如，在不脱离本发明实施例范围的情况下，第一……也可以被称为第二……，类似地，第二……也可以被称为第一……。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者装置中还存在另外的相同要素。

下面结合附图详细说明本发明的可选实施例。

实施例1

如图1所示，根据本公开的具体实施方式，第一方面，本公开提供绘制三维图形的方法，包括：

S102：选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标。

正是通过该步骤，实现了将处于三维世界中的任一选取点的三维坐标转换为二维坐标。

在具体应用场景中，将处于三维世界中的任一选取点的三维坐标转换为二维坐标的实现过程，具体如下所述：

通过传入进来的摄像机配置，能够计算出来透视矩阵和摄像机矩阵，将它们乘起来，得到一个乘积矩阵。

对于任意三维世界中的点(x,y,z)，左乘刚才得到的乘积矩阵就能够得到这个点在这个设定的世界中的二维坐标。

上述转换过程是整个透视投影的核心，所有的三维到二维的转换都通过上述算法来实现的。

S104：通过预设格式的函数添加预设图形。

在具体示例中，向世界中添加node，通过GL对象的add(node:)函数来添加，添加进来的node必须有render方法，这样才能调用绘制。通过添加node，实现对预设图形的添加。

在此步骤中，render是指渲染；

在具体示例中，渲染的过程如下所述：

浏览器根据页面的html代码、css定义、javascript脚本的操作，在浏览器上按照一定的规范显示出相应的内容。

为了更好地明白上述对图形的渲染过程，举个最简单的例子：

<b>这个是粗体显示</b>

浏览器根据上面的代码在浏览器上面显示出粗体的文字，这个过程就叫渲染。

S106：获取预设图形的各个预设关键点对应的二维坐标。

在此步骤中，基于用户想要得到的预设图形不同，针对于该预设图形的各个预设关键点也是不同的。

例如，若用户想要得到的预设图形为三角形，则针对于该预设三角形预先设置有几个预设关键点。

为了精准地绘制出预设三角形，需要获知上述预设关键点的信息：

预设关键点的数量，预设关键点的二维坐标，各个预设关键点之间的相对位置关系，以及绘制各个预设关键点的具体先后次序。

需要说明的是，为了更好地完成上述对预设三角形的绘制过程，需要更加精准地获知各个预设关键点的信息；并在完成对各个预设关键点的绘制之后，按照预先设置的连接顺序，依次将各个预设关键点连接起来，以最终绘制出预设三角形。

需要说明，针对不同的预设图形的各个预设关键点是预先设置的。不同的预设图形，预设图形对应的预设关键点的数量也是不同的。例如，预设图形为三角形时，该预设三角形对应的预设关键点的数量会少些；繁殖，预设图形为四边形时，给预设四边形对应的预设关键点的数量相对于预设三角形而言，预设关键点的数量会多些。

总之，预设图形越复杂，以完成对该预设图形的二维绘制的过程，而预先设置的预设关键点的数量也越多，这样，可以保证将各个预设关键点按照预先设置的顺序连接起来，得到预设图形的线条会更加流畅，预设图形也会更加逼真。

S108：以该选取点的二维坐标作为参照坐标，根据各个预设关键点对应的二维坐标绘制预设图形。

通过将该选取点的二维坐标作为参照坐标，根据获取到的各个预设关键点的数量信息、各个预设关键点相对于参照坐标的二维坐标信息、依次连接各个预设关键点设置的连接次序信息，绘制预设图形。

为了让最终绘制出的预设图形的线条更加流畅，可以多设置一些预设关键点，并对确定预设关键点的模型不断优化，以保证针对于不同预设图形，设置的预设关键点的数量合适，且预设关键点的设置位置也较佳；这样，不仅最终得到的预设图形的线条更加流畅，预设图形也更加逼着，此外，还不会占用大量内存开销，节约了有限的内存资源，提高了绘制三维图形的速度。

此外，本公开提供的绘制三维图形的方法还有如下优势：

1、在不想使用复杂的webgl等三维方案想绘制简单的三维图形的时候，可以使用本公开提供的绘制三维图形的方法绘制三维图形。

2、在不支持webgl的设备上，通过本公开提供的绘制三维图形的方法能够绘制简单的三维图形。

本公开提供的绘制三维图形的方法，

整体设计思路为：一个名为GL的Class，其接受两个参数：

第一个参数为：摄像机选项配置；

第二个参数为：canvas context对象，用来获取canvas信息和后续的绘制；

这个GL类的主要作用是管理整个场景，可以向其中添加各种node，最后调用GL的render方法就能够将物体画出来。

本公开提供的绘制三维图形的方法，通过纯JS实现三维绘制的功能；能够快速的使用JS创造三维图形，而不用调用WebGL的API，在可视化部分需要用到三维图形的时候，能够快速且方便的使用。

其实对于简单的三维图形完全可以使用纯JS来实现绘图，本公开的绘制三维图形的方法，就创建了一个这样的基于纯JavaScript的简单的三维绘制引擎，在绘制三维图形的过程中，涉及到空间转换等相关计算，涉及到的控制转换的计算均是用JS完成的。

可选的，所述方法还包括：

获取预设绘图API，并根据预设绘图API在Web页面上进行预设图形对应的二维图形的绘制。

可选的，在通过预设格式的函数添加预设图形之前，所述方法包括：对预设图形进行渲染。

需要说明的是，所有的render方法内部都是用canvas2d的API来绘制图形，这也让用户能够自己扩展想要的预设图形。

在具体示例中，为了在canvas上绘制，你必须先得到一个画布上下文对象的引用，用本方法即可完成这一操作，格式如下:

context＝canvas.getContext(contextId)。

可选的，对预设图形进行渲染包括：

获取对预设图形进行渲染的渲染参数；

根据渲染参数生成渲染模板；

通过渲染模板对预设图形进行渲染；

其中，渲染参数至少包括：

标签名、标签相关属性、标签内部的超文本标记语言。

可选的，所述方法还包括：

获取摄像机矩阵和透视矩阵；

根据摄像机矩阵和透视矩阵生成乘积矩阵。

可选的，所述方法还包括：

获取摄像机矩阵生成参数；

根据摄像机矩阵生成参数生成摄像机矩阵；

其中，摄像机矩阵生成参数至少包括：

摄像机的位置、摄像机原点看向参数、用于表示摄像机朝向的正方向参数。

可选的，所述方法还包括：

获取透视矩阵生成参数；

根据透视矩阵生成参数生成透视矩阵；

其中，透视矩阵生成参数至少包括：

摄像机的角度参数、缩放图形的比例参数、近体面参数和远体面参数。

本公开通过提供一种绘制三维图形的方法、装置、介质和电子设备，选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

实施例2

如图2所示，根据本公开的具体实施方式，第二方面，本公开提供一种绘制三维图形的装置，所述装置包括处理单元202、添加单元204、获取单元206和绘制单元208等，具体如下：

处理单元202，用于选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标。

正是通过处理单元202，实现了将处于三维世界中的任一选取点的三维坐标转换为二维坐标。

在具体应用场景中，将处于三维世界中的任一选取点的三维坐标转换为二维坐标的实现过程，具体如下所述：

通过传入进来的摄像机配置，能够计算出来透视矩阵和摄像机矩阵，将它们乘起来，得到一个乘积矩阵。

对于任意三维世界中的点(x,y,z)，左乘刚才得到的乘积矩阵就能够得到这个点在这个设定的世界中的二维坐标。

上述转换过程是整个透视投影的核心，所有的三维到二维的转换都通过上述算法来实现的。

添加单元204，用于通过预设格式的函数添加预设图形。

在具体示例中，向世界中添加node，通过GL对象的add(node:)函数来添加，添加进来的node必须有render方法，这样才能调用绘制。通过添加node，实现对预设图形的添加。

需要说明的是，render是指渲染；

在具体示例中，渲染的过程如下所述：

浏览器根据页面的html代码、css定义、javascript脚本的操作，在浏览器上按照一定的规范显示出相应的内容。

为了更好地明白上述对图形的渲染过程，举个最简单的例子：

<b>这个是粗体显示</b>

浏览器根据上面的代码在浏览器上面显示出粗体的文字，这个过程就叫渲染。

获取单元206，用于获取添加单元204添加的预设图形的各个预设关键点对应的二维坐标。

需要说明的是，基于用户想要得到的预设图形不同，针对于该预设图形的各个预设关键点也是不同的。

例如，若用户想要得到的预设图形为三角形，则针对于该预设三角形预先设置有几个预设关键点。

为了精准地绘制出预设三角形，需要获知上述预设关键点的信息：

预设关键点的数量，预设关键点的二维坐标，各个预设关键点之间的相对位置关系，以及绘制各个预设关键点的具体先后次序。

需要说明的是，为了更好地完成上述对预设三角形的绘制过程，需要更加精准地获知各个预设关键点的信息；并在完成对各个预设关键点的绘制之后，按照预先设置的连接顺序，依次将各个预设关键点连接起来，以最终绘制出预设三角形。

需要说明，针对不同的预设图形的各个预设关键点是预先设置的。不同的预设图形，预设图形对应的预设关键点的数量也是不同的。例如，预设图形为三角形时，该预设三角形对应的预设关键点的数量会少些；繁殖，预设图形为四边形时，给预设四边形对应的预设关键点的数量相对于预设三角形而言，预设关键点的数量会多些。

总之，预设图形越复杂，以完成对该预设图形的二维绘制的过程，而预先设置的预设关键点的数量也越多，这样，可以保证将各个预设关键点按照预先设置的顺序连接起来，得到预设图形的线条会更加流畅，预设图形也会更加逼真。

绘制单元208，用于以处理单元202得到的该选取点的二维坐标作为参照坐标，根据获取单元206获取到的各个预设关键点对应的二维坐标绘制预设图形。

可选的，获取单元206还用于：

获取预设绘图API；

绘制单元208还用于：

根据获取单元206获取到的预设绘图API在Web页面上进行添加单元204添加的预设图形对应的二维图形的绘制。

通过将该选取点的二维坐标作为参照坐标，根据获取到的各个预设关键点的数量信息、各个预设关键点相对于参照坐标的二维坐标信息、依次连接各个预设关键点设置的连接次序信息，绘制预设图形。

为了让最终绘制出的预设图形的线条更加流畅，可以多设置一些预设关键点，并对确定预设关键点的模型不断优化，以保证针对于不同预设图形，设置的预设关键点的数量合适，且预设关键点的设置位置也较佳；这样，不仅最终得到的预设图形的线条更加流畅，预设图形也更加逼着，此外，还不会占用大量内存开销，节约了有限的内存资源，提高了绘制三维图形的速度。

可选的，所述装置还包括：

渲染单元(在图2中未示出)，用于在通过预设格式的函数添加预设图形之前，对预设图形进行渲染。

可选的，渲染单元具体用于：

获取对预设图形进行渲染的渲染参数；

根据渲染参数生成渲染模板；

通过渲染模板对预设图形进行渲染；

其中，渲染参数至少包括：

标签名、标签相关属性、标签内部的超文本标记语言。

可选的，获取单元206还用于：

获取摄像机矩阵和透视矩阵；

可选的，所述装置还包括：

乘积矩阵生成单元(在图2中未示出)，用于根据获取单元206获取到的摄像机矩阵和透视矩阵生成乘积矩阵。

可选的，获取单元206还用于：

获取摄像机矩阵生成参数；

可选的，所述装置还包括：

摄像机矩阵生成单元(在图2中未示出)，用于根据获取单元206获取到的摄像机矩阵生成参数生成摄像机矩阵；

其中，获取单元206获取到的摄像机矩阵生成参数至少包括：

摄像机的位置、摄像机原点看向参数、用于表示摄像机朝向的正方向参数。

可选的，获取单元206还用于：

获取透视矩阵生成参数；

可选的，所述装置还包括：

透视矩阵生成单元(在图2中未示出)，用于根据获取单元206获取到的透视矩阵生成参数生成透视矩阵；

其中，获取单元206获取到的透视矩阵生成参数至少包括：

摄像机的角度参数、缩放图形的比例参数、近体面参数和远体面参数。

本公开通过提供一种绘制三维图形的方法、装置、介质和电子设备，选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

实施例3

如图3所示，本实施例提供一种电子设备，该设备用于绘制三维图形的方法，所述电子设备，包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

实施例4

本公开实施例提供了一种非易失性计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的绘制三维图形的方法。

实施例5

下面参考图3，其示出了适于用来实现本公开实施例的电子设备300的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图3示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图3所示，电子设备300可以包括处理装置(例如中央处理器、图形处理器等)301，其可以根据存储在只读存储器(ROM)302中的程序或者从存储装置308加载到随机访问存储器(RAM)303中的程序而执行各种适当的动作和处理。在RAM303中，还存储有电子设备300操作所需的各种程序和数据。处理装置301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出(I/O)接口305也连接至总线304。

通常，以下装置可以连接至I/O接口305：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置306；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置307；包括例如磁带、硬盘等的存储装置308；以及通信装置309。通信装置309可以允许电子设备300与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种装置的电子设备300，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置309从网络上被下载和安装，或者从存储装置308被安装，或者从ROM302被安装。在该计算机程序被处理装置301执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；这样，将三维坐标转换为二维坐标，该绘制三维图形的方法简化了现有的三维图形的绘制过程，而且能够根据用户所需绘制预设图形。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

Claims (10)

1.一种绘制三维图形的方法，其特征在于，包括：

选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；

通过预设格式的函数添加预设图形；

获取所述预设图形的各个预设关键点对应的二维坐标；

以该选取点的二维坐标作为参照坐标，根据各个预设关键点对应的二维坐标绘制所述预设图形。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取预设绘图API，并根据所述预设绘图API在Web页面上进行所述预设图形对应的二维图形的绘制。

3.根据权利要求1所述的方法，其特征在于，在所述通过预设格式的函数添加预设图形之前，所述方法包括：

对所述预设图形进行渲染。

4.根据权利要求3所述的方法，其特征在于，所述对所述预设图形进行渲染包括：

获取对所述预设图形进行渲染的渲染参数；

根据渲染参数生成渲染模板；

通过所述渲染模板对所述预设图形进行渲染；

其中，所述渲染参数至少包括：

标签名、标签相关属性、标签内部的超文本标记语言。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

获取摄像机矩阵和透视矩阵；

根据所述摄像机矩阵和所述透视矩阵生成乘积矩阵。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

获取摄像机矩阵生成参数；

根据所述摄像机矩阵生成参数生成所述摄像机矩阵；

其中，所述摄像机矩阵生成参数至少包括：

摄像机的位置、摄像机原点看向参数、用于表示所述摄像机朝向的正方向参数。

7.根据权利要求5所述的方法，其特征在于，所述方法还包括：

获取透视矩阵生成参数；

根据所述透视矩阵生成参数生成所述透视矩阵；

其中，所述透视矩阵生成参数至少包括：

所述摄像机的角度参数、缩放图形的比例参数、近体面参数和远体面参数。

8.一种绘制三维图形的装置，其特征在于，包括：

处理单元，用于选取处于三维世界中的任一选取点，根据该选取点的三维向量坐标和乘积矩阵，得到该选取点的二维坐标；

添加单元，用于通过预设格式的函数添加预设图形；

获取单元，用于获取所述添加单元添加的所述预设图形的各个预设关键点对应的二维坐标；

绘制单元，用于以所述处理单元得到的该选取点的二维坐标作为参照坐标，根据所述获取单元获取到的各个预设关键点对应的二维坐标绘制所述预设图形。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1至7中任一项所述的方法。

10.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如权利要求1至7中任一项所述的方法。