ui rendering works now

res/shaders/UIPass.slang

@@ -1,30 +1,76 @@
-struct VertexStageOutput
+struct RenderElementStyle
 {
-    float4 position : SV_Position;
-    float2 uvCoords : TEXCOORD;
+    float3 position;
+    uint backgroundImageIndex;
+    float3 backgroundColor;
+    float opacity;
+    //float4 borderBottomColor;
+    //float4 borderLeftColor;
+    //float4 borderRightColor;
+    //float4 borderTopColor;
+    //float borderBottomLeftRadius;
+    //float borderBottomRightRadius;
+    //float borderTopLeftRadius;
+    //float borderTopRightRadius;
+    float2 dimensions;
 };
 
+struct ViewData
+{
+    float4x4 projectionMatrix;
+};
+
+layout(set = 0, binding = 0)
+ConstantBuffer<ViewData> viewData;
+
+layout(set = 0, binding = 1)
+SamplerState backgroundSampler;
+
+layout(set = 0, binding = 2)
+ConstantBuffer<uint> numBackgroundTextures;
+
+layout(set = 0, binding = 3)
+Texture2D<float4> backgroundTextures[];
+
+struct VertexStageOutput
+{
+    float4 position  : SV_Position;
+    float2 texCoords : TEXCOORD;
+    RenderElementStyle style : RENDER_STYLE;
+};
 
 [shader("vertex")]
