虚幻4渲染编程（UI篇）【第一卷：Slate框架综述】

David902 · 发表于 2021-1-10 15:10

我的博客目录：
Slate概述：

虚幻4有自己的UI框架Slate。引擎的编辑器也是用它写的。当然Slate也可以用来写游戏UI。作为美术我觉得有必要具备写UI的能力，这样就可以顺畅地开发工具和游戏UI效果了，比如要制作3D UI，UI上各种闪动的效果，都需要对UI有全面掌握。
首先先把目光投向下图四个模块
这四个模块分别是Slate，SlateCore，SlateRHIRenderer，UMG。Slate和SlateCore共同构筑了逻辑层部分，SlateRHIRenderer则是渲染部分。UMG是在Slate和SlateCore上面的封装层，方便客户端调用，这也是为啥可以不费吹灰之力就能在unreal中用UserWidget开发一套UI的原因。在Unreal中UI就是铺在屏幕表面的面片，也是走顶点像素着色器，甚至还有后期，这和Unreal的SceneRendering的架构差不多。都是逻辑层负责组织资源，然后通知渲染层渲染。
下面就来捋一下整个Slate的渲染 , 我使用的引擎版本是4.20
首先EnginLoop会调用FSlateApplication的DrawWindows，开始了Slate的绘制，注意这里只是逻辑层
然后在PrivateDrawWindows中会初始化一个DrawWindowArgs的东西，它由DrawBuffer和WidgetsToVisualizeUnderCursor等数据组成。在DrawBuffer中存了绘制所需的ElementList。
打开SlateDrawBuffer你将会看到：
在开启绘制之前，需要把UI的图元全部压入这个DrawList才行。于是下面会执行DrawWindowAndChild
这里会层层调用，最终会调用到具一个UI控件的OnPaint函数，这里拿SImage做例子
最终会把图元的类型加到List里。具体的顶点和index会在后面的Batcher里真正添加
下面是Unreal在batcher中添加图元
于是这样就完成了UI数据的搜集。完成搜集之后就可以开始渲染啦，下图的标注2就是渲染部分的开始。
既然有要渲染肯定就需要渲染器啊，FSlateRenderer就是渲染Slate的基础渲染器。
FSlateRHIRenderer是FSlateRenderer的子类，DrawWindows是Slate渲染的入口
在DrawWindow中会向渲染层发送绘制命令。
在DrawWindow_RenderThread中是使用之前准备好的DrawList来绘制。
在DrawWindow_RenderThread中完成最终的绘制
在Slate流程清晰后，可以再来看看UMG，随便打开一个UMG的代码可以看到
UMG就是对Slate的一个简单封装。

于是现在一切流程清晰后，可以得到如下结论：
【1】如果想新建一个自己的UI类型，直接派生一个SWidget子类然后重载OnPaint，然后再在UMG层建一个与之对应的简单封装即可。
【2】如果想要在UI上做一些花样，比如动态UI，3D UI可以在渲染层的vertexshader或者pixleshader上做文章，可以自己给UI写一些特殊shader。
【3】想要优化UI，也是在渲染层做优化，不过unreal的UI已经自带batch，剔除等优化操作了。
Enjoy it ！

		自动登录	找回密码
密码			立即注册

虚幻4渲染编程（UI篇）【第一卷：Slate框架综述】

本帖子中包含更多资源