概述

Slate系统是UE的一套UI解决方案，UMG系统也是依赖Slate系统实现的。

问题：

Slate系统是如何组织的？
- 控件树的父子关系是如何绑定的？
Slate系统是如何渲染的？
- slate渲染结构和流程是如何组织的？
- 如何进行合批？

结构

SWidget是Slate系统中所有控件的父类。

控件有三种类型。

叶控件 - 不带子槽的控件。如显示一块文本的 STextBlock。其原生便了解如何绘制文本。

面板 - 子槽数量为动态的控件。如垂直排列任意数量子项，形成一些布局规则的 SVerticalBox。

合成控件 - 子槽显式命名、数量固定的控件。如拥有一个名为 Content 的槽（包含按钮中所有控件）的 SButton。

-- 官方文档

也有一些其他控件直接继承自SWidget，情况比较特殊，暂时忽略。

上述控件三种类型中，其中SPanel、SCompoundWidget可以作为父节点，控件之间的父子关系是依赖Slot实现的。父控件引用Slot,Slot引用子控件并且保留子控件相对于父控件的布局信息。UMG的控件树的实现方式类似，以UCanvasPanel为例：

渲染

Slate渲染由Game线程驱动，收集渲染单元并转换成渲染参数打包推送到渲染线程，渲染线程依据渲染参数分批生成RHICommand,RHIConmand调用图形库API设置渲染状态和绘制。

RHICommand是多态的，提供了OpenGL,D3D,Vulkan等多个图像库对应的子类。

遍历所有Window，收集渲染图元信息。

FSlateApplication::DrawPrepass

对控件树进行中序遍历，缓存每个控件的DesiredSize，给后面DrawWindowAndChildren遍历时使用。ComputeDesiredSize行为是多态的，例如：

SImage 依据ImageBrush->ImageSize计算。
SConstraintCanvas 依据子控件布局计算。

FSlateApplication::DrawWindowAndChildren

从树根开始，依据每个节点的遍历策略遍历，调用Paint函数收集图元信息保存在上下文中。OnPaint行为是多态的，例如：

SConstraintCanvas 先遍历计算孩子的布局信息，再遍历孩子的Paint方法。
SImage 会调用FSlateDrawElement::MakeBox等方法计算计算自身的图元信息保存在上下文中。

FDrawWindowArgs

FSlateDrawBuffer 负载所有Window的图元信息。
FSlateWindowElementList 负载Window内所有图元信息。
FSlateDrawElement 负载一个元素的图元信息

以SImage的OnPaint为例：

void FSlateApplication::DrawWindowAndChildren( const TSharedRef<SWindow>& WindowToDraw, FDrawWindowArgs& DrawWindowArgs )
{
    // ...
    FSlateWindowElementList& WindowElementList = DrawWindowArgs.OutDrawBuffer.AddWindowElementList(WindowToDraw);
    // ...
    MaxLayerId = WindowToDraw->PaintWindow(
                    GetCurrentTime(),
                    GetDeltaTime(),
                    WindowElementList,
                    FWidgetStyle(),
                    WindowToDraw->IsEnabled());
    // ...
}


int32 SImage::OnPaint( const FPaintArgs& Args, const FGeometry& AllottedGeometry, const FSlateRect& MyCullingRect, FSlateWindowElementList& OutDrawElements, int32 LayerId, const FWidgetStyle& InWidgetStyle, bool bParentEnabled ) const
{
    // ...
    FSlateDrawElement::MakeBox(OutDrawElements, LayerId, AllottedGeometry.ToPaintGeometry(), ImageBrush, DrawEffects, FinalColorAndOpacity);
    // ...
    return LayerId;
}


