CN115830200A - 三维模型的生成方法、三维图形的渲染方法、装置及设备 - Google Patents

Abstract

本发明涉及图形处理技术领域，公开了一种三维模型的生成方法、三维图形的渲染方法、装置及设备。其中，生成方法包括：获取待生成三维模型所对应的父元素以及对应于父元素的多个子元素；响应于对父元素的第一声明操作，基于第一声明操作控制对应于父元素的所有子元素处于三维空间；基于预设渲染规则对各个子元素进行排列，生成目标三维模型。渲染方法包括：封装渲染组件，生成文本对象模型组件库；获取待渲染二维图元对应的参数配置信息，从文本对象模型组件库中确定出目标渲染组件；基于目标渲染组件对该待渲染二维图元进行三维渲染，得到三维图形。通过实施本发明技术方案，提高了三维图形的渲染速度，使得三维图形加载更加流畅。

Description

三维模型的生成方法、三维图形的渲染方法、装置及设备

技术领域

本发明涉及图形处理技术领域，具体涉及一种三维模型的生成方法、三维图形的渲染方法、装置及设备。

背景技术

现如今三维(3D)软件对于三维图形的渲染，基本都是采用绘图协议WEBGL技术来实现的。对于复杂度较高的3D渲染场景而言，通过3D软件较好的渲染效果，但是通过3D软件进行三维立体渲染，需要专业的3D建模人员以及专业的3D渲染技术开发人员，导致采用3D软件进行三维立体渲染的学习成本及建模成本较高。

然而，对于复杂度不高的网页渲染等3D场景而言，此时在网页端运行采用3D软件进行图形渲染，就需要下载大量WEBGL的相关插件和组件。但是，对于网页端而言，由于机器性能的局限性，其下载速度难以保证，从而采用3D软件进行图形渲染存在渲染速度慢、图形难以流畅加载的问题，导致3D图形的渲染效果不理想。

发明内容

有鉴于此，本发明实施例提供了一种三维模型的生成方法、三维图形的渲染方法、装置及设备，以解决现有3D渲染方法对于复杂度不高的网页渲染等3D渲染场景存在渲染效果不理想的问题。

根据第一方面，本发明实施例提供了一种三维模型的生成方法，包括：获取待生成三维模型所对应的父元素以及对应于所述父元素的多个子元素，所述父元素和多个所述子元素为基于文本对象模型的节点；响应于对所述父元素的第一声明操作，基于所述第一声明操作控制对应于所述父元素的所有所述子元素处于三维空间；基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型。

本发明实施例提供的三维模型的生成方法，通过获取针对于待生成三维模型的父元素以及子元素，并对其父元素进行声明以保证子元素处于三维空间，继而根据预设渲染规则对各个子元素进行渲染即可得到目标三维模型。父元素和子元素均是基于文本对象模型的节点，网页端本身能够支持文本对象模型的网页元素，无需下载相关插件即可实现三维模型的构建，提高了三维图形的渲染速度，同时，由于子元素为网页端的原生元素，使得三维图形加载更加流畅。

结合第一方面，在第一方面的第一实施方式中，在所述基于预设渲染规则对各个所述子元素进行排列之前，还包括：响应于对所述子元素的第二声明操作，基于所述第二声明操作控制所述子元素脱离文档流。

本发明实施例提供的三维模型的生成方法，支持对子元素进行声明以使子元素能够脱离文档流，便于后续三维图形的渲染操作。

结合第一方面或第一方面第一实施方式，在第一方面的第二实施方式中，所述基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型，包括：基于所述预设渲染规则构建针对于所述子元素的位置变换矩阵，所述预设渲染规则包括：旋转、斜切、缩放、平移中的一种或多种；基于所述位置变换矩阵调整所述子元素的位置，得到所述子元素的目标三维位置；按照所述目标三维位置生成所述目标三维模型。

本发明实施例提供的三维模型的生成方法，通过预设渲染规则构建针对于子元素的位置变换矩阵，按照该位置变换矩阵对各个子元素进行排列，得到各个子元素的目标三维位置，继而按照各个子元素的排列顺序连接目标位置得到相应的目标三维模型，由此基于文本对象模型的节点实现了三维模型的拼装，达到了三维图形的渲染效果。

