Unity 全息影像

对于小菜的柏林（Perlin）噪声图可以说是有了很多篇幅的介绍了，本篇仍将是噪声图的应用篇。最近心血来潮在b站上偶然看到了老外在介绍全息影像的效果，带着兴奋去百度了一下，本想偷个懒模仿一下，奈何网上一看全都是Shader Graph制作全息影像的方法千篇一律。不会使用的Shader Graph的小菜只能留下痛苦的眼泪。还有少量的一些还要收费，交钱小菜当然是不会交钱的了，这辈子都不会。默默的双击起Unity泡一杯清茶通宵达旦的搞起了造轮子的工作。

    先来看效果图。

赶时间做的效果原谅小菜做的渣，实际上还可以做的更加的精致的。

 

准备材料

准备材料为三张图

普通纹理

特殊遮罩纹理

噪声图

 

类似于百叶窗效果的这种纹理，ps中随手可得，也可以尝试更多好玩有趣的纹理来制作。

 

实现原理

1).使用ComputeScreenPos(i.vertex)获取到齐次坐标系下顶点的屏幕坐标值（主要是兼顾将模型打散的做法的情况）。

2).扰动屏幕坐标的y值，让其影响到对特殊纹理的uv流动。达到从上到下频闪的效果。

3).使用噪声图对颜色做变化叠加达到不规律闪烁效果。

4).将3张纹理的颜色做融合。

 

实现编码

 

顶点函数

对mvp矩阵变化后的顶点获取到其齐次坐标系下的屏幕坐标值。存入到v2f最终在片元函数贴图采样时使用。注意顶点函数和片元函数并非是1对1的执行关系，假设一个立方体有4个顶点（仅仅假设，实际unity的立方体并不是4个），那么顶点函数在一次调用中可能只执行4次，而片元函数的执行要达百次千次。

 

片元函数

很容易理解的编码，小菜都不知道该说什么了。

为了能让颜色值有更大的变化空间。小菜开启了颜色的HDR

作用是可以突破普通颜色[0,1]的取值区间。让亮暗变化的空间更大。若是配合bloom还能达到bling-bling的亮瞎眼球效果。

 

整个实现仅仅一个pass块，注意颜色的透明设置。

 

 

可以改进的地方

原谅小菜制作的仓促。

小菜觉得实际上还有2处可改进的地方。

1).添加画面的周期性扭曲。使用sin或者cos扰动下 uv x值致使扭曲。当然噪波也是很好的选择。(效果最好是y轴下中间明显，上下两头弱)。

 

2).增加边缘的颜色，通过视向量和顶点的法线的点乘（dot），可以判断出距离边缘程度对其边缘上色。核心编码如下：