首页 > Unity3D频道 > 【Unity3D研究院之游戏开发】 > Unity3D研究院之UGUI软裁切(一百零八)
2019
08-31

Unity3D研究院之UGUI软裁切(一百零八)

前段时间用Stencil实现了一套裁切,但是Stencil原理只能是裁或者不裁,这样是无法实现像NGUI这样的软裁切功能。之前的笔记在这里 https://www.xuanyusong.com/archives/4562

如下图所示,我们用Rect2DMask组件同时软裁切3D模型和Image。

Unity3D研究院之UGUI软裁切(一百零八) - 雨松MOMO程序研究院 - 1

裁切最容易出问题的就是,裁切区域发生变化,因为在Shader里需要根据裁切区域来计算,但实际项目中特别容易出问题的就是UI上滑动列表里裁切3D或者粒子特效,因为滑动列表可能是循环的,每个新出的都需要将裁切区域传入shader中。所以我分析了一遍UGUI的源码,按照UGUI的方式将区域传入shader中。

如下图所示,3D模型如果需要用UI摄像机看,那么需要调整3D模型的Scale,这里我们设置放大100倍(根据需求设置),另外将3D模型的Prefab以及支持被RectMask裁切的材质拖入。

Unity3D研究院之UGUI软裁切(一百零八) - 雨松MOMO程序研究院 - 2接着就是脚本中要将Rect2DMask的区域传入3D-Default了,完全通过UGUI的方式传入。

在来看看shader

 

然后就是UI了,如下图所示,将需要进行软裁切的UI绑定UI_Default材质,在下面可以设置软裁切的尺寸,这个例子中3D模型和UI的ClipSoft都设置的是15.

Unity3D研究院之UGUI软裁切(一百零八) - 雨松MOMO程序研究院 - 3

把UI的Shader拿出来,在shader中替换原来的UnityGet2DClipping方法即可,这代码和上面3D软裁切的算法完全一样。

大家需要注意的是Shader代码里的_ClipRect. UGUI会自动将正确的Rect2DMask区域传入_ClipRect,所以3D模型部分我也是参考UGUI的源码将Rect2DMask传入_ClipRect。具体大家可以参考UGUI的源码。

现在3D模型和UI使用的都是正交摄像机,其实也可以用透视摄像机。如下图所示,可以在创建一个3D摄像机通过层来看3D模型,当然也可以使用RT,这样就跟UI软裁切完全一样了。

Unity3D研究院之UGUI软裁切(一百零八) - 雨松MOMO程序研究院 - 4

 

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

Unity3D研究院之UGUI软裁切(一百零八)》有 5 条评论

  1. 星光白云 说:

    点赞,收藏

  2. Lowy 说:

    最终结果增加了一个二阶曲线,柔和了点,不知道性能影响大不大
    #ifdef UNITY_UI_CLIP_RECT
    float outA = SoftUnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
    color.a *= 2*outA*(1-outA)*_ClipSoftPow + outA*outA;
    #endif

  3. ww 说:

    好思路,而且非常实用的功能,感谢

  4. 平子 说:

    一看16年的文章了,还是能学到东西,代码已经收录。雨松加油,希望有更多的文章分享。

留下一个回复

你的email不会被公开。