根据第二方面，本发明实施例提供了一种三维图形的渲染方法，包括：基于第一方面所述的三维模型的生成方法封装渲染组件，生成文本对象模型组件库；获取待渲染二维图元对应的参数配置信息；基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件；基于所述目标渲染组件对所述待渲染二维图元进行三维渲染，得到对应于所述待渲染二维图元的三维图形。

本发明实施例提供的三维图形的渲染方法，将三维模型封装为渲染组件，在将二维图元转换为三维图形时，只需创建合适的二维图元作为贴图直接调用相应的目标渲染组件即可实现三维图形渲染，无需下载大量组件，对于复杂度不高的3D渲染场景，该方法在最大程度上保证了加载速度，从而保证了三维图形的渲染速度。

结合第二方面，在第二方面的第一实施方式中，所述获取待渲染二维图元的参数配置信息，包括：响应于针对于所述待渲染二维图元的配置操作，得到与所述配置操作对应的脚本信息；从所述脚本信息中提取所述参数配置信息。

本发明实施例提供的三维图形的渲染方法，支持待渲染二维图元的配置，从而实现了三维图形的灵活渲染。

结合第二方面，在第二方面的第二实施方式中，所述基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件，包括：从所述参数配置信息中提取所述待渲染二维图元对应的类型标识；基于所述类型标识遍历所述文本对象模型组件库，确定出与所述类型标识相对应的目标渲染组件。

本发明实施例提供的三维模型的生成方法，通过提取相应的类型标识，便于从文本对象模型组件库中确定出相应的目标渲染组件，保证了三维图形渲染的准确度。

根据第三方面，本发明实施例提供了一种三维模型的生成装置，包括：第一获取模块，用于获取待生成三维模型所对应的父元素以及对应于所述父元素的多个子元素，所述父元素和多个所述子元素为基于文本对象模型的节点；第一响应模块，用于响应于对所述父元素的第一声明操作，基于所述第一声明操作控制对应于所述父元素的所有所述子元素处于三维空间；生成模块，用于基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型。

根据第四方面，本发明实施例提供了一种三维图形的渲染装置，包括：封装模块，用于基于第一方面任一项所述的三维模型的生成方法封装渲染组件，生成文本对象模型组件库；第二获取模块，用于获取待渲染二维图元对应的参数配置信息；确定模块，用于基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件；渲染模块，用于基于所述目标渲染组件对所述待渲染二维图元进行三维渲染，得到对应于所述待渲染二维图元的三维图形。

根据第五方面，本发明实施例提供了一种电子设备，包括：存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行第一方面或第一方面任一实施方式所述的三维模型的生成方法，或执行第二方面或第二方面任一实施方式所述的三维图形的渲染方法。

根据第六方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行第一方面或第一方面任一实施方式所述的三维模型的生成方法，或执行第二方面或第二方面任一实施方式所述的三维图形的渲染方法。

需要说明的是，本发明实施例提供的三维图形的生成装置、三维图形的渲染装置、电子设备以及计算机可读存储介质的相应有益效果，请参见三维模型的生成方法以及三维图形的渲染方法中相应内容的描述，在此不再赘述。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的三维模型的生成方法的流程图；

图2是根据本发明实施例的三维模型的生成方法的另一流程图；

图3是根据本发明实施例的三维平移方向的示意图；

图4是根据本发明实施例的三维图形的渲染方法的流程图；

图5是根据本发明实施例的三维图形的渲染方法的另一流程图；

图6是根据本发明实施例的三维图形的生成装置的结构框图；

图7是根据本发明实施例的三维图形的渲染装置的结构框图；

图8是本发明实施例提供的电子设备的硬件结构示意图。

具体实施方式

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

现如今三维(3D)软件对于三维图形的渲染，基本都是采用绘图协议WEBGL技术来实现的。对于复杂度较高的3D渲染场景而言，通过3D软件较好的渲染效果，但是通过3D软件进行三维立体渲染，需要专业的3D建模人员以及专业的3D渲染技术开发人员，导致采用3D软件进行三维立体渲染的学习成本及建模成本较高。

