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

Clone or download the latest master branch directly from the official Dear ImGui repository on GitHub: Клонируйте или скачайте последнюю версию ветки master из официального репозитория Dear ImGui на GitHub:

Download ImGui Master Zip Скачать ImGui Master Zip

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

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

cd ~
wget https://github.com/ocornut/imgui/archive/refs/heads/master.zip -O imgui-master.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-master. Распакуйте скачанный архив так, чтобы исходные файлы находились в папке C:\libs\imgui-master.

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

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

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

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

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

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

Windows (Command Prompt / PowerShell)

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

Ubuntu (Terminal)

mkdir -p ~/projects/imgui-test
cd ~/projects/imgui-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
    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

set(CMAKE_BUILD_TYPE "Debug")

cmake_minimum_required(VERSION 3.21)
project(imgui_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-master")
    set(WGPU_DIR "C:/libs/wgpu-29.0.1.1-mingw")
else()
    set(IMGUI_DIR "$ENV{HOME}/libs/imgui-master")
    set(WGPU_DIR "$ENV{HOME}/libs/wgpu-native")
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 Global Header Dependencies
# -----------------------------------------------------------------------------
target_include_directories(app PRIVATE
    ${IMGUI_DIR}
    ${IMGUI_DIR}/backends
    ${WGPU_DIR}/include
)

# -----------------------------------------------------------------------------
# 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
    )

    # Strip symbols and optimize aggressive for size
    target_compile_options(app PRIVATE -Os)

    # MinGW Static Build Settings for Windows
    target_link_options(app PRIVATE -static -s -static-libgcc -static-libstdc++)

    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-exe.bat

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

build-exe.bat

cmake --build dist/win

run-exe.bat

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

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

config-exe.bat
build-exe.bat
run-exe.bat

Ubuntu (Bash Scripts)

config-bin.sh

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

build-bin.sh

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

run-bin.sh

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

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

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