FSlateDrawElement& FSlateDrawElement::MakeBoxInternal(
    FSlateWindowElementList& ElementList,
    uint32 InLayer,
    const FPaintGeometry& PaintGeometry,
    const FSlateBrush* InBrush,
    ESlateDrawEffect InDrawEffects,
    const FLinearColor& InTint
)
{
    EElementType ElementType = (InBrush->DrawAs == ESlateBrushDrawType::Border) ? EElementType::ET_Border : EElementType::ET_Box;

    FSlateDrawElement& Element = ElementList.AddUninitialized();

    const FMargin& Margin = InBrush->GetMargin();
    FSlateBoxPayload& BoxPayload = ElementList.CreatePayload<FSlateBoxPayload>(Element);

    Element.Init(ElementList, ElementType, InLayer, PaintGeometry, InDrawEffects);

    BoxPayload.SetTint(InTint);
    BoxPayload.SetBrush(InBrush);

    return Element;
}

SImage调用了FSlateDrawElement::MakeBox令FSlateWindowElementList增加一个FSlateDrawElement并将自身的图元信息保存其中。

调用FSlateElementBatcher::AddElements生成渲染参数（顶点数组，索引数组，shader相关参数…）

生成渲染命令闭包放到RHI渲染命令队列中，供渲染线程取出调用。

