【Unity Shader】UI特效在RawImage上使用运行良好,但是在Image上则不是预期效果的问题

疑惑

在最开始用shader做UI特效的时候,或多或少会遇到这样的问题,就是用RawImage能得到预期效果,而用Image很有可能就得不到预期效果,关键原因还是UV的差异引起的.

简单说下RawImage和Image的差异:

他们是从MaskableGraphic派生出来的两个不同的分支,他俩并没有继承关系.

游戏中应该跟多的会使用到Image,因为他是用的图集思想,可以达到自动合批的效果,性能是优于RawImage的,而能达到自动合批,那么他得有相同的材质球,比如两个Image分别显示同一个图集中的不同Sprite,那么他们的材质球中的贴图则就是整张图集(在FrameDebugger中可查看),而达到显示不同的Sprite则是通过Image网格中顶点的UV值来指定的,而RawImage则不是图集思想,就是单张纹理直接显示,他的网格顶点中的UV值就是正常的[0~1].

通常情况下做UI特效,内部算法要么直接对颜色值进行处理,要么就是用UV值做变化因子进行一些操作.而用UV值参与计算的shader就很有可能在Image上使用效果达不到预期的问题,因为内部的算法基本上都是视为UV的区间是0~1,那么处理的结果就可以想象是对整张图集进行处理,而当前这个Image就仅仅是取其中一小块,当然效果就很难达到预期.

PS:如果内部想用模型坐标来计算,那么更不靠谱,因为对合批的网格去取他的模型坐标本身就是离大谱的事儿.

解决办法

Image的网格里的UV值不是不在[0,1]区间吗.那么可以在使用uv值做变换之前,将他重新映射的到预期的[0,1]区间,那么后续的计算就能达到我们的预期效果.而在映射之前就得拿到当前Image上显示的Sprite在图集中uv值范围.

CPU端获取Sprite在图集中uv值范围代码:

    Vector4 GetSpriteUVRange(Image image){Sprite sp = image.sprite;Vector2[] uv = sp.uv;//四个分量值的含义  x:uMin  y:uMax  z:vMin  w:vMaxVector4 uvRange = new Vector4(1,0,1,0);for (int i = 0; i < uv.Length; i++){Vector2 tempUV = uv[i];uvRange.x = Mathf.Min(uvRange.x, tempUV.x);uvRange.y = Mathf.Max(uvRange.y, tempUV.x);uvRange.z = Mathf.Min(uvRange.z, tempUV.y);uvRange.w = Mathf.Max(uvRange.w, tempUV.y);}return uvRange;}

将上面获取到的uv范围传入到Shader中,uv映射伪代码如下:

//这里的lerp其实不需要, 第三个参数计算的结果就是在[0,1]区间
//只是为了传达更常用的映射关系,比如像映射到1~3,那么吧前面的0,1 改为 1,3即可.
uv.x = lerp(0,1, (uv.x - uMin)/(uMax - uMin));
uv.y = lerp(0,1, (uv.y - vMin)/(vMax - vMin));

注意:uv映射不要影响到正常的纹理采样了,需要在纹理采样结束后再进行映射.

【Unity Shader】UI特效在RawImage上使用运行良好,但是在Image上则不是预期效果的问题相关推荐

Unity Shader屏幕特效基础OnRenderImage()函数
前言: unity shader中的pass是会顺序执行的,但是由于在图像处理中我们常常需要使用一个pass的处理结果作为另一个pass的输入,这个时候就需要用到OnRenderImage()函数了 ...
Unity Shader 闪光特效
Unity Shader源代码如下: Shader "Custom/Flash" { Properties { _MainTex ("Texture", 2D) ...
云服务器上能运行虚拟机吗,云服务器上能运行虚拟机吗
云服务器上能运行虚拟机吗内容精选换一换选择Windows开发环境下,安装Eclipse,安装JDK.建议JDK使用1.8版本,Eclipse使用4.3.2及以上版本.若使用IBM JDK,请确保 ...
如何用云计算机运行绘图软件,云上怎么运行安卓软件【Mac上怎么运行Windows】...
Mac作为主要工作机器日常使用,偶尔还需要的Windows某些程序或某些网站只在Internet Explorer中. 而不必使用第二台电脑,它的容易得多,只是在我的Mac上运行Windows.下面是 ...
Unity shader护盾特效
身为小白的我看到某大神用 amplify shader editor 插件做了护盾特效,很酷. 蓝色是大神做的,红色那个是我的(感觉和大神的低了几个档次,哈哈) 大神的视频链接: https://ww ...
【unity shader】unity游戏特效-简简单单的能量护罩
本文参考文章: [1]Unity shader护盾特效,作者:qq_16982323 [2]UnityShader--屏幕空间的能量罩(模拟守望先锋温斯顿的能量罩),作者:Porco_ 玩过崩坏3没? ...
Unity Shader 实现透明护盾效果
这是大致的效果图,图片压得有点糊.我参考了本篇博客 Unity shader护盾特效. 这是原博客展示的图片: 本例采用了特殊的模型与贴图,原博客里有视频链接的教程,从模型到贴图. 以下是代码 // ...
【Unity Shader】学习顶点/片元着色器
上一篇博客重点放在了Unity Shader的基本结构,分别介绍了它包含的三个语义块,最后简单介绍了Unity Shader的形式:表面着色器.顶点/片元着色器和固定函数着色器. 趁热打铁,今天接着上 ...
【Unity Shader】Special Effects（一）UI特效的动画播放器
更新日期:2021年8月16日. Github源码:[点我获取源码] 索引 [系列简介] [SpecialEffects 模块简介] [UI特效的动画播放器] 下载SpecialEffects模块使 ...

【Unity Shader】UI特效在RawImage上使用运行良好,但是在Image上则不是预期效果的问题

疑惑

解决办法

【Unity Shader】UI特效在RawImage上使用运行良好,但是在Image上则不是预期效果的问题相关推荐

最新文章

热门文章