首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五)
2017
03-31

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五)

在UI上显示模型无非就是2种。

1.在两个UI摄像机中夹一层3d摄像机,利用摄像机的Viewport Rect属性对模型进行裁切。

2.使用RenderTexture渲染在RawImage后显示在UI上。

我上一个项目就是采取第一种方法,用起来很不舒服。因为有很多效果都做不了,比如就是UI上盖模型,在盖UI,再盖模型这种,还有就是在滑动列表中显示模型,滑动裁切的话都很麻烦。

今天我想说的就是第二种,使用RenderTexture的方式来渲染模型。

先说缺点:

1.为了保证显示上的效果RenderTexture的文件区域必须大于RawImage的区域,我们目前用的是乘2倍。比如RawImage的区域是512X512,那么就得创建一个1024X1024大小的RenderTexture才能保证渲染效果。

2.如果人物身上有一些特殊的效果,比如outline描边这样的,放在RenderTexture上就是达不到效果。

3.如果模型身上带有AlphaBlend这样的特效,因为AlphaBlend要和背景做混合,而RenderTexture不像Camera那样有背景,显示上就会有问题。(下面我会说我目前是怎么解决的)

优点的话,就很爽了。完全和UI一样,层级顺序,列表中显示模型、裁切、等等都很方便了。

RenderTexture显示AlphaBlend特效的方法

因为AlphaBlend特效需要和背景做混合,所以我们可以给它后面垫一个底图。这样就能解决在RenderTexture上显示带AlphaBlend的特效的模型。

创建一个Sprite 可以直接把UI的Sprite放上去。如果模型带特效就用Sprite2d,如果模型不带特效,完全可以用之前UI的制作方式,很方便灵活的切换它。

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五) - 雨松MOMO程序研究院 - 1

如下图所示,Game视图中显示的效果,这个翅膀的火焰特效就是alphablend

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五) - 雨松MOMO程序研究院 - 2

如下图所示,因为底图不止一张,大家看到下面还有好几张花纹了吗?都可以用Sprite2d叠在下面。

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五) - 雨松MOMO程序研究院 - 3

 

渲染RenderTexture的摄像机,这里已经能看出来渲染的是正确的,下面被水印挡住了 图片尺寸是1401*540 ARGB32 4.3M。为什么尺寸这么大呢?上面我也提过,因为RenderTexture尺寸和RawImage一样的话,效果会比较差,所以这里乘了2倍。

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五) - 雨松MOMO程序研究院 - 4

这样问题来了,摄像机的大小或者fov变了,那岂不是每次都要手动去把sprite的size对齐,手动设置localScale。这样就太麻烦了。

下面我再给大家分享一个脚本,正交或者非正交摄像机都支持的。自动根据摄像机的区域来自动自适应计算sprite的size 。(这个脚本挂在Sprite上即可)

上面有段代码非常重要,切记一定要设置sprite的renderQueue ,因为ui是3000这里和UI不一样就行,不然透明会显示错误。

最后,垫在模型下面可能一张图是不够的,可能还有一些花纹,可能还有花纹需要镜像等,这样的图片就得需要手动设置一下缩放和位置了。

OK 大家如果有疑问欢迎再下面给我留言,继续干活了~

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

UGUI研究院之在UI上使用RenderTexture显示模型+AlphaBlend特效(二十五)》有 21 条评论

  1. zhujishu 说:

    RenderTexture方式渲染模型,感觉在低端机效率不行呢?特别是开了抗锯齿,掉帧严重。请问有什么办法优化吗?

  2. xtom 说:

    你好,我想请教下,如果用了rendertexture的方法,又想点了模型的不同位置(比如头部,手臂等)有不同的响应,应该怎么处理不叫合适呢?

  3. 说:

    momo大神,对于一个UI上有多个模型的情况,我要创建多个相机吗? 就像你说的那样 ui上放模型 在盖一个ui 上面还有模型 就是游戏那种查看其它玩家装备 和自己装备的对比 2个UI都显示模型的

  4. chenxiang 说:

    背后放一张图片确实行,但是策划需求背景是透明的…

  5. 黄哲智 说:

    momo大神,是不是可以用UGUI的canvas的第三种渲染方式,让模型在物理方位上在UI的前面,这样也可以让模型和UI混合显示。但是有个问题,比如模型要求必须用透视摄像机,这样还得有个透视摄像机,并

  6. 黄哲智 说:

    momo大神,对于一个UI上有多个模型的情况,我要创建多个相机吗?

  7. lalala 说:

    使用RenderTexture碰到一个问题,如果模型要超出背景图的区域,这种情况下怎么处理呢?

  8. 说:

    刚接触U3D 最近在做粒子特效与UI层级的关系的问题时也遇到了这个问题,上面的那个脚本23行会报错, NullReferenceException:Object reference not set to an instance of an object.有可能是哪里使用有错误吗

  9. JohNny 说:

    最近在做这块需求,可以直接通过shader去实现混合效果,也很方便。。。
    1.修改 Sprites-Default shader,去掉 c.rgb *= c.a;
    2.将渲染模型摄像机的颜色置为黑色,alpha值设为0
    这样就可以了。
    因为默认摄像机的alpha值为5,遇到alpha混合特效的时候基本就看不见了,而调整渲染摄像机确保背景是透明的。。

    • lalala 说:

      我测试的效果,并不能解决问题,使用AlphaBend的特效和背景叠加的时候仍然会有显示问题

    • wl231x 说:

      哈哈哈,测试可用

    • 田升 说:

      亲测可用,另外混合模式改为Blend One One,相机颜色改为黑色透明很重要,要不然会叠加成白色

      • 徐方 说:

        应该是 Blend One OneMinusSrcAlpha 才对.
        推算下:
        理论上的 Dest = Alpha(特效)*Color(特效) + (1-Alpha(特效))*Color(背景)
        但实际上:
        Dest(RT) = Alpha(特效)*Color(特效) + 0
        Dest = Alpha(特效)*Dest(RT) + (1-Alpha(特效))*Color(背景),
        因为乘了两次 Alpha(特效),所以导致特效表现很弱.

  10. 小十六进制 说:

    momo你好,请问通过RenderTexture显示的3D模型,能不能在3D模型上添加点击事件,我有尝试过在模型上添加EventTrigger事件,可能是因为RenderTexture的原因点击事件不管用,有没有什么很好的实现方式呢?

  11. 王鹏伟 说:

    你好,我想对界面进行一个优化,当弹出一个界面的时候,把后面的静态界面渲染成一个Texture,但是我们canvas的模式是camera,所以只能选定一个相机,不能多出一个相机去渲染静态界面,有什么办法来解决这个问题吗?

    • 雨松MOMO 说:

      可以创建多个摄像机。 我印象剑侠手机, 就是这个效果,打开UI后 背景变成一张图不动。。
      不过后来我用了另外一种方式, 打开UI后 把主界面 以及所有失去焦点的(不可点击操作不需要的UI) 放在另外的一个层上,不让camera渲染。 并且关闭他们的点击事件,效率也还可以 而且也有很多手游都是这样做的。。

留下一个回复

你的email不会被公开。