Unity CommandBuffer实现毛玻璃特效

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

Unity毛玻璃特效

特效可以用于一般物体,也可以应用于UI。一直想在UI中实现这么个效果,现在终于实现了。

效果如下:

应用于场景中的屏物体unity ui 实现磨砂玻璃效果,Unity,unity,ui,UI特效,特效,毛玻璃
应用于UI

unity ui 实现磨砂玻璃效果,Unity,unity,ui,UI特效,特效,毛玻璃
调节Shader的参数,可以调整背景模糊和扭曲的程度,也可以调整毛玻璃的颜色,还可也换法线和纹理贴图。

原理

用到是CommandBuffer,其实就是拿官方的案例过来稍微一改就行了。关键是CommandBuffer啊,Custom Pass啊,这些东东,一直都是一知半解的,看文档吧又TM全是鸟语,硬着头皮看,到现在还是一知半解,呵呵。算球,能实现就行啊。

using UnityEngine;
using UnityEngine.Rendering;

[ExecuteInEditMode]
public class CommandBufferBlurRefraction : MonoBehaviour
{
    [SerializeField] private Camera cameraMain;
    [SerializeField] private Shader blurShader;
    private Material _material = null;
    private CommandBuffer _commandBuffer = null;

    private void Cleanup()
    {
        if (!_material)
        {
            cameraMain.RemoveCommandBuffer(CameraEvent.AfterSkybox, _commandBuffer);
            DestroyImmediate(_material);
            _material = null;
        }
    }

    public void OnDisable()
    {
        Cleanup();
    }

    private readonly int screenCopyID = Shader.PropertyToID("_ScreenCopyTexture");
    private readonly int blurredID = Shader.PropertyToID("_Temp1");
    private readonly int blurredID2 = Shader.PropertyToID("_Temp2");

    public void OnEnable()
    {
        if (!cameraMain)
            cameraMain = Camera.main;
        if (cameraMain == null)
            return;
        
        _material ??= new Material(blurShader) {hideFlags = HideFlags.HideAndDontSave};
        _commandBuffer ??= new CommandBuffer() {name = "Grab screen and blur"};

        // copy screen into temporary RT
        _commandBuffer.GetTemporaryRT(screenCopyID, -1, -1, 0, FilterMode.Bilinear);
        _commandBuffer.Blit(BuiltinRenderTextureType.CurrentActive, screenCopyID);

        // get two smaller RTs
        _commandBuffer.GetTemporaryRT(blurredID, -2, -2, 0, FilterMode.Bilinear);
        _commandBuffer.GetTemporaryRT(blurredID2, -2, -2, 0, FilterMode.Bilinear);

        // downsample screen copy into smaller RT, release screen RT
        _commandBuffer.Blit(screenCopyID, blurredID);
        _commandBuffer.ReleaseTemporaryRT(screenCopyID);

        // horizontal blur
        _commandBuffer.SetGlobalVector("offsets", new Vector4(2.0f / Screen.width, 0, 0, 0));
        _commandBuffer.Blit(blurredID, blurredID2, _material);
        // vertical blur
        _commandBuffer.SetGlobalVector("offsets", new Vector4(0, 2.0f / Screen.height, 0, 0));
        _commandBuffer.Blit(blurredID2, blurredID, _material);
        // horizontal blur
        _commandBuffer.SetGlobalVector("offsets", new Vector4(4.0f / Screen.width, 0, 0, 0));
        _commandBuffer.Blit(blurredID, blurredID2, _material);
        // vertical blur
        _commandBuffer.SetGlobalVector("offsets", new Vector4(0, 4.0f / Screen.height, 0, 0));
        _commandBuffer.Blit(blurredID2, blurredID, _material);

        _commandBuffer.SetGlobalTexture("_GrabBlurTexture", blurredID);

        cameraMain.AddCommandBuffer(CameraEvent.AfterSkybox, _commandBuffer);
    }
}

其实,这大体的原理就是,在摄像机上加一个CommandBuffer,相当于在渲染过程中添加了额外的处理指令,就是,在渲染这个毛玻璃物体之前,先把已经渲染好的屏幕拿过来模糊一下,扭曲一下,然后以屏幕空间作为UV再贴到这个物体上。
扭曲和模糊屏幕的Shader:
unity ui 实现磨砂玻璃效果,Unity,unity,ui,UI特效,特效,毛玻璃
毛玻璃Shader:
unity ui 实现磨砂玻璃效果,Unity,unity,ui,UI特效,特效,毛玻璃

源码下载:

点击下载源码文章来源地址https://www.toymoban.com/news/detail-600261.html

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

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

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

相关文章

  • 在微信小程序中或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日
    浏览(27)
  • 毛玻璃用户卡交互

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

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

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

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

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

    2024年02月16日
    浏览(37)
  • 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日
    浏览(34)
  • Canvas绘制毛玻璃背景分享海报

    最近重新设计了分享海报,用毛玻璃作为背景,使整体更有质感,如果没有用到canvas,毛玻璃效果其实很好实现,给元素添加一个滤镜即可(比如:filter: blur(32px)),但是实践的过程中发现,canvas在IOS端一直没有效果,查了一个文档发现IOS端不支持filter。。。有点想骂人。。

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

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

    2024年02月06日
    浏览(31)
  • 【Unity】运用CommandBuffer实现发光特效

    首先看下效果:  我们想要实现以下效果: 发光物体边缘模拟丁达尔效应,产生光芒。 可以被其它物体遮挡。 任意形状物体都可以产生以上效果。 首先确定实现的思路: 1、将发光物体单独绘制一遍,并计算在环境中的遮挡,剔除被遮挡的像素,保存绘制后的纹理。 2、将

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

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

    2024年04月14日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包