-VertexStageOutput vertexMain(uint vertexId : SV_VertexID)
+VertexStageOutput vertexMain(uint vertexId : SV_VertexID, RenderElementStyle style)
 {
-    float2 coordinates[4] = {
-        float2(0, 0),
-        float2(0, 1),
-        float2(1, 0),
-        float2(1, 1)
+    float xMin = style.position.x;
+    float xMax = xMin + style.dimensions.x;
+    float yMin = style.position.y;
+    float yMax = yMin + style.dimensions.y;
+    float4 coordinates[] = {
+        float4(xMin, yMin, 0, 0),
+        float4(xMin, yMax, 0, 1),
+        float4(xMax, yMin, 1, 0),
+        float4(xMax, yMax, 1, 1)
     };
     VertexStageOutput output;
-    output.uvCoords = coordinates[vertexId];
-    output.position = float4(output.uvCoords * 2 - 1, 1, 1);
+    output.position = mul(viewData.projectionMatrix, float4(coordinates[vertexId].xy, style.position.z, 1));
+    output.texCoords = coordinates[vertexId].zw;
+    output.style = style;
     return output;
 }
 
 [shader("fragment")]
 float4 fragmentMain(
     float4 position : SV_Position,
-    float2 uvCoords : TEXCOORD
+    float2 texCoords : TEXCOORD,
+    RenderElementStyle style : RENDER_STYLE
 ) : SV_Target
 {
-    return float4(0, 1, 0, 1);
+    float4 bgTextureColor = float4(1, 1, 1, 1);
+    uint imageIndex = style.backgroundImageIndex;
+    if(imageIndex < numBackgroundTextures)
+    {
+        bgTextureColor = backgroundTextures[imageIndex].Sample(backgroundSampler, texCoords);
+    }
+    return float4(style.backgroundColor, style.opacity) * bgTextureColor;
 }

res/shaders/uiFragment.glsl

@@ -0,0 +1,103 @@
+#version 450
+#extension GL_EXT_nonuniform_qualifier : require
+layout(row_major) uniform;
+layout(row_major) buffer;
+
+#line 30 0
+layout(binding = 2)
+layout(std140) uniform _S1
+{
+    uint _data;
+} numBackgroundTextures_0;
+
+#line 33
+layout(binding = 3)
+uniform texture2D  backgroundTextures_0[];
+
+
+#line 27
+layout(binding = 1)
+uniform sampler backgroundSampler_0;
+
+
+#line 27
+layout(location = 0)
+out vec4 _S2;
+
+
+#line 63
+layout(location = 0)
+in vec2 _S3;
+
+
+#line 1
+layout(location = 1)
+in vec3 _S4;
+
+
+#line 1
+flat layout(location = 2)
+in uint _S5;
+
+
+#line 1
+layout(location = 3)
+in vec3 _S6;
+
+
+#line 1
+layout(location = 4)
+in float _S7;
+
+
+#line 1
+layout(location = 5)
+in vec2 _S8;
+
+
+#line 1
+struct RenderElementStyle_0
+{
+    vec3 position_0;
+    uint backgroundImageIndex_0;
+    vec3 backgroundColor_0;
+    float opacity_0;
+    vec2 dimensions_0;
+};
+
+
+#line 63
+void main()
+{
+    vec4 bgTextureColor_0;
+
+#line 63
+    RenderElementStyle_0 _S9 = RenderElementStyle_0(_S4, _S5, _S6, _S7, _S8);
+
+#line 69
+    const vec4 _S10 = vec4(float(1), float(1), float(1), float(1));
+
+#line 69
+    uint imageIndex_0 = _S9.backgroundImageIndex_0;
+
+    if(imageIndex_0 < numBackgroundTextures_0._data)
+    {
+        vec4 _S11 = (texture(sampler2D(backgroundTextures_0[imageIndex_0],backgroundSampler_0), (_S3)));
+
+#line 71
+        bgTextureColor_0 = _S11;
+    }
+    else
+    {
+
+#line 71
+        bgTextureColor_0 = _S10;
+    }
+
+#line 71
+    _S2 = vec4(_S9.backgroundColor_0, _S9.opacity_0) * bgTextureColor_0;
+
+#line 71
+    return;
+}
+

res/shaders/uiVertex.glsl

@@ -0,0 +1,83 @@
+#version 450
+layout(row_major) uniform;
+layout(row_major) buffer;
+
+#line 1 0
+struct RenderElementStyle_0
+{
+    vec3 position_0;
+    uint backgroundImageIndex_0;
+    vec3 backgroundColor_0;
+    float opacity_0;
+    vec4 borderBottomColor_0;
+    vec4 borderLeftColor_0;
+    vec4 borderRightColor_0;
+    vec4 borderTopColor_0;
+    float borderBottomLeftRadius_0;
+    float borderBottomRightRadius_0;
+    float borderTopLeftRadius_0;
+    float borderTopRightRadius_0;
+    vec2 dimensions_0;
+};
+
+
+#line 33
+layout(std430, binding = 3) readonly buffer _S1 {
+    RenderElementStyle_0 _data[];
+} elements_0;
+
+#line 33
+layout(location = 0)
+out vec2 _S2;
+
+
+#line 33
+layout(location = 1)
+out uint _S3;
+
+
+
+struct VertexStageOutput_0
+{
+    vec4 position_1;
+    vec2 texCoords_0;
+    uint elementId_0;
+};
+
+
+void main()
+{
+
+#line 46
+    uint _S4 = uint(gl_VertexIndex);
+
+#line 46
+    uint _S5 = uint(gl_InstanceIndex);
+
+    RenderElementStyle_0 style_0 = ((elements_0)._data[(_S5)]);
+    float xMin_0 = style_0.position_0.x;
+    float xMax_0 = xMin_0 + style_0.dimensions_0.x;
+    float yMin_0 = style_0.position_0.y;
+    float yMax_0 = yMin_0 + style_0.dimensions_0.y;
+    vec4  coordinates_0[4] = { vec4(xMin_0, yMin_0, float(0), float(0)), vec4(xMin_0, yMax_0, float(0), float(1)), vec4(xMax_0, yMin_0, float(1), float(0)), vec4(xMax_0, yMax_0, float(1), float(1)) };
+
+#line 59
+    VertexStageOutput_0 output_0;
+    output_0.position_1 = vec4(coordinates_0[_S4].xy, style_0.position_0.z, float(1));
+    output_0.texCoords_0 = coordinates_0[_S4].zw;
+    output_0.elementId_0 = _S5;
+    VertexStageOutput_0 _S6 = output_0;
+
+#line 63
+    gl_Position = _S6.position_1;
+
+#line 63
+    _S2 = _S6.texCoords_0;
+
+#line 63
+    _S3 = _S6.elementId_0;
+
+#line 63
+    return;
+}
+

src/Engine/Graphics/GraphicsResources.cpp

@@ -210,12 +210,12 @@ StructuredBuffer::~StructuredBuffer()
 
 bool StructuredBuffer::updateContents(const BulkResourceData& resourceData) 
 {
-	assert(contents.size() == resourceData.size);
-	if(std::memcmp(contents.data(), resourceData.data, contents.size()) == 0)
+	assert(contents.size() >= resourceData.size);
+	if(std::memcmp(contents.data(), resourceData.data, resourceData.size) == 0)
 	{
 		return false;
 	}
-	std::memcpy(contents.data(), resourceData.data, contents.size());
+	std::memcpy(contents.data(), resourceData.data, resourceData.size);
 	return true;
 }
 VertexBuffer::VertexBuffer(QueueFamilyMapping mapping, uint32 numVertices, uint32 vertexSize, QueueType startQueueType)

src/Engine/Graphics/GraphicsResources.h

@@ -362,12 +362,12 @@ class VertexBuffer : public Buffer
 public:
     VertexBuffer(QueueFamilyMapping mapping, uint32 numVertices, uint32 vertexSize, QueueType startQueueType);
     virtual ~VertexBuffer();
-    inline uint32 getNumVertices()
+    constexpr uint32 getNumVertices() const
     {
         return numVertices;
     }
     // Size of one vertex in bytes
-    inline uint32 getVertexSize()
+    constexpr uint32 getVertexSize() const
     {
         return vertexSize;
     }

src/Engine/Graphics/RenderPass/TextPass.cpp

@@ -21,7 +21,7 @@ void TextPass::beginFrame()
     for(TextRender& render : passData.texts)
     {
         FontData& fontData = getFontData(render.font);
-        TextResources& resources = textResources.add();
+        TextResources& resources = textResources[render.font].add();
         Array<GlyphInstanceData> instanceData;
         float x = render.position.x;
         float y = render.position.y;
@@ -67,16 +67,19 @@ void TextPass::render()
 {
     graphics->beginRenderPass(renderPass);
     Array<Gfx::PRenderCommand> commands;
-    for(TextResources& resources : textResources)
+    for(const auto& [fontAsset, resources] : textResources)
     {
         Gfx::PRenderCommand command = graphics->createRenderCommand("TextPassCommand");
         command->setViewport(viewport);
         command->bindPipeline(pipeline);
-        command->bindDescriptor({generalSet, resources.textureArraySet});
-        command->bindVertexBuffer({VertexInputStream(0, 0, resources.vertexBuffer)});
-        
-        command->pushConstants(pipelineLayout, Gfx::SE_SHADER_STAGE_VERTEX_BIT | Gfx::SE_SHADER_STAGE_FRAGMENT_BIT, 0, sizeof(TextData), &resources.textData);
-        command->draw(4, static_cast<uint32>(resources.vertexBuffer->getNumVertices()), 0, 0);
+        for(const auto& resource : resources)
+        {
+            command->bindDescriptor({generalSet, resource.textureArraySet});
+            command->bindVertexBuffer({VertexInputStream(0, 0, resource.vertexBuffer)});
+            
+            command->pushConstants(pipelineLayout, Gfx::SE_SHADER_STAGE_VERTEX_BIT | Gfx::SE_SHADER_STAGE_FRAGMENT_BIT, 0, sizeof(TextData), &resource.textData);
+            command->draw(4, static_cast<uint32>(resource.vertexBuffer->getNumVertices()), 0, 0);
+        }
         commands.add(command);
     }
     graphics->executeCommands(commands);

src/Engine/Graphics/RenderPass/TextPass.h

@@ -65,7 +65,7 @@ private:
         Gfx::PDescriptorSet textureArraySet;
         TextData textData;
     };
-    Array<TextResources> textResources;
+    std::map<PFontAsset, Array<TextResources>> textResources;
 
     Gfx::PRenderTargetAttachment renderTarget;
     Gfx::PRenderTargetAttachment depthAttachment;

src/Engine/Graphics/RenderPass/UIPass.cpp

@@ -17,6 +17,23 @@ UIPass::~UIPass()
 
 void UIPass::beginFrame() 
 {
+    VertexBufferCreateInfo info = {
+        .resourceData = {
+            .size = (uint32)(sizeof(UI::RenderElementStyle) * passData.renderElements.size()),
+            .data = (uint8*)passData.renderElements.data()
+        },
+        .vertexSize = sizeof(UI::RenderElementStyle),
+        .numVertices = (uint32)passData.renderElements.size(),
+    };
+    elementBuffer = graphics->createVertexBuffer(info);
+    uint32 numTextures = passData.usedTextures.size();
+    numTexturesBuffer->updateContents({
+        .size = sizeof(uint32),
+        .data = (uint8*)&numTextures,
+    });
+    descriptorSet->updateBuffer(2, numTexturesBuffer);
+    descriptorSet->updateTextureArray(3, passData.usedTextures);
+    descriptorSet->writeChanges();
     //co_return;
 }
 
@@ -26,7 +43,9 @@ void UIPass::render()
     Gfx::PRenderCommand command = graphics->createRenderCommand("UIPassCommand");
     command->setViewport(viewport);
     command->bindPipeline(pipeline);
-    command->draw(4, 1, 0, 0);
+    command->bindVertexBuffer({VertexInputStream(0, 0, elementBuffer)});
+    command->bindDescriptor(descriptorSet);
+    command->draw(4, passData.renderElements.size(), 0, 0);
     graphics->executeCommands(Array<Gfx::PRenderCommand>({command}));
     graphics->endRenderPass();
     //co_return;
@@ -72,8 +91,84 @@ void UIPass::createRenderPass()
     createInfo.name = "UIFragment";
     createInfo.entryPoint =  "fragmentMain";
     fragmentShader = graphics->createFragmentShader(createInfo);
-    declaration = graphics->createVertexDeclaration({});
+    Array<Gfx::VertexElement> decl;
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, position),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32B32_SFLOAT,
+        .attributeIndex = 0,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, backgroundImageIndex),
+        .vertexFormat = Gfx::SE_FORMAT_R32_UINT,
+        .attributeIndex = 1,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, backgroundColor),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32B32_SFLOAT,
+        .attributeIndex = 2,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, opacity),
+        .vertexFormat = Gfx::SE_FORMAT_R32_SFLOAT,
+        .attributeIndex = 3,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    decl.add({
+        .streamIndex = 0,
+        .offset = offsetof(UI::RenderElementStyle, dimensions),
+        .vertexFormat = Gfx::SE_FORMAT_R32G32_SFLOAT,
+        .attributeIndex = 4,
+        .stride = sizeof(UI::RenderElementStyle),
+        .bInstanced = 1
+    });
+    declaration = graphics->createVertexDeclaration(decl);
+
+    descriptorLayout = graphics->createDescriptorLayout("UIDescriptorLayout");
+    descriptorLayout->addDescriptorBinding(0, Gfx::SE_DESCRIPTOR_TYPE_UNIFORM_BUFFER);
+    descriptorLayout->addDescriptorBinding(1, Gfx::SE_DESCRIPTOR_TYPE_SAMPLER);
+    descriptorLayout->addDescriptorBinding(2, Gfx::SE_DESCRIPTOR_TYPE_UNIFORM_BUFFER);
+    descriptorLayout->addDescriptorBinding(3, Gfx::SE_DESCRIPTOR_TYPE_SAMPLED_IMAGE, 256, Gfx::SE_DESCRIPTOR_BINDING_VARIABLE_DESCRIPTOR_COUNT_BIT | Gfx::SE_DESCRIPTOR_BINDING_PARTIALLY_BOUND_BIT);
+    descriptorLayout->create();
+
+    Matrix4 projectionMatrix = glm::ortho(0, 1, 1, 0);
+    UniformBufferCreateInfo info = {
+        .resourceData = {
+            .size = sizeof(Matrix4),
+            .data = (uint8*)&projectionMatrix,
+        },
+        .bDynamic = false,
+    };
+    Gfx::PUniformBuffer uniformBuffer = graphics->createUniformBuffer(info);
+    Gfx::PSamplerState backgroundSampler = graphics->createSamplerState({});
+
+    info = {
+        .resourceData = {
+            .size = sizeof(uint32),
+            .data = nullptr
+        },
+        .bDynamic = true,
+    };
+
+    numTexturesBuffer = graphics->createUniformBuffer(info);
+
+    descriptorSet = descriptorLayout->allocateDescriptorSet();
+    descriptorSet->updateBuffer(0, uniformBuffer);
+    descriptorSet->updateSampler(1, backgroundSampler);
+    descriptorSet->writeChanges();
+
     pipelineLayout = graphics->createPipelineLayout();
