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

    先来看效果图。

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码

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

 

准备材料

准备材料为三张图

普通纹理

Unity 720全景图相机代码 unity全景图片_齐次坐标系_02

特殊遮罩纹理

Unity 720全景图相机代码 unity全景图片_齐次坐标系_03

噪声图

Unity 720全景图相机代码 unity全景图片_Graph_04

 

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

 

实现原理

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

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

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

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

 

实现编码

 

顶点函数

Unity 720全景图相机代码 unity全景图片_齐次坐标系_05

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

 

片元函数

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码_06

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

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码_07

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码_07

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

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码_09

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

 

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

Unity 720全景图相机代码 unity全景图片_齐次坐标系_10

 

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码

 

可以改进的地方

原谅小菜制作的仓促。

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

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

 

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

Unity 720全景图相机代码 unity全景图片_齐次坐标系_12

Unity 720全景图相机代码 unity全景图片_Unity 720全景图相机代码_13