UE5 Lyra PocketWorld进行3D内容UI预览 - 上

PocketWorld是UE5 Lyra Demo中的插件,用于在UI中预览3D内容,其内部包含了RT生成等逻辑。预览效果:
在这里插入图片描述
该文章分上下两部分,上半部分分享蓝图接口使用,下半部分分享C++代码以及PocketLevel的使用。测试使用UE5.2,第三人称案例Demo。

下半部分:https://blog.csdn.net/grayrail/article/details/163827358


一.常规3D内容抓取

先来讲下无背景Mask的内容抓取。

1.从UE5 Demo中复制该插件到目标UE5项目的Plugins文件夹下,进入项目确保插件是开启状态。
在这里插入图片描述
2.创建继承自PocketCapture的蓝图,便于重写Mask材质球参数。
在这里插入图片描述
3.将插件目录的M_White配置至蓝图中,以便后续Mask绘制使用。
在这里插入图片描述
4.新建测试UMG Widget01,添加Image左上角对齐,缩小尺寸。
在这里插入图片描述
5.在Widget01中添加函数Init,首先调用Pocket Capture SubsystemCreate Thumbnail Renderer,创建PocketCapture对象,使用该对象接口设置RT尺寸,设置该变量为蓝图变量,设置绘制Actor。
在这里插入图片描述
6.同样在Init函数中,设置第二步,使用接口Get or Create Diffuse Render Target创建Diffuse RT,使用Image的接口Set Brush Resource Object,将RT绑定至该Image。
在这里插入图片描述
7.新建蓝图BP_PocketWorldConfig用于在场景中创建Widget01到Viewport,以及挂载与配置场景中UI相机。在BeginPlay中连接UI逻辑:
在这里插入图片描述

8.到场景中添加Camera Actor,将Cube放入子对象。对Cube勾选Visible In Scene Capture Only,使其只对SceneCapture相机可见。
在这里插入图片描述

9.将BP_PocketWorldConfig拖入场景,配置CameraActor至刚刚创建的对象。
在这里插入图片描述
10.回到Widget01 UMG蓝图,在Tick处调用Capture Diffuse接口,在每帧进行抓取,更新RT。
在这里插入图片描述
11.运行后效果如下,可抓取不带Alpha的内容(Linear颜色问题可修改对应参数解决)。
在这里插入图片描述

二.带遮罩3D内容抓取

因为原版PocketWorld没有对Skybox的屏蔽操作,导致即使设置Mask也无法屏蔽Skybox天空盒,首先需要修改PocketWorld代码:

PocketCapture.cpp

bool UPocketCapture::CaptureScene(UTextureRenderTarget2D* InRenderTarget, const TArray<AActor*>& InCaptureActors, ESceneCaptureSource InCaptureSource, UMaterialInterface* OverrideMaterial)
{
    CaptureComponent->ShowFlags.SetAtmosphere(false);
    CaptureComponent->ShowFlags.SetFog(false);
}

12.梳理Widget01蓝图,分为多个步骤,增加DynaMat内部变量,用于缓存材质球。后续将改为材质球赋予Image的形式。
在这里插入图片描述

13.删除旧的Step3(Set Brush Resource Object相关节点),使用下面的节点设置动态材质球参数,缓存对应RT。
在这里插入图片描述
14.因为PocketWorld的Mask实现方式与DiffuseRender不同,Mask所绘制的Actor需要额外传入,而并非旧的取子对象的方式。所以在Widget01添加Init函数参数AlphaMasks供外部传入。
在这里插入图片描述

15.添加Step4,将Init函数参数AlphaMasks设置至PocketCapture中。
在这里插入图片描述
16.切到蓝图BP_PocketWorldConfig中,开放变量AlphaMasks设置至Init函数中。
在这里插入图片描述
17.切到UE场景中,将绘制的Cube链接至AlphaMasks。
在这里插入图片描述
18.修改Widget01的Tick,增加Capture Alpha Mask调用,现在即可绘制Mask遮罩。
在这里插入图片描述
19.运行测试,发现已消除背景。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值