【unity shader案例】如何实现一个玻璃效果

这篇具有很好参考价值的文章主要介绍了【unity shader案例】如何实现一个玻璃效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

下面看具体实现代码


Shader "Unlit/Glass"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        //这里首先要设置为透明的渲染队列Transparent,玻璃不需要投影所以设置IgnoreProjector
        Tags {"Queue"="Transparent" "IgnoreProjector" = "True" "RenderType"="Opaque"}

        ZWrite ON
        Lighting Off 
        Cull Off 
        Blend One Zero
        Fog{Mode Off}
       //截图整个屏幕画面
        GrabPass {"_GrapTexture"}
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
  

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
            };

            struct v2f
            {
                float4 uvgrab : TEXCOORD1;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            sampler2D _GrapTexture;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                //齐次坐标下的屏幕坐标值
                o.uvgrab = ComputeGrabScreenPos(o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                half4 mainColor = tex2D(_MainTex,i.vertex);
                //对玻璃后面的背景纹理采样
                fixed4 col = tex2Dproj(_GrapTexture,UNITY_PROJ_COORD(i.uvgrab));
                return col*mainColor;
            }
            ENDCG
        }
    }
}

实现效果如下

unity 毛玻璃,unity,游戏引擎,图形渲染

 unity 毛玻璃,unity,游戏引擎,图形渲染

 更进一步,还可以实现毛玻璃的效果,思路就是用一张法线贴图,对采样结果进行扰动,代码如下


Shader "Unlit/Glass"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _BumpMap("Bump Map",2D) = "bump" {}
        _Magnitude("Magnitude",Range(0,1)) = 0.05
        _Color("Color",Color) = (1,1,1,1)
    }
    SubShader
    {
        //这里首先要设置为透明的渲染队列Transparent,玻璃不需要投影所以设置IgnoreProjector
        Tags {"Queue"="Transparent" "IgnoreProjector" = "True" "RenderType"="Opaque"}

        ZWrite ON
        Lighting Off 
        Cull Off 
        Blend One Zero
        Fog{Mode Off}
       //截图整个屏幕画面
        GrabPass {"_GrapTexture"}
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
  

            #include "UnityCG.cginc"

            struct appdata
            {
               float4 vertex : POSITION;
                float4 color : COLOR;
                float2 texcoord : TEXCOORD0;
            };


            struct v2f
            {
                float4 vertex : POSITION;
                fixed4 color : COLOR;
                float2 texcoord : TEXCOORD0;

                float4 uvgrab : TEXCOORD1;
            };


            sampler2D _MainTex;
            sampler2D _BumpMap;
            float _Magnitude;
            fixed4 _Color;
            float4 _MainTex_ST;
            sampler2D _GrapTexture;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.color = v.color;
                o.texcoord = v.texcoord;
                o.uvgrab = ComputeGrabScreenPos(o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                half4 mainColour = tex2D(_MainTex, i.texcoord);
                
                half4 bump = tex2D(_BumpMap, i.texcoord);
                half2 distortion = UnpackNormal(bump).rg;

                i.uvgrab.xy += distortion * _Magnitude;
                fixed4 col = tex2Dproj( _GrapTexture, UNITY_PROJ_COORD(i.uvgrab));
                return col * mainColour * _Color;
            }
            ENDCG
        }
    }
}

最终效果如下

unity 毛玻璃,unity,游戏引擎,图形渲染文章来源地址https://www.toymoban.com/news/detail-588129.html

到了这里,关于【unity shader案例】如何实现一个玻璃效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • UI小姐姐说我用CSS实现毛玻璃效果的样子很帅

    123123123123123123123123123123123123123123123123123123123123123123123123123123123123 模糊了吗?确实模糊了。但是有毛玻璃效果吗?没有,毛都没有。我们看下 用backdrop-filter是什么效果的。 .card { margin: 100px auto; width: 300px; height: 300px; position: relative; border: 1px solid #000; color: white; backdrop-f

    2024年04月12日
    浏览(29)
  • Unity CommandBuffer实现毛玻璃特效

    特效可以用于一般物体,也可以应用于UI。一直想在UI中实现这么个效果,现在终于实现了。 效果如下: 应用于场景中的屏物体 应用于UI 调节Shader的参数,可以调整背景模糊和扭曲的程度,也可以调整毛玻璃的颜色,还可也换法线和纹理贴图。 原理 用到是 CommandBuffer ,其实

    2024年02月16日
    浏览(31)
  • 在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

    backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理,模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色(RGB值为0, 0, 0),并且通过/符号后面的透明度值(32%不透明度)使背

    2024年04月09日
    浏览(37)
  • 毛玻璃动画交互效果

    从上述的效果展示页面结构来看,页面布局都是比较简单的,只是元素的动画交互比较麻烦。 第一个动画交互是两个圆相互交错来回运动。第二个动画交互是三角绕着圆进行 360 度旋转。 animation animation-delay 绝对定位布局 第一个动画是两个圆来回交互运动。 第二个动画交互

    2024年02月07日
    浏览(26)
  • css背景毛玻璃效果

    一、结论:通过 css 的 backdrop-filter 属性设置滤镜函数 blur 一般会是有 背景色、透明度 的容器,如: 二、backdrop-filter 的其他用法 backdrop-filter CSS 属性可以让你为一个 元素后面区域添加图形效果 (如模糊或颜色偏移) 因为它适用于 元素背后的所有元素 ,为了看到效果,必须

    2024年02月16日
    浏览(36)
  • 毛玻璃态卡片悬停效果

    页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。 卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。 响应式 绝对布局 filte 属性的 invert 值使用 ba

    2024年02月07日
    浏览(34)
  • react native 毛玻璃效果

    https://docs.expo.dev/versions/latest/sdk/blur-view/ https://github.com/expo/expo/issues/6613     参考链接: https://chat.xutongbao.top/

    2024年02月09日
    浏览(32)
  • OpenCV轻松入门(六)——简单图片处理【马赛克、毛玻璃、浮雕效果】

    马赛克效果 马赛克指现行广为使用的一种图像(视频)处理手段,此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果,因为这种模糊看上去有一个个的小格子组成,便形象的称这种画面为马赛克。其目的通常是使之无法辨认。 下面,我们来介绍一下实现马赛克的思

    2024年04月14日
    浏览(31)
  • 毛玻璃用户卡交互

    从效果展示可以看到,此效果都是比较常规的。主要的核心就是卡片的悬停效果。 backdrop-filter 回顾 transition transform 完整代码下载

    2024年02月08日
    浏览(36)
  • 3D 毛玻璃晶质见证卡

    从上面的效果展示来看,页面主要成员是一张卡片,并且卡片上有三个小矩形,而小矩形上会展示对应的内容。 当鼠标悬停在卡片上时,卡片会随着鼠标的移动而改变视角。 transform-style 属性的 preserve-3d 值运用 transform 属性的 translateZ 值运用 VanillaTilt.js 与 translateZ 的 3D 视角

    2024年02月06日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包