简介

本文主要介绍在只有网格(mesh)，仅使用几何着色器(Geometry Shader)，不使用额外贴图的情况下，仅渲染出网格所有顶点的方法。在看本篇之前，应对几何着色器有所了解，并对使用几何着色器的线框渲染有一定认识。在看完本文后，可以得到如下效果。

最近接到需求做音乐可视化，要求的效果如下图所示。

alt

可视化的相关问题已有许多成熟的解决方案。问题在于图中仅显示模型的顶点及线框(边)的效果。
显示线框的做法网上也容易查到，这里提供一篇英伟达07年给出的解决方案，推荐可以先去看看。因为之后要介绍的顶点渲染也是基于这篇文章的思想来做的。

当然这里也会简单介绍一下文章的主要内容。
单pass线框渲染，其思想是使用几何着色器处理从顶点着色器输入的三角面片的三个顶点，得到三角面片中每个片元到三角面片三条边的距离，从而判断该片元是否在三角面的边上。
关于计算片元到三角面三条边的距离，这里仅做简单介绍，详细原理和优化请看上面的文章。

alt
在几何着色器中拿到三角面的三个顶点，并计算三个顶点到其对边的最小距离(即三角形的三条高)h1,h2,h3。
alt
为每个顶点添加一个三维向量Dis存储其到三条边的最短距离。以上图为例，由于P0与e0,e2邻接，所以其Dis的x分量与z分量都为0，y分量为h1。
alt
在几何着色器将这些数据传给片元着色器后，经过插值的Dis被分配到三角面内的每个片元，且其三个分量为别为该片元到三条边的最短距离。

至此，已经可以获得每个片元到齐所在三角面的三条边的最短距离了。利用这些最短距离，可以用于确定所在三角面的顶点位置。

实现

为了确定顶点位置，首先需要将片元中拿到的三个距离d1,d2,d3进行排序。这里不再赘述，直接给出排序代码。其中dist[3]存储的是裁剪空间中算出的w分量的倒数，乘dist[3]是为了保证其距离正确。

float minDistanceToEdge = min(i.dist[0], min(i.dist[1], i.dist[2])) * i.dist[3];
float midDistanceToEdge = min(i.dist[0], max(i.dist[1], i.dist[2])) * i.dist[3];
float maxDistanceToEdge = max(i.dist[0], max(i.dist[1], i.dist[2])) * i.dist[3];
if (minDistanceToEdge == midDistanceToEdge)
{
	midDistanceToEdge = min(i.dist[1], max(i.dist[0], i.dist[2])) * i.dist[3];
}

在得到排序后的该片元到三条边的距离后，似乎已经有很多方法可以确定顶点的位置并对其着色了。
先给出我开始采用的效果的较差的方法。通过离最远的边的距离减去距离第二的边的距离判断，当该片源越接近顶点，则该差值越大。

if(maxDistanceToEdge - midDistanceToEdge > 20)
{
	return fixed4(_PointColor.rgb, 1);
}

其运行结果如下 alt alt 可见当网格与摄像机距离较远时效果勉强能接受，但当摄像机移近后会出现明显的穿帮效果。
这是由于通过{dmax-dmid<20}来判断，而片元与三角面的边的距离受其在屏幕中的大小的直接影响，所以要想改善效果，可以尝试根据该网格与摄像机的距离动态改变判断条件中常数的大小。但这么做过于复杂，选择改变判断的思路。

float pointAlpha = (exp2(_PointSmoothness * -1.0 * minDistanceToEdge * minDistanceToEdge) * exp2(_PointSmoothness * -1.0 * midDistanceToEdge * midDistanceToEdge));
if (midDistanceToEdge < _PointSize && minDistanceToEdge < _PointSize)
{
	return fixed4(_PointColor.rgb, pointAlpha);
}

这样判断也比较直观，通过距离较近的两条边来判断，当片元越接近顶点时，距离较近的两条边的距离都趋近0。其运行结果如下。 alt alt alt

可以看出不管是在较远距离或较近距离，都能保持较好的效果，且在适中距离观察时其顶点也更加圆润(一部分原因是因为此处做了平滑处理)。
这里平滑使用的是以2为底的指数函数，当距离越大时其alpha值越趋近于0。
至此已实现了基本的显示顶点效果，但其仍有一些棱角，不够圆润，且点的大小不方便控制，仍有进一步优化空间。

源码

此处仅给出片元着色器代码

            fixed4 frag(g2f i) : SV_Target
            {
                //return i.vertexColor;
                float minDistanceToEdge = min(i.dist[0], min(i.dist[1], i.dist[2])) * i.dist[3]; //选出插值后最短距离
                float midDistanceToEdge = min(i.dist[0], max(i.dist[1], i.dist[2])) * i.dist[3];
                //float maxDistanceToEdge = max(i.dist[0], max(i.dist[1], i.dist[2])) * i.dist[3];

                if (minDistanceToEdge == midDistanceToEdge)
                {
                    midDistanceToEdge = min(i.dist[1], max(i.dist[0], i.dist[2])) * i.dist[3];
                }

                // if(maxDistanceToEdge - midDistanceToEdge > 20)
                // {
                //     return fixed4(_PointColor.rgb, 1);
                // }

                float pointAlpha = (exp2(_PointSmoothness * -1.0 * minDistanceToEdge * minDistanceToEdge) * exp2(_PointSmoothness * -1.0 * midDistanceToEdge * midDistanceToEdge));
                if (midDistanceToEdge < _PointSize && minDistanceToEdge < _PointSize)
                {
                    return fixed4(_PointColor.rgb, pointAlpha);
                }

                // Early out if we know we are not on a line segment.
                if (minDistanceToEdge > 0.9 || i.area.x > _MaxTriSize) //片元不在线上或三角面片边长过长则舍弃，过长表示三角面片不完全在视锥体内
                {
                    return fixed4(_BaseColor.rgb, 0);
                }

                //return _WireColor;
                //Smooth our line out
                float t = exp2(_WireSmoothness * -1.0 * minDistanceToEdge * minDistanceToEdge);
                half4 wireColor = _WireColor;
                wireColor.a = smoothstep(0.07, 0.2, i.alphaControl);
                fixed4 finalColor = lerp(_BaseColor, wireColor, t);

                //return fixed4(_BaseColor.rgb, 0);
                return finalColor;
            }

渲染给定网格的顶点

简介

实现

源码