带宽度的弧线渲染方法及计算机程序产品与流程

1.本公开涉及图像技术领域，具体涉及一种带宽度的3d弧线渲染方法及计算机程序产品。


背景技术：

2.在地图可视化领域中，带有宽度的线是可视化场景中不可或缺的一种渲染类型。宽线类型大致分为三类：贴地带状宽线、弧度带状宽线以及弧度柱状宽线。其中，贴地带状宽线主要应用在描述道路、导航线等贴在陆地面上的数据；弧度带状宽线用于描述虚拟的空中轨迹，由于弧度带状宽线通常是丝带状，没有厚度，在实际渲染场景中会导致3d视角下观感较差；弧度柱状宽线为弧度带状宽线的改进形式，主要用于解决在3d视角下弧度带状宽线的观感较差的问题。然而，已有技术中弧度柱状宽线的渲染要么较为繁琐，需要大量的gpu计算，要么计算虽然简单，但是3d观感较差，并且容易出错。因此，如何在保证3d渲染效果的情况下，提高带宽度的弧线的渲染效率以及降低计算量是本领域当前需要解决的主要问题之一。


技术实现要素：

3.本公开实施例提供一种带宽度的3d弧线渲染方法及计算机程序产品。
4.第一方面，本公开实施例中提供了一种带宽度的3d弧线渲染方法，其中，包括：
5.确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量；所述线段不带宽度；
6.针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量；
7.确定所述第一方向向量以及所述第二方向向量所在平面的法向量；
8.针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段；
9.基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
10.进一步地，所述第一方向向量是所述线段从起点到终点方向的方向向量，确定所述第一方向向量以及所述第二方向向量所在平面的法向量，包括：
11.将所述第一方向向量以及所述第二方向向量进行叉乘得到所述法向量。
12.进一步地，针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段，包括：
13.针对每一所述线段，将所述线段的两个第一顶点坐标分别沿着所述法向量的正向和负向平移预设距离，获得四个第二顶点坐标；所述预设距离为所述3d弧线的宽度的一半；
14.将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标，以渲染出所述两个三角形；
15.基于所述带宽度的线段，渲染得到带宽度的所述3d弧线，包括：
16.针对每一所述线段，基于所述两个三角形的顶点坐标渲染出对应的两个三角形，进而得到带宽度的所述3d弧线。
17.进一步地，将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标，以渲染出所述两个三角形，包括：
18.针对每一所述线段，确定所述三角形内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离；
19.基于所述垂直距离对所述像素进行不同透明度的着色。
20.进一步地，针对每一所述线段，确定所述三角形内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离，包括：
21.确定所述线段的实际地理距离；
22.基于所述实际地理距离确定所述三角片内每个像素点对应的所述垂直距离。
23.进一步地，确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量之前，所述方法还包括：
24.获取带宽度的所述3d弧线的起始点坐标、终止点坐标以及所述3d弧线的弧度；
25.确定从所述起始点坐标至所述终止点坐标，且弧度与所述3d弧线的弧度一致的弧线段；所述弧线段不带宽度；
26.将所述弧线段划分成多个线段。
27.第二方面，本发明实施例中提供了一种地图渲染方法，其中，包括：
28.获取地图渲染数据；
29.基于所述地图渲染数据渲染地图时，基于第一方面所述的带宽度的弧线渲染方法在地图上渲染虚拟的空中轨迹。
30.第三方面，本发明实施例中提供了一种带宽度的3d弧线渲染设备，其中，包括：cpu和gpu；
31.所述cpu确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量，以及将所述第一顶点坐标和所述第一方向向量传入所述gpu；所述线段不带宽度；
32.所述gpu针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量，并确定所述第一方向向量以及所述第二方向向量所在平面的法向量；以及，所述gpu还针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段，基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
33.第四方面，本发明实施例中提供了一种带宽度的3d弧线渲染装置，包括：
34.第一确定模块，被配置为确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量；所述线段不带宽度；
35.第二确定模块，被配置为针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量；
36.第三确定模块，被配置为确定所述第一方向向量以及所述第二方向向量所在平面的法向量；
37.延展模块，被配置为针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段；
38.渲染模块，被配置为基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
39.所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。所述硬件或软件包括一个或多个与上述功能相对应的模块。
40.在一个可能的设计中，上述装置的结构中包括存储器和处理器，所述存储器用于存储一条或多条支持上述装置执行上述对应方法的计算机指令，所述处理器被配置为用于执行所述存储器中存储的计算机指令。上述装置还可以包括通信接口，用于上述装置与其他设备或通信网络通信。
41.第五方面，本公开实施例提供了一种电子设备，包括存储器、处理器以及存储在存储器上的计算机程序，其中，所述处理器执行所述计算机程序以实现上述任一方面所述的方法。
42.第六方面，本公开实施例提供了一种计算机可读存储介质，用于存储上述任一装置所用的计算机指令，该计算机指令被处理器执行时用于实现上述任一方面所述的方法。
43.第七方面，本公开实施例提供了一种计算机程序产品，其包含计算机指令，该计算机指令被处理器执行时用于实现上述任一方面所述的方法。
44.本公开实施例提供的技术方案可以包括以下有益效果：
45.本公开实施例在渲染带宽度的3d弧线的过程中，计算组成3d弧线的不带宽度的线段的第一顶点坐标以及第一方向向量，根据线段对应的视角下的相机位置坐标确定至各个线段的第一顶点坐标的第二方向向量，进而再将第一方向向量和第一方向向量所确定的平面的法向量作为宽度延展方向，并沿着线段的方向和宽度延展方向进行渲染，得到带宽度的线段，使得所有带宽度的线段拼接展示为一根带宽度的3d弧线。在本公开实施例的上述方式中，由于采用了相机位置坐标以及线段本身的方向确定构成3d弧线每个线段的宽度延展方向，而不需要采用复杂的视角转换算法，因此能够减少cpu和gpu的计算量，节省计算资源，提高3d弧线的渲染效率；此外，由于cpu只需要计算线段的顶点坐标和方向向量，而gpu基于线段的顶点坐标、方向向量以及相机位置坐标至线段顶点坐标的方向向量计算宽度延展方向，整个计算过程中cpu无需向gpu传入额外或者重复计算数据，因此相对于已有技术中cpu需要向gpu传入重复的线段顶点坐标等进一步减少了计算量，节省了计算资源，并提高了3d弧线的渲染效率。
46.应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
47.结合附图，通过以下非限制性实施方式的详细描述，本公开的其它特征、目的和优点将变得更加明显。在附图中：
48.图1示出根据本公开一实施方式的带宽度的3d弧线渲染方法的流程图；
49.图2(a)-图2(b)示出根据本公开一实施方式中宽度延展方向以及拼接成带宽度的线段的两个三角形的示意图；
50.图3示出根据本公开一实施方式的三角形内像素点至第一顶点坐标所在边的垂直距离示意图；
51.图4示出根据本公开一实施方式的地图渲染方法的流程图；
52.图5示出根据本公开一实施方式的带宽度的3d弧线渲染设备的结构框图；
53.图6示出根据本公开一实施方式的带宽度的3d弧线在地图渲染场景下的展示效果图；
54.图7是适于用来实现根据本公开实施方式的带宽度的3d弧线渲染和/或地图渲染方法的电子设备的结构示意图。
具体实施方式
55.下文中，将参考附图详细描述本公开的示例性实施方式，以使本领域技术人员可容易地实现它们。此外，为了清楚起见，在附图中省略了与描述示例性实施方式无关的部分。
56.在本公开中，应理解，诸如“包括”或“具有”等的术语旨在指示本说明书中所公开的特征、数字、步骤、行为、部件、部分或其组合的存在，并且不排除一个或多个其他特征、数字、步骤、行为、部件、部分或其组合存在或被添加的可能性。
57.另外还需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。
58.已有技术中，带宽度的3d弧线绘制解决方案主要包括以下几种：
59.第一种方案的绘制流程如下：
60.1、cpu计算组成弧线段的线段的方向向量，然后将方向向量和大地垂直方向向量计算叉乘，得到线段法向量。
61.2、将法向量传入gpu，在gpu的顶点着色器中计算沿此法向量延伸的三角形顶点坐标。
62.3、基于三角形顶点，gpu绘制三角形，进而得到带宽度的弧线。
63.第一种方案虽然计算，但是渲染出的效果较差，容易出现从感官上看不出宽度的情况，并且无法通过这种方案渲染出带宽度的弧线的动画渲染效果和虚线渲染效果。
64.第二种方案的绘制流程如下：
65.1、cpu计算每个三角形点的前后两个线段的角平分线，计算每个角平分线的法向量。
66.2、cpu将每个角平分线的法向量传入gpu。
67.3、gpu计算每个角平分线的mvp矩阵转换，并得到此方向向量在屏幕2d映射的二维方向向量。
68.4、gpu将该二维方向向量根据线的宽度计算线宽的实际顶点位置，进而基于顶点位置绘制出带宽度的弧线。
69.第二中方案中由于需要进行mvp矩阵转换，因此gpu计算量较大，并且在弧线的弧顶上容易出现看不出宽度的情况，3d感官较差。
70.本公开实施例基于已有技术中的上述缺陷，提出了一种带宽度的3d弧线渲染方法，该方法可以在webgl中实现的带宽度的3d弧线的渲染，该方法包括：确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量；所述线段不带宽度；针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量；确定所述第一方向向量以及所述第二方向向量所在平面的法向量；针对每一所述线段，将所述法
向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段，基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。本公开实施例的这种方式，计算较为简单，并且通过将已知的相机位置坐标加入计算过程，在不需要大量计算的前提下提高了带宽度的3d弧线的感官效果。
71.下面通过具体实施例详细介绍本公开实施例的细节。
72.图1示出根据本公开一实施方式的带宽度的3d弧线渲染方法的流程图。如图1所示，该带宽度的3d弧线渲染方法包括以下步骤：
73.在步骤s101中，确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量；所述线段不带宽度；
74.在步骤s102中，针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量；
75.在步骤s103中，确定所述第一方向向量以及所述第二方向向量所在平面的法向量；
76.在步骤s104中，针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段；
77.在步骤s105中，基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
78.本实施例中，3d弧线为3d场景下带有海拔高度的弧线，在电子地图渲染领域通常用来描述航空航线。宽线，也即带宽度的线，在webgl(web graphics library)绘图协议中，由于不支持渲染带宽度的线，因此通常采用三角形方案构建宽度，也即一段带宽度的线采用两个三角形拼接渲染。
79.本公开实施例中，基于webgl渲染带宽度的3d弧线的过程中，通过将两个点之间的一段带宽度的3d弧线拆分成多段带宽度的线段进行拼接，最终组成一根带宽度的3d弧线，而每段带宽度的线段则使用两个三角形进行拼接，因此在渲染带宽度的3d弧线时，需要确定出组成3d弧线的每段带宽度的线段中，两个三角形的顶点坐标，进而可以基于该两个三角形的顶点坐标即可渲染出组成3d弧线的每段带宽度的线段。
80.为了确定上文中提到的三角形的顶点坐标，首先可以先基于3d弧线的两端点，也即3d弧线的起始点和终止点(该起始点和终止点可以是带宽度的3d弧线两端边上的中点)，以及3d弧线的弧度或者3d弧线最高点的坐标确定与该3d弧线对应的不带宽度的弧线段，该不带宽度的弧线段的长度以及弧度与带宽度的3d弧线一致，该不带宽度的弧线段可以看成是带宽度的3d弧线的中心弧线。
81.在基于3d弧线的两端点以及弧度(或者弧线最高点的坐标)确定了上述不带宽度的弧线段之后，可以将该不带弧度的弧线段划分成多个线段，进行划分的每个线段的长度可以基于用于渲染图的gpu渲染能力或者其他实际需求而设定，在此不做具体限制。
82.确定了划分后的多个线段后，还可以确定每个线段的第一顶点坐标，每个线段具有两个第一顶点坐标。由于待渲染的3d弧线是具有弧度的线段，并且所对应的不带宽度的弧线段也是带弧度的，因此通过将不带宽度的弧线段进行划分而得到的多个线段的方向不一定相同，因此还需要确定每个线段的方向向量。该方向向量基于线段的两个第一顶点坐标可以确定。
83.针对每一线段，还可以计算该线段对应的视角下的相机位置坐标至该线段的第一
顶点坐标的第二方向向量，由于每个线段具有两个第一顶点坐标，所以可以计算出两个第二方向向量。该线段所显示位置处的视角以及相机位置坐标为预先设定的值。
84.基于同一线段的第一方向向量以及对应的第二方向向量可以确定一个平面，该平面的法向量可以确定为3d弧线的宽度延展方向，进而gpu可以在该宽度延展方向上从线段的一个第一顶点坐标至另一个第一顶点坐标进行渲染，在将所有线段均通过上述方式渲染后，即可得到带宽度的3d弧线，并且由于该3d弧线宽度延展方向基于线段所渲染位置处的视角和线段的方向(也即第一方向向量)得到，并且该宽度延展方向始终与该视角和线段的方向垂直，因此所渲染出的3d弧线在各个视角下始终能够看到延展宽度，不会出现在某些视角下看不出弧线宽度的情况。
85.图2(a)-图2(b)示出根据本公开一实施方式中宽度延展方向以及拼接成带宽度的线段的两个三角形的示意图。如图2(a)所示，对于线段p0p1，其第一顶点坐标分别为p0和p1，以顶点p1为例，法向量n垂直于线段，沿着该法向量的正向n和负向-n分别延伸预设距离后，得到两个顶点p0′
和p0″
。同理，针对另一个第一顶点坐标p沿着法向量的正向n和负向-n分别衍生预设距离后，得到两个顶点p1′
和p1″
。
86.如图2(b)所示，在得到顶点p0′
、p0″
、p1′
和p1″
后，可以确定能够拼接成该带宽度的线段的两个三角形分别为δp0′
p0″
p1′
和δp1″
p0″
p1′
。
87.本公开实施例在渲染带宽度的3d弧线的过程中，计算组成3d弧线的不带宽度的线段的第一顶点坐标以及第一方向向量，根据线段对应的视角下的相机位置坐标确定至各个线段的第一顶点坐标的第二方向向量，进而再将第一方向向量和第一方向向量所确定的平面的法向量作为宽度延展方向，并沿着线段的方向和宽度延展方向进行渲染，得到带宽度的线段，使得所有带宽度的线段拼接展示为一根带宽度的3d弧线。在本公开实施例的上述方式中，由于采用了相机位置坐标以及线段本身的方向确定构成3d弧线每个线段的宽度延展方向，而不需要采用复杂的视角转换算法，因此能够减少cpu和gpu的计算量，节省计算资源，提高3d弧线的渲染效率；此外，由于cpu只需要计算线段的顶点坐标和方向向量，而gpu基于线段的顶点坐标、方向向量以及相机位置坐标至线段顶点坐标的方向向量计算宽度延展方向，整个计算过程中cpu无需向gpu传入额外或者重复计算数据，因此相对于已有技术中cpu需要向gpu传入重复的线段顶点坐标等进一步减少了计算量，节省了计算资源，并提高了3d弧线的渲染效率。
88.在本实施例的一个可选实现方式中，所述第一方向向量是所述线段从起点到终点方向的方向向量，步骤s103，即确定所述第一方向向量以及所述第二方向向量所在平面的法向量的步骤，进一步包括以下步骤：
89.将所述第一方向向量以及所述第二方向向量进行叉乘得到所述法向量。
90.该可选的实现方式中，通过对所述第一方向向量和第二方向向量进行叉乘即可得到该第一方向向量和第二方向向量所定义的平面的法向量，该法向量始终与第一方向向量和第二方向向量垂直，而第一方向向量为线段方向，第二方向向量为视角方向，因此该法向向量始终与视角方向和线段方向垂直。从而基于该法向量作为宽度延展方向所渲染出的3d弧线的宽度在各个位置均能够展示出来。
91.在本实施例的一个可选实现方式中，步骤s104，即针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得
到带宽度的线段的步骤，进一步包括以下步骤：
92.针对每一所述线段，将所述线段的两个第一顶点坐标分别沿着所述法向量的正向和负向平移预设距离，获得四个第二顶点坐标；所述预设距离为所述3d弧线的宽度的一半；
93.将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标，以渲染出所述两个三角形；
94.步骤s105，即基于所述带宽度的线段，渲染得到带宽度的所述3d弧线的步骤，进一步包括以下步骤：
95.针对每一所述线段，基于所述两个三角形的顶点坐标渲染出对应的两个三角形，进而得到带宽度的所述3d弧线。
96.该可选的实现方式中，针对每个线段，确定了所对应的带宽度的线段的四个第二顶点坐标后，由于在gpu中通过两个拼接的三角形来渲染带宽度的线段，因此gpu可以基于该四个顶点坐标确定待渲染的三角形的实际顶点坐标，进而根据这两个三角形的顶点坐标渲染出两个拼接在一起的三角形，从感官上这两个拼接的三角形形成一段带宽度的线段，该带宽度的线段则是待渲染的带宽度的3d弧线的一部分。在所有线段对应的带宽度的线段均渲染出来之后，从感官上可以看到渲染完成的带宽度的该3d弧线。
97.在本实施例的一个可选实现方式中，将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标，以渲染出所述两个三角形的步骤，进一步包括以下步骤：
98.针对每一所述线段，确定所述三角形内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离；
99.基于所述垂直距离和/或所述线段的所述第一顶点坐标对所述像素进行不同透明度的着色。
100.该可选的实现方式中，为了实现动画渲染效果和虚线渲染效果，gpu可以在每一次渲染过程中，将不同像素点渲染成不同的透明度。
101.在一些实施例中，为了实现动画渲染效果，例如将带宽度的弧线在视角由近及远的方向逐渐渲染出来，gpu可以基于像素点在3d弧线中的相对位置确定该像素点的透明度，进而基于该透明度对该像素点进行着色渲染，比如可以基于像素点在3d弧线中的相对位置确定像素点与视角的距离，进而在渲染过程中，可以将距离视角较近的像素点渲染为透明度较小的点，而将距离较远的像素点渲染为透明度较大的点，而随着渲染次数的增加，慢慢将距离较远的像素点也渲染为透明度较小的点，通过这种方式可以实现带宽度的3d弧线由近及远进行展示的动画效果。
102.上述实施例中，像素点在3d弧线中的相对位置可以基于像素点距离线段中远离视角的第一顶点坐标所在边的垂直距离以及该线段在3d弧线中的相对位置确定，而线段在3d弧线中的相对位置则可以基于该线段的第一顶点坐标确定。
103.在另一些实施例中，还可以实现带宽度的3d弧线的虚线渲染效果。为了实现虚线渲染效果，gpu可以将每条线段中一端的像素点渲染为完全透明或者透明度较大的点，而其他像素点渲染为不透明或者透明度较小的点的方式来实现。因此，可以先确定像素点至线段一端的第一顶点坐标所在边的垂直距离，并根据该垂直距离确定需要像素点的透明度，进而基于像素点的透明度进行渲染。
104.通过上述方式，可以在webgl中实现带宽度的弧线的动画渲染效果以及虚线渲染效果。
105.图3示出根据本公开一实施方式的三角形内像素点至第一顶点坐标所在边的垂直距离示意图。如图3所示，假如像素点x为三角形内的任一像素点，第一顶点坐标分别为p0和p1，视角位置在眼睛图案所在位置处，则p0为远离视角的第一顶点坐标，像素点x至p0所在的边垂直距离如图中线段l所示。在本实施例的一个可选实现方式中，针对每一所述线段，确定所述三角形内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离的步骤，进一步包括以下步骤：
106.确定所述线段的实际地理距离；
107.基于所述实际地理距离确定所述三角片内每个像素点对应的所述垂直距离。
108.该可选的实现方式中，在地图渲染应用场景下，可以将实际地理距离作为标尺来确定像素点至线段的第一顶点坐标所在边的垂直距离。由于在地图渲染场景下，带宽度的3d弧线的端点坐标采用的是地理坐标，因此线段的第一顶点坐标也可以是地理坐标，为了确定像素点对应的上述垂直距离，也可以采用实际的地理距离来确定。
109.在本实施例的一个可选实现方式中，步骤s101，即确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量的步骤之前，所述方法进一步还包括以下步骤：
110.获取带宽度的所述3d弧线的起始点坐标、终止点坐标以及所述3d弧线的弧度；
111.确定从所述起始点坐标至所述终止点坐标，且弧度与所述3d弧线的弧度一致的弧线段；所述弧线段不带宽度；
112.将所述弧线段划分成多个线段。
113.该可选的实现方式中，基于webgl渲染带宽度的3d弧线的过程中，通过将两个点之间的一段带宽度的3d弧线拆分成多段带宽度的线段进行拼接，最终组成一根带宽度的3d弧线，而每段带宽度的线段则使用两个三角形进行拼接，因此在渲染带宽度的3d弧线时，需要确定出组成3d弧线的每段带宽度的线段中，两个三角形的顶点坐标，进而可以基于该两个三角形的顶点坐标即可渲染出组成3d弧线的每段带宽度的线段。
114.为了确定上文中提到的三角形的顶点坐标，首先可以基于3d弧线的两端点，也即3d弧线的起始点和终止点(该起始点和终止点可以是带宽度的3d弧线两端边上的中点)，以及3d弧线的弧度(该弧度可以由用户或者其他渲染对象直接指定或者基于所指定的3d弧线最高点坐标确定)确定与该3d弧线对应的不带宽度的弧线段，该不带宽度的弧线段的长度以及弧度与带宽度的3d弧线一致，该不带宽度的弧线段可以看成是带宽度的3d弧线的中心弧线。
115.在基于3d弧线的两端点以及弧度(或者弧线最高点的坐标)确定了上述不带宽度的弧线段之后，可以将该不带弧度的弧线段划分成多个线段，进行划分的每个线段的长度可以基于用于渲染图的gpu渲染能力或者其他实际需求而设定，在此不做具体限制。
116.图4示出根据本公开一实施方式的地图渲染方法的流程图。如图3所示，该地图渲染方法包括以下步骤：
117.在步骤s401中，获取地图渲染数据；
118.在步骤s402中，基于所述地图渲染数据渲染地图时，基于所述带宽度的3d弧线渲染方法在地图上渲染虚拟的空中轨迹。
119.本实施例中，在地图渲染过程中，带宽度的3d弧线通常用来描述航空航线。因此在需要渲染航空航线的地图渲染过程中，可以先获取地图渲染数据，之后利用地图渲染数据渲染地图时，可以在地图渲染完成之后，或者与地图渲染一起，基于上述带宽度的3d弧线渲染方法将航空航线渲染出来。3d弧线的两端点坐标可以是地图上的坐标，因此划分后的各线段的第一顶点坐标也可以是地图上的坐标。具体细节可以参见上述对带宽度的3d弧线渲染方法的描述，在此不再赘述。
120.图5示出根据本公开一实施方式的带宽度的3d弧线渲染设备的结构框图。如图5所示，该带宽度的3d弧线渲染设备包括：cpu 501和gpu 502；
121.所述cpu 501确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量，以及将所述第一顶点坐标和所述第一方向向量传入所述gpu 502；所述线段不带宽度；
122.所述gpu 502针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量，并确定所述第一方向向量以及所述第二方向向量所在平面的法向量；以及，所述gpu 502还针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段，基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
123.本实施例中，3d弧线为3d场景下带有海拔高度的弧线，在电子地图渲染领域通常用来描述航空航线。宽线，也即带宽度的线，在webgl(web graphics library)绘图协议中，由于不支持渲染带宽度的线，因此通常采用三角形方案构建宽度，也即一段带宽度的线采用两个三角形拼接渲染。
124.本公开实施例中，基于webgl渲染带宽度的3d弧线的过程中，通过将两个点之间的一段带宽度的3d弧线拆分成多段带宽度的线段进行拼接，最终组成一根带宽度的3d弧线，而每段带宽度的线段则使用两个三角形进行拼接，因此在渲染带宽度的3d弧线时，需要确定出组成3d弧线的每段带宽度的线段中，两个三角形的顶点坐标，进而gpu 502可以基于该两个三角形的顶点坐标渲染出组成3d弧线的每段带宽度的线段。
125.为了确定上文中提到的三角形的顶点坐标，本实施例中，cpu 501可以先基于3d弧线的两端点，也即3d弧线的起始点和终止点(该起始点和终止点可以是带宽度的3d弧线两端边上的中点)，以及3d弧线的弧度或者3d弧线最高点的坐标确定与该3d弧线对应的不带宽度的弧线段，该不带宽度的弧线段的长度以及弧度与带宽度的3d弧线一致，该不带宽度的弧线段可以看成是带宽度的3d弧线的中心弧线。
126.在基于3d弧线的两端点以及弧度(或者弧线最高点的坐标)确定了上述不带宽度的弧线段之后，可以将该不带弧度的弧线段划分成多个线段，进行划分的每个线段的长度可以基于用于gpu 502渲染能力或者其他实际需求而设定，在此不做具体限制。
127.cpu 501确定了划分后的多个线段后，还可以确定每个线段的第一顶点坐标，每个线段具有两个第一顶点坐标。由于待渲染的3d弧线是具有弧度的线段，并且所对应的不带宽度的弧线段也是带弧度的，因此通过将不带宽度的弧线段进行划分而得到的多个线段的方向不一定相同，因此cpu 501还可以确定每个线段的第一方向向量。该第一方向向量基于线段的两个第一顶点坐标可以确定。
128.cpu 501将计算得到的各个线段的第一顶点坐标以及第一方向向量传入gpu 502。
129.gpu 502针对每一线段，可以计算该线段对应的视角下的相机位置坐标至该线段
的第一顶点坐标的第二方向向量，由于每个线段具有两个第一顶点坐标，所以可以计算出两个第二方向向量。该线段所显示位置处的视角以及相机位置坐标为预先设定的值。
130.基于同一线段的第一方向向量以及对应的第二方向向量可以确定一个平面，该平面的法向量可以确定为3d弧线的宽度延展方向，进而gpu 502可以在该宽度延展方向上从线段的一个第一顶点坐标至另一个第一顶点坐标进行渲染，在将所有线段均通过上述方式渲染后，即可得到带宽度的3d弧线，并且由于该3d弧线宽度延展方向基于线段所渲染位置处的视角和线段的方向(也即第一方向向量)得到，并且该宽度延展方向始终与该视角和线段的方向垂直，因此所渲染出的3d弧线在各个视角下始终能够看到延展宽度，不会出现在某些视角下看不出弧线宽度的情况。
131.本公开实施例在渲染带宽度的3d弧线的过程中，由cpu计算组成3d弧线的不带宽度的线段的第一顶点坐标以及第一方向向量，并将所计算的第一顶点坐标和第一方向向量传入gpu，由gpu根据线段对应的视角下的相机位置坐标确定至各个线段的第一顶点坐标的第二方向向量，进而再将第一方向向量和第一方向向量所确定的平面的法向量作为宽度延展方向，并沿着线段的方向和宽度延展方向进行渲染，得到带宽度的线段，使得所有带宽度的线段拼接展示为一根带宽度的3d弧线。在本公开实施例的上述方式中，由于采用了相机位置坐标以及线段本身的方向确定构成3d弧线每个线段的宽度延展方向，而不需要采用复杂的视角转换算法，因此能够减少cpu和gpu的计算量，节省计算资源，提高3d弧线的渲染效率；此外，由于cpu只需要计算线段的顶点坐标和方向向量，而gpu基于线段的顶点坐标、方向向量以及相机位置坐标至线段顶点坐标的方向向量计算宽度延展方向，整个计算过程中cpu无需向gpu传入额外或者重复计算数据，因此相对于已有技术中cpu需要向gpu传入重复的线段顶点坐标等进一步减少了计算量，节省了计算资源，并提高了3d弧线的渲染效率。
132.在本实施例的一个可选实现方式中，gpu 502通过将所述第一方向向量以及所述第二方向向量进行叉乘得到所述法向量。
133.该可选的实现方式中，通过对所述第一方向向量和第二方向向量进行叉乘即可得到该第一方向向量和第二方向向量所定义的平面的法向量，该法向量始终与第一方向向量和第二方向向量垂直，而第一方向向量为线段方向，第二方向向量为视角方向，因此该法向向量始终与视角方向和线段方向垂直。从而基于该法向量作为宽度延展方向所渲染出的3d弧线的宽度在各个位置均能够展示出来。
134.在本实施例的一个可选实现方式中，gpu 502针对每一所述线段，将所述线段的两个第一顶点坐标分别沿着所述法向量的正向和负向平移预设距离，获得四个第二顶点坐标；所述预设距离为所述3d弧线的宽度的一半；gpu 502还将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标，进而渲染出所述两个三角形。
135.该可选的实现方式中，针对每个线段，确定了所对应的带宽度的线段的四个第二顶点坐标后，由于在gpu 502中支持通过两个拼接的三角形来渲染带宽度的线段，因此gpu 502可以基于该四个顶点坐标确定待渲染的三角形的实际顶点坐标，进而根据这两个三角形的顶点坐标渲染出两个拼接在一起的三角形，从感官上这两个拼接的三角形形成一段带宽度的线段，该带宽度的线段则是待渲染的带宽度的3d弧线的一部分。在所有线段对应的带宽度的线段均渲染出来之后，从感官上可以看到渲染完成的带宽度的该3d弧线。
136.在本实施例的一个可选实现方式中，gpu 502针对每一所述线段，确定所述三角形
内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离，gpu 502还基于所述垂直距离和/或所述线段的所述第一顶点坐标对所述像素进行不同透明度的着色。
137.该可选的实现方式中，为了实现动画渲染效果和虚线渲染效果，gpu 502可以在每一次渲染过程中，将不同像素点渲染成不同的透明度。
138.在一些实施例中，为了实现动画渲染效果，例如将带宽度的弧线在视角由近及远的方向逐渐渲染出来，gpu 502可以基于像素点在3d弧线中的相对位置确定该像素点的透明度，进而基于该透明度对该像素点进行着色渲染，比如可以基于像素点在3d弧线中的相对位置确定像素点与视角的距离，进而在渲染过程中，可以将距离视角较近的像素点渲染为透明度较小的点，而将距离较远的像素点渲染为透明度较大的点，而随着渲染次数的增加，慢慢将距离较远的像素点也渲染为透明度较小的点，通过这种方式可以实现带宽度的3d弧线由近及远进行展示的动画效果。
139.上述实施例中，像素点在3d弧线中的相对位置可以基于像素点距离线段中远离视角的第一顶点坐标所在边的垂直距离以及该线段在3d弧线中的相对位置确定，而线段在3d弧线中的相对位置则可以基于该线段的第一顶点坐标确定。
140.在另一些实施例中，还可以实现带宽度的3d弧线的虚线渲染效果。为了实现虚线渲染效果，gpu 502可以将每条线段中一端的像素点渲染为完全透明或者透明度较大的点，而其他像素点渲染为不透明或者透明度较小的点的方式来实现。因此，可以先确定像素点至线段一端的第一顶点坐标所在边的垂直距离，并根据该垂直距离确定需要像素点的透明度，进而基于像素点的透明度进行渲染。
141.通过上述方式，可以在webgl中实现带宽度的弧线的动画渲染效果以及虚线渲染效果。
142.在本实施例的一个可选实现方式中，gpu 502可以确定所述线段的实际地理距离，并基于所述实际地理距离确定所述三角片内每个像素点对应的所述垂直距离。
143.该可选的实现方式中，在地图渲染应用场景下，gpu 502可以将实际地理距离作为标尺来确定像素点至线段的第一顶点坐标所在边的垂直距离。由于在地图渲染场景下，带宽度的3d弧线的端点坐标采用的是地理坐标，因此线段的第一顶点坐标也可以是地理坐标，为了确定像素点对应的上述垂直距离，也可以采用实际的地理距离来确定。
144.在本实施例的一个可选实现方式中，cpu 501获取带宽度的所述3d弧线的起始点坐标、终止点坐标以及所述3d弧线的弧度，并确定从所述起始点坐标至所述终止点坐标，且弧度与所述3d弧线的弧度一致的弧线段，以及将所述弧线段划分成多个线段；所述弧线段不带宽度。
145.该可选的实现方式中，基于webgl渲染带宽度的3d弧线的过程中，gpu 502通过将两个点之间的一段带宽度的3d弧线拆分成多段带宽度的线段后进行拼接，最终组成一根带宽度的3d弧线，而每段带宽度的线段则使用两个三角形进行拼接渲染，因此在渲染带宽度的3d弧线时，gpu 502可以确定出组成3d弧线的每段带宽度的线段中，两个三角形的顶点坐标，进而可以基于该两个三角形的顶点坐标即可渲染出组成3d弧线的每段带宽度的线段。
146.为了确定上文中提到的三角形的顶点坐标，cpu 501可以基于3d弧线的两端点，也即3d弧线的起始点和终止点(该起始点和终止点可以是带宽度的3d弧线两端边上的中点)，以及3d弧线的弧度(该弧度可以由用户或者其他渲染对象直接指定或者基于所指定的3d弧
线最高点坐标确定)确定与该3d弧线对应的不带宽度的弧线段，该不带宽度的弧线段的长度以及弧度与带宽度的3d弧线一致，该不带宽度的弧线段可以看成是带宽度的3d弧线的中心弧线。
147.在基于3d弧线的两端点以及弧度(或者弧线最高点的坐标)确定了上述不带宽度的弧线段之后，cpu 501可以将该不带弧度的弧线段划分成多个线段，进行划分的每个线段的长度可以基于用于渲染图的gpu 502渲染能力或者其他实际需求而设定，在此不做具体限制。
148.图6示出根据本公开一实施方式的带宽度的3d弧线在地图渲染场景下的展示效果图。如图6所示，利用本公开实施例提出的方法所渲染出的带宽度的3d弧线在每个展示位置上均能够看出其宽度，并且还实现了虚线渲染效果。
149.下述为本公开装置实施例，可以用于执行本公开方法实施例。
150.根据本公开一实施方式的带宽度的3d弧线渲染装置，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。该带宽度的3d弧线渲染装置包括：
151.第一确定模块，被配置为确定构成所述3d弧线的每条线段的第一顶点坐标以及第一方向向量；所述线段不带宽度；
152.第二确定模块，被配置为针对每一所述线段，确定所述线段对应的视角下的相机位置坐标至所述第一顶点坐标的第二方向向量；
153.第三确定模块，被配置为确定所述第一方向向量以及所述第二方向向量所在平面的法向量；
154.延展模块，被配置为针对每一所述线段，将所述法向量的方向作为宽度延展方向，基于所述线段的所述第一顶点坐标以及所述宽度延展方向得到带宽度的线段；
155.渲染模块，被配置为基于所述待宽度的线段，渲染得到带宽度的所述3d弧线。
156.在本实施例的一个可选实现方式中，所述第二确定模块，包括：
157.叉乘子模块，被配置为将所述第一方向向量以及所述第二方向向量进行叉乘得到所述法向量。
158.在本实施例的一个可选实现方式中，所述延展模块，包括：
159.平移子模块，被配置为针对每一所述线段，将所述线段的两个第一顶点坐标分别沿着所述法向量的正向和负向平移预设距离，获得四个第二顶点坐标；所述预设距离为所述3d弧线的宽度的一半；
160.第一确定子模块，被配置为将所述四个第二顶点坐标确定为拼接形成带宽度的所述线段的两个三角形的顶点坐标；
161.所述渲染模块，包括：
162.渲染子模块，被配置为针对每一所述线段，基于所述两个三角形的顶点坐标渲染出对应的两个三角形，进而得到带宽度的所述3d弧线。
163.在本实施例的一个可选实现方式中，所述第一确定子模块，包括：
164.第二确定子模块，被配置为针对每一所述线段，确定所述三角形内每个像素点至远离视角一端的所述第一顶点坐标所在边的垂直距离；
165.着色子模块，被配置为基于所述垂直距离对所述像素进行不同透明度的着色。
166.在本实施例的一个可选实现方式中，所述第二确定子模块，包括：
167.第三确定子模块，被配置为确定所述线段的实际地理距离；
168.第四确定子模块，被配置为基于所述实际地理距离确定所述三角片内每个像素点对应的所述垂直距离。
169.在本实施例的一个可选实现方式中，所述第一确定模块之前，所述装置还包括：
170.第一获取模块，被配置为获取带宽度的所述3d弧线的起始点坐标、终止点坐标以及所述3d弧线的弧度；
171.第四确定模块，被配置为确定从所述起始点坐标至所述终止点坐标，且弧度与所述3d弧线的弧度一致的弧线段；所述弧线段不带宽度；
172.划分模块，被配置为将所述弧线段划分成多个线段。
173.本实施例中的带宽度的3d弧线渲染装置与上文中的带宽度的3d弧线渲染方法对应一致，具体细节可以参见上文中对带宽度的3d弧线渲染方法的描述，在此不再赘述。
174.根据本公开一实施方式的地图渲染装置，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。该地图渲染装置包括：
175.第二获取模块，被配置为获取地图渲染数据；
176.地图渲染模块，被配置为基于所述地图渲染数据渲染地图时，基于所述带宽度的弧线渲染装置在地图上渲染虚拟的空中轨迹。
177.本实施例中的地图渲染装置与上文中的地图渲染方法对应一致，具体细节可以参见上文中对地图渲染方法的描述，在此不再赘述。
178.图7是适于用来实现根据本公开实施方式的带宽度的3d弧线渲染和/或地图渲染方法的电子设备的结构示意图。
179.如图7所示，电子设备700包括处理单元701，其可实现为cpu、gpu、fpga、npu等处理单元。处理单元701可以根据存储在只读存储器(rom)702中的程序或者从存储部分708加载到随机访问存储器(ram)703中的程序而执行本公开上述任一方法的实施方式中的各种处理。在ram703中，还存储有电子设备700操作所需的各种程序和数据。处理单元701、rom702以及ram703通过总线704彼此相连。输入/输出(i/o)接口705也连接至总线704。
180.以下部件连接至i/o接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(crt)、液晶显示器(lcd)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如lan卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至i/o接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。
181.特别地，根据本公开的实施方式，上文参考本公开实施方式中的任一方法可以被实现为计算机软件程序。例如，本公开的实施方式包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行本公开实施方式中任一方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。
182.附图中的流程图和框图，图示了按照本公开各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，路程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个
用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
183.描述于本公开实施方式中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。
184.作为另一方面，本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，所述程序被一个或者一个以上的处理器用来执行描述于本公开的方法。
185.以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。