罗童心，仇建伟，王家润

(华北计算技术研究所，北京 100083)

0 引 言

对于三维标图软件，线面标号绘制是其基本的功能。为使图形符号表达更多含义，尤其在涵盖颜色信息外还需要更直观形象地体现某种趋势和程度时，通常会对线面标号进行渐变填充处理，即利用两种不同颜色的混合效果，展现诸如污染程度、进攻方向和颜色权重等信息。这种绘制效果在轨迹绘制等场合也发挥着重要作用。此外，相比于单一色彩的填充，渐变填充通常有更好的视觉效果[1-2]。

目前的三维标图应用广泛采用的是基于传统图形流水线的绘制方法，即使用固定功能的图形流水线。该方法需要对曲面上的每个顶点绑定其对应的颜色属性等数据，再交由图形流水线完成余下渲染过程，其数据计算主要由CPU执行。如将该方法应用到三维场景的线面标号渐变填充中，则可能无法发挥较高的性能。这是由于为使线面标号的绘制贴合球面，通常需要填充的是细分程度较高的光滑弧面，这意味着有数量较多的顶点和三角面片数据，而在渐变填充中每个顶点的颜色不尽相同，使得CPU串行计算每个顶点的颜色值将耗费大量时间，此外为每个顶点存储其对应的颜色属性也需要占用大量空间[3-4]。这些问题使得图形绘制效率较低，在复杂态势标绘应用中无法满足实时快速显示的要求。

为提高三维线面标号的绘制速度，文中在固定管线渲染的基础上使用能够替代原有功能模块的可编程模块，即顶点和片元着色器，将部分原本在CPU中串行计算的大量顶点操作转移到GPU中进行并行计算[5]。当应用于三维弧面渐变填充的场合时，该方法只需传递少量参数，在顶点着色器内部利用顶点位置等信息计算顶点对应颜色值，同时省去颜色属性数组的构建和传输，在空间和时间性能上都有大幅度的提升。

1 算法基本概念与理论

1.1 球面的经纬映射

经纬映射是将球面上的三维笛卡尔坐标系下的点转换为经纬度坐标的映射方式，在三维地球的标绘中通常用该映射方式取代由三维坐标系到二维坐标系的正投影或透视投影变换。

对于球心位置为原点(0,0,0)的球，球面上坐标为(x,y,z)的三维空间点转换到经纬度坐标系的公式如下[6]：

(1)

(2)

为使弧面的渐变填充效果均匀平滑地贴合球面弧度，算法需利用球面的经纬映射将在三维地球上弧面的各顶点从三维空间坐标系映射到二维坐标系下。

1.2 渐变模型

1.2.1 关键参数及含义

(1)颜色混合参数：对于弧面上每个点，都对应一个颜色混合参数值，表示该位置上参与渐变的两种颜色的混合比例，其取值范围为0.0～1.0。根据每个顶点的颜色混合参数para，利用式(3)可以求得该位置应该被填充的颜色值。

VertexColor=(1-para)*MainColor+para*

SubColor

(3)

(2)渐变基准：可指定为弧面上任意位置，其对应的颜色混合参数为某个固定值，被作为弧面上其他点计算颜色混合参数的参照，通过弧面各个顶点到渐变基准的距离可以计算出其他位置对应的颜色混合参数。

(3)渐变半径：即渐变基准到弧面包围体边界的距离，用于计算颜色混合参数。

(4)

1.2.2 辐射渐变

如图1(a)所示，辐射渐变的渐变基准为一个点，该点的颜色混合参数为固定值0；辐射渐变的渐变半径即为指定圆心为渐变基准的包围圆半径；位于包围圆圆周上的点，其颜色混合参数均为1，其他位置的颜色混合参数则在其与渐变基准之间按距离远近插值。辐射渐变可以直观表达弧面上各点距离渐变基准的位置远近，通常应用于对区域内辐射强度等信息的表达。

1.2.3 线性渐变

如图1(b)所示，线性渐变的渐变基准是一条垂直于渐变方向的直线，该直线上所有位置的颜色混合参数均为固定值0.5；线性渐变的渐变基准到沿渐变方向的方向包围盒两端距离不一定相等，因此线性渐变的渐变半径有两个取值；在沿渐变方向包围盒边界，颜色混合参数为1，在与渐变方向相反的包围盒边界，颜色混合参数为0，其他位置的颜色混合参数则在二者与渐变基准之间按距离进行插值。线性渐变可以直观表达弧面的方向趋势信息以及两种颜色参与渐变的权重，权重较大的颜色，在渐变过程中衰减得较慢，即该颜色在整个面的填充效果上占的份额较多，通常应用于行进方向等信息的表达。

图1 两种渐变模型及参数示意

1.3 图形对象包围体

1.3.1 包围圆