+    pipelineLayout->addDescriptorLayout(0, descriptorLayout);
     pipelineLayout->create();
 
     Gfx::PRenderTargetLayout layout = new Gfx::RenderTargetLayout(renderTarget, depthAttachment);

src/Engine/Graphics/RenderPass/UIPass.h

@@ -9,7 +9,8 @@ DECLARE_NAME_REF(Gfx, Texture2D)
 DECLARE_NAME_REF(Gfx, RenderTargetAttachment)
 struct UIPassData
 {
-    const UI::RenderHierarchy hierarchy;
+    Array<UI::RenderElementStyle> renderElements;
+    Array<Gfx::PTexture> usedTextures;
 };
 class UIPass : public RenderPass<UIPassData>
 {
@@ -26,6 +27,12 @@ private:
     Gfx::PRenderTargetAttachment depthAttachment;
     Gfx::PTexture2D depthBuffer;
 
+    Gfx::PDescriptorLayout descriptorLayout;
+    Gfx::PDescriptorSet descriptorSet;
+
+    Gfx::PUniformBuffer numTexturesBuffer;
+    Gfx::PVertexBuffer elementBuffer;
+
     Gfx::PVertexDeclaration declaration;
     Gfx::PVertexShader vertexShader;
     Gfx::PFragmentShader fragmentShader;

src/Engine/Graphics/Vulkan/VulkanDescriptorSets.cpp

@@ -128,7 +128,7 @@ void DescriptorSet::updateBuffer(uint32_t binding, Gfx::PUniformBuffer uniformBu
     UniformBuffer* cachedBuffer = reinterpret_cast<UniformBuffer*>(cachedData[binding]);
     if(vulkanBuffer->isDataEquals(cachedBuffer))
     {
-        std::cout << "uniform data equal, skip" << std::endl; 
+        //std::cout << "uniform data equal, skip" << std::endl; 
         return;
     }
     bufferInfos.add(init::DescriptorBufferInfo(vulkanBuffer->getHandle(), 0, vulkanBuffer->getSize()));

src/Engine/UI/Elements/CMakeLists.txt

@@ -1,4 +1,6 @@
 target_sources(Engine
     PRIVATE
         Element.h
-        Element.cpp)
+        Element.cpp
+        Panel.h
+        Panel.cpp)

src/Engine/UI/Elements/Element.cpp

@@ -1,5 +1,6 @@
 #include "Element.h"
 #include "UI/System.h"
+#include "Graphics/Graphics.h"
 
 using namespace Seele;
 using namespace Seele::UI;

src/Engine/UI/Elements/Element.h

@@ -36,7 +36,6 @@ protected:
     PSystem system;
     PElement parent;
     Array<PElement> children;
-    friend class Layout;
     friend class RenderElement;
 };
 DEFINE_REF(Element)

