Qt 6 + cgltf + cglm + SDL3_image (WebP) + WebGPU (wgpu-native): Rotating 3D Textured Model Y-Bot (Desktop) Qt 6 + cgltf + cglm + SDL3_image (WebP) + WebGPU (wgpu-native): Вращающаяся 3D-текстурированная модель Y-Bot (Desktop)
A step-by-step guide to configuring and running a static desktop project integrating Qt 6, WebGPU (wgpu-native) with WGSL shaders, the cgltf library for parsing glTF binary (.glb) files, cglm math library for Perspective, View, and Model (MVP) transformations, depth testing, SDL3_image with WebP, and smooth 90°/s rotation around the Y-axis via QTimer on Windows and Ubuntu. Пошаговое руководство по настройке и запуску статического десктопного проекта, объединяющего Qt 6, WebGPU (wgpu-native) с WGSL-шейдерами, библиотеку cgltf для парсинга бинарных файлов glTF (.glb), математическую библиотеку cglm для перспективных, видовых и модельных (MVP) преобразований, тест глубины, SDL3_image с поддержкой WebP и плавное вращение вокруг оси Y со скоростью 90°/с через QTimer под Windows и Ubuntu.
General (Math & glTF Libraries): Общее (Математическая библиотека и загрузчик glTF):
- Installing cglm Library Установка библиотеки cglm
- Installing cgltf C glTF Loading Library Установка C-библиотеки загрузки glTF cgltf
Windows (MinGW GCC 16.2): Windows (MinGW GCC 16.2):
- Installing Prebuilt wgpu-native Library for Windows Установка предкомпилированной библиотеки wgpu-native для Windows
- Building Static Qt 6 for Desktop OpenGL with MinGW GCC 16.2 Статическая сборка Qt 6 для Desktop OpenGL с MinGW GCC 16.2
- Building SDL3 Static Library for Windows Сборка статической библиотеки SDL3 для Windows
- Building SDL3_image Static Library with WebP Support for Windows (MinGW & CMake) Сборка статической библиотеки SDL3_image с поддержкой WebP для Windows (MinGW и CMake)
Ubuntu & Ubuntu WSL: Ubuntu и Ubuntu WSL:
- Installing Prebuilt wgpu-native Library for Ubuntu Установка предкомпилированной библиотеки wgpu-native для Ubuntu
- Building Static Qt 6 for Desktop OpenGL on Ubuntu & Ubuntu WSL Статическая сборка Qt 6 для Desktop OpenGL в Ubuntu и Ubuntu WSL
- Building SDL3 Static Library for Ubuntu Сборка статической библиотеки SDL3 для Ubuntu
- Building SDL3_image Static Library with WebP Support for Ubuntu (GCC, CMake & Ninja) Сборка статической библиотеки SDL3_image с поддержкой WebP для Ubuntu (GCC, CMake и Ninja)
1. Clone the Project Repository 1. Клонирование репозитория проекта
You can clone or download the complete ready-to-run 3D demo project directly from GitHub: github.com/ivan-enzhaev/textured-y-bot-cgltf-cglm-sdl3-image-webp-webgpu-qt6-desktop Вы можете клонировать или скачать готовый к запуску 3D демонстрационный проект с GitHub: github.com/ivan-enzhaev/textured-y-bot-cgltf-cglm-sdl3-image-webp-webgpu-qt6-desktop
git clone https://github.com/ivan-enzhaev/textured-y-bot-cgltf-cglm-sdl3-image-webp-webgpu-qt6-desktop.git
2. Project Directory Structure 2. Структура каталогов проекта
The repository contains the following files: Репозиторий содержит следующие файлы:
textured-y-bot-cgltf-cglm-sdl3-image-webp-webgpu-qt6-desktop/
├── assets/
│ └── models/
│ └── y-bot/
│ ├── y-bot.glb
│ └── y-bot.webp
├── src/
│ ├── main.cpp
│ ├── mainwindow.h
│ ├── mainwindow.cpp
│ ├── texture_utils.h
│ ├── webgpu_context.h
│ └── webgpu_context.cpp
└── CMakeLists.txt
assets/models/y-bot/y-bot.glb: The binary glTF 2.0 3D model parsed at runtime using the lightweight, single-headercgltflibrary to extract vertex positions, texture coordinates, and index buffers.Бинарная 3D-модель формата glTF 2.0, загружаемая во время выполнения с помощью легковесной single-header библиотекиcgltfдля извлечения позиций вершин, текстурных координат и буферов индексов.assets/models/y-bot/y-bot.webp: The WebP diffuse texture loaded at runtime viaSDL3_imageand uploaded to a 2D WebGPU texture with a filtering sampler.Диффузная текстура формата WebP, загружаемая во время выполнения черезSDL3_imageи загружаемая в 2D-текстуру WebGPU с фильтрующим сэмплером.src/webgpu_context.h / src/webgpu_context.cpp: Initializes the WebGPU instance, adapter, device, and queue viawgpu-native, creates a nativeWGPUSurfacedirectly from Qt'sQWindow(HWNDon Windows, Waylandwl_surfaceor X11Windowon Ubuntu), and handles surface reconfiguration on resize.Инициализирует экземпляр, адаптер, устройство и очередь WebGPU черезwgpu-native, создаёт нативную поверхностьWGPUSurfaceнапрямую изQWindow(HWNDна Windows, Waylandwl_surfaceили X11Windowна Ubuntu) и обрабатывает перенастройку поверхности при изменении размера окна.src/texture_utils.h: Provides helper functions usingSDL3_imageto decode WebP/PNG images into RGBA8 surfaces and create WebGPUWGPUTexture,WGPUTextureView, andWGPUSamplerresources.Содержит вспомогательные функции на базеSDL3_imageдля декодирования изображений WebP/PNG в формат RGBA8 и создания ресурсов WebGPU:WGPUTexture,WGPUTextureViewиWGPUSampler.src/mainwindow.h / src/mainwindow.cpp: SubclassesQWindow, initializes the WebGPU context andWGPURenderPipelinewith WGSL shaders and aDepth24Plusdepth attachment, parses the GLB mesh usingcgltfinto GPU vertex/index buffers, calculates Model, View, and Perspective matrices usingcglm, rotates the model around the Y-axis at 90°/s viaQTimerandQElapsedTimer, and writes the combined MVP matrix to the uniform bufferu.mvp.НаследуетQWindow, инициализирует контекст WebGPU и конвейер рендерингаWGPURenderPipelineс WGSL-шейдерами и буфером глубиныDepth24Plus, парсит меш GLB с помощьюcgltfв вершинные и индексный буферы GPU, вычисляет матрицы модели, вида и перспективы с помощьюcglm, вращает модель вокруг оси Y со скоростью 90°/с черезQTimerиQElapsedTimerи записывает итоговую MVP-матрицу в uniform-буферu.mvp.src/main.cpp: Initializes SDL3 for file/image loading, importsQWaylandIntegrationPluginon Linux, and starts theQGuiApplicationevent loop.Инициализирует SDL3 для загрузки файлов и изображений, импортирует плагинQWaylandIntegrationPluginна Linux и запускает цикл событийQGuiApplication.CMakeLists.txt: Configures include directories for cgltf (C:/libs/cgltf-1.15on Windows or$ENV{HOME}/libs/cgltf-1.15on Linux), cglm (C:/libs/cglm-0.9.6/include), and wgpu-native (C:/libs/wgpu-native-29.0.1.1-mingwor$ENV{HOME}/libs/wgpu-native-29.0.1.1-ubuntu), and sets up static linking for Qt 6, wgpu-native, SDL3, SDL3_image, and libwebp.Настраивает каталоги включения для cgltf (C:/libs/cgltf-1.15на Windows или$ENV{HOME}/libs/cgltf-1.15на Linux), cglm (C:/libs/cglm-0.9.6/include) и wgpu-native (C:/libs/wgpu-native-29.0.1.1-mingwили$ENV{HOME}/libs/wgpu-native-29.0.1.1-ubuntu), а также задаёт статическую компоновку с Qt 6, wgpu-native, SDL3, SDL3_image и libwebp.
y-bot.glb and y-bot.webp.
3D-модель: 3D-модель была загружена с Mixamo, а оптимизированная low-poly версия создана в Blender и экспортирована в форматы y-bot.glb и y-bot.webp.
3. Project Configuration & Testing in Qt Creator (Windows) 3. Конфигурация проекта и запуск в Qt Creator (Windows)
How to Open and Run in Qt Creator: Как открыть и запустить проект в Qt Creator:
-
In Qt Creator, click File > Open File or Project... (or press
Ctrl+O). В Qt Creator нажмите File > Open File or Project... (или нажмитеCtrl+O). -
Navigate to the cloned repository folder and select the
CMakeLists.txtfile. Перейдите в папку склонированного репозитория и выберите файлCMakeLists.txt. -
In the Configure Project screen, select your kit
Qt 6.12.0 Static (MinGW 16.2).
Important: OnlyDebugis checked by default. Make sure to also check theReleasecheckbox so that Qt Creator configures the optimized release build! Then click Configure Project. На экране Configure Project выберите ваш KitQt 6.12.0 Static (MinGW 16.2).
Важно: По умолчанию галочка стоит только наDebug. Обязательно поставьте галочку напротивRelease, чтобы Qt Creator сконфигурировал оптимизированную Release-сборку! После этого нажмите Configure Project. -
Switch the active build configuration to Release (click the monitor icon in the bottom-left corner of Qt Creator or press
Ctrl+T). Переключите активную конфигурацию сборки на Release (нажмите на значок монитора в левом нижнем углу окна Qt Creator или нажмитеCtrl+T). -
Press Ctrl+R to build and launch! The resulting single executable in the release build folder will run smoothly without needing any external DLLs.
Нажмите Ctrl+R для сборки и запуска! Итоговый одиночный
.exeфайл в папке release-сборки запустится плавно без необходимости наличия каких-либо внешних DLL.
4. Build and Run on Ubuntu & Ubuntu WSL (Terminal) 4. Сборка и запуск на Ubuntu и Ubuntu WSL (Терминал)
On Ubuntu or Ubuntu WSL, configure and compile the project using CMake and Ninja from the terminal: В Ubuntu или Ubuntu WSL сконфигурируйте и скомпилируйте проект с помощью CMake и Ninja через терминал:
wsl -d Ubuntu
mkdir dist && cd dist
# Configure pointing to your static Qt
cmake -DCMAKE_PREFIX_PATH=$HOME/libs/qt-6.12.0-static-gcc \
-DCMAKE_BUILD_TYPE=Release \
-GNinja ..
# Build
ninja
# Run! Window appears seamlessly on Windows desktop via WSLg
./app
5. Expected Output 5. Ожидаемый результат
When launched, the desktop application displays a 500x500 window showing the textured 3D Y-Bot character model rotating smoothly around the Y-axis at exactly 90 degrees per second via WebGPU. The Depth24Plus depth texture ensures rear geometry is properly occluded, and perspective projection creates realistic spatial depth with no lighting applied.
При запуске откроется нативное десктопное окно (500x500), отображающее текстурированную 3D-модель персонажа Y-Bot, плавно вращающуюся вокруг оси Y со скоростью ровно 90 градусов в секунду с помощью WebGPU. Текстура глубины Depth24Plus корректно отсекает скрытую геометрию, а перспективная проекция создаёт реалистичный объём без использования освещения.
Complete source code for this project is available on GitHub: Полный исходный код проекта доступен на GitHub:
View on GitHub Смотреть на GitHubSupport My Work Поддержать проект
If these tutorials helped you, consider buying me a coffee! Если эти туториалы вам помогли, вы можете поддержать автора.
Sberbank (Russia only) Сбербанк (только для РФ)
Direct transfer via phone number (Russia only) Перевод по номеру телефона (только для РФ)
USDT TRC20
Support via Cryptocurrency Поддержка криптовалютой