From e77e938b50d03f4ef370857d7efefa07c9f3c0ef Mon Sep 17 00:00:00 2001 From: Andrea Mancuso Date: Mon, 3 Jun 2024 17:08:39 +0000 Subject: [PATCH 1/2] Reproduced texture size issue (WebGPU) using Material Design Icons font + Dear Imgui's wchar32 feature/setting. --- packages/dear-imgui/cpp/imguiview.h | 48 ++++++++++++++--------------- packages/dear-imgui/cpp/vcpkg.json | 3 +- packages/dear-imgui/ts/package.json | 2 +- 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/dear-imgui/cpp/imguiview.h b/packages/dear-imgui/cpp/imguiview.h index 6a4616ef..b1b5ca10 100644 --- a/packages/dear-imgui/cpp/imguiview.h +++ b/packages/dear-imgui/cpp/imguiview.h @@ -1,5 +1,5 @@ -// #include "IconsMaterialDesignIcons.h" -#include "IconsFontAwesome6.h" +#include "IconsMaterialDesignIcons.h" +// #include "IconsFontAwesome6.h" #include "imgui.h" #include "imgui_impl_glfw.h" #include "imgui_impl_wgpu.h" @@ -41,8 +41,8 @@ class ImGuiView : public View { auto fontDefs = json::parse(rawFontDefs); - static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_16_FA, 0 }; - // static const ImWchar icons_ranges[] = { ICON_MIN_MDI, ICON_MAX_16_MDI, 0 }; + // static const ImWchar icons_ranges[] = { ICON_MIN_FA, ICON_MAX_16_FA, 0 }; + static const ImWchar icons_ranges[] = { ICON_MIN_MDI, ICON_MAX_MDI, 0 }; @@ -74,11 +74,11 @@ class ImGuiView : public View { icons_config.MergeMode = true; icons_config.PixelSnapH = true; icons_config.GlyphMinAdvanceX = iconFontSize; - auto pathToFaFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_FAS); - // auto pathToMdiFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_MDI); + // auto pathToFaFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_FAS); + auto pathToMdiFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_MDI); - io.Fonts->AddFontFromFileTTF(pathToFaFontFile.c_str(), iconFontSize, &icons_config, icons_ranges); - // io.Fonts->AddFontFromFileTTF(pathToMdiFontFile.c_str(), fontSize, &icons_config, icons_ranges); + // io.Fonts->AddFontFromFileTTF(pathToFaFontFile.c_str(), iconFontSize, &icons_config, icons_ranges); + io.Fonts->AddFontFromFileTTF(pathToMdiFontFile.c_str(), fontSize, &icons_config, icons_ranges); } } } @@ -102,25 +102,25 @@ class ImGuiView : public View { } // If not custom fonts defined, ensure font-awesome are still available - if (m_loadedFonts.size() == 0) { - io.Fonts->AddFontDefault(); - float baseFontSize = 13.0f; // 13.0f is the size of the default font. - float iconFontSize = baseFontSize * 2.0f / 3.0f; // FontAwesome fonts need to have their sizes reduced by 2.0f/3.0f in order to align correctly - - ImFontConfig icons_config; - icons_config.MergeMode = true; - icons_config.PixelSnapH = true; - icons_config.GlyphMinAdvanceX = iconFontSize; - auto pathToFaFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_FAS); + // if (m_loadedFonts.size() == 0) { + // io.Fonts->AddFontDefault(); + // float baseFontSize = 13.0f; // 13.0f is the size of the default font. + // float iconFontSize = baseFontSize * 2.0f / 3.0f; // FontAwesome fonts need to have their sizes reduced by 2.0f/3.0f in order to align correctly + + // ImFontConfig icons_config; + // icons_config.MergeMode = true; + // icons_config.PixelSnapH = true; + // icons_config.GlyphMinAdvanceX = iconFontSize; + // auto pathToFaFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_FAS); - m_loadedFonts.push_back( - io.Fonts->AddFontFromFileTTF(pathToFaFontFile.c_str(), iconFontSize, &icons_config, icons_ranges) - ); + // m_loadedFonts.push_back( + // io.Fonts->AddFontFromFileTTF(pathToFaFontFile.c_str(), iconFontSize, &icons_config, icons_ranges) + // ); - io.Fonts->Build(); + // io.Fonts->Build(); - SetFontDefault(0); - } + // SetFontDefault(0); + // } ImVec4 v4 = ImVec4(0.45f, 0.55f, 0.60f, 1.00f); m_clearColor = { v4.x * v4.w, v4.y * v4.w, v4.z * v4.w, v4.w }; diff --git a/packages/dear-imgui/cpp/vcpkg.json b/packages/dear-imgui/cpp/vcpkg.json index 4bc9e47d..42d6a049 100644 --- a/packages/dear-imgui/cpp/vcpkg.json +++ b/packages/dear-imgui/cpp/vcpkg.json @@ -13,7 +13,8 @@ "features": [ "glfw-binding", "opengl3-binding", - "wgpu-binding" + "wgpu-binding", + "wchar32" ] }, "implot", diff --git a/packages/dear-imgui/ts/package.json b/packages/dear-imgui/ts/package.json index 7d9efb3b..64f1975d 100644 --- a/packages/dear-imgui/ts/package.json +++ b/packages/dear-imgui/ts/package.json @@ -103,4 +103,4 @@ "yaml": "^2.4.3" }, "packageManager": "yarn@4.1.1" -} \ No newline at end of file +} From 13ac346acfba77a5b539ab8c90ba2e76069a6b3e Mon Sep 17 00:00:00 2001 From: Andrea Mancuso Date: Mon, 3 Jun 2024 17:41:08 +0000 Subject: [PATCH 2/2] Setting icons_config.OversampleH = 1 - which does fix the texture size issue. Unfortunately there's a 15 second long period of very high (100%) CPU utilisation before the application gets rendered. --- packages/dear-imgui/cpp/imguiview.h | 2 ++ .../dear-imgui/ts/src/lib/components/ImGuiDemo/ImGuiDemo.tsx | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/dear-imgui/cpp/imguiview.h b/packages/dear-imgui/cpp/imguiview.h index b1b5ca10..7f8e3cc9 100644 --- a/packages/dear-imgui/cpp/imguiview.h +++ b/packages/dear-imgui/cpp/imguiview.h @@ -38,6 +38,7 @@ class ImGuiView : public View { m_imGuiCtx = ImGui::CreateContext(); ImGuiIO& io = ImGui::GetIO(); (void)io; + io.Fonts->TexDesiredWidth = 4096; auto fontDefs = json::parse(rawFontDefs); @@ -74,6 +75,7 @@ class ImGuiView : public View { icons_config.MergeMode = true; icons_config.PixelSnapH = true; icons_config.GlyphMinAdvanceX = iconFontSize; + icons_config.OversampleH = 1; // auto pathToFaFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_FAS); auto pathToMdiFontFile = std::format("fonts/{}", FONT_ICON_FILE_NAME_MDI); diff --git a/packages/dear-imgui/ts/src/lib/components/ImGuiDemo/ImGuiDemo.tsx b/packages/dear-imgui/ts/src/lib/components/ImGuiDemo/ImGuiDemo.tsx index c7f91140..5c4ddfe1 100644 --- a/packages/dear-imgui/ts/src/lib/components/ImGuiDemo/ImGuiDemo.tsx +++ b/packages/dear-imgui/ts/src/lib/components/ImGuiDemo/ImGuiDemo.tsx @@ -76,10 +76,12 @@ export const ImGuiDemo = () => { const nonDefaultFontCombo = useMemo(() => ({ name: "roboto-regular", size: 24 }), []); + const icon = "\u{F0004}"; + return (