比如要制作如上的雷达特效。我们用虚幻引擎的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
得到如下:(非静止画面)\