void FSlateRHIRenderer::DrawWindows_Private(FSlateDrawBuffer& WindowDrawBuffer)
{
// …
for (int32 ListIndex = 0; ListIndex < WindowElementLists.Num(); ++ListIndex) { // … ElementBatcher->AddElements(ElementList);
// …

    // ...
    if (GIsClient && !IsRunningCommandlet() && !GUsingNullRHI)
    {
        ENQUEUE_RENDER_COMMAND(SlateDrawWindowsCommand)(
            [Params, ViewInfo](FRHICommandListImmediate& RHICmdList)
            {
                Params.Renderer->DrawWindow_RenderThread(RHICmdList, *ViewInfo, *Params.WindowElementList, Params);
            }
        );
    }
// ...

}

FSlateElementBatcher::AddElements

将 FSlateApplication::PrivateDrawWindows 阶段生成的 FSlateDrawElement 所负载的图元信息，转换成渲染所需的参数封装到FSlateRenderBatch中，放入FSlateWindowElementList的FSlateBatchData成员中，对于缓存/未缓存的数据有不同的处理策略：

void FSlateElementBatcher::AddElements(FSlateWindowElementList& WindowElementList)
{
    // ...
    AddElementsInternal(WindowElementList.GetUncachedDrawElements(), ViewportSize);

    // ...
    const TArrayView<FSlateCachedElementData* const> CachedElementDataList = WindowElementList.GetCachedElementDataList();

    if(CachedElementDataList.Num())
    {
        for (FSlateCachedElementData* CachedElementData : CachedElementDataList)
        {
            AddCachedElements(*CachedElementData, ViewportSize);
        }
    }
    // ...
}

未缓存的调用AddElements，AddElements调用AddElementsInternal生成和封装渲染参数，放入FSlateWindowElementList的FSlateBatchData成员中。

void FSlateElementBatcher::AddElementsInternal(const FSlateDrawElementArray& DrawElements, const FVector2D& ViewportSize)
{
for (const FSlateDrawElement& DrawElement : DrawElements)
{
switch ( DrawElement.GetElementType() )
{
case EElementType::ET_Box:
{
SCOPED_NAMED_EVENT_TEXT("Slate::AddBoxElement", FColor::Magenta);
STAT(ElementStat_Boxes++);
DrawElement.IsPixelSnapped() ? AddBoxElement(DrawElement) : AddBoxElement(DrawElement);
}
// …
}
}

template
void FSlateElementBatcher::AddBoxElement(const FSlateDrawElement& DrawElement)
{
const FSlateBoxPayload& DrawElementPayload = DrawElement.GetDataPayload();
const FColor Tint = PackVertexColor(DrawElementPayload.GetTint());
const FSlateRenderTransform& ElementRenderTransform = DrawElement.GetRenderTransform();
// …
```
RenderBatch.AddVertex( FSlateVertex::Make<Rounding>( RenderTransform, FVector2D( Position.X, Position.Y ),      LocalSize, DrawScale, FVector4(StartUV,                                     Tiling),    Tint ) ); //0
RenderBatch.AddVertex( FSlateVertex::Make<Rounding>( RenderTransform, FVector2D( Position.X, TopMarginY ),      LocalSize, DrawScale, FVector4(FVector2D( StartUV.X, TopMarginV ),          Tiling),    Tint ) ); //1
// ...

RenderBatch.AddIndex( IndexStart + 0 );
RenderBatch.AddIndex( IndexStart + 1 );
// ...
```
}
已缓存的调用AddCachedElements：
- 遍历 ListsWithNewData 中的FSlateDrawElement，调用AddElementsInternal生成和封装渲染参数，放入FSlateWindowElementList的FSlateBatchData成员中。
- 直接将 CachedElementData 中所有FSlateRenderBatch放入FSlateWindowElementList的FSlateBatchData成员中。
void FSlateElementBatcher::AddCachedElements(FSlateCachedElementData& CachedElementData, const FVector2D& ViewportSize)
{
// …
for (FSlateCachedElementList* List : CachedElementData.ListsWithNewData)
{
// …
AddElementsInternal(List->DrawElements, ViewportSize);
// …
}
// …
BatchData->AddCachedBatches(CachedElementData.GetCachedBatches());
// …
}

合并和处理批次，提交渲染参数，调用渲染相关API进行绘制。

void FSlateRHIRenderer::DrawWindow_RenderThread(FRHICommandListImmediate& RHICmdList, FViewportInfo& ViewportInfo, FSlateWindowElementList& WindowElementList, const struct FSlateDrawWindowCommandParams& DrawCommandParams)
{
    // ...
    RenderingPolicy->BuildRenderingBuffers(RHICmdList, BatchData);

    // ...
    RenderingPolicy->DrawElements
            (
                RHICmdList,
                BackBufferTarget,
                BackBuffer,
                PostProcessBuffer,
                ViewportInfo.bRequiresStencilTest ? ViewportInfo.DepthStencil : EmptyTarget,
                BatchData.GetFirstRenderBatchIndex(),
                BatchData.GetRenderBatches(),
                RenderParams
            );

    // ...
    RHICmdList.EndDrawingViewport(ViewportInfo.ViewportRHI, true, DrawCommandParams.bLockToVsync);
    // ...
}

FSlateRHIRenderingPolicy::BuildRenderingBuffers

合并批次并收集所有batch的顶点/索引数据分别填充到数组中（方便后面一次性提交给GPU）。

void FSlateRHIRenderingPolicy::BuildRenderingBuffers(FRHICommandListImmediate& RHICmdList, FSlateBatchData& InBatchData)
{
    // ...
    InBatchData.MergeRenderBatches();

    // ...
    uint32 RequiredVertexBufferSize = NumBatchedVertices * sizeof(FSlateVertex);
    uint8* VertexBufferData = (uint8*)InRHICmdList.LockVertexBuffer(VertexBuffer, 0, RequiredVertexBufferSize, RLM_WriteOnly);

    uint32 RequiredIndexBufferSize = NumBatchedIndices * sizeof(SlateIndex);
    uint8* IndexBufferData = (uint8*)InRHICmdList.LockIndexBuffer(IndexBuffer, 0, RequiredIndexBufferSize, RLM_WriteOnly);

    FMemory::Memcpy(VertexBufferData, LambdaFinalVertexData.GetData(), RequiredVertexBufferSize);
    FMemory::Memcpy(IndexBufferData, LambdaFinalIndexData.GetData(), RequiredIndexBufferSize);
    // ...
}

调用FSlateBatchData::MergeRenderBatches设置批次顶点/索引偏移（每次绘制时按照偏移读取一段数据进行绘制）并进行合批，注意合批条件：
- TestBatch.GetLayer() == CurBatch.GetLayer()
- CurBatch.IsBatchableWith(TestBatch)
void FSlateBatchData::MergeRenderBatches()
{
// …
FillBuffersFromNewBatch(CurBatch, FinalVertexData, FinalIndexData);
// …
if (CurBatch.bIsMergable)
{
for (int32 TestIndex = BatchIndex + 1; TestIndex < BatchIndices.Num(); ++TestIndex) { const TPair& NextBatchIndexPair = BatchIndices[TestIndex];
FSlateRenderBatch& TestBatch = RenderBatches[NextBatchIndexPair.Key];
if (TestBatch.GetLayer() != CurBatch.GetLayer())
{
// none of the batches will be compatible since we encountered an incompatible layer
break;
}
else if (!TestBatch.bIsMerged && CurBatch.IsBatchableWith(TestBatch))
{
CombineBatches(CurBatch, TestBatch, FinalVertexData, FinalIndexData);
```
            check(TestBatch.NextBatchIndex == INDEX_NONE);    }
}}
// ...
```
}

void FSlateBatchData::FillBuffersFromNewBatch(FSlateRenderBatch& Batch, FSlateVertexArray& FinalVertices, FSlateIndexArray& FinalIndices)
{
if(Batch.HasVertexData())
{
const int32 SourceVertexOffset = Batch.VertexOffset;
const int32 SourceIndexOffset = Batch.IndexOffset;
```
    // At the start of a new batch, just direct copy the verts
    // todo: May need to change this to use absolute indices
    Batch.VertexOffset = FinalVertices.Num();
    Batch.IndexOffset = FinalIndices.Num();FinalVertices.Append(&amp;(*Batch.SourceVertices)[SourceVertexOffset], Batch.NumVertices);
FinalIndices.Append(&amp;(*Batch.SourceIndices)[SourceIndexOffset], Batch.NumIndices);
}
```
}

bool IsBatchableWith(const FSlateRenderBatch& Other) const
{
return
ShaderResource == Other.ShaderResource
&& DrawFlags == Other.DrawFlags
&& ShaderType == Other.ShaderType
&& DrawPrimitiveType == Other.DrawPrimitiveType
&& DrawEffects == Other.DrawEffects
&& ShaderParams == Other.ShaderParams
&& InstanceData == Other.InstanceData
&& InstanceCount == Other.InstanceCount
&& InstanceOffset == Other.InstanceOffset
&& DynamicOffset == Other.DynamicOffset
&& CustomDrawer == Other.CustomDrawer
&& SceneIndex == Other.SceneIndex
&& ClippingState == Other.ClippingState;
}

FRHICommandList::BeginDrawingViewport

调用FRHICommandListImmediate::ImmediateFlush提交上文提到的所有顶点/索引数组等渲染状态信息。

void FRHICommandList::BeginDrawingViewport(FRHIViewport* Viewport, FRHITexture* RenderTargetRHI)
{
    // ...
    FRHICommandListExecutor::GetImmediateCommandList().ImmediateFlush(EImmediateFlushType::FlushRHIThread);
    // ...
}


FORCEINLINE_DEBUGGABLE void FRHICommandListImmediate::ImmediateFlush(EImmediateFlushType::Type FlushType)
{
    // ...
    GRHICommandList.ExecuteList(*this); // 执行并销毁所有命令
    // ...
}

FSlateRHIRenderingPolicy::DrawElements

为每一个批次生成渲染状态信息和绘制相关RHI命令。

void FSlateRHIRenderingPolicy::DrawElements(
    FRHICommandListImmediate& RHICmdList,
    FSlateBackBuffer& BackBuffer,
    FTexture2DRHIRef& ColorTarget,
    FTexture2DRHIRef& PostProcessTexture,
    FTexture2DRHIRef& DepthStencilTarget,
    int32 FirstBatchIndex,
    const TArray<FSlateRenderBatch>& RenderBatches,
    const FSlateRenderingParams& Params)
{
    // ...
    while (NextRenderBatchIndex != INDEX_NONE)
    {
        // ...
        RHICmdList.SetStreamSource(0, VertexBufferPtr->VertexBufferRHI, RenderBatch.VertexOffset * sizeof(FSlateVertex));
        RHICmdList.DrawIndexedPrimitive(IndexBufferPtr->IndexBufferRHI, 0, 0, RenderBatch.NumVertices, RenderBatch.IndexOffset, PrimitiveCount, RenderBatch.InstanceCount);
        // ...
    }
    // ...
}