具体地，采用3D软件进行渲染存在缺陷：(1)3D软件建模需要时间成本；(2)运行3D软件需要在网页端下载大量WEBGL的相关插件和组件，WEBGL技术对模型依赖性较强，完成一个渲染场景需要很多的3D模型去堆砌，对网页来说，下载速度慢且卡顿，无法流畅加载；(3)WEBGL技术需要对数学算法、相关库以及插件进行熟练掌握，学习成本较高。

基于此，本技术方案基于文本对象模型(document object model，dom)的节点进行3D模型的组装，由于浏览器本身能够支持dom的相关功能，因此无需下载针对于网页元素dom的相关插件和组件，避免下载速度受限而影响图形加载速度，提高了渲染速度。同时，dom技术只需要了解层叠样式表(Cascading Style Sheets 3，CSS3)这一计算机语言即可，减少了学习成本。

根据本发明实施例，提供了一种三维模型的生成方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

在本实施例中提供了一种三维模型的生成方法，可用于电子设备，如手机、平板电脑、电脑、服务器等，图1是根据本发明实施例的三维模型的生成方法的流程图，如图1所示，该流程包括如下步骤：

S11，获取待生成三维模型所对应的父元素以及对应于父元素的多个子元素。

其中，父元素和多个子元素为基于文本对象模型的节点。

待生成三维模型用于表征需要转换为三维模型的二维模型，即将二维平面图形转换为三维立体图形。父元素和子元素均为dom元素，即文本对象模型的节点。

具体地，技术人员可以通过CSS3技术设定待生成三维模型的父元素及其对应的子元素，相应地，电子设备可以响应技术人员的操作以获取待生成三维模型的父元素及其对应的多个子元素。

S12，响应于对父元素的第一声明操作，基于第一声明操作控制对应于父元素的所有子元素处于三维空间。

第一声明操作用于表征其所嵌套的子元素在三维空间中的呈现。具体地，技术人员可以通过CSS3语言对父元素进行声明：transformStyle＝"preserve-3d"，相应地，电子设备可以响应该第一声明操作，生成与该第一声明操作相对应的控制指令，继而根据该控制指令使当前父元素所对应的所有子元素均处于3D空间中，以便进行立体操作。

S13，基于预设渲染规则对各个子元素进行排列，生成目标三维模型。

预设渲染规则为根据二维图形与三维图形之间的转换关系所预先设定的模型生成规则，例如旋转规则、斜切规则、缩放规则、平移规则等。

具体地，电子设备在将二维图形转换为三维图形时，可以调用预设渲染规则，并按照预设渲染规则对各个子元素进行相应的三维渲染以及排列，得到相应的目标三维模型。

本实施例提供的三维模型的生成方法，通过获取针对于待生成三维模型的父元素以及子元素，并对其父元素进行声明以保证子元素处于三维空间，继而根据预设渲染规则对各个子元素进行渲染即可得到目标三维模型。父元素和子元素均是基于文本对象模型的节点，网页端本身能够支持文本对象模型的网页元素，无需下载相关插件即可实现三维模型的构建，提高了三维图形的渲染速度，同时，由于子元素为网页端的原生元素，使得三维图形加载更加流畅。

在本实施例中提供了一种三维模型的生成方法，可用于电子设备，如手机、平板电脑、电脑、服务器等，图2是根据本发明实施例的三维模型的生成方法的流程图，如图2所示，该流程包括如下步骤：

S21，获取待生成三维模型所对应的父元素以及对应于父元素的多个子元素，其中，父元素和多个所述子元素为基于文本对象模型的节点。

详细说明参见上述实施例对应的相关描述，此处不再赘述。

S22，响应于对子元素的第二声明操作，基于第二声明操作控制子元素脱离文档流。

第二声明操作用于表征其子元素在三维空间中所采用的定位方法的类型，该定位方法包括静态定位、相对定位、绝对定位以及固定定位。为了保证所有的子元素能够具备脱离文档流的能力，此处可以将子元素声明为绝对定位的元素，即position:absolute，该子元素的位置则能够通过"left","top","right"以及"bottom"等属性进行设定。

