adding materials, adding serialization for meshes and materials, random fixes

This commit is contained in:
Erris
2026-03-03 08:51:02 +01:00
parent b7e5ceb1d1
commit 4a624cfe70
16 changed files with 222 additions and 22 deletions

View File

@@ -1,7 +1,6 @@
#ifndef EDITOR_HPP #ifndef EDITOR_HPP
#define EDITOR_HPP #define EDITOR_HPP
#include <X11/X.h>
#include <open_engine.hpp> #include <open_engine.hpp>
#include "open_engine/renderer/renderer3d.hpp" #include "open_engine/renderer/renderer3d.hpp"
@@ -92,9 +91,11 @@ namespace OpenEngine {
editor_camera = EditorCamera(30.0f, 1920.0f/1080.0f, 0.1f, 1000.0f); editor_camera = EditorCamera(30.0f, 1920.0f/1080.0f, 0.1f, 1000.0f);
// TODO: Add license
icons["play"] = Texture2D::Create("resources/textures/icons/play.png"); icons["play"] = Texture2D::Create("resources/textures/icons/play.png");
icons["stop"] = Texture2D::Create("resources/textures/icons/stop.png"); icons["stop"] = Texture2D::Create("resources/textures/icons/stop.png");
// =============================================
Entity cube = scene->CreateEntity("cube"); Entity cube = scene->CreateEntity("cube");
@@ -104,6 +105,7 @@ namespace OpenEngine {
cube.AddComponent<MeshComponent>(mesh); cube.AddComponent<MeshComponent>(mesh);
// =============================================
Entity quad = scene->CreateEntity("quad"); Entity quad = scene->CreateEntity("quad");
quad.AddComponent<TransformComponent>(); quad.AddComponent<TransformComponent>();
quad.GetComponents<TransformComponent>().translation = {0, 0, 0}; quad.GetComponents<TransformComponent>().translation = {0, 0, 0};
@@ -112,6 +114,7 @@ namespace OpenEngine {
quad.AddComponent<MeshComponent>(quad_mesh); quad.AddComponent<MeshComponent>(quad_mesh);
// =============================================
Entity cube2 = scene->CreateEntity("cube2"); Entity cube2 = scene->CreateEntity("cube2");
cube2.AddComponent<TransformComponent>(); cube2.AddComponent<TransformComponent>();
cube2.GetComponents<TransformComponent>().translation = {2, 0, 0}; cube2.GetComponents<TransformComponent>().translation = {2, 0, 0};
@@ -129,7 +132,6 @@ namespace OpenEngine {
} }
*/ */
// TODO: Add file texture. Get free icons and add license
//icons["folder"] = Texture2D::Create("resources/textures/icons/folder.png"); //icons["folder"] = Texture2D::Create("resources/textures/icons/folder.png");
/* /*
for (float i = 0; i < 200; i++) { for (float i = 0; i < 200; i++) {
@@ -352,7 +354,7 @@ namespace OpenEngine {
bool was_focused = viewport_focused; bool was_focused = viewport_focused;
viewport_focused = ImGui::IsWindowFocused(ImGuiFocusedFlags_RootWindow); viewport_focused = ImGui::IsWindowFocused(ImGuiFocusedFlags_RootWindow);
viewport_hovered = ImGui::IsWindowHovered(ImGuiHoveredFlags_RootWindow); viewport_hovered = ImGui::IsWindowHovered(ImGuiHoveredFlags_RootWindow);
Application::Get().GetImGuiLayer()->SetBlockEvents((!viewport_focused && !viewport_hovered) || ImGui::IsAnyItemActive()); Application::Get().GetImGuiLayer()->SetBlockEvents(ImGui::IsAnyItemActive());
if (viewport_focused && !was_focused) if (viewport_focused && !was_focused)
editor_camera.ResetMousePosition(); editor_camera.ResetMousePosition();

View File

@@ -17,6 +17,7 @@ namespace OpenEngine {
void SpriteOnImGuiRender(entt::registry& registry, entt::entity entity); void SpriteOnImGuiRender(entt::registry& registry, entt::entity entity);
void CameraOnImGuiRender(entt::registry& registry, entt::entity entity); void CameraOnImGuiRender(entt::registry& registry, entt::entity entity);
void MeshOnImGuiRender(entt::registry&registry, entt::entity entity); void MeshOnImGuiRender(entt::registry&registry, entt::entity entity);
void MaterialOnImGuiRender(entt::registry& registry, entt::entity entity);
} }
#endif // EDITOR_COMPONENT_HPP #endif // EDITOR_COMPONENT_HPP

View File

@@ -18,6 +18,7 @@ namespace OpenEngine {
private: private:
std::filesystem::path current_directory; std::filesystem::path current_directory;
Ref<Texture2D> folder_icon; Ref<Texture2D> folder_icon;
Ref<Texture2D> file_icon;
}; };
} }

View File

@@ -1,5 +1,9 @@
#include "imgui.h" #include "imgui.h"
#include "open_engine/renderer/renderer3d.hpp"
#include "open_engine/scene/components.hpp"
#include <editor_component.hpp> #include <editor_component.hpp>
#include <entt/entity/fwd.hpp>
#include <glm/gtc/type_ptr.hpp>
#include <open_engine.hpp> #include <open_engine.hpp>
namespace OpenEngine { namespace OpenEngine {
@@ -101,6 +105,7 @@ namespace OpenEngine {
DrawVec3Control("Rotation", rotation_comp); DrawVec3Control("Rotation", rotation_comp);
transform.rotation = glm::radians(rotation_comp); transform.rotation = glm::radians(rotation_comp);
DrawVec3Control("Scale", transform.scale); DrawVec3Control("Scale", transform.scale);
ImGui::Spacing();
}; };
void SpriteOnImGuiRender(entt::registry& registry, entt::entity entity) void SpriteOnImGuiRender(entt::registry& registry, entt::entity entity)
@@ -173,6 +178,64 @@ namespace OpenEngine {
void MeshOnImGuiRender(entt::registry& registry, entt::entity entity) void MeshOnImGuiRender(entt::registry& registry, entt::entity entity)
{ {
auto& mesh_component = registry.get<MeshComponent>(entity);
const char* items[] = { "Quad", "Cube" };
static int item_selected_idx = 0;
if (ImGui::BeginCombo("Mesh", items[item_selected_idx])) {
for (int n = 0; n < 2; n++)
{
const bool is_selected = (item_selected_idx == n);
if (ImGui::Selectable(items[n], is_selected))
item_selected_idx = n;
// Set the initial focus when opening the combo (scrolling + keyboard navigation focus)
if (is_selected)
ImGui::SetItemDefaultFocus();
}
ImGui::EndCombo();
if ((int)mesh_component.primitive_type == (item_selected_idx + 1))
return;
mesh_component.primitive_type = (PrimitiveType)(item_selected_idx + 1);
switch (mesh_component.primitive_type) {
case OpenEngine::PrimitiveType::Quad:
{
mesh_component.mesh = CreateQuad((uint32_t)entity);
break;
}
case OpenEngine::PrimitiveType::Cube:
{
mesh_component.mesh = CreateCube((uint32_t)entity);
break;
}
default:
break;
}
}
}
void MaterialOnImGuiRender(entt::registry& registry, entt::entity entity)
{
auto& material = registry.get<MaterialComponent>(entity).material;
auto& albedo = material.albedo;
auto& roughness = material.roughness;
auto& metallic = material.metallic;
auto& ambient = material.ambient_strength;
auto& specular = material.specular_strength;
if (ImGui::SliderFloat4("Albedo", glm::value_ptr(albedo), 0, 1))
material.albedo = albedo;
if (ImGui::SliderFloat("Roughness", &roughness, 0, 1))
material.roughness = roughness;
if (ImGui::SliderFloat("Metallic", &metallic, 0, 1))
material.metallic = metallic;
if (ImGui::SliderFloat("Ambient strength", &ambient, 0, 1))
material.ambient_strength = ambient;
if (ImGui::SliderFloat("Specular strength", &specular, 0, 10))
material.specular_strength = specular;
} }
} }

28
editor/src/panels/content_browser.cpp Normal file → Executable file
View File

@@ -15,8 +15,9 @@ namespace OpenEngine {
ContentBrowserPanel::ContentBrowserPanel() ContentBrowserPanel::ContentBrowserPanel()
: current_directory(assets_directory) : current_directory(assets_directory)
{ {
// TODO: Add file texture. Get free icons and add license // TODO: Add license
folder_icon = Texture2D::Create("resources/textures/icons/folder.png"); folder_icon = Texture2D::Create("resources/textures/icons/folder2.png");
file_icon = Texture2D::Create("resources/textures/icons/file.png");
} }
void ContentBrowserPanel::OnImGuiRender() void ContentBrowserPanel::OnImGuiRender()
@@ -30,6 +31,16 @@ namespace OpenEngine {
current_directory = current_directory.parent_path(); current_directory = current_directory.parent_path();
auto directory_it = std::filesystem::directory_iterator(current_directory); auto directory_it = std::filesystem::directory_iterator(current_directory);
std::vector<std::filesystem::directory_entry> entries;
for (auto entry : directory_it)
entries.emplace_back(entry);
std::sort(entries.begin(), entries.end(),
[](const std::filesystem::directory_entry& a,
const std::filesystem::directory_entry& b) {
return (a.is_directory() && !b.is_directory());
});
ImVec2 button_size = { 100, 100 }; ImVec2 button_size = { 100, 100 };
auto panel_width = ImGui::GetContentRegionAvail().x; auto panel_width = ImGui::GetContentRegionAvail().x;
@@ -42,9 +53,12 @@ namespace OpenEngine {
ImGui::PushStyleVar(ImGuiStyleVar_CellPadding, padding); ImGui::PushStyleVar(ImGuiStyleVar_CellPadding, padding);
float margin = 20.0f;
ImGui::Indent(margin);
if (ImGui::BeginTable("table1", table_columns, ImGuiTableFlags_SizingFixedSame)) if (ImGui::BeginTable("table1", table_columns, ImGuiTableFlags_SizingFixedSame))
{ {
for (auto& entry : directory_it) { for (auto& entry : entries) {
auto file_name = entry.path().filename().string(); auto file_name = entry.path().filename().string();
ImGui::PushID(file_name.c_str()); ImGui::PushID(file_name.c_str());
@@ -56,17 +70,14 @@ namespace OpenEngine {
ImGui::PushStyleColor(ImGuiCol_ButtonActive, { 0.270f, 0.278f, 0.352f, 1.0f }); ImGui::PushStyleColor(ImGuiCol_ButtonActive, { 0.270f, 0.278f, 0.352f, 1.0f });
ImGui::BeginGroup(); ImGui::BeginGroup();
ImGui::ImageButton("##X", (ImTextureID)folder_icon->GetID(), button_size, { 0, 1 }, { 1, 0 }); Ref<Texture2D> icon = entry.is_directory() ? folder_icon : file_icon;
ImGui::ImageButton("##X", (ImTextureID)icon->GetID(), button_size, { 0, 1 }, { 1, 0 });
if (entry.is_regular_file() && ImGui::BeginDragDropSource()) { if (entry.is_regular_file() && ImGui::BeginDragDropSource()) {
const char* source = entry.path().c_str(); const char* source = entry.path().c_str();
ImGui::SetDragDropPayload("CONTENT_BROWSER_PAYLOAD", source, (strlen(source) + 1) * sizeof(char), ImGuiCond_Once); ImGui::SetDragDropPayload("CONTENT_BROWSER_PAYLOAD", source, (strlen(source) + 1) * sizeof(char), ImGuiCond_Once);
ImGui::EndDragDropSource(); ImGui::EndDragDropSource();
} }
float columnWidth = ImGui::GetColumnWidth();
float textWidth = ImGui::CalcTextSize(file_name.c_str()).x;
ImGui::SetCursorPosX(ImGui::GetCursorPosX() + (columnWidth - textWidth) * 0.5f);
ImGui::TextWrapped("%s", file_name.c_str()); ImGui::TextWrapped("%s", file_name.c_str());
ImGui::EndGroup(); ImGui::EndGroup();
@@ -81,6 +92,7 @@ namespace OpenEngine {
} }
ImGui::EndTable(); ImGui::EndTable();
} }
ImGui::Unindent();
ImGui::PopStyleVar(); ImGui::PopStyleVar();
ImGui::End(); ImGui::End();

View File

@@ -23,6 +23,7 @@ namespace OpenEngine {
RegisterDrawer<SpriteRendererComponent>("Sprite Renderer", &SpriteOnImGuiRender); RegisterDrawer<SpriteRendererComponent>("Sprite Renderer", &SpriteOnImGuiRender);
RegisterDrawer<CameraComponent>("Camera", &CameraOnImGuiRender); RegisterDrawer<CameraComponent>("Camera", &CameraOnImGuiRender);
RegisterDrawer<MeshComponent>("Mesh", &MeshOnImGuiRender); RegisterDrawer<MeshComponent>("Mesh", &MeshOnImGuiRender);
RegisterDrawer<MaterialComponent>("Material", &MaterialOnImGuiRender);
scene = context; scene = context;
selected_context = {}; selected_context = {};
@@ -51,6 +52,11 @@ namespace OpenEngine {
selected_context.AddComponent<MeshComponent>(); selected_context.AddComponent<MeshComponent>();
ImGui::CloseCurrentPopup(); ImGui::CloseCurrentPopup();
} }
if (!selected_context.HasComponent<MaterialComponent>())
if (ImGui::MenuItem("Material")) {
selected_context.AddComponent<MaterialComponent>();
ImGui::CloseCurrentPopup();
}
} }
void EntityPopup(Ref<Scene>& scene) void EntityPopup(Ref<Scene>& scene)

View File

@@ -10,6 +10,14 @@
namespace OpenEngine { namespace OpenEngine {
// SHOULD BE MOVED ================================== // SHOULD BE MOVED ==================================
enum class PrimitiveType
{
None = 0,
Quad,
Cube
};
struct MeshVertex struct MeshVertex
{ {
glm::vec3 position; glm::vec3 position;
@@ -19,6 +27,15 @@ namespace OpenEngine {
uint32_t id = -1; uint32_t id = -1;
}; };
struct Material
{
glm::vec4 albedo = { 1.0f, 1.0f, 1.0f, 1.0f };
float roughness = 1.0f;
float metallic = 1.0f;
float ambient_strength = 1.0f;
float specular_strength = 1.0f;
};
struct Mesh struct Mesh
{ {
Ref<VertexArray> vertex_array; Ref<VertexArray> vertex_array;
@@ -46,7 +63,8 @@ namespace OpenEngine {
static void BeginScene(const EditorCamera& camera); static void BeginScene(const EditorCamera& camera);
static void EndScene(); static void EndScene();
static void DrawMesh(const Ref<Mesh>& mesh, const glm::mat4& transform); static void DrawMesh(const Ref<Mesh>& mesh, Material& material,
const glm::mat4& transform);
}; };
} }

View File

@@ -86,17 +86,28 @@ namespace OpenEngine {
(delete nsc->instance); (delete nsc->instance);
nsc->instance = nullptr; nsc->instance = nullptr;
}; };
} };
}; };
struct MeshComponent struct MeshComponent
{ {
Ref<Mesh> mesh; Ref<Mesh> mesh;
PrimitiveType primitive_type = PrimitiveType::None;
MeshComponent() = default; MeshComponent() = default;
MeshComponent(const MeshComponent&) = default; MeshComponent(const MeshComponent&) = default;
MeshComponent(const Ref<Mesh>& mesh) MeshComponent(const Ref<Mesh>& mesh)
: mesh(mesh) {} : mesh(mesh) {};
};
struct MaterialComponent
{
Material material;
MaterialComponent() = default;
MaterialComponent(const MaterialComponent&) = default;
MaterialComponent(const Material& material)
: material(material) {};
}; };
} }

View File

@@ -40,7 +40,7 @@ namespace OpenEngine {
uint32_t viewport_width = 0, viewport_height = 0; uint32_t viewport_width = 0, viewport_height = 0;
std::vector<entt::entity> entities_to_be_deleted; std::vector<entt::entity> pending_deletion;
friend class SceneSerializer; friend class SceneSerializer;
friend class Entity; friend class Entity;

View File

@@ -176,6 +176,9 @@ namespace OpenEngine {
}; };
TransformData transform_buffer; TransformData transform_buffer;
Ref<UniformBuffer> transform_uniform_buffer; Ref<UniformBuffer> transform_uniform_buffer;
Material material_buffer;
Ref<UniformBuffer> material_uniform_buffer;
}; };
static Renderer3DData renderer_data; static Renderer3DData renderer_data;
@@ -190,6 +193,7 @@ namespace OpenEngine {
renderer_data.color_shader_3d = Shader::Create("assets/shaders/color3d.glsl"); renderer_data.color_shader_3d = Shader::Create("assets/shaders/color3d.glsl");
renderer_data.camera_uniform_buffer = UniformBuffer::Create(sizeof(Renderer3DData::CameraData), 0); renderer_data.camera_uniform_buffer = UniformBuffer::Create(sizeof(Renderer3DData::CameraData), 0);
renderer_data.transform_uniform_buffer = UniformBuffer::Create(sizeof(Renderer3DData::TransformData), 1); renderer_data.transform_uniform_buffer = UniformBuffer::Create(sizeof(Renderer3DData::TransformData), 1);
renderer_data.material_uniform_buffer = UniformBuffer::Create(sizeof(Material), 2);
glEnable(GL_DEBUG_OUTPUT); glEnable(GL_DEBUG_OUTPUT);
glEnable(GL_DEBUG_OUTPUT_SYNCHRONOUS); glEnable(GL_DEBUG_OUTPUT_SYNCHRONOUS);
@@ -230,7 +234,8 @@ namespace OpenEngine {
} }
void Renderer3D::DrawMesh(const Ref<Mesh>& mesh, const glm::mat4& transform) void Renderer3D::DrawMesh(const Ref<Mesh>& mesh, Material& material,
const glm::mat4& transform)
{ {
OE_PROFILE_FUNCTION(); OE_PROFILE_FUNCTION();
@@ -239,6 +244,9 @@ namespace OpenEngine {
renderer_data.transform_buffer.transform = transform; renderer_data.transform_buffer.transform = transform;
renderer_data.transform_uniform_buffer->SetData(&renderer_data.transform_buffer, sizeof(Renderer3DData::TransformData)); renderer_data.transform_uniform_buffer->SetData(&renderer_data.transform_buffer, sizeof(Renderer3DData::TransformData));
renderer_data.material_buffer = material;
renderer_data.material_uniform_buffer->SetData(&renderer_data.material_buffer, sizeof(Material));
mesh->vertex_array->Bind(); mesh->vertex_array->Bind();
RenderCommand::DrawIndexed(mesh->vertex_array, mesh->indices.size()); RenderCommand::DrawIndexed(mesh->vertex_array, mesh->indices.size());

View File

@@ -26,15 +26,15 @@ namespace OpenEngine {
void Scene::MarkEntityForDeletion(Entity entity) void Scene::MarkEntityForDeletion(Entity entity)
{ {
entities_to_be_deleted.emplace_back(entity); pending_deletion.emplace_back(entity);
} }
void Scene::UpdateEntities() void Scene::UpdateEntities()
{ {
for (auto& entity : entities_to_be_deleted) for (auto& entity : pending_deletion)
DeleteEntity(entity); DeleteEntity(entity);
entities_to_be_deleted.clear(); pending_deletion.clear();
} }
void Scene::OnUpdateRuntime() void Scene::OnUpdateRuntime()
@@ -75,8 +75,13 @@ namespace OpenEngine {
for (const auto& entity : view) { for (const auto& entity : view) {
auto [transform, mesh] = view.get<TransformComponent, MeshComponent>(entity); auto [transform, mesh] = view.get<TransformComponent, MeshComponent>(entity);
Material material;
Renderer3D::DrawMesh(mesh.mesh, GetTransformFromComp(transform)); Entity _entity(entity, this);
if (_entity.HasComponent<MaterialComponent>())
material = _entity.GetComponents<MaterialComponent>().material;
Renderer3D::DrawMesh(mesh.mesh, material, GetTransformFromComp(transform));
/* /*
if (sprite.texture) if (sprite.texture)
Renderer2D::DrawQuad(GetTransformFromComp(transform), Renderer2D::DrawQuad(GetTransformFromComp(transform),
@@ -101,7 +106,13 @@ namespace OpenEngine {
for (const auto& entity : view) { for (const auto& entity : view) {
auto [transform, mesh] = view.get<TransformComponent, MeshComponent>(entity); auto [transform, mesh] = view.get<TransformComponent, MeshComponent>(entity);
Renderer3D::DrawMesh(mesh.mesh, GetTransformFromComp(transform)); Material material;
Entity _entity(entity, this);
if (_entity.HasComponent<MaterialComponent>())
material = _entity.GetComponents<MaterialComponent>().material;
Renderer3D::DrawMesh(mesh.mesh, material, GetTransformFromComp(transform));
} }
Renderer3D::EndScene(); Renderer3D::EndScene();
@@ -170,4 +181,9 @@ namespace OpenEngine {
void Scene::OnComponentAdded<MeshComponent>(Entity entity, MeshComponent& component) void Scene::OnComponentAdded<MeshComponent>(Entity entity, MeshComponent& component)
{ {
} }
template<>
void Scene::OnComponentAdded<MaterialComponent>(Entity entity, MaterialComponent& component)
{
}
} }

View File

@@ -1,7 +1,9 @@
#include <cstdint>
#include <pch.hpp> #include <pch.hpp>
#include "core.hpp" #include "core.hpp"
#include <scene/scene_serializer.hpp> #include <scene/scene_serializer.hpp>
#include "renderer/renderer3d.hpp"
#include "scene/components.hpp" #include "scene/components.hpp"
#include "scene/entity.hpp" #include "scene/entity.hpp"
@@ -149,6 +151,32 @@ namespace OpenEngine {
out << YAML::EndMap; // SpriteRendererComponent out << YAML::EndMap; // SpriteRendererComponent
} }
if (entity.HasComponent<MeshComponent>())
{
out << YAML::Key << "MeshComponent";
out << YAML::BeginMap; // MeshComponent
auto& mesh_component = entity.GetComponents<MeshComponent>();
out << YAML::Key << "MeshType" << YAML::Value << (int)mesh_component.primitive_type;
out << YAML::EndMap; // MeshComponent
}
if (entity.HasComponent<MaterialComponent>())
{
out << YAML::Key << "MaterialComponent";
out << YAML::BeginMap; // MaterialComponent
auto& material = entity.GetComponents<MaterialComponent>().material;
out << YAML::Key << "Albedo" << YAML::Value << material.albedo;
out << YAML::Key << "Roughness" << YAML::Value << material.roughness;
out << YAML::Key << "Metalic" << YAML::Value << material.metallic;
out << YAML::Key << "AmbiantStrength" << YAML::Value << material.ambient_strength;
out << YAML::Key << "SpecularStrength" << YAML::Value << material.specular_strength;
out << YAML::EndMap; // MaterialComponent
}
out << YAML::EndMap; out << YAML::EndMap;
} }
@@ -241,6 +269,40 @@ namespace OpenEngine {
auto& src = deserializedEntity.AddComponent<SpriteRendererComponent>(); auto& src = deserializedEntity.AddComponent<SpriteRendererComponent>();
src.color = spriteRendererComponent["Color"].as<glm::vec4>(); src.color = spriteRendererComponent["Color"].as<glm::vec4>();
} }
auto mesh_component = entity["MeshComponent"];
if (mesh_component)
{
auto& mesh = deserializedEntity.AddComponent<MeshComponent>();
switch (mesh.primitive_type) {
case OpenEngine::PrimitiveType::Quad:
{
mesh.mesh = CreateQuad((uint32_t)deserializedEntity);
break;
}
case OpenEngine::PrimitiveType::Cube:
{
mesh.mesh = CreateCube((uint32_t)deserializedEntity);
break;
}
default:
break;
}
}
auto material_component = entity["MaterialComponent"];
if (material_component)
{
auto& material = deserializedEntity.AddComponent<MaterialComponent>();
material.material.albedo = material_component["Albedo"].as<glm::vec4>();
material.material.roughness = material_component["Roughness"].as<float>();
material.material.metallic = material_component["Metalic"].as<float>();
material.material.ambient_strength = material_component["AmbiantStrength"].as<float>();
material.material.specular_strength = material_component["SpecularStrength"].as<float>();
}
auto mesh = CreateCube((uint32_t)deserializedEntity);
deserializedEntity.AddComponent<MeshComponent>(mesh);
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 156 B

After

Width:  |  Height:  |  Size: 1.7 KiB