Unity中Shader抓取屏幕并实现扭曲效果(优化)

这篇具有很好参考价值的文章主要介绍了Unity中Shader抓取屏幕并实现扭曲效果(优化)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

对上一篇中实现的shader进行优化


一、在之前顶点着色器的输入中,放弃了使用结构体传入,而是直接从应用程序阶段传入参数,这样写的话,对于程序来说,不方便扩张,所以需要对其进行修改

实现

1、定义结构体用于传入顶点坐标系

struct appdata
{
float4 vertex : POSITION;
//从应用程序阶段的输入,多加一个uv,用于对扭曲纹理的采样
float2 uv : TEXCOORD;
};

2、因为UnityObjectToClipPos是从本地空间转换到裁剪空间,但是没有进行透视除法,所以需要对其进行透视除法,用转化后的结果的 xyz / w 就可以进行透视除法

v2f vert (appdata v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv,_DistortTex) + _Distort.xy * _Time.y;
//把本地空间转化到其次裁剪空间后的结果,进行透视除法后, 传给 screenUV
o.screenUV.xyz = o.pos.xyz / o.pos.w;
return o;
}


3、因为屏幕坐标的原点一般在左上角(DirectX) 或 左下角(OpenGL) (我的是DirectX平台,所以在左上角。),会造成显示的位置,和我们需要的位置不同,所以需要对其进行计算平移缩放处理

unity spriterender扭曲效果,Unity,unity,游戏引擎

DirectX平台:fixed2 uv = fixed2(i.screenUV.x * 0.5,i.screenUV.y * -0.5) + 0.5;
OpenGL平台:fixed2 uv = i.screenUV * 0.5 + 0.5;

改到顶点着色器中计算

DirectX平台:
o.screenUV.x = o.screenUV.x * 0.5 + 0.5;
o.screenUV.y = o.screenUV.y * -0.5 + 0.5;
OpenGL平台:
o.screenUV.x = o.screenUV * 0.5 + 0.5;

unity spriterender扭曲效果,Unity,unity,游戏引擎

但是这样是插值计算的会有误差瑕疵,所以还是改在片元着色器中计算

DirectX平台:
fixed2 uv = i.screenUV.xy / i.screenUV.w;
uv.x = uv.x * 0.5 +0.5;
uv.y = uv.y * -0.5 + 0.5;


二、改用Unity内置提供的方法(平台间互通)

ComputeScreenPos(float4 pos)
pos为裁剪空间下的坐标位置,返回的是某个投影点下的屏幕坐标位置
由于这个函数返回的坐标值并未除以齐次坐标,所以如果直接使用函数的返回值的话,需要使用:tex2Dproj(_ScreenTexture, uv.xyw);
也可以自己处理其次坐标,使用:tex2D(_ScreenTexture, uv.xy / uv.w);

在顶点着色器:o.screenUV = ComputeScreenPos(o.pos);
在片元着色器:fixed4 grabTex = tex2Dproj(_GrabTex,i.screenUV);


三、最后加上扭曲

Shader "MyShader/P0_10_5"
{
    Properties
    {
        //实现扭曲,就需要传入贴图来实现扰度
        _DistortTex("DistortTex",2D) = "white"{}
        
        _Distort("SpeedX(X) SpeedY(y) Distort(Z)",vector) = (0,0,0,0)
    }
    SubShader
    {
        Tags{"Queue" = "Transparent"}
        //屏幕抓取需要单独使用一个Pass —— GrabPass{} 里面什么都不写,或者GrabPass{"_GrabTex"}
        GrabPass{"_GrabTex"}
        //使用Cull off 让两面都有扭曲
        Cull Off
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                //从应用程序阶段的输入,多加一个uv,用于对扭曲纹理的采样
                float2 uv : TEXCOORD;
                
            };
            
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                float4 screenUV:TEXCOORD1;
            };

            //在使用抓取的屏幕前,需要像使用属性一样定义一下,_GrabTexture这个名字是Unity定义好的
            sampler2D _GrabTex;
            sampler2D _DistortTex;float4 _DistortTex_ST;
            float4 _Distort;

            
            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv,_DistortTex) + _Distort.xy * _Time.y;
                //pos为裁剪空间下的坐标位置,返回的是某个投影点下的屏幕坐标位置
                o.screenUV = ComputeScreenPos(o.pos);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                //DirectX平台:
                /*fixed2 uv = i.screenUV.xy / i.screenUV.w;
                uv.x = uv.x * 0.5  +0.5;
                uv.y = uv.y * -0.5 + 0.5;*/
                
                fixed4 distortTex = tex2D(_DistortTex,i.uv);

                //使用线性插值来控制UV的扭曲程度
                float2 uv = lerp(i.screenUV.xy/i.screenUV.w,distortTex,_Distort.z);
                //对抓取的屏幕进行采样
                fixed4 grabTex = tex2D(_GrabTex,uv);
                return grabTex;
                
            }
            ENDCG
        }
    }
}