S23，响应于对父元素的第一声明操作，基于第一声明操作控制对应于父元素的所有子元素处于三维空间。

详细说明参见上述实施例对应的相关描述，此处不再赘述。

S24，基于预设渲染规则对各个子元素进行排列，生成目标三维模型。

具体地，上述步骤S24可以包括：

S241，基于预设渲染规则构建针对于子元素的位置变换矩阵。

其中，预设渲染规则包括旋转、斜切、缩放、平移中的一种或多种。

位置变换矩阵为控制各个子元素在3D空间中进行旋转、斜切、缩放、平移、等分等基本操作的立体矩阵。该位置变换矩阵的表现形式为：transform:matrix(a,b,c,d,e,f,0,0,1)。其中，参数a、b、c、d、e、f分别控制不同的变换，具体地，参数a控制水平缩放；参数b控制水平拉伸；参数c控制垂直拉伸；参数d控制垂直缩放；参数e控制水平位移；参数f控制垂直位移。

需要说明的是，由于matrix()API中，只包含有6个参数，但是对于3D空间而言，其实际上是需要9个参数的，此处对后续的3个参数进行了默认值的处理，即以0、0、1这三个值作为矩阵的填充，继而构成针对于子元素的位置变换矩阵。

S242，基于位置变换矩阵调整子元素的位置，得到子元素的目标三维位置。

由于子元素在二维平面坐标系中，只有横轴坐标x和纵轴坐标y，所以对子元素进行变换，实际上在于对子元素所对应的坐标值(x,y)进行变换。此时在二维的基础上，添加第3个值“1”，即将二维坐标转换为三维坐标(x,y,1)^T。继而根据位置变换矩阵与各个子元素的三维坐标相乘，即可得到各个子元素的三维坐标值，该三维坐标值即表征子元素在三维空间中的目标三维位置。

S243，按照目标三维位置生成目标三维模型。

电子设备按照各个子元素所对应的目标三维位置进行依次连接，即可得到一个封闭的空间模型，该封闭的空间模型即为目标三维模型。

此处以一个立方体的生成为例进行说明，具体实现步骤如下：

(1)声明立方体的父元素的属性为：transform-style:preserve-3d，则父元素对应的所有子元素均具备了3D空间的能力；

(2)声明立方体的父元素的属性为：position:absolute，则父元素所对应的所有子元素均具备了脱离文档流的能力；

(3)设定父元素所对应父容器的高度为200px，宽度为200px，并设定子元素的类名元素，将其分别命名为：front、back、left、right、bottom、top，其分别对应于立方体的正面、反面、左面、右面、底面、顶面；

(4)以图3所示的三维平移方向为例，以div.fornt作为立方体的正面，规定宽高都为200px，此处让其沿着Z轴平移100px，正好是自身的高度的一半；以div.back作为立方体的背面，正面的已经往Z轴的方向平移100px，那么背面则以Z轴相反的方向平移-100px。由此在Z轴方向就构成了空间为200px的距离，与自身宽高保持一致。