对象的包围圆定义为包含该对象的最小的圆周。在辐射渐变的渐变半径计算中，需计算指定圆心位置的图形对象包围圆，即包围圆的圆心需为渐变基准点。在确定渐变基准位置后，将所有顶点遍历一次，计算并比较各顶点到中心位置的距离，其最长距离为指定圆心的包围圆半径，即辐射渐变的渐变半径。

1.3.2 方向包围盒

方向包围盒(OBB)是较为常用的包围体类型。它是包含指定绘制对象且相对于坐标轴方向任意的最小的长方体[7]。对于线性渐变的渐变半径计算，则只需求出该图形沿指定方向(线性渐变方向)的方向包围盒。遍历所有顶点，利用向量投影计算并比较各顶点到渐变基准的距离，同时运用向量的点积判断顶点相对于渐变基准的位置，在沿两个相反方向上的最大距离则分别为方向包围盒的上下边界到渐变基准的距离[8]，即为线性渐变的渐变半径。

2 着色器

2.1 着色程序与GLSL语言

实验使用GLSL语言编辑着色程序，实现着色器绘制，以提高渲染过程中GPU的利用率。顶点着色程序是被GPU内可编程顶点处理器执行的程序，应用程序设定的图元信息，如顶点坐标、颜色值、法向量、纹理坐标等顶点属性，传入到顶点着色器中进行并行处理。存在片元着色程序时，顶点着色器的输出会作为片元着色器的输入，再由片元着色器的输出决定屏幕上像素显示的颜色，在单一使用顶点着色时，则只对输入的顶点进行操作，顶点之间的部分则按照硬件默认的方式进行自动插值[9-11]。

GLSL是基于OpenGL的着色语言，在各显卡上均有较好的支持，相较于仅在NVIDA显卡上得到支持的Cg等着色语言，具有良好的可移植性[12]。GLSL语言提供了少量的内置变量和部分内置函数。

实验中用内置变量gl_Vertex获取顶点的三维坐标，使用transform()内置函数对顶点进行MVP矩阵变换，以及使用dot()、length()函数计算向量点积和长度等。

2.2 Uniform参数

考虑到图形流水线的结构和着色器的并行计算能力，实验选择将计算每个顶点各自颜色的过程放到顶点着色器中进行，无需再额外构建和绑定顶点颜色数组。由于着色器中每个顶点的计算都是独立在各个GPU单元间进行的，无法在独立单元之间进行数据交换，因此涉及其他顶点的计算需要在外部程序中预先求出，再作为常量参数Uniform或顶点的属性参数Attribute传给着色器。

其中Uniform参数是绑定到整个着色器、用于所有顶点的参数，而Attribute参数则是绑定到每个独立顶点的参数，通常为与顶点数组等大的数组[13-15]。为保证着色器的效率，应尽量使用Uniform传参。

根据该算法的基本思想，对于中心渐变填充，选择将渐变半径和渐变基准点坐标作为Uniform常量参数传递给着色器；对于线性渐变填充，则将渐变半径、中心点坐标，以及渐变方向向量作为常量参数传递给着色器，其中线性渐变半径使用二维向量vec2类型以承载渐变基准两侧的半径值。

3 算法设计与实现

3.1 绘制流程

图2给出了基于可编程图形管线的渐变填充绘制过程及每个计算阶段的输入输出内容，大致可以分为在CPU中进行的预处理计算过程和在GPU中进行的计算和渲染过程。其中顶点着色器和片元着色器替代了固定管线渲染中原有的固定功能操作模块，通过将原本在CPU中串行计算的部分转移到着色器中进行并行计算，以提升整个计算和绘制过程的效率。

图2 计算和绘制过程

3.2 着色程序实现

以下给出着色程序的核心代码，用于并行计算弧面上各点显示的颜色，分别被顶点着色器和片元着色器执行：

(1)顶点着色器。

uniform vec4 mainColor;//渐变主色

uniform vec4 subColor;//渐变辅色

uniform vec2 centerNode;//渐变基准位置

uniform vec2 radius;//两侧渐变半径值

uniform vec2 angle;//渐变方向角度，为减少三角函数计算使用方向向量代替

varying vec4 vertexColor;//顶点颜色

floatpara;//颜色混合参数

vec2 vector=gl_Vertex.xy-centerNode.xy;//由渐变基准指向顶点的向量

float distance=dot(vector,angle)/length(angle);//顶点向量沿渐变方向向量的投影距离，大于0表示向量夹角小于90°，反之大于90°

if(distance<0.0) para=distance/radius.x;//计算颜色混合参数，向量夹角大于90°时应用左侧的渐变半径计算，反之应用右侧渐变半径计算

elsepara=distance/radius.y;

vertexColor=subColor*para+mainColor*(1-para);//计算顶点颜色

transform();//顶点MVP矩阵变换

(2)片元着色器。

varying vec4vertexColor;

gl_FragColor=vertexColor;//渲染像素颜色

4 实验结果及分析