src/Engine/UI/Elements/Panel.cpp

@@ -0,0 +1,15 @@
+#include "Panel.h"
+#include "UI/Layout.h"
+
+using namespace Seele;
+using namespace Seele::UI;
+
+Panel::Panel()
+{
+    
+}
+
+Panel::~Panel()
+{
+    
+}

src/Engine/UI/Elements/Panel.h

@@ -5,12 +5,16 @@ namespace Seele
 {
 namespace UI
 {
+DECLARE_REF(Layout)
 class Panel : Element
 {
 public:
     Panel();
     virtual ~Panel();
+private:
+    PLayout activeLayout;
 };
+
 DEFINE_REF(Panel);
 } // namespace UI
 } // namespace Seele

src/Engine/UI/HorizontalLayout.cpp

@@ -1,4 +1,5 @@
 #include "HorizontalLayout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;

src/Engine/UI/Layout.cpp

@@ -1,4 +1,5 @@
 #include "Layout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;

src/Engine/UI/Layout.h

@@ -1,10 +1,11 @@
 #pragma once
-#include "Elements/Element.h"
+#include "MinimalEngine.h"
 
 namespace Seele
 {
 namespace UI
 {
+DECLARE_REF(Element);
 class Layout
 {
 public:

src/Engine/UI/RenderHierarchy.h

@@ -9,23 +9,20 @@ namespace UI
 {
 struct RenderElementStyle
 {
-    Vector2 position;
-    Vector2 dimensions;
-    Vector backgroundColor;
-    uint32 backgroundImageIndex;
-    Vector4 borderBottomColor;
-    Vector4 borderLeftColor;
-    Vector4 borderRightColor;
-    Vector4 borderTopColor;
-    float borderBottomLeftRadius;
-    float borderBottomRightRadius;
-    float borderTopLeftRadius;
-    float borderTopRightRadius;
-    Vector4 fontColor;
-    float fontSize;
-    float opacity;
+    Vector position = Vector(0, 0, 0);
+    uint32 backgroundImageIndex = -1;
+    Vector backgroundColor = Vector(1, 1, 1);
+    float opacity = 1.0f;
+    //Vector4 borderBottomColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderLeftColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderRightColor = Vector4(1, 1, 1, 1);
+    //Vector4 borderTopColor = Vector4(1, 1, 1, 1);
+    //float borderBottomLeftRadius = 0;
+    //float borderBottomRightRadius = 0;
+    //float borderTopLeftRadius = 0;
+    //float borderTopRightRadius = 0;
+    Vector2 dimensions = Vector2(1, 1);
 };
-static_assert(sizeof(RenderElementStyle) == 34*4);
 class RenderElement
 {
 public:

src/Engine/UI/System.cpp

@@ -1,5 +1,8 @@
 #include "System.h"
 #include "Elements/Panel.h"
+#include "Graphics/Graphics.h"
+#include "Asset/AssetRegistry.h"
+#include "Asset/TextureAsset.h"
 
 using namespace Seele;
 using namespace Seele::UI;
@@ -13,3 +16,33 @@ System::~System()
 {
     
 }
+
+void System::update()
+{
+    
+}
+
+UIPassData System::getUIPassData()
+{
+    UIPassData uiPassData;
+    RenderElementStyle& style = uiPassData.renderElements.add();
+    style.position = Vector(0, 0, -0.1);
+    style.dimensions = Vector2(0.4, 0.4);
+    style.backgroundColor = Vector(0.2, 0.3, 0.1);
+    style.backgroundImageIndex = 0;
+    uiPassData.usedTextures.add(AssetRegistry::findTexture("")->getTexture());
+    return uiPassData;
+}
+
+TextPassData System::getTextPassData()
+{
+    TextPassData textPassData;
+    TextRender& render = textPassData.texts.add();
+    render.font = AssetRegistry::findFont("Calibri");
+    render.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis magna ex. Morbi ullamcorper fringilla risus eget vehicula. Praesent vel quam vel ante molestie gravida vitae ac enim. Donec vitae eleifend orci. Phasellus at sodales lorem, ac eleifend turpis. Vivamus vitae condimentum lacus, a bibendum neque. Ut et est ut felis varius vehicula. Etiam lorem magna, dapibus vitae felis in, vulputate suscipit neque. Aenean facilisis ac risus et scelerisque. Ut tincidunt eros quis posuere iaculis. Curabitur justo lacus, molestie id varius vel, sodales efficitur diam. Integer orci velit, condimentum sit amet turpis sit amet, congue blandit nisl. Donec pretium ligula id mauris pretium commodo. Mauris quis lectus mi. In blandit, dolor non accumsan venenatis, ipsum erat congue neque, quis elementum orci nunc vel justo. ";
+    //render.text = "Seele Engine";
+    render.position = Vector2(0.f, 300.f);
+    render.scale = 0.1f;
+    render.textColor = Vector4(1, 0, 0, 1);
+    return textPassData;
+}

src/Engine/UI/System.h

@@ -1,6 +1,8 @@
 #pragma once
 #include "MinimalEngine.h"
 #include "RenderHierarchy.h"
+#include "Graphics/RenderPass/UIPass.h"
+#include "Graphics/RenderPass/TextPass.h"
 
 namespace Seele
 {
@@ -12,9 +14,12 @@ class System
 public:
     System();
     virtual ~System();
+    void update();
+    UIPassData getUIPassData();
+    TextPassData getTextPassData();
 private:
     PPanel rootPanel;
-    Array<RenderHierarchyUpdate*> updates;
+    RenderHierarchy hierarchy;
 };
 DEFINE_REF(System)
 } // namespace UI

src/Engine/UI/VerticalLayout.cpp

@@ -1,4 +1,5 @@
 #include "VerticalLayout.h"
+#include "Elements/Element.h"
 
 using namespace Seele;
 using namespace Seele::UI;

src/Engine/Window/InspectorView.cpp

@@ -3,6 +3,7 @@
 #include "Scene/Actor/Actor.h"
 #include "Window.h"
 #include "Asset/AssetRegistry.h"
+#include "UI/System.h"
 
 using namespace Seele;
 
@@ -10,6 +11,7 @@ InspectorView::InspectorView(Gfx::PGraphics graphics, PWindow window, const View
     : View(graphics, window, createInfo, "InspectorView")
     , uiPass(UIPass(graphics, viewport, new Gfx::SwapchainAttachment(window->getGfxHandle())))
     , textPass(TextPass(graphics, viewport, new Gfx::SwapchainAttachment(window->getGfxHandle())))
+    , uiSystem(new UI::System())
 {
     AssetRegistry::importFile("./fonts/Calibri.ttf");
     PRenderGraphResources resources = new RenderGraphResources();
@@ -19,13 +21,6 @@ InspectorView::InspectorView(Gfx::PGraphics graphics, PWindow window, const View
     textPass.publishOutputs();
     uiPass.createRenderPass();
     textPass.createRenderPass();
-    TextRender& render = textPassData.texts.add();
-    render.font = AssetRegistry::findFont("Calibri");
-    render.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis magna ex. Morbi ullamcorper fringilla risus eget vehicula. Praesent vel quam vel ante molestie gravida vitae ac enim. Donec vitae eleifend orci. Phasellus at sodales lorem, ac eleifend turpis. Vivamus vitae condimentum lacus, a bibendum neque. Ut et est ut felis varius vehicula. Etiam lorem magna, dapibus vitae felis in, vulputate suscipit neque. Aenean facilisis ac risus et scelerisque. Ut tincidunt eros quis posuere iaculis. Curabitur justo lacus, molestie id varius vel, sodales efficitur diam. Integer orci velit, condimentum sit amet turpis sit amet, congue blandit nisl. Donec pretium ligula id mauris pretium commodo. Mauris quis lectus mi. In blandit, dolor non accumsan venenatis, ipsum erat congue neque, quis elementum orci nunc vel justo. ";
-    //render.text = "Seele Engine";
-    render.position = Vector2(0.f, 300.f);
-    render.scale = 0.1f;
-    render.textColor = Vector4(1, 0, 0, 1);
 }
 
 InspectorView::~InspectorView() 
@@ -48,7 +43,8 @@ void InspectorView::commitUpdate()
 
 void InspectorView::prepareRender() 
 {
-    textPass.updateViewFrame(textPassData);
+    uiPass.updateViewFrame(uiSystem->getUIPassData());
+    textPass.updateViewFrame(uiSystem->getTextPassData());
 }
 
 void InspectorView::render() 

src/Engine/Window/InspectorView.h

@@ -28,7 +28,7 @@ protected:
     UIPassData uiPassData;
     TextPassData textPassData;
 
-    UI::PPanel rootPanel;
+    UI::PSystem uiSystem;
     PActor selectedActor;
     
 	virtual void keyCallback(KeyCode code, InputAction action, KeyModifier modifier) override;

src/Engine/main.cpp

@@ -19,7 +19,7 @@ int main()
     mainWindowInfo.pixelFormat = Gfx::SE_FORMAT_B8G8R8A8_UNORM;
     auto window = windowManager->addWindow(mainWindowInfo);
     ViewportCreateInfo sceneViewInfo;
-    sceneViewInfo.sizeX = 680;
+    sceneViewInfo.sizeX = 640;
     sceneViewInfo.sizeY = 720;
     sceneViewInfo.offsetX = 0;
     sceneViewInfo.offsetY = 0;