雷达图生成算法

原创
2021/08/18 23:32
阅读数 18

比如要制作如上的雷达特效。我们用虚幻引擎的shader编辑器来做,因为它对图形化hlsl语言的支持非常好,因为这个是纯二维的CG特效,我们使用后期处理(post process)材质来表现。首先进行阶级分析,这个雷达图(虽然不知道这种图案与现代雷达有什么关联)由3个部分组成,分别是:


  • 同心圆环剔除

  • 扇形渐变(极坐标的线性渐变)

  • 圆形剔除


所以我们一个一个做。首先最简单的圆形剔除,即将正方形变成内接圆。






将这个结果(0或1)与最终结果相乘即可。然后是同心圆剔除,即随着半径的变化,像素呈周期性显示/隐藏,形成不同的同心圆环,数学中常见的周期函数有三角函数和取余函数,由于三角函数比较贵,我们用fmod来计算周期变换。



modulate(1)与fraction()的区别


x对1取余和x的小数部分有什么区别?第一仪限上没有区别,但在第二仪限上是不一样的(注:仪限指正半轴或负半轴)。首先我们看fract函数,图像在x轴上方:



下面的图像是fmod奇函数:





所以思考算法的时候一定要想象函数图像,才能一目了然。由于像素到圆心距离是0~0.5,我们先对0.2取余(影响圆环的数量),然后取图像上大于0.15的部分作为圆环的宽度,于是得到了如下的算法:




得到的buffer如下,仍然是通过step函数得到0或1,目的是与最终图像做乘法运算:




如果要让它动起来,则需要加上Time参数。最后我们做扇形渐变。从动画中可以看出,以圆心为原点的二维极坐标中,随着角度α不同,透明度不同,所以我们先求出像素的α值:利用反正切函数可以快速求出。





得到的buffer如下,此时是0~1的线性渐变,后面可以取个立方得到非线性渐变,让曲线偏向0。







最后我们把三种buffer叠加起来,注意我没有使用蓝色节点,全是绿色的,因为绿色节点是HLSL标准库函数,蓝色节点是UE自定义的函数(往往由多个标准函数组成),这样做是为了使shader代码更容易复现。



使用的截屏插件(滚动截长图):Blueprint Graph Screenshot (Regardless of screen size)




此shader的整体性能:

  • User interpolators: 2/4 Scalars (1/4 Vectors) (TexCoords: 2, Custom: 0)

  • Base pass shader without light map: 65 instructions

  • Base pass vertex shader: 197 instructions

  • Texture samplers: 4/16





得到如下:(非静止画面)







本文分享自微信公众号 - WebHub(myWebHub)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部