同理，以div.right作为立方体的右面，将该面沿着Y轴顺时针旋转90deg至和Y轴平行，在沿着Z轴的负方向平移100px(transform:rotateY(90degtranslateZ(100px))；以div.left作为立方体的左面，将其沿着Y轴先顺时针旋转90deg，以和坐标系Y轴平行，再沿着Z轴方向平移100px(transform:rotateY(90deg)translateZ(-100px))。由此形成与自身宽高一致的空间为200px的距离。

同理，以div.bottom作为立方体的底面，将该面沿着X轴方向旋转90deg至和X轴平行，在沿着Z轴的正方向平移100px(transform:rotateX(90deg)translateZ(100px))；以div.top作为立方体的顶面，将该面沿着X轴的旋转90deg至X轴平行，在沿着Z轴的负方向平移100px(transform:rotateX(90deg)translateZ(-100px))。由此形成与自身宽高一致的空间为200px的距离。

(5)按照各个面在3D空间中的三维位置进行拼接，即可得到200*200*200的立方体。

对于3D圆柱的实现，其基本实现方式主要是：基于微积分思想将一个圆等分为N等分，在圆的弧面切的足够小的时候，其中间的中轴线无线近似于圆半径。那么圆弧的长度就可以近似为：

red＝Math.tan((angle/2)*π/180)*r*2

其中，angle表示对圆进行等分的角度，当对一个圆分的很细的时候，angle值越小，圆越近似；π表示圆周率；r表示圆的半径；red表示圆弧长度，近似为片的宽度。

此处将圆以圆心为原点进行象限划分，具体地，将360deg划分为4份：0-90deg、90-180deg、180-270deg、270-360deg，该4份对应四个象限。依据生成立方体的方式，分别对各个象限中的子元素进行旋转、平移等，即可在各个象限中生成对应于3D圆柱的1/4个圆柱体。将4个象限中生成的1/4个圆柱体进行拼接，即可得到完整的3D圆柱体。

对于3D球的实现，其基本实现方式主要是：采用积分的方式，对3D空间球按照由上至下的方向进行空间横切，得到的半径从0-r、宽度从0-2r的空间切片。具体如下：

(1)将父元素(父节点)设置为：transform-style:preserve-3d，使父元素对应的各个子元素均具备3D空间的能力。

(2)将每个子元素的宽度和高度都设置为2*r，继而对该空间切片进行圆角设置：borderRadius:50％，由此即可得到每个子元素对应的圆片。

(3)基于预设算法对每个圆片的高度进行抬升：transform:`translateZ(zpx)`，其宽度和高度均为dpx，左偏移leftpx，上偏移toppx。其中，z＝r*cos(angle)；d＝2*r*sin(angle)；left＝r-r*sin(angle)；top＝r-r*sin(angle)；angle为对圆进行等分的角度，即分片的角度，角度angle的值越小，得到的3D球越精细。

本实施例提供的三维模型的生成方法，支持对子元素进行声明以使子元素能够脱离文档流，便于后续三维图形的渲染操作。通过预设渲染规则构建针对于子元素的位置变换矩阵，按照该位置变换矩阵对各个子元素进行排列，得到各个子元素的目标三维位置，继而按照各个子元素的排列顺序连接目标位置得到相应的目标三维模型，由此基于文本对象模型的节点实现了三维模型的拼装，达到了三维图形的渲染效果。

根据本发明实施例，提供了一种三维图形的渲染方法的实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

在本实施例中提供了一种三维图形的渲染方法，可用于电子设备，如手机、平板电脑、电脑、服务器等，图4是根据本发明实施例的三维图形的渲染方法的流程图，如图4所示，该流程包括如下步骤：

S31，基于三维模型的生成方法封装渲染组件，生成文本对象模型组件库。

渲染组件为用于将二维图形转换为三维图形的组件。文本对象模型组件库由多个不同类型的渲染组件构成的，例如立方体渲染组件、圆柱渲染组件、圆锥渲染组件等。文本对象模型组件库部署在电子设备中，电子设备能够直接调用其中所包含的任一渲染组件。其中，渲染组件中集成有上述实施例中所述的三维模型的生成方法，电子设备通过调用渲染组件来执行相应的三维模型的生成方法。

S32，获取待渲染二维图元对应的参数配置信息。

参数配置信息表示渲染二维图元所需配置的三维参数。具体地，参数配置信息包括属性、调用函数、尺寸参数、待渲染二维图元的唯一性标识等，此处对参数配置信息不作具体限定，本领域技术人员可以根据实际需求予以确定。

电子设备中设置有CSS3的语言编辑器，技术人员可以通过该语言编辑器进行二维图元渲染的相关配置。相应地，电子设备则可以获取到技术人员通过语言编辑器输入的参数配置信息。

S33，基于参数配置信息从文本对象模型组件库中确定出目标渲染组件。

目标渲染组件为渲染二维图元所需的渲染组件。电子设备对参数配置信息进行解析，确定当前参数配置信息所对应的渲染类型。根据该渲染类型查询文本对象模型组件库，以从文本对象模型组件库中确定出相应的目标渲染组件。

S34，基于目标渲染组件对该待渲染二维图元进行三维渲染，得到对应于待渲染二维图元的三维图形。

电子设备调用目标渲染组件，通过目标渲染组件所对应的三维模型生成方法对当前的待渲染二维图元进行三维渲染，以将该二维图元转换为三维图形。

本实施例提供的三维图形的渲染方法，将三维模型封装为渲染组件，在将二维图元转换为三维图形时，只需创建合适的二维图元作为贴图直接调用相应的目标渲染组件即可实现三维图形渲染，无需下载大量组件，对于复杂度不高的3D渲染场景，该方法在最大程度上保证了加载速度，从而保证了三维图形的渲染速度。

在本实施例中提供了一种三维图形的渲染方法，可用于电子设备，如手机、平板电脑、电脑、服务器等，图5是根据本发明实施例的三维图形的渲染方法的流程图，如图5所示，该流程包括如下步骤：

S41，基于三维模型的生成方法封装渲染组件，生成文本对象模型组件库。

详细说明参见上述实施例对应的相关描述，此处不再赘述。

S42，获取待渲染二维图元对应的参数配置信息。

具体地，上述步骤S42可以包括：

S421，响应于针对于待渲染二维图元的配置操作，得到与配置操作对应的脚本信息。

配置操作为技术人员通过电子设备的输入接口实现参数配置信息输入的操作。其中，该输入接口可以为键盘，可以为鼠标，还可以触摸屏等，此处对输入接口不作限定，只要能够实现参数配置信息的输入即可。

相应地，电子设备能够响应上述配置操作，并将该配置操作所实现的属性、函数、参数、动画等配置进行json配置转换，生成与当前配置操作相对应的脚本信息。

S422，从脚本信息中提取参数配置信息。

脚本信息中包含有二维图元的参数配置信息，电子设备可以通过解析脚本信息从中提取出相应的参数配置信息。

S43，基于参数配置信息从文本对象模型组件库中确定出目标渲染组件。

具体地，上述步骤S43可以包括：

S431，从参数配置信息中提取待渲染二维图元对应的类型标识。

类型标识表示待渲染二维图形所需渲染得到的三维图形。电子设备可以对参数配置信息进行解析，从中解析出当前待渲染二维图元所对应的类型标识，例如，当解析到类型标识为“cube”时，可以确定所需渲染的三维图形为立方体。

S432，基于类型标识遍历文本对象模型组件库，确定出与类型标识相对应的目标渲染组件。

文本对象模型组件库中包含有各个类型的渲染组件，电子设备根据识别得到的类型标识查询文本对象模型组件库，从中确定与类型标识相匹配的目标的渲染组件。

需要说明的是，参数配置信息中可以配置有一种或多种类型标识，当从参数配置信息中解析得到多个类型标识时，则从文本对象模型组件库中匹配出多个渲染组件，并根据多个渲染组件依次进行三维图形的渲染。

S44，基于目标渲染组件对该待渲染二维图元进行三维渲染，得到对应于待渲染二维图元的三维图形。

详细说明参见上述实施例对应的相关描述，此处不再赘述。

本实施例提供的三维图形的渲染方法，支持待渲染二维图元的配置，从而实现了三维图形的灵活渲染。通过提取相应的类型标识，便于从文本对象模型组件库中确定出相应的目标渲染组件，保证了三维图形渲染的准确度。

在本实施例中还提供了一种三维模型的生成装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

本实施例提供一种三维模型的生成装置，如图6所示，包括：

第一获取模块51，用于获取待生成三维模型所对应的父元素以及对应于父元素的多个子元素。其中，父元素和多个子元素为基于文本对象模型的节点。

第一响应模块52，用于响应于对父元素的第一声明操作，基于第一声明操作控制对应于父元素的所有子元素处于三维空间。

生成模块53，用于基于预设渲染规则对各个子元素进行排列，生成目标三维模型。

可选地，上述三维模型的生成装置还可以包括：

第二响应模块，用于响应于对子元素的第二声明操作，基于第二声明操作控制子元素脱离文档流。

可选地，上述生成模块53可以包括：

构建子模块，用于基于预设渲染规则构建针对于子元素的位置变换矩阵。其中，预设渲染规则包括旋转、斜切、缩放、平移中的一种或多种。

调整子模块，用于基于位置变换矩阵调整子元素的位置，得到子元素的目标三维位置。

生成子模块，用于按照目标三维位置生成目标三维模型。

本实施例中的三维模型的生成装置是以功能单元的形式来呈现，这里的单元是指ASIC电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。

上述各模块的更进一步的功能描述与上述对应实施例相同，在此不再赘述。

本实施例提供的三维模型的生成装置，通过获取针对于待生成三维模型的父元素以及子元素，并对其父元素进行声明以保证子元素处于三维空间，继而根据预设渲染规则对各个子元素进行渲染即可得到目标三维模型。父元素和子元素均是基于文本对象模型的节点，网页端本身能够支持文本对象模型的网页元素，无需下载相关插件即可实现三维模型的构建，提高了三维图形的渲染速度，同时，由于子元素为网页端的原生元素，使得三维图形加载更加流畅。

在本实施例中还提供了一种三维图形的渲染装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

本实施例提供一种三维图形的渲染装置，如图7所示，包括：

封装模块61，用于基于三维模型的生成方法封装渲染组件，生成文本对象模型组件库。

第二获取模块62，用于获取待渲染二维图元对应的参数配置信息。

确定模块63，用于基于参数配置信息从文本对象模型组件库中确定出目标渲染组件。

渲染模块64，用于基于目标渲染组件对该待渲染二维图元进行三维渲染，得到对应于待渲染二维图元的三维图形。

可选地，上述第二获取模块62可以包括：

第三响应子模块，用于响应于针对于待渲染二维图元的配置操作，得到与配置操作对应的脚本信息。

第一提取子模块，用于从脚本信息中提取参数配置信息。

可选地，上述确定模块63可以包括：

第二提取子模块，用于从参数配置信息中提取待渲染二维图元对应的类型标识。

确定子模块，用于基于类型标识遍历文本对象模型组件库，确定出与类型标识相对应的目标渲染组件。

本实施例中的三维图形的渲染装置是以功能单元的形式来呈现，这里的单元是指ASIC电路，执行一个或多个软件或固定程序的处理器和存储器，和/或其他可以提供上述功能的器件。

上述各模块的更进一步的功能描述与上述对应实施例相同，在此不再赘述。

本实施例提供的三维图形的渲染装置，将三维模型封装为渲染组件，在将二维图元转换为三维图形时，只需创建合适的二维图元作为贴图直接调用相应的目标渲染组件即可实现三维图形渲染，无需下载大量组件，对于复杂度不高的3D渲染场景，该方法在最大程度上保证了加载速度，从而保证了三维图形的渲染速度。

本发明实施例还提供一种电子设备，具有上述图6所示的三维图形的生成装置，或上述图7所示的三维图形的渲染装置。

请参阅图8，图8是本发明可选实施例提供的一种电子设备的结构示意图，如图8所示，该电子设备可以包括：至少一个处理器701，例如中央处理器(Central ProcessingUnit，CPU)，至少一个通信接口703，存储器704，至少一个通信总线702。其中，通信总线702用于实现这些组件之间的连接通信。其中，通信接口703可以包括显示屏(Display)、键盘(Keyboard)，可选通信接口703还可以包括标准的有线接口、无线接口。存储器704可以是高速易挥发性随机存取存储器(Random Access Memory，RAM)，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器704可选的还可以是至少一个位于远离前述处理器701的存储装置。其中处理器701可以结合图6或图7所描述的装置，存储器704中存储应用程序，且处理器701调用存储器704中存储的程序代码，以用于执行上述任一方法步骤。

其中，通信总线702可以是外设部件互连标准(peripheral componentinterconnect，PCI)总线或扩展工业标准结构(extended industry standardarchitecture，EISA)总线等。通信总线702可以分为地址总线、数据总线、控制总线等。为便于表示，图8中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

其中，存储器704可以包括易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器也可以包括非易失性存储器(non-volatilememory)，例如快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)；存储器704还可以包括上述种类的存储器的组合。

