Unity Shader - 放大镜

最新推荐文章于 2023-05-23 12:58:16 发布
原创 最新推荐文章于 2023-05-23 12:58:16 发布 · 186 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

前言

今天闲来无事，实现了一个简单的放大镜特效。
效果图如下：

思路

思路其实很简单，大致分为两个步骤：
  1. 先实现整体放大效果；
  2. 最后在一定范围内放大(这里是圆)
既然是放大镜,那也就是对图像的处理, 这里我们就需要用到后期处理了， 在Camera上面挂一个c#脚本来捕获需要渲染的图像，然后通过shader处理后渲染。

实现

1.首先我们来实现一下整体放大的效果：
思路非常简单： 沿着 中心点到当前像素点的方向 采样像素点即可, 采样的距离越大, 缩放率就越大。
这里就贴一下关键代码，完整代码在文章最后会贴出来。
关键代码如下： 
    

     // ---------------------------【片元着色器】---------------------------
     

     fixed4
      frag 
     (
     VertexOutput
      i
     )
      
     :
      SV_Target

     {
     
    
     // 中心点(鼠标点击位置，由c#传过来)
     
    
     float2
      center 
     =
      _Pos
     ;
     
    
     // 方向
     
    
     float2
      dir 
     =
      center
     -
     i
     .
     uv
     ;
     
    
     // 沿着缩放方向 缩放
     
    
     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor
     )
     ;
     
    
     return
      col
     ;
     

     }
效果如下：
2.然后限制它在一定范围内缩放：
我们这里就实现最简单的，让它在一个圆的范围内缩放。
其实我们仔细思考一下，会发现这个也比较简单，
决定缩放的关键代码无非就是这行： 
    

         
     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor
     )
     ;
只要我们给缩放因子乘以一个控制变量(atZoomArea), 当 atZoomArea = 0 时, 不缩放; 当 atZoomArea = 1 时 缩放。
代码修改如下： 
    

     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor 
     *
      atZoomArea 
     )
     ;
现在最关键的点来了， 我们怎么计算出 控制变量(atZoomArea)呢？
这里就和之前的文章 Unity Shader - 遮罩效果 类似了。
可以通过判断当前像素点到中心点的距离是否小于等于 圆的半径来决定是否在圆内。 小于说明在圆内，反之则不在，代码如下： 
    

     // ---------------------------【片元着色器】---------------------------
     

     fixed4
      frag 
     (
     VertexOutput
      i
     )
      
     :
      SV_Target

     {
     
    
     // 中心点(鼠标点击位置，由c#传过来)
     
    
     float2
      center 
     =
      _Pos
     ;
     
    
     // 方向
     
    
     float2
      dir 
     =
      center
     -
     i
     .
     uv
     ;
     
    
     //当前像素到中心点的距离
     
    
     float
      dis 
     =
      
     length
     (
     dir
     )
     ;
     
    
     // 是否在放大镜区域
     
    
     fixed
      atZoomArea 
     =
      
     1
     -
     step
     (
     _Size
     ,
     dis
     )
     ;
     
    
     // 沿着缩放方向 缩放
     
    
     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor 
     *
      atZoomArea
     )
     ;
     
    
     return
      col
     ;
     

     }
效果如下:
我们发现这个圆不太一样,是一个椭圆, 这是由于 屏幕宽高不一样, 然而在uv中, x轴和y轴始终是在[0,1]区间内, 所以造成圆被拉伸成了椭圆。
解决方案如下： 
    

     fixed4
      frag 
     (
     VertexOutput
      i
     )
      
     :
      SV_Target

     {
     
    
     //屏幕长宽比 缩放因子
     
    
     float2
      scale 
     =
      
     float2
     (
     _ScreenParams
     .
     x 
     /
      _ScreenParams
     .
     y
     ,
      
     1
     )
     ;
     
    
     // 中心点(鼠标点击位置，由c#传过来)
     
    
     float2
      center 
     =
      _Pos
     ;
     
    
     // 方向
     
    
     float2
      dir 
     =
      center
     -
     i
     .
     uv
     ;
     
    
     //当前像素到中心点的距离
     
    
     float
      dis 
     =
      
     length
     (
     dir
     *
     scale
     )
     ;
     
    
     // 是否在放大镜区域
     
    
     fixed
      atZoomArea 
     =
      
     1
     -
     step
     (
     _Size
     ,
     dis
     )
     ;
     
    
     // 沿着缩放方向 缩放
     
    
     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor 
     *
      atZoomArea
     )
     ;
     
    
     return
      col
     ;
     

     }
