unity3d的text unity3d的texture_UI

NGUI有个Demo,实现了这个功能,UI界面显示一个3D模型,但是这种方法并不具备适用性。



现在我们的项目中还没用到这种超前的3D界面设计,我们常用的UI都是由大堆的UI通过层级堆叠出来的。


那按照我们现在UI的制作方法怎么实现这种UI界面显示3D模型,3D模型还可以自由徐旋转运动的功能呢。


RenderTexture就是一种很好用的方法。


1.首先我们需要一个UITexture在UI界面中占领一个位置和层级。


unity3d的text unity3d的texture_界面显示_02



现在我们看到装备栏中,一块绿油油的马赛克图片已经占领了我们给要渲染的3D模型的位置。


2.创建一个RenderTexture用来接收摄像机拍摄的画面,保存在这个RenderTexture上。


unity3d的text unity3d的texture_3D_03



3.要显示的内容图片已经创建完成了,绑定到已经做好的UITexture上。


unity3d的text unity3d的texture_3D_04



4.现在最重要的就要进入关键步骤了,如何把3D模型渲染到这张RenderTexure上呢?


我们只需要在场景稍微偏偏的一个地方创建一个摄像机,删除它多余的组件,只留Camera组件。


将创建好的RenderTexture绑定它的属性上,这样就可以把摄像机看到的内容全部渲染到RenderTexure这张“图片”上了


unity3d的text unity3d的texture_3D_05



5.现在我们在摄像机前面看看效果(右下角是摄像机看到的画面)


unity3d的text unity3d的texture_界面显示_06



下面是保存在RenderTexure上的画面


unity3d的text unity3d的texture_UI_07



再下面是UI界面显示的画面


unity3d的text unity3d的texture_unity3d的text_08



一毛一样,有木有。


运行起来,模型在动,UI上的人也在动,有木有。


6.为了避免穿帮,我们添加一个Layer专门给这个摄像机使用


另外按照功能考虑,这个摄像机并不需要渲染很远距离的东西,把Clipping planes的far属性调到一个合适的值就可以。


unity3d的text unity3d的texture_UI_09





拓展:


现在3D全身模型没

问题了,那如果3D头像也想用实时渲染的模型呢。图像框还是圆形的怎么办呢?


下面我来做个尝试。


1.先确定框体大小,做好位置和层级的占位


unity3d的text unity3d的texture_UI_10



2.再做一张RenderTexure,人物离近一点不就行了。那么问题来了,这还是方形的,圆形头像怎么办?


unity3d的text unity3d的texture_3D_11


3.首先我们需要一个中间一个圆形镂空的模型


unity3d的text unity3d的texture_unity3d的text_12



4.延后类,模型瞄准位置,摆上。


unity3d的text unity3d的texture_UI_13


是不是很完美。


5.谁说不完美?!还差一步!


创建个shader,代码在下面:


Shader "DuanShader/maskshader"
{
    SubShader {
        Tags {"Queue" = "Geometry-10" }
        Lighting Off
        ZTest LEqual
        ZWrite On
        ColorMask 0
        Pass {}
    }
}





镂空模型选用这个shader,在看内容。同样的佩服,通用的味道,效果就是这么完美。


unity3d的text unity3d的texture_界面显示_14