Unity Shader放大镜效果

小菜最近看到了一篇关于Shader实现的放大镜效果，酷炫的效果让小菜倍生好奇，冲动之下还是搬来练练手，刚好巩固下自己的顶点片元着色器编码。

 

有没有想学习的冲动！！！

 

文章的开始先来介绍一款好用的vs编辑shader的免费插件。

ShaderlabVS可以支持部分关键字提示。这将解决困扰好多编写shader没有预选关键字提示的痛苦。

微软自身的HLSL这款小菜也用过，感觉不是很好用。

 

放大镜实现的思路其实很简单。分步拆解我们先来考虑围绕鼠标点击做缩放。

shader的片元函数如下：

 

我们使用Unity的后处理函数的方式，在最后一次渲染前叠加我们的材质做效果融合。c#代码如下：

此处有一个注意点，UI的元素（Image,RawImage等）渲染要特殊一些。可以选择建立2D->Sprite或者3D-Panel的方式。小菜曾在一开始就踩在了这个卡点上。确定一切准确无误后，运行看我们的效果。

 

接着我们想办法来模拟放大镜限定在一个圆的范围内缩放。回顾下上面编码小菜实现缩放的核心是：

我们可以给缩放因子_ZoomFactor再乘一个变量（isZoomArea），当bZoomArea =0 时不缩放，bZoomArea =1 时缩放.

编码仅仅在上面的基础上改动了一处。为什么小菜不用bool值的true false呢？，shader中if（和for）都是极其消耗的操作，小菜使用float可以直接相乘计算得结果。。接下来的关键是我们如何去划分计算isZoomArea变量的值呢？

 

回顾下我们的数学知识。（不要头大）。我们想要知道像素点是否在圆上，可以通过当前鼠标点的位置和当前像素的位置的距离和圆的半径做比较可以得知，小于圆半径说明在圆内，大于在处于圆外。实践改造如下：

shader 内置的step可能看起来有些眼生。在HLSL中， step（a,b)既是当b>=a时返回1，否则返回0。试想下如果没有step函数我们是不是又动了写if的念头呢?

小菜已经迫不及待运行看看。

好奇怪为什么是个椭圆，这分明和一开始的设想不一样嘛。冷静……冷静。吃包辣条压压惊后冷静一分析。原来这是由于我们的game窗口中看到的屏幕宽高不一样，也就是坐标系的x和y非等比例1：1缩放所造成圆被拉伸成了椭圆。不知道小伙伴有没有想明白。反正小菜实在坑里绕了好久。

怎么解决呢？我们不妨把屏幕的长和宽的缩放比拿过来与方向向量做个乘法来挽回这个宽高比的影响。，晕了晕了，成功被小菜带晕了。

终于看到正常的圆了。

完美了吗？作为极度完美主义者的小菜，敏锐的察觉到圆的边缘锯齿感比较严重，小菜还能苟，还能改造的更加平滑些。

 

小菜用smoothstep函数来代替step达到的平滑效果。

smoothstep函数什么鬼？小菜也是一听数据函数就头大，实际上smoothstep是为了改善0和1之前的硬切变化，在0-1之前做插值。

 

smoothstep(a,b,x)可以用来生成0到1的平滑过渡。

 

最终呈现效果如下：