其中，处理器701可以是中央处理器(central processing unit，CPU)，网络处理器(network processor，NP)或者CPU和NP的组合。

其中，处理器701还可以进一步包括硬件芯片。上述硬件芯片可以是专用集成电路(application-specific integrated circuit，ASIC)，可编程逻辑器件(programmablelogic device，PLD)或其组合。上述PLD可以是复杂可编程逻辑器件(complexprogrammable logic device，CPLD)，现场可编程逻辑门阵列(field-programmable gatearray，FPGA)，通用阵列逻辑(generic array logic,GAL)或其任意组合。

可选地，存储器704还用于存储程序指令。处理器701可以调用程序指令，实现如本申请上述实施例中所示的三维模型的生成方法或三维图形的渲染方法。

本发明实施例还提供了一种非暂态计算机存储介质，所述计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的三维模型的生成方法以及三维图形的渲染方法。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random Access Memory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。

Claims (10)

1.一种三维模型的生成方法，其特征在于，包括：

获取待生成三维模型所对应的父元素以及对应于所述父元素的多个子元素，所述父元素和多个所述子元素为基于文本对象模型的节点；

响应于对所述父元素的第一声明操作，基于所述第一声明操作控制对应于所述父元素的所有所述子元素处于三维空间；

基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型。

2.根据权利要求1所述的方法，其特征在于，在所述基于预设渲染规则对各个所述子元素进行排列之前，还包括：