如图:
以上,基本的功能已经实现了, 其实我们还可以优化一下, 我们仔细看这个圆的边缘锯齿感比较严重, 我们可以使之更加平滑!
可以用 smoothstep 函数代替 step 达到平滑的效果。 
    

     // fixed atZoomArea = 1-step(_Size,dis);
     

     float
      atZoomArea 
     =
      
     smoothstep
     (
     _Size 
     +
      _EdgeFactor
     ,
     _Size
     ,
     dis 
     )
     ;
最终效果如下:
最终完整代码如下：
C#:
PostEffectsBase 基类可以在这里获取(来自《Unity Shader入门精要》) 
    

     // create by 长生但酒狂
     

     // create time 2020.4.8
     

     // ---------------------------【放大镜特效】---------------------------
     


     using
      
     UnityEngine
     ;
     

     public
      
     class
      
     Zoom
      
     :
      
     PostEffectsBase
      
     {
     
    
     // shader
     
    
     public
      
     Shader
      myShader
     ;
     
    
     //材质 
     
    
     private
      
     Material
      mat 
     =
      
     null
     ;
     
    
     public
      
     Material
      material 
     {
     
        
     get
      
     {
     
            
     // 检查着色器并创建材质
     
            mat 
     =
      CheckShaderAndCreateMaterial 
     (
     myShader
     ,
      mat
     )
     ;
     
            
     return
      mat
     ;
     
        
     }
     
    
     }
     

    
     // 放大强度
     
    
     [
     Range
      
     (
     -
     2.0f
     ,
      
     2.0f
     )
     ,
      
     Tooltip
      
     (
     "放大强度"
     )
     ]
     
    
     public
      
     float
      zoomFactor 
     =
      
     0.4f
     ;
     

     
     // 放大镜大小
     
    
     [
     Range
      
     (
     0.0f
     ,
      
     0.2f
     )
     ,
      
     Tooltip
      
     (
     "放大镜大小"
     )
     ]
     
    
     public
      
     float
      size 
     =
      
     0.15f
     ;
     

    
     // 凸镜边缘强度
     
    
     [
     Range
      
     (
     0.0001f
     ,
      
     0.1f
     )
     ,
      
     Tooltip
      
     (
     "凸镜边缘强度"
     )
     ]
     
    
     public
      
     float
      edgeFactor 
     =
      
     0.05f
     ;
     

    
     // 遮罩中心位置
     
    
     private
      
     Vector2
      pos 
     =
      
     new
      
     Vector4
      
     (
     0.5f
     ,
      
     0.5f
     )
     ;
     

    
     void
      Start 
     (
     )
      
     {
     
        
     //找到对应的Shader文件  
     
        myShader 
     =
      Shader
     .
     Find 
     (
     "lcl/screenEffect/Zoom"
     )
     ;
     
    
     }
     

    
     // 渲染屏幕
     
    
     void
      OnRenderImage 
     (
     RenderTexture
      source
     ,
      
     RenderTexture
      destination
     )
      
     {
     
        
     if
      
     (
     material
     )
      
     {
     
            
     // 把鼠标坐标传递给Shader
     
            material
     .
     SetVector 
     (
     "_Pos"
     ,
      pos
     )
     ;
     
            material
     .
     SetFloat 
     (
     "_ZoomFactor"
     ,
      zoomFactor
     )
     ;
     
            material
     .
     SetFloat 
     (
     "_EdgeFactor"
     ,
      edgeFactor
     )
     ;
     
            material
     .
     SetFloat 
     (
     "_Size"
     ,
      size
     )
     ;
     
            
     // 渲染
     
            Graphics
     .
     Blit 
     (
     source
     ,
      destination
     ,
      material
     )
     ;
     
        
     }
      
     else
      
     {
     
            Graphics
     .
     Blit 
     (
     source
     ,
      destination
     )
     ;
     
        
     }
     
    
     }
     

    
     void
      Update 
     (
     )
      
     {
     
        
     if
      
     (
     Input
     .
     GetMouseButton 
     (
     0
     )
     )
      
     {
     
            
     Vector2
      mousePos 
     =
      Input
     .
     mousePosition
     ;
     
            
     //将mousePos转化为(0，1)区间
     
            pos 
     =
      
     new
      
     Vector2
      
     (
     mousePos
     .
     x 
     /
      Screen
     .
     width
     ,
      mousePos
     .
     y 
     /
      Screen
     .
     height
     )
     ;
     
        
     }
     
    
     }
     

     }