图3给出了基于可编程渲染管线绘制对地球上某弧面分别进行辐射渐变和线性渐变填充的效果。AB为渐变基准位置不同的辐射渐变填充，CD为渐变方向和颜色权重不同的线性渐变填充。其中C表示渐变角度为0°，两种颜色权重均为0.5的线性渐变填充效果；D表示渐变角度为135°，颜色权重分别为0.3和0.7的效果。AC的填充中未使用α通道。

图3 渐变填充效果

图4给出了使用着色器渲染的实验组与使用固定管线绘制的对照组在性能上的比对结果，分别从运行时间和显示帧率进行对照，展示了在单一绘制对象内，随着顶点数目和三角面片数目的增加，不同的绘制方案呈现的性能趋势。其中实线代表实验组的测试结果，虚线代表对照组的测试结果。测试结果统计均基于算法相对复杂的线性渐变填充。

由图4可以看出，在三角面数量较少、网格较为简单时，二者并未呈现较大的性能差异；当三角网格数目达到十万级时，对照组的显示帧率已经开始大幅降低，达到百万级时，帧率已经下降到20帧以下，几乎不足以支持流畅显示；而即使三角网格数目达到100万时，实验组仍能保持流畅的显示，帧率维持在30帧以上，直到数量接近200万时才不足20帧。对照组的运行时间始终呈线性增长趋势，实验组运行时间则仅在数量级跨度较大时有少量的增加，在三角面数量接近200万时，二者的运行时间差异有5倍之多。

由测试结果可以得出，使用着色器绘制的弧面渐变填充算法有着明显的性能优势，尤其针对绘制对象数量较少而三角面数较多的复杂线面标号，能表现出远优于传统固定管线绘制的性能。在渲染管线内使用着色器编程,更充分应用了GPU的计算能力，使得每个独立的顶点计算能够并行进行，极大地缩短了计算时间，优化了显示效果。

图4 两种绘制策略在单一绘制对象中

5 结束语

针对传统固定管线渲染方法在沿地球弧面的三维线面标号渐变填充性能上表现出的不足，提出了基于GPU并行计算的性能优化方法。实验结果表明，通过在渲染管线过程中使用着色器编程，提高了算法对GPU的利用率，使得对于顶点的部分计算过程能够并行进行，极大提升了图形的绘制效率，同时也减少了顶点部分属性数组在空间上的占用，实现了较高性能应用于光滑弧面的两种渐变填充效果；同时通过在线面标号渐变填充这一典型实例上的应用和大量数据测试，验证了着色器在大量点线面数据处理上的高效率。

[1] 韩李涛，范克楠.三维地形颜色渐变渲染的光滑过渡方法研究[J].地球信息科学学报,2015,17(1):31-36.

[2] 张 旭，戴 宁，廖文和，等.基于三维渐变的牙齿磨耗可视化仿真[J].机械工程学报，2013,49(3):95-100.

[3] 简洪登，范湘涛.基于GLSL的多重视频纹理映射与融合[J].计算机工程与设计，2014,35(11):3873-3878.

[4] MILOSAVLJEVIÇ A,DIMITRIJEVIÇ A,RANÇIÇ D.GIS-augmented video surveillance[J]．International Journal of Geographical Information Science,2010,24(9):1415-1433.

[5] 裘 初，费广正，石民勇.可编程图形硬件综述[J].北京广播学院学报：自然科学版，2004,11(3):13-19．

[6] 王俊杰，徐小刚，胡运发，等.鱼眼投影在虚拟实景中的应用研究[J].小型微型计算机系统,2004,25(2):287-290.

[7] 芦鸿雁.基于层次包围盒的碰撞检测算法研究[J].计算机与数字工程,2008,36(2):23-25.

[8] 李运锋，刘修国.基于方向包围盒投影转换的轮廓线拼接算法[J].计算机应用，2011,31(12):3353-3356．

[9] CIRNE M V M,PEDRINI H.Marching cubes technique for volumetric visualization accelerated with graphics processing units[J].Journal of the Brazilian Computer Society,2013,19(3):223-233.

[10] WATSON B,LUEBKE D.The ultimate display:where will all the pixels come from[J].Computer,2005,38(8):54-61.

[11] 韩俊刚，蒋 林，杜慧敏,等.一种图形加速器和着色器的体系结构[J].计算机辅助设计与图形学学报，2010，22(3):363-372.

[12] 黄 龙.基于GLSL三维渲染效果的研究与应用[D].西安:西安科技大学，2014.

[13] WOO J H,SOHN J H,KIM H,et al.A 195 mW,9.1M vertices/s fully programmable 3-D graphics processor for low power mobile devices[J].IEEE Journal of Solid-State Circuits,2008,43(11):2370-2380.

[14] 陈继选，王毅刚.基于OSG的GLSL着色器编辑环境[J].计算机系统应用，2011,20(3):153-156.

[15] WOLF D.OpenGL4.0 shading language cookbook[M].[s.l.]:PACKT Publishing,2011.