3D模型渲染到2D UI上

将3D模型渲染到2D UI上,是3D游戏开发和其他视觉应用中常见的需求。这一过程涉及多个步骤和技术,主要包括建模、变换、视图变换、投影变换、光栅化、着色和纹理映射等。

3D模型渲染到2D UI上

在3D游戏开发中,有时需要将3D角色模型渲染到2D UI界面上,比如王者的角色选择界面。

推荐使用NSDT 3DConvert进行3D模型格式转换,支持glb、obj、stp、fbx、ifc等多种3D模型格式之间进行互相转换,在转换过程中,能够很好的保留模型原有的颜色、材质等信息。

本文以Cocos Creator 3.8版本来实现3D模型和UI渲染在同一界面。

思路

引擎默认使用 前向渲染管线,前向渲染管线的渲染流程是先渲染3D后渲染UI,因此UI总是覆盖在3D内容上面,要实现3D内容和2D内容一起渲染有两种方式:

  • Render Texture: 不将内容直接渲染到屏幕上的情况下进行渲染, 这种方式被称为“离屏渲染”(Off-screen Rendering)。
  • UIMeshR*enderer: 将 3D 模型从 3D 渲染管线转换到 2D 渲染管线的带有转换功能的渲染组件。

使用这两种方式都可以达成目标,本文使用Render Texture来实现。

执行

资源管理器 中点击左上方的  +  按钮,然后选择 渲染纹理,即可创建渲染纹理资源:

在相机组件中,给相机的 TargetTexture 属性赋予 RenderTexture 可以将相机照射的结果绘制到 RenderTexture 上。

将3D角色拖入到编辑器中,调整相机,让3D角色处于相机的视野范围之内。

设置好Canvas节点下的Sprite的SpriteFrame为刚创建的Render Texture。

这样就可以在2D UI渲染3D模型:

接着通过拖动事件来让角色旋转起来。

代码:

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号