效果:
unity spriterender扭曲效果,Unity,unity,游戏引擎文章来源地址https://www.toymoban.com/news/detail-772587.html

到了这里,关于Unity中Shader抓取屏幕并实现扭曲效果(优化)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity用Shader实现边缘光效果

    《自学记录》 1、先创建一个Cube,再创建两个材质球Cube、Unilt 2、再创建一个shader代码UniltShader【Project右键Create-Shader-NewSurfaceShader】把里面原来的代码删除,写入下面的代码 3、把shader UniltShader拖给材质球Unilt 4、把Cube的Mesh Renderer中Materials的Size改为2,然后把材质球Cube、Unilt分

    2024年02月08日
    浏览(46)
  • 【unity shader案例】如何实现一个玻璃效果

      原理:玻璃最大的特点当然就是半透明了,如何在游戏中实现这样的效果呢?我这里总体的思路就是先截取整个场景作为一张纹理,然后把玻璃区域的纹理贴到这个玻璃模型上。 下面看具体实现代码 实现效果如下    更进一步,还可以实现毛玻璃的效果,思路就是用一张

    2024年02月16日
    浏览(54)
  • Unity中Shader实现UI流光效果

    在很多游戏的 UI 中,都有实现 一道光扫过 UI 的效果 Unity中Shader的时间_Time 注意: 因为,这是UGUI的Shader,记着修改渲染顺序为 透明层级 和 混合模式 Tags {“Queue” = “TransParent”} Blend SrcAlpha OneMinusSrcAlpha 代码: 效果: Unity3D Shader系列之UI流光效果 Unity流光shader,无需图片

    2024年02月05日
    浏览(53)
  • Unity实现屏幕淡入淡出效果

    预期效果:为实现在进入新场景时的淡入淡出效果 编译器版本:2021.3.19f1c1 使用组件:UI -- RawImage 在Unity场景切换的时候,使用RawImage制作场景的淡入淡出效果。 添加RawImage,覆盖全屏,将脚本添加上去

    2024年02月12日
    浏览(91)
  • Unity Shader学习记录(11) ——透明效果的实现方式

    1 透明效果的两种方法 透明是游戏中经常要使用的一种效果。在实时渲染中要实现透明效果,通常会在渲染模型时控制它的透明通道(Alpha Channel)。当开启透明混合后,当一个物体被渲染到屏幕上时,每个片元除了颜色值和深度值之外,它还有另一个属性一一透明度。 当透明度

    2024年02月07日
    浏览(45)
  • unity shader 入门 全透明与半透明效果实现

    片元函数的fixed4类型的返回值的第4位即为阿尔法值,0代表完全不显示(透明),1代表完全显示。中间的数值代表半透明。但只修改这个值是不能直接修改透明度的,因为还要对队列等进行修改。 本文介绍透明度测试与透明度混合,前者只能制作全透明效果,后者可制作半透明

    2024年02月14日
    浏览(49)
  • 【unity插件】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件

    一般的shader无法直接使用在UI上,需要在shader中定义特定的面板参数,今天就来推荐github上大佬做的一套开源的一系列UGUI,Shader实现的特效——UIEffect 为 Unity UI 提供视觉效果组件。 https://github.com/Ankh4396/UIEffect 让我们用效果来装饰你的UI!您可以根据需要从脚本和检查器中控

    2024年02月04日
    浏览(46)
  • 【unity实战】使用shader和shader Graph实现2d图片描边效果(附源码)

    最近在学习shader Graph相关内容,其实关于实现2d图片描边效果,网上可以看到很多教程,但是我发现大多数都是基于比较老旧的2018unity版本,可是我们实际开发使用可能是比较新的2021及以上版本,差别还是有的,实际在升级或者使用过程中,会遇到诸多问题,而且也很少有人

    2024年02月16日
    浏览(56)
  • 【实现100个unity特效】shader实现3D物品闪光和描边效果

    线状映射图片 配置,按该shader新增材质 Outline Width控制描边 Line Speed控制闪光速度 当然,还可以修改对应的颜色 效果演示 赠人玫瑰,手有余香!如果文章内容对你有所帮助,请不要吝啬你的 点赞评论和关注 ,以便我第一时间收到反馈,你的每一次 支持 都是我不断创作的最

    2024年01月25日
    浏览(66)
  • 【Unity】URP屏幕后处理UI模糊效果实现

     这里Canvas(1)设置为Overlay能渲染出指定UI高清,其他UI模糊,然而这做法非常不好,如果此时再打开UI 以及 关闭模糊效果 要将这些置顶UI 恢复到原本Canvas里,也就是要管理2套Canvas Shader代码实现模糊  1个Canvas和2个摄像机 主要以上内容,实际上就是因为Render Pass Event是只能Af

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包