Flash Stage3D 在2D UI 界面上显示3D模型问题

jekeyhui99

一直以来很多Stage3D开发者都在为3D模型在2DUI上显示的问题头疼。Stage3D一直是在 Stage2D下面。为了做到3D模型在2DUI上显示通常大家有几种实现方式，下面来说说这几种实现方式吧。

实现方式1：

　　在2DUI上挖个洞透过去显示3D层。这种做法的缺陷在于如果两个UI界面同时打开就会UI错层显示错乱。为了解决这问题很多程序员选择了当挖洞显示3D的UI打时把其他界面隐藏掉，用户体验超差。

实现方式2：

　　利用Context3D 的 drawToBitmapData API 实时将3D层渲染的物价绘制到BitmapData上。然后再添加到2DUI上。这种做法的缺陷在于每次drawToBitmapData函数。每次从显卡draw图然后再回传回来的开销非常大，会导致帧频下降。而每次draw图会产生大量的内存。有人可能会说我draw图的时候 按时间间隔去draw，减少一部分开销。其实都一样画面不流畅。

实现方式3：

　　把3D模型渲染成序列帧位图。再实现一个位图播放器在2DUI上显示。这样做法会导致所需要加载的位图量非常大，内存大小就可想而知了。

好吧以上都是我们的常用做法。实在恶心，很多程序员会选择使用第3方提供的 3DUI 例如 starling等来实现。没错这是最终的解决方案，但是头疼的问题又来了坐标转换是个麻烦的问题。再一个就是 starling 对于AS3程序员来说用起来总不是那么得心应手。怎么办....怎么办....痛苦纠结针扎中。

　　朋友如果你还在为以上这些问题头疼、纠结、针扎中那么下面我向你推荐下另一种几乎可以解决以上你所担心的任何问题。老规矩先上图吧。

怎么样呢？是否感觉很赞呢？

　　话说有一天在开晨会的时候同事和我说他想到一个方式可以解决UI互斥的问题。抱着半信半疑的心里我看了下他的实现方式。下面我就来说说吧

　　其实原理还是前面说到过的 实现方式1 只是在这个做法上做了些优化。大家都知道as3中的 Graphics 画一个矩形在同一个地方画两次就会挖个洞出来。首先检查到带有3D模型的UI 面板是否和其他UI重叠。如果重叠则把最上层的UI保留，下层的UI画空。这样就可以解决了。但是问题又来了一个带3D模型的UI 和一个普通2DUI 显示没问题了。那么两个带3D模型的UI 叠在一起就可以看到另一个UI上的模型跑到这个UI上来了。 原因是模型都是渲染在同一个Context3D上一旦画空了就全显示出来了。为了解决这个问题我们得改下3D引擎的渲染方式了。首先把要再UI上显示的3D元素都做一个标间，以便与在引擎底层用来区分渲染。

当检查到标记的时候先调用下 Context3D清理一次深度

　　context.clear(0, 0, 0, 1, 1, 0, Context3DClearMask.DEPTH);

好了 下面我们来整理下我们渲染在2D界面上的3D物件的渲染顺序：

灯光--> 网格（作为背景底板）---> 3D模型

好了顺序清楚了流程，现在开始渲染。

灯光就无视了。只要你调好坐标能照到你的模型即可，无需做特殊处理。重点来了，在渲染背景底板的时候，我们再调用一次context.clear(0, 0, 0, 1, 1, 0, Context3DClearMask.DEPTH);再渲染。

清理深度这个主要是用来控制不让下层的3D物件因深度问题而透到前面来。好了底板已经渲染OK了现在再来重复一次渲染底板的方式再渲染一次模型吧。好了现在看上去还好一切正常现在多创建几个叠加试试

OK 大功告成一切正常。最后还是声明下如果有条件的朋友还是建议自己写3DUI 来做。不会写的也没关系可以考虑用 starling 或第3方的一些类库来实现。