Step 1: Download Source Code Шаг 1: Скачивание исходного кода

Check and download the latest release (v1.93.0) directly from the official Dear ImGui repository on GitHub: Проверьте и скачайте последнюю версию (v1.93.0) напрямую со страницы релизов Dear ImGui на GitHub:

Open Dear ImGui Releases (GitHub) Открыть релизы Dear ImGui (GitHub) Direct Download v1.93.0 (.zip) Прямое скачивание v1.93.0 (.zip)

For Ubuntu, you can download the release directly via wget in the terminal: В Ubuntu вы можете скачать релиз напрямую с помощью wget в терминале:

sudo apt update && sudo apt install -y wget unzip git

cd ~
wget https://github.com/ocornut/imgui/archive/refs/tags/v1.93.0.zip -O imgui-1.93.0.zip

Step 2: Extract the Library Шаг 2: Распаковка библиотеки

Option A: Windows Вариант A: Windows

Unzip the downloaded archive so that the source files are located in C:\libs\imgui-1.93.0. Распакуйте скачанный архив так, чтобы исходные файлы находились в папке C:\libs\imgui-1.93.0.

Option B: Ubuntu Вариант B: Ubuntu

Unzip the archive into the ~/libs directory: Распакуйте архив в директорию ~/libs:

mkdir -p ~/libs
unzip -o imgui-1.93.0.zip -d ~/libs/
rm -f imgui-1.93.0.zip

This will place the library files into ~/libs/imgui-1.93.0. Исходные файлы библиотеки будут распакованы по пути ~/libs/imgui-1.93.0.

Step 3: Create Project Directory Шаг 3: Создание директории проекта

Create a workspace folder and a new directory for your ImGui WebGPU test project: Создайте рабочую папку для проектов и новую директорию для вашего тестового проекта ImGui WebGPU:

Windows (Command Prompt / PowerShell)

mkdir C:\projects\imgui-wgpu-test
cd C:\projects\imgui-wgpu-test

Ubuntu (Terminal)

mkdir -p ~/projects/imgui-wgpu-test
cd ~/projects/imgui-wgpu-test

Step 4: Create Source Files (main.cpp & CMakeLists.txt) Шаг 4: Создание исходных файлов (main.cpp и CMakeLists.txt)

You can create these files using Notepad / Sublime Text on Windows, or nano in Ubuntu terminal: Вы можете создать эти файлы через Блокнот / Sublime Text в Windows или с помощью nano в терминале Ubuntu:

Windows (Terminal / Notepad)

notepad main.cpp
notepad CMakeLists.txt

Ubuntu (Terminal / Nano)

nano main.cpp
nano CMakeLists.txt

1. File Contents for main.cpp 1. Содержимое файла main.cpp

#include <iostream>
#include "imgui.h"
#include "imgui_impl_wgpu.h"

int main(int argc, char** argv) {
    // Initialize ImGui context
    IMGUI_CHECKVERSION();
    ImGui::CreateContext();
    ImGuiIO& io = ImGui::GetIO(); (void)io;
    io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;

    // Set display size and frame delta time for headless execution verification
    io.DisplaySize = ImVec2(1280.0f, 720.0f);
    io.DeltaTime = 1.0f / 60.0f;

    // Build font atlas explicitly when renderer backend isn't creating textures
    unsigned char* pixels;
    int width, height;
    io.Fonts->GetTexDataAsRGBA32(&pixels, &width, &height);

    ImGui::StyleColorsDark();

    std::cout << "Dear ImGui version: " << IMGUI_VERSION << std::endl;
    std::cout << "ImGui WebGPU Backend configured successfully!" << std::endl;

    // Simulate ImGui frame lifecycle
    ImGui::NewFrame();
    ImGui::Begin("WebGPU Test Window");
    ImGui::Text("Hello, WebGPU with Dear ImGui!");
    ImGui::End();
    ImGui::Render();

    // Cleanup ImGui context
    ImGui::DestroyContext();

    return 0;
}

2. File Contents for CMakeLists.txt 2. Содержимое файла CMakeLists.txt

cmake_minimum_required(VERSION 3.21)

if(NOT CMAKE_BUILD_TYPE)
    set(CMAKE_BUILD_TYPE "Debug")
endif()

project(imgui_wgpu_test CXX)

set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# -----------------------------------------------------------------------------
# ImGui Path & Source Definitions
# -----------------------------------------------------------------------------
if(WIN32)
    set(IMGUI_DIR "C:/libs/imgui-1.93.0")
    set(WGPU_DIR "C:/libs/wgpu-29.0.1.1-mingw")
