NGUI有个Demo,实现了这个功能,UI界面显示一个3D模型,但是这种方法并不具备适用性。
现在我们的项目中还没用到这种超前的3D界面设计,我们常用的UI都是由大堆的UI通过层级堆叠出来的。
那按照我们现在UI的制作方法怎么实现这种UI界面显示3D模型,3D模型还可以自由徐旋转运动的功能呢。
RenderTexture就是一种很好用的方法。
1.首先我们需要一个UITexture在UI界面中占领一个位置和层级。
现在我们看到装备栏中,一块绿油油的马赛克图片已经占领了我们给要渲染的3D模型的位置。
2.创建一个RenderTexture用来接收摄像机拍摄的画面,保存在这个RenderTexture上。
3.要显示的内容图片已经创建完成了,绑定到已经做好的UITexture上。
4.现在最重要的就要进入关键步骤了,如何把3D模型渲染到这张RenderTexure上呢?
我们只需要在场景稍微偏偏的一个地方创建一个摄像机,删除它多余的组件,只留Camera组件。
将创建好的RenderTexture绑定它的属性上,这样就可以把摄像机看到的内容全部渲染到RenderTexure这张“图片”上了
5.现在我们在摄像机前面看看效果(右下角是摄像机看到的画面)
下面是保存在RenderTexure上的画面
再下面是UI界面显示的画面
一毛一样,有木有。
运行起来,模型在动,UI上的人也在动,有木有。
6.为了避免穿帮,我们添加一个Layer专门给这个摄像机使用
另外按照功能考虑,这个摄像机并不需要渲染很远距离的东西,把Clipping planes的far属性调到一个合适的值就可以。
拓展:
现在3D全身模型没
问题了,那如果3D头像也想用实时渲染的模型呢。图像框还是圆形的怎么办呢?
下面我来做个尝试。
1.先确定框体大小,做好位置和层级的占位
2.再做一张RenderTexure,人物离近一点不就行了。那么问题来了,这还是方形的,圆形头像怎么办?
3.首先我们需要一个中间一个圆形镂空的模型
4.延后类,模型瞄准位置,摆上。
是不是很完美。
5.谁说不完美?!还差一步!
创建个shader,代码在下面:
Shader "DuanShader/maskshader"
{
SubShader {
Tags {"Queue" = "Geometry-10" }
Lighting Off
ZTest LEqual
ZWrite On
ColorMask 0
Pass {}
}
}
镂空模型选用这个shader,在看内容。同样的佩服,通用的味道,效果就是这么完美。