《Cocos Creator的2D、3D渲染使用记录》
最近在creator项目中遇到了一些需要将3D模型渲染到2D的UI上面,或者将2D的UI渲染到3D场景中的一些问题,在该篇文章中我会将这些问题进行一下记录,以便于后续自己回溯问题。使用的creator版本是3.7.3.
一、2D渲染:
对于2D的UI渲染有Canvas和非Canvas下节点的渲染。首先,对于Canvas下节点的渲染,主要是根据节点树,采用深度优先遍历的方式进行渲染。同时,对于同一父节点下的子节点,我们可以动态的调整渲染顺序,通过UITransform的priority属性(目前已废弃,使用setSiblingIndex来处理),原理是更改当前节点在父节点children数组中的位置,即动态的修改节点树,以此达到修改层级的目的。


对于非Canvas下UI的渲染,主要用于将2D的UI渲染到3D的场景中,这部分内容我们将在后续进行讨论。
2D的UI渲染说明
二、3D渲染:
对于3D的渲染,默认是通过网格渲染器组件(MeshRender)来显示静态的3D模型,通过Mesh属性来设置网格,通过Materials材质属性来控制模型的显示外观。
插入:对于2D图片的渲染,它是通过两个三角面来确定的一个矩形网格。
三、3D中的UI渲染
通常情况下,对于3D场景中的物体,基本都是使用的是3D模型节点。但是有时候我们不得不在项目中增加一些2D的UI内容到场景中去,即在3D场景中渲染UI效果。在creator中目前发现了两种组件可以帮我我们达到这样一个效果。
1、SpriteRender组件:
目前还是一个实验性质的组件,是3D的UI相关的,暂时是实验性质的,缺少相关描述状态。可以将2D的精灵渲染在3D的场景中,而且还可以通过设置Z轴来进行深度测试,实现遮挡关系。
但是该组件也只能对Sprite起效果,如果想要一个Lable文本信息,或者其它2D的内容也渲染到3D场景中,该组件似乎有点做不到。
2、RenderRoot2D组件:
使用该组件的时候,需要给一个适当的缩放值(一般缩小为0.01),否则会对整个屏幕造成遮挡。RenderRoot2D组件没有任何属性可以设置,而且它无法做到深度检测,则使用它挂在的组件默认一直是在最前面,即对3D模型节点会造成遮挡。
上述的图片一直在模型节点的前方,对模型节点产生了遮挡,是因为没有对该图片做深度检测操作。深度检测发生在渲染管线的片元着色器的下一阶段发生,而且它是可编程的。我们可以通过自定义shader,使用材质的方式来让该图片渲染的时候进行深度检测。
四:将3D的模型渲染到2D的UI上:
当时在2D的项目中遇到了一个这样的问题,想要一个很酷炫的动画表现效果,通过spine或者2D的其它粒子效果好像有点满足不了。所以想到使用3D的粒子效果来进行表现, 但是该如何将3D的粒子效果在2D游戏的UI中表现出来了。
1、UIMeshRender :
可以将3D模型渲染到2D的Canvas上面,暂做记录,后续补充应用示例。
2、RenderTexture:
虽然UIMeshRender组件可以奖3D模型渲染到2D的Canvas上面,但是它具有一定的局限性。目前UIMeshRender组件暂不支持多材质渲染,对于复杂的3D模型,可能存在多个材质同时渲染(例如多个模块、GPU粒子等),所以导致渲染异常、材质变化等。这种情况下就不能使用这个组件来处理。
解决方式:使用RenderTexture贴图,将3D相机渲染的内容写入到RenderTexture中,然后将RenderTexture作为贴图在2D相机上进行渲染。
暂做记录,示例后续补充。
五、多相机渲染:
对于多个相机渲染的场景,渲染的先后顺序取决于渲染相机的优先级。优先级越低,越先渲染;先渲染的内容在下层,后渲染的内容在上层。