Shader: 
    

     // create by 长生但酒狂
     

     // create time 2020.4.8
     

     // ---------------------------【放大镜特效】---------------------------
     

Shader 
     "lcl/screenEffect/Zoom"
     

     {
     
    
     // ---------------------------【属性】---------------------------
     
    Properties
    
     {
     
        _MainTex 
     (
     "Texture"
     ,
      
     2D
     )
      
     =
      
     "white"
      
     {
     }
     
    
     }
     
    
     // ---------------------------【子着色器】---------------------------
     
    SubShader
    
     {
     
        
     // No culling or depth
     
        Cull Off ZWrite Off ZTest Always
        
     // ---------------------------【渲染通道】---------------------------
     
        Pass
        
     {
     
            CGPROGRAM
            
     #
     pragma
      vertex vert
     
            
     #
     pragma
      fragment frag
     

            
     #include 
     "UnityCG.cginc"
     
            
     //顶点输入结构体
     
            
     struct
      
     VertexInput
     
            
     {
     
                
     float4
      vertex 
     :
      POSITION
     ;
     
                
     float2
      uv 
     :
      TEXCOORD0
     ;
     
            
     }
     ;
     
            
     // 顶点输出结构体
     
            
     struct
      
     VertexOutput
     
            
     {
     
                
     float2
      uv 
     :
      TEXCOORD0
     ;
     
                
     float4
      vertex 
     :
      SV_POSITION
     ;
     
            
     }
     ;
     

            
     // 变量申明
     
            
     sampler2D
      _MainTex
     ;
     
            
     float2
      _Pos
     ;
     
            
     float
      _ZoomFactor
     ;
     
            
     float
      _EdgeFactor
     ;
     
            
     float
      _Size
     ;
     
            
     // ---------------------------【顶点着色器】---------------------------
     
            
     VertexOutput
      vert 
     (
     VertexInput
      v
     )
     
            
     {
     
                
     VertexOutput
      o
     ;
     
                o
     .
     vertex 
     =
      
     UnityObjectToClipPos
     (
     v
     .
     vertex
     )
     ;
     
                o
     .
     uv 
     =
      v
     .
     uv
     ;
     
                
     return
      o
     ;
     
            
     }
     
            
     // ---------------------------【片元着色器】---------------------------
     
            
     fixed4
      frag 
     (
     VertexOutput
      i
     )
      
     :
      SV_Target
            
     {
     

                
     //屏幕长宽比 缩放因子
     
                
     float2
      scale 
     =
      
     float2
     (
     _ScreenParams
     .
     x 
     /
      _ScreenParams
     .
     y
     ,
      
     1
     )
     ;
     
                
     // 放大区域中心
     
                
     float2
      center 
     =
      _Pos
     ;
     
                
     float2
      dir 
     =
      center
     -
     i
     .
     uv
     ;
     

                
     //当前像素到中心点的距离
     
                
     float
      dis 
     =
      
     length
     (
     dir 
     *
      scale
     )
     ;
     
                
     // 是否在放大镜区域
     
                
     // fixed atZoomArea = 1-step(_Size,dis);
     
                
     float
      atZoomArea 
     =
      
     smoothstep
     (
     _Size 
     +
      _EdgeFactor
     ,
     _Size
     ,
     dis 
     )
     ;
     

                
     fixed4
      col 
     =
      
     tex2D
     (
     _MainTex
     ,
      i
     .
     uv 
     +
      dir 
     *
      _ZoomFactor 
     *
      atZoomArea 
     )
     ;
     
                
     return
      col
     ;
     
            
     }
     
            ENDCG
        
     }
     
    
     }
     

     }