else()
    set(IMGUI_DIR "$ENV{HOME}/libs/imgui-1.93.0")
    set(WGPU_DIR "$ENV{HOME}/libs/wgpu-native-29.0.1.1-ubuntu")
endif()

set(IMGUI_SOURCES
    ${IMGUI_DIR}/imgui.cpp
    ${IMGUI_DIR}/imgui_draw.cpp
    ${IMGUI_DIR}/imgui_tables.cpp
    ${IMGUI_DIR}/imgui_widgets.cpp
    ${IMGUI_DIR}/backends/imgui_impl_wgpu.cpp
)

# -----------------------------------------------------------------------------
# Declare Target Type & Attach Sources
# -----------------------------------------------------------------------------
add_executable(app main.cpp ${IMGUI_SOURCES})

# -----------------------------------------------------------------------------
# Include Header Directories
# -----------------------------------------------------------------------------
target_include_directories(app PRIVATE
    ${IMGUI_DIR}
    ${IMGUI_DIR}/backends
    ${WGPU_DIR}/include
)

# -----------------------------------------------------------------------------
# Static C++ Runtime (Applied to BOTH Windows & Ubuntu)
# -----------------------------------------------------------------------------
target_link_options(app PRIVATE -static-libgcc -static-libstdc++)

# -----------------------------------------------------------------------------
# Optimization & Symbol Stripping (Release Builds Only)
# -----------------------------------------------------------------------------
if(CMAKE_BUILD_TYPE STREQUAL "Release" OR CMAKE_BUILD_TYPE STREQUAL "MinSizeRel")
    target_compile_options(app PRIVATE -Os)
    target_link_options(app PRIVATE -s)
endif()

# -----------------------------------------------------------------------------
# Platform Linking & Dependencies
# -----------------------------------------------------------------------------
if(WIN32)
    add_compile_definitions(IMGUI_IMPL_WEBGPU_BACKEND_WGPU)

    add_library(wgpu_native STATIC IMPORTED)
    set_target_properties(wgpu_native PROPERTIES
        IMPORTED_LOCATION "${WGPU_DIR}/lib/libwgpu_native.a"
        INTERFACE_INCLUDE_DIRECTORIES "${WGPU_DIR}/include"
        INTERFACE_LINK_LIBRARIES "ws2_32;userenv;ntdll;bcrypt;d3d12;dxgi"
    )

    target_link_libraries(app PRIVATE
        wgpu_native
    )

    # Windows-only full static flag & subsystem selection
    target_link_options(app PRIVATE -static)

    if(CMAKE_BUILD_TYPE STREQUAL "Debug")
        target_link_options(app PRIVATE -mconsole)
    else()
        target_link_options(app PRIVATE -mwindows)
    endif()
else()
    add_compile_definitions(IMGUI_IMPL_WEBGPU_BACKEND_WGPU)

    add_library(wgpu_native STATIC IMPORTED)
    set_target_properties(wgpu_native PROPERTIES
        IMPORTED_LOCATION "${WGPU_DIR}/lib/libwgpu_native.a"
        INTERFACE_INCLUDE_DIRECTORIES "${WGPU_DIR}/include"
        INTERFACE_LINK_LIBRARIES "dl;pthread"
    )

    target_link_libraries(app PRIVATE
        wgpu_native
    )
endif()

Step 5: Create Build & Execution Scripts Шаг 5: Создание скриптов сборки и запуска

Windows (MinGW / Batch Scripts)

config-win.bat

cmake -G Ninja -S . -B dist/win

build-win.bat

cmake --build dist/win

run-win.bat

@echo off
.\dist\win\app.exe

Run the scripts sequentially in Command Prompt or PowerShell: Последовательно запустите скрипты в командной строке или PowerShell:

config-win.bat
build-win.bat
run-win.bat

Ubuntu (Bash Scripts)

config-linux.sh

#!/usr/bin/env bash
set -e
cmake -G Ninja -S . -B dist/linux

build-linux.sh

#!/usr/bin/env bash
set -e
cmake --build dist/linux

run-linux.sh

#!/usr/bin/env bash
set -e
./dist/linux/app

Grant execute permissions on Ubuntu before running: Предоставьте права на выполнение в Ubuntu перед запуском:

chmod +x config-linux.sh build-linux.sh run-linux.sh
./config-linux.sh
./build-linux.sh
./run-linux.sh

Step 6: Expected Output Шаг 6: Ожидаемый результат

After running the build and execution scripts, the application will initialize Dear ImGui with the WebGPU backend and output the following lines to your terminal: После запуска скриптов сборки и выполнения приложение инициализирует Dear ImGui с бэкендом WebGPU и выведет следующие строки в терминал:

Dear ImGui version: 1.93.0
ImGui WebGPU Backend configured successfully!