响应于对所述子元素的第二声明操作，基于所述第二声明操作控制所述子元素脱离文档流。

3.根据权利要求1或2所述的方法，其特征在于，所述基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型，包括：

基于所述预设渲染规则构建针对于所述子元素的位置变换矩阵，所述预设渲染规则包括：旋转、斜切、缩放、平移中的一种或多种；

基于所述位置变换矩阵调整所述子元素的位置，得到所述子元素的目标三维位置；

按照所述目标三维位置生成所述目标三维模型。

4.一种三维图形的渲染方法，其特征在于，包括：

基于权利要求1-3任一项所述的三维模型的生成方法封装渲染组件，生成文本对象模型组件库；

获取待渲染二维图元对应的参数配置信息；

基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件；

基于所述目标渲染组件对所述待渲染二维图元进行三维渲染，得到对应于所述待渲染二维图元的三维图形。

5.根据权利要求4所述的方法，其特征在于，所述获取待渲染二维图元的参数配置信息，包括：

响应于针对于所述待渲染二维图元的配置操作，得到与所述配置操作对应的脚本信息；

从所述脚本信息中提取所述参数配置信息。

6.根据权利要求4所述的方法，其特征在于，所述基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件，包括：

从所述参数配置信息中提取所述待渲染二维图元对应的类型标识；