最后

欢迎来我 GitHub 点个Star，谢谢！ 里面有我平时学习unity shader过程中实现的一些特效demo。
ShaderJoy —— 实现“放大镜/缩小镜”【GLSL】
ShaderJoy 的兴趣技术杂货铺
08-09 7264
本文参考自：http://www.renjihe.com/index.php/archives/776 放大效果： 缩小效果： 片元着色器代码： const float in_circle_radius = 96.; //从客户端传入的放大镜圆半径 const float in_zoom_times = 2.; ...
【Unity Shader】Special Effects（六）Pixel 像素化（UI）
神码编程
09-30 1277
更新日期：2021年9月30日。 Github源码：[点我获取源码] 索引Pixel 像素化思路分析放大uv细节像素大小缩放系数最终输出像素波动动画 Pixel 像素化 像素化效果就是所谓的降采样导致的结果，这在一些低端设备上很常见，比如90年代的小霸王红白机，那是因为硬件性能不足而导致的表现效果上的折中体现，如今，我们同样可以通过降采样的方式来实现将一张高像素的图像低像素化： 思路分析 低像素化的本质也即是降低了图片的分辨率，比如一张图的像素大小为100*100，我们将它缩小到20*20，那么剩下的.
unity的shader实现的放大作用
01-18
unity的shader实现的放大作用；unity的shader实现的放大作用；
D3Dshader，像素着色器实现多种形状放大镜（圆形、方形、三角形、梯形、六边形、心形、五角星形）
Smartljh的博客
05-23 528
使用HLSL 像素着色器实现多种形状放大镜（圆形、方形、三角形、梯形、六边形、心形、五角星形）
使用OpenGL Shader实现放大镜效果
qhexin的专栏
01-30 4036
http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.renjihe.com%2Findex.php%2Farchives%2F776 周末闲来无事，想玩玩OpenGL Shader，想想就实现一个放大镜效果的Shader吧。 着色器可以指定放大镜位置、半径、及放大部数，我实现是在片段着色中使用向后映射的双线性插值的方式对当前片段颜色进行插值
Unity放大镜效果 magnify-glass-effect-unity-master.zip
04-08
https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/magnifying-glass-44009#content 跟这个差不多
Unity Shader放大镜效果：zoomShader.unitypackage
05-22
https://blog.youkuaiyun.com/a592733740/article/details/106292912
Unity Shader-兰伯特光照模型与Diffuse Shader
热门推荐
puppet_master的专栏
12-01 2万+
一.简介 学了一段时间shader，然而一直在玩后处理，现在终于下定决心钻研一下真正的带光照的shader。从Diffuse到Specular，到Bump等等。一个游戏的画面好坏，很大程度上取决于光照和贴图。有了光，游戏世界才显得真实，所以，首先我们先来看一下现在游戏中最简单的几种光照模型。 二.简单光照模型 1.预备知识 我们观察世界是因为有光进入我们的眼
Unity Shader-法线贴图（Normal Map）与视差贴图（Parallax Map）
puppet_master的专栏
03-15 1万+
简介 法线贴图技术至今一直是游戏增强画面效果的利器之一。随着移动设备的性能越来越好，曾经的在PC平台的各种高级技术在移动平台也都开始大规模使用了。最近印象最深刻的就是《镇魔曲》，场景地形全部都加了法线，可以说是无所不用其极了....之前还没见过哪个游戏在移动平台敢这么大规模地使用法线。而且人模的渲染也是走的次时代的流程。不得不说大厂就是牛，本屌丝只能望别人家的游戏兴叹啊。本篇文章主要是研
精选资源
Unity镜面Shader插件
08-07
Unity镜面Shader插件
Unity shader实现自由放大缩小效果
08-26
主要为大家详细介绍了Unity shader实现自由放大缩小效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
SeniorUI0401_Shader使用：放大镜效果
baopengjian的专栏
06-08 735
3 Requirement： 放大镜效果 1、一张背景图片，触摸背景图片，会显示触摸区域会显示一个圆形放大 2、 手指滑动，触摸区域会随着移动 4 Theory 1）利用Paint的Shader实现 2） 将图片放大，创建一个ShapeDrawable，设置它的区域 3） 监听onTouchEvent，利用Matrix移动，设置到ShapeDrawable中 5 CoreCode...
bitmapshader 实现图片的放大镜效果
kakaxiqianxin的专栏
11-29 1076
/** * Created by qianxin on 16/11/25. */ public class ZoomImageView extends View { private Bitmap bitmap; private Paint paint; //放大倍数 private static final int FACTOR = 3; //放大
使用UnityShader实现模型变大效果
weixin_36961960的博客
04-24 1064
使用UnityShader实现外发光效果 实现原理------------------------------------------------------------------------------------ 模型顶点延法线方向延伸即可 v2f vert (appdata v) { v2f o; v.vertex.xyz += v.normal * _Scale; //顶点在法线方向上延长 o.ve
Unity Shader放大镜效果
a592733740的博客
05-22 3211
小菜最近看到了一篇关于Shader实现的放大镜效果，酷炫的效果让小菜倍生好奇，冲动之下还是搬来练练手，刚好巩固下自己的顶点片元着色器编码。 有没有想学习的冲动！！！ 文章的开始先来介绍一款好用的vs编辑shader的免费插件。 ShaderlabVS可以支持部分关键字提示。这将解决困扰好多编写shader没有预选关键字提示的痛苦。 微软自身的HLSL这款小菜也用过，感觉不是很好用。 放大镜实现的思路其实很简单。分步拆解我们先来考虑围绕鼠标点击做缩放。 shade...
unity shader 实现自由放大缩小效果
clzmin的博客
06-24 7422
unity shader 实现自由放大缩小效果
Unity&Shader案例篇—旋转、平移和缩放
Just do IT
07-25 1万+
一、前言      在Unity中通过控制物体的Transform可以很容易的对物体进行旋转、平移和缩放，得到一些简单的动画效果。但是有个不好的地方是，一旦这个物体上有碰撞体的话，会跟环境发生碰撞。我就就想能不能在不麻烦特效动画那边的情况下，自己用Shader去处理一些基于模型顶点或贴图的dong动画效果。如图所示是我完全使用Shader处理处理的顶点的xuan旋转、平移和缩放，另外还有两个是贴...
使用UnityShader实现图片沿中心缩放的功能（附UE4中的3种实现方法）
HeizJiao的博客
03-05 7224
使用UnityShader实现图片沿中心缩放（附UE4中的3种实现方法）原理Unity中Shader的实现UE4中的3种实现方法方法1（使用虚幻自带的节点）方法2（使用蓝图节点自己计算）方法3（使用custom节点进行运算） 原理 在网上搜了一下贴图沿中心缩放的代码，发现并没有，自己研究了一下午最后得出了结论 对原理不敢兴趣的同学可以直接跳到第二部分的shader实现上，下面讲原理部分 首先，在U...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值