• 8种家居环境很败“性” 2019-06-28
  • 2018年全军院校招生计划下达:计划招收学员3.05万名 2019-06-15
  • 晋城市举办干部素质提升工程第十八期专题讲座 2019-06-15
  • 抖音广告出现对英烈邱少云不敬内容 今日头条致歉 2019-06-13
  • 超半数巴西民众对世界杯不感兴趣--旅游频道 2019-06-12
  • 外交部举行中外媒体吹风会:王毅介绍上合组织青岛峰会情况 2019-06-12
  • 2018网络中国节·端午 2019-06-04
  • 韩媒:韩美商定暂停原定8月“乙支自由卫士”联演 2019-06-03
  • 重庆市公安局交通管理局互联网交通安全服务管理平台 2019-06-03
  • 俄侦察船穿越英吉利海峡 英国急派军舰战机监视 2019-05-28
  • 网购陷阱多 女子花3000元买5套化妆品只有2套是真的 2019-05-28
  • 环保约谈濂溪区主要负责同志 谢一平要求立行立改真抓真改 2019-05-25
  • 官宣!广东签约北京3冠功勋 大莫助拳阿联未来可期 2019-05-25
  • 党建第一责任与发展第一要务相融合br全面提升机关党建工作水平 2019-05-22
  • 卡纳瓦罗:对比赛结果不满意 晋级机会各占一半 2019-05-22
  • 福建省体彩31选7走势图: 士郎 Unity Shader之磨砂玻璃与水雾玻璃效果

    20
    回复
    1826
    查看
    打印 上一主题 下一主题
    [ 复制链接 ]
    排名
    1
    昨日变化

    福建36选7和值走势图 www.00-na.com 7932

    主题

    8490

    帖子

    3万

    积分

    Rank: 16

    UID
    1231
    好友
    186
    蛮牛币
    11521
    威望
    30
    注册时间
    2013-7-29
    在线时间
    4052 小时
    最后登录
    2019-7-16

    活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?注册帐号

    x





    玻璃效果是游戏场景中常见的效果之一,除却普通的透明玻璃外,磨砂玻璃也是较为常见的效果。玻璃与场景中的其他物体也会有交互,例如,浴室中的玻璃、雨天的窗户会在水汽的作用下带有一定差别的雾效。本文以Unity Frosted Glass项目与开源库中相关项目为例,介绍磨砂玻璃的做法和在移动端运行的性能。


    开源库链接:https://lab.uwa4d.com/lab/5b5613a3d7f10a201fd80bbb


    模糊效果

    磨砂玻璃的效果特点是模糊与半透明,该项目通过自定义的卷积实现来达到模糊效果。具体代码实现在FrostedGlass.shader中。
    [AppleScript] 纯文本查看 复制代码
    //vertex to fragment    
    struct v2f {
      float4 pos : POSITION;
      float2 uv : TEXCOORD0;
      float4 uv01 : TEXCOORD1;
      float4 uv23 : TEXCOORD2;
      float4 uv45 : TEXCOORD3;
    };
    
    v2f vert (appdata_img v) {
      v2f o;
      o.pos = UnityObjectToClipPos(v.vertex);
      o.uv.xy = v.texcoord.xy;
      o.uv01 =  v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1);
      o.uv23 =  v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1) * 2.0;
      o.uv45 =  v.texcoord.xyxy + offsets.xyxy * float4(1,1, -1,-1) * 3.0;
      return o;
    }


    (顶点着色器及相关数据结构SeparableGlassBlur.shader)

    offsets是一个float4类型的定值,表示偏移量。通过顶点着色器的运算,输出的v2f结构体中,pos存储了该顶点从Object Space转换到相机裁剪空间中的齐次坐标。uv、uv01、uv23、uv45分别储存了该顶点、偏移量为offsets的两个顶点、偏移量为2*offsets的两个顶点、偏移量为3*offsets的两个顶点的uv坐标。
    [AppleScript] 纯文本查看 复制代码
    half4 frag (v2f i) : COLOR {
      half4 color = float4 (0,0,0,0);
      color += 0.40 * tex2D (_MainTex, i.uv);
      color += 0.15 * tex2D (_MainTex, i.uv01.xy);
      color += 0.15 * tex2D (_MainTex, i.uv01.zw);
      color += 0.10 * tex2D (_MainTex, i.uv23.xy);
      color += 0.10 * tex2D (_MainTex, i.uv23.zw);
      color += 0.05 * tex2D (_MainTex, i.uv45.xy);
      color += 0.05 * tex2D (_MainTex, i.uv45.zw);
      return color;
    }


    (片元着色器SeparableGlassBlur.shader)

    该卷积核的一维权重分布如下表所示:



    [AppleScript] 纯文本查看 复制代码
    (进行滤波操作 CommandBufferBlur.cs)_CommandBuffer.SetGlobalVector("offsets", new Vector4(2.0f / sizes[i].x, 0, 0, 0));[/align]
    [align=left]_CommandBuffer.Blit(blurredID, blurredID2, _Material);[/align]
    [align=left]_CommandBuffer.SetGlobalVector("offsets", new Vector4(0, 2.0f / sizes[i].y, 0, 0));[/align]
    [align=left]_CommandBuffer.Blit(blurredID2, blurredID, _Material);



    对图像使用水平方向一维卷积核与竖直方向一维卷积核进行两次滤波得到最终的图像。等同于如下图所示的二维卷积核进行滤波:




    (使用水平方向的一维卷积核对图像进行滤波CommandBufferBlur.cs)


    (两次滤波后得到模糊效果)

    卷积核的选择有很多种,其中较为常用的有高斯模糊、kawase Blur,开源库中有相关的项目实现了相关效果,例如:Blur for Unity、Gaussian Blur、Super Blur。

    高斯模糊

    这些模糊方式,所采用的卷积核各不相同,有兴趣的读者可以进行相关试验。

    捕捉屏幕纹理

    实现模糊效果后,需要捕捉到玻璃后方的屏幕效果图片交予模糊效果着色器进行处理。在Unity Shader中有一种特殊的Pass:GrabPass,可以很方便地获取屏幕图像。但这种方式开销太大,并不适合在移动端运行。

    该项目采取CommandBuffer来达到这一目的??梢越谑】?、提高性能。
    [AppleScript] 纯文本查看 复制代码
    //创建名为“Blur screen”的CommandBuffer
    _CommandBuffer = new CommandBuffer();
    _CommandBuffer.name = "Blur screen";
    
    
    int screenCopyID = Shader.PropertyToID("_ScreenCopyTexture");
    //新建一个临时RenderTexture
    _CommandBuffer.GetTemporaryRT(screenCopyID, -1, -1, 0, FilterMode.Bilinear, _TextureFormat);
    //获取当前屏幕图像
    _CommandBuffer.Blit(BuiltinRenderTextureType.CurrentActive, screenCopyID);
    int blurredID = Shader.PropertyToID("_Grab" + i + "_Temp1");
    int blurredID2 = Shader.PropertyToID("_Grab" + i + "_Temp2");
    _CommandBuffer.GetTemporaryRT(blurredID, (int)sizes[i].x, (int)sizes[i].y, 0, FilterMode.Bilinear, _TextureFormat);
    _CommandBuffer.GetTemporaryRT(blurredID2, (int)sizes[i].x, (int)sizes[i].y, 0, FilterMode.Bilinear, _TextureFormat);
    _CommandBuffer.Blit(screenCopyID, blurredID);
    _CommandBuffer.ReleaseTemporaryRT(screenCopyID);


    (获取屏幕图像CommandBufferBlur.cs)

    但此时获取到的图像是一整张屏幕图象,而我们需要进行模糊处理的图像,只有玻璃模型背后的图像,这时我们需要在顶点着色器中对顶点进行处理。
    [AppleScript] 纯文本查看 复制代码
    v2f vert (appdata v)
    {
      v2f o;
      o.vertex = UnityObjectToClipPos(v.vertex);
      //确保材质球中的缩放和偏移位置正确
      o.uvfrost = TRANSFORM_TEX(v.uv, _FrostTex);
      //获得该顶点在屏幕图象中正确的纹理坐标
      o.uvgrab = ComputeGrabScreenPos(o.vertex);
      return o;
    }


    Unity内置的ComputeGrabScreenPos函数,帮助我们完成了坐标转换,根据o.uvgrab在屏幕图像中采集到的图像信息,便是玻璃模型背后的屏幕图像:


    [AppleScript] 纯文本查看 复制代码
    half4 ref00=tex2Dproj(_GrabBlurTexture_0,i.uvgrab);


    将CommandBuffer挂载到相机上,实现实时更新渲染。


    [AppleScript] 纯文本查看 复制代码
    _Camera.AddCommandBuffer(CameraEvent.BeforeForwardAlpha, _CommandBuffer);



    (效果图)

    水雾玻璃

    在磨砂玻璃的基础上,进一步拓展其他的特殊效果。

    浴室中的玻璃、雨天的窗户会在水汽的作用下带有一定差别的雾效。这种效果的特点除却模糊与半透明外,还会有模糊程度的差别。
    [AppleScript] 纯文本查看 复制代码
    Vector2[] sizes = {
      new Vector2(Screen.width, Screen.height),
      new Vector2(Screen.width / 2, Screen.height / 2),
      new Vector2(Screen.width / 4, Screen.height / 4),
      new Vector2(Screen.width / 8, Screen.height / 8),
    };


    (定义不同大小的偏移量CommandBufferBlur.cs)

    定义不同大小的偏移量,通过SeparableGlassBlur.shader的运算,得到四张模糊程度不同的屏幕图像,由0~3模糊程度加深:
    [AppleScript] 纯文本查看 复制代码
    sampler2D _GrabBlurTexture_0;
            sampler2D _GrabBlurTexture_1;
            sampler2D _GrabBlurTexture_2;
            sampler2D _GrabBlurTexture_3;


    制定采样规则从这四张模糊程度不同的屏幕图像中进行采集,为了让过渡圆滑,使用lerp函数进行插值。加载一张效果灰度图(_FrostTex),确定雾效差别的强度(_FrostIntensity):
    [AppleScript] 纯文本查看 复制代码
    fixed4 frag (v2f i) : SV_Target
    {
      float surfSmooth = 1 - tex2D(_FrostTex, i.uvfrost)* _FrostIntensity;
      //如果x 值小于 a,则返回a;如果 x 值大于 b,返回b;否则,返回 x
      surfSmooth = clamp(0, 1, surfSmooth);
      half4 refraction;
      //二维纹理投影映射
      half4 ref00 = tex2Dproj(_GrabBlurTexture_0, i.uvgrab);
      half4 ref01 = tex2Dproj(_GrabBlurTexture_1, i.uvgrab);
      half4 ref02 = tex2Dproj(_GrabBlurTexture_2, i.uvgrab);
      half4 ref03 = tex2Dproj(_GrabBlurTexture_3, i.uvgrab);
      //进行平滑过渡
      float step00 = smoothstep(0.75, 1.00, surfSmooth);
      float step01 = smoothstep(0.5, 0.75, surfSmooth);
      float step02 = smoothstep(0.05, 0.5, surfSmooth);
      refraction = lerp(lerp(lerp(ref03, ref02, step02), ref01, step01), ref00, step00);               
      return refraction;
    }


    (片元着色器FrostedGlass.shader)

    项目中以_FrostTex图像中r值作为采样依据。根据1-r值*_FrostIntensity得到的数值(surfSmooth)为权重,分别从上述四张模糊程度不同的屏幕图像中进行采集,最后得到该顶点最终的颜色。

    以下图作为效果图,验证不同的surfSmooth大小,渲染得到不同的模糊程度:


    (从左至右R值依次为:0,0.25,0.5,0.75,1)


    (效果图)

    由此可以模拟出不同的水雾玻璃效果:


    (有点脏的雾玻璃)


    (覆盖着一层小水珠)

    性能测试(使用UWA GOT Online工具测评)

    选择低端机型红米4x进行测试(不开启多线程渲染):

    使用水雾玻璃效果:



    FPS均值为26?。?/font>



    Camera.Render函数耗时11ms左右开销不大:



    可以看到CPU等待GPU渲染完成时间较长,当前渲染压力在GPU端:



    可见实时抓取屏幕图片并进行渲染操作在移动端开销还是巨大的。该效果生成四张模糊效果图片,每张图片的生成通过了两次SeparableGlassBlur.shader的计算。最终每个顶点在FrostedGlass.shader中进行运算。GPU计算量过大。

    只使用磨砂玻璃效果时,红米4xFPS均值为42帧左右。



    此时只生成一张模糊效果图片,该图片的生成通过了两次SeparableGlassBlur.shader的计算。相比较而言GPU端计算大幅减少,CPU等待时间缩短,性能提升明显。


    故而开发者在实现此效果时,需要在性能与效果之间平衡,尽可能减少计算量,例如可以使用3x3的卷积核,而不是5x5的,可以在采样之前做判断,减少采样次数。

    来源:UWA
    7日久生情
    2872/5000
    排名
    2230
    昨日变化

    1

    主题

    1859

    帖子

    2872

    积分

    Rank: 7Rank: 7Rank: 7Rank: 7

    UID
    119154
    好友
    0
    蛮牛币
    3148
    威望
    0
    注册时间
    2015-8-21
    在线时间
    382 小时
    最后登录
    2019-7-15
    沙发
    2019-5-29 13:14:42 只看该作者
    谢谢楼主大大。
    排名
    48133
    昨日变化

    0

    主题

    61

    帖子

    82

    积分

    Rank: 2Rank: 2

    UID
    116528
    好友
    0
    蛮牛币
    38
    威望
    0
    注册时间
    2015-8-4
    在线时间
    17 小时
    最后登录
    2019-6-28
    板凳
    2019-5-29 14:21:17 只看该作者
    感谢楼主分享哈,学些学习!
    7日久生情
    2325/5000
    排名
    1387
    昨日变化
    6

    0

    主题

    720

    帖子

    2325

    积分

    Rank: 7Rank: 7Rank: 7Rank: 7

    UID
    135463
    好友
    0
    蛮牛币
    54
    威望
    0
    注册时间
    2016-1-23
    在线时间
    713 小时
    最后登录
    2019-7-16
    地板
    2019-5-29 14:53:39 只看该作者
    发条橙更符合规范化风格很过分
    4四处流浪
    402/500
    排名
    10343
    昨日变化

    0

    主题

    193

    帖子

    402

    积分

    Rank: 4

    UID
    248391
    好友
    0
    蛮牛币
    313
    威望
    0
    注册时间
    2017-10-12
    在线时间
    99 小时
    最后登录
    2019-7-12
    5#
    2019-5-29 14:56:00 只看该作者
    可以可以,不觉名利
    4四处流浪
    339/500
    排名
    11818
    昨日变化

    0

    主题

    121

    帖子

    339

    积分

    Rank: 4

    UID
    269725
    好友
    0
    蛮牛币
    470
    威望
    0
    注册时间
    2018-2-27
    在线时间
    136 小时
    最后登录
    2019-7-16
    6#
    2019-5-29 15:38:57 只看该作者
    感谢楼主大大分享
    7日久生情
    1958/5000
    排名
    4092
    昨日变化

    0

    主题

    1259

    帖子

    1958

    积分

    Rank: 7Rank: 7Rank: 7Rank: 7

    UID
    254705
    好友
    1
    蛮牛币
    1795
    威望
    0
    注册时间
    2017-11-16
    在线时间
    337 小时
    最后登录
    2019-7-16
    7#
    2019-5-30 08:17:57 只看该作者
    66666666666666666666666666666666
    4四处流浪
    487/500
    排名
    7019
    昨日变化

    3

    主题

    112

    帖子

    487

    积分

    Rank: 4

    UID
    293049
    好友
    1
    蛮牛币
    2160
    威望
    0
    注册时间
    2018-8-9
    在线时间
    184 小时
    最后登录
    2019-7-16
    8#
    2019-5-30 08:24:14 只看该作者
    哇哦,真的很棒!希望窝能早日全部看懂,只能看懂一部分
    4四处流浪
    324/500
    排名
    8824
    昨日变化

    0

    主题

    39

    帖子

    324

    积分

    Rank: 4

    UID
    307305
    好友
    0
    蛮牛币
    542
    威望
    0
    注册时间
    2018-12-6
    在线时间
    151 小时
    最后登录
    2019-7-16
    9#
    2019-5-30 08:25:03 只看该作者
    谢谢分享
    5熟悉之中
    945/1000
    排名
    10817
    昨日变化

    3

    主题

    691

    帖子

    945

    积分

    Rank: 5Rank: 5

    UID
    310426
    好友
    0
    蛮牛币
    1160
    威望
    0
    注册时间
    2019-1-2
    在线时间
    155 小时
    最后登录
    2019-7-16
    10#
    2019-5-30 09:04:49 只看该作者
    Unity Shader之磨砂玻璃与水雾玻璃效果
    5熟悉之中
    562/1000
    排名
    13273
    昨日变化

    2

    主题

    179

    帖子

    562

    积分

    Rank: 5Rank: 5

    UID
    16650
    好友
    0
    蛮牛币
    1100
    威望
    0
    注册时间
    2014-3-6
    在线时间
    287 小时
    最后登录
    2019-7-15
    11#
    2019-5-30 17:05:35 只看该作者
    谢谢楼主分享.
    5熟悉之中
    945/1000
    排名
    10817
    昨日变化

    3

    主题

    691

    帖子

    945

    积分

    Rank: 5Rank: 5

    UID
    310426
    好友
    0
    蛮牛币
    1160
    威望
    0
    注册时间
    2019-1-2
    在线时间
    155 小时
    最后登录
    2019-7-16
    12#
    2019-5-31 08:50:51 只看该作者
    Unity Shader之磨砂玻璃与水雾玻璃效果
    7日久生情
    1958/5000
    排名
    4092
    昨日变化

    0

    主题

    1259

    帖子

    1958

    积分

    Rank: 7Rank: 7Rank: 7Rank: 7

    UID
    254705
    好友
    1
    蛮牛币
    1795
    威望
    0
    注册时间
    2017-11-16
    在线时间
    337 小时
    最后登录
    2019-7-16
    13#
    2019-5-31 13:34:59 只看该作者
    666666666666666666666666666666

    0

    主题

    7

    帖子

    7

    积分

    Rank: 1

    UID
    323611
    好友
    0
    蛮牛币
    3
    威望
    0
    注册时间
    2019-5-31
    在线时间
    0 小时
    最后登录
    2019-5-31
    14#
    2019-5-31 16:55:21 只看该作者
    学习学习
    6蛮牛粉丝
    1118/1500
    排名
    2066
    昨日变化

    0

    主题

    238

    帖子

    1118

    积分

    Rank: 6Rank: 6Rank: 6

    UID
    26073
    好友
    1
    蛮牛币
    4249
    威望
    0
    注册时间
    2014-5-21
    在线时间
    212 小时
    最后登录
    2019-7-16
    15#
    2019-5-31 17:05:32 只看该作者
    这得多厉害的人才搞得懂这些东西
    您需要登录后才可以回帖 登录 | 注册帐号

    本版积分规则

  • 8种家居环境很败“性” 2019-06-28
  • 2018年全军院校招生计划下达:计划招收学员3.05万名 2019-06-15
  • 晋城市举办干部素质提升工程第十八期专题讲座 2019-06-15
  • 抖音广告出现对英烈邱少云不敬内容 今日头条致歉 2019-06-13
  • 超半数巴西民众对世界杯不感兴趣--旅游频道 2019-06-12
  • 外交部举行中外媒体吹风会:王毅介绍上合组织青岛峰会情况 2019-06-12
  • 2018网络中国节·端午 2019-06-04
  • 韩媒:韩美商定暂停原定8月“乙支自由卫士”联演 2019-06-03
  • 重庆市公安局交通管理局互联网交通安全服务管理平台 2019-06-03
  • 俄侦察船穿越英吉利海峡 英国急派军舰战机监视 2019-05-28
  • 网购陷阱多 女子花3000元买5套化妆品只有2套是真的 2019-05-28
  • 环保约谈濂溪区主要负责同志 谢一平要求立行立改真抓真改 2019-05-25
  • 官宣!广东签约北京3冠功勋 大莫助拳阿联未来可期 2019-05-25
  • 党建第一责任与发展第一要务相融合br全面提升机关党建工作水平 2019-05-22
  • 卡纳瓦罗:对比赛结果不满意 晋级机会各占一半 2019-05-22
  • 湖北快三特种 北京pk10冠军九码技巧 竞彩足球比分直播500彩票网百度 极速11选5正规吗 四川金7乐万能四码 精品中国象棋残局大全 体彩青海11选5开奖号 正版一码中特资料 吉林十一选五开奖结果查询 二肖中特期期准100% 加拿大西快乐8开奖结果 北京赛车彩票玩法介绍 冰球鞋磨刀专业术语 广东快乐10分预测推荐 东方6+1模拟摇号