基于所述类型标识遍历所述文本对象模型组件库，确定出与所述类型标识相对应的目标渲染组件。

7.一种三维模型的生成装置，其特征在于，包括：

第一获取模块，用于获取待生成三维模型所对应的父元素以及对应于所述父元素的多个子元素，所述父元素和多个所述子元素为基于文本对象模型的节点；

第一响应模块，用于响应于对所述父元素的第一声明操作，基于所述第一声明操作控制对应于所述父元素的所有所述子元素处于三维空间；

生成模块，用于基于预设渲染规则对各个所述子元素进行排列，生成目标三维模型。

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

封装模块，用于基于权利要求1-3任一项所述的三维模型的生成方法封装渲染组件，生成文本对象模型组件库；

第二获取模块，用于获取待渲染二维图元对应的参数配置信息；

确定模块，用于基于所述参数配置信息从所述文本对象模型组件库中确定出目标渲染组件；

渲染模块，用于基于所述目标渲染组件对所述待渲染二维图元进行三维渲染，得到对应于所述待渲染二维图元的三维图形。

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

存储器和处理器，所述存储器和所述处理器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而执行权利要求1-3任一项所述的三维模型的生成方法，或执行权利要求4-6任一项所述的三维图形的渲染方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行权利要求1-3任一项所述的三维模型的生成方法，或执行权利要求4-6任一项所述的三维图形的渲染方法。

Images