Qt 6 + SDL3_image (WebP) + Modern OpenGL 3.3 Core (Desktop) Qt 6 + SDL3_image (WebP) + Modern OpenGL 3.3 Core (Desktop)

A step-by-step guide to configuring and running a static desktop project integrating Qt 6 and SDL3_image with WebP support and an OpenGL 3.3 context on Windows and Ubuntu. Пошаговое руководство по настройке и запуску статического десктопного проекта, объединяющего Qt 6 и SDL3_image с поддержкой WebP и контекстом OpenGL 3.3 под Windows и Ubuntu.

Before proceeding, make sure you have prepared the required static libraries for your operating system using the prerequisite guides: Перед продолжением убедитесь, что вы подготовили необходимые статические библиотеки для вашей операционной системы, следуя предварительным инструкциям:
General (OpenGL Loader): Общее (Загрузчик OpenGL):
Windows (MinGW GCC 16.2): Windows (MinGW GCC 16.2):
Ubuntu & Ubuntu WSL: Ubuntu и Ubuntu WSL:

1. Clone the Project Repository 1. Клонирование репозитория проекта

You can clone or download the complete ready-to-run demo project directly from GitHub: github.com/ivan-enzhaev/sdl3-image-webp-opengl-qt6-desktop Вы можете клонировать или скачать готовый к запуску демонстрационный проект с GitHub: github.com/ivan-enzhaev/sdl3-image-webp-opengl-qt6-desktop

git clone https://github.com/ivan-enzhaev/sdl3-image-webp-opengl-qt6-desktop.git

2. Project Directory Structure 2. Структура каталогов проекта

The cloned repository contains the following files: Склонированный репозиторий содержит следующие файлы:

sdl3-image-webp-opengl-qt6-desktop/
├── assets/
│   └── textures/
│       └── clear_01.webp
├── src/
│   ├── main.cpp
│   ├── mainwindow.h
│   └── mainwindow.cpp
└── CMakeLists.txt
  • assets/textures/clear_01.webp: The WebP texture loaded at runtime.Текстура формата WebP, загружаемая во время выполнения.
  • src/mainwindow.h / src/mainwindow.cpp: Subclasses QOpenGLWidget, loads the WebP image via IMG_Load_IO, and renders the textured quad in an OpenGL 3.3 Core context.Наследует QOpenGLWidget, загружает WebP-изображение через IMG_Load_IO и отрисовывает текстурированный прямоугольник в контексте OpenGL 3.3 Core.
  • src/main.cpp: Initializes base SDL3 subsystems, sets OpenGL 3.3 Core profile format, and starts the Qt application.Инициализирует базовые подсистемы SDL3, задаёт профиль OpenGL 3.3 Core и запускает приложение Qt.
  • CMakeLists.txt: Configures static linking for Qt 6, GLAD, SDL3, SDL3_image, and libwebp.Настраивает статическую компоновку с Qt 6, GLAD, SDL3, SDL3_image и libwebp.
Texture Asset: The free texture clear_01.png used in this project was downloaded from OpenGameArt (Crate #5) and converted to WebP format (clear_01.webp). Текстурный ассет: Бесплатная текстура clear_01.png, используемая в данном проекте, была взята с сайта OpenGameArt (Crate #5) и сконвертирована в формат WebP (clear_01.webp).

3. Project Configuration & Testing in Qt Creator (Windows) 3. Конфигурация проекта и запуск в Qt Creator (Windows)

How to Open and Run in Qt Creator: Как открыть и запустить проект в Qt Creator:

  1. In Qt Creator, click File > Open File or Project... (or press Ctrl+O). В Qt Creator нажмите File > Open File or Project... (или нажмите Ctrl+O).
  2. Navigate to the cloned repository folder and select the CMakeLists.txt file. Перейдите в папку склонированного репозитория и выберите файл CMakeLists.txt.
  3. In the Configure Project screen, select your kit Qt 6.12.0 Static (MinGW 16.2).
    Important: Only Debug is checked by default. Make sure to also check the Release checkbox so that Qt Creator configures the optimized release build! Then click Configure Project.
    На экране Configure Project выберите ваш Kit Qt 6.12.0 Static (MinGW 16.2).
    Важно: По умолчанию галочка стоит только на Debug. Обязательно поставьте галочку напротив Release, чтобы Qt Creator сконфигурировал оптимизированную Release-сборку! После этого нажмите Configure Project.
  4. 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).
  5. Press Ctrl+R to build and launch! The resulting single executable in the release build folder will run 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 with a custom OpenGL 3.3 Core rendering viewport containing a textured quad loaded from the clear_01.webp asset using SDL3_image. При запуске откроется нативное десктопное окно (500x500) с областью вывода OpenGL 3.3 Core, отображающей текстурированный прямоугольник с ящиком из ассета clear_01.webp, загруженного с помощью SDL3_image.

Complete source code for this project is available on GitHub: Полный исходный код проекта доступен на GitHub:

View on GitHub Смотреть на GitHub

Support My Work Поддержать проект

If these tutorials helped you, consider buying me a coffee! Если эти туториалы вам помогли, вы можете поддержать автора.

Sberbank (Russia only) Сбербанк (только для РФ)

Sberbank SBP QR Code

Direct transfer via phone number (Russia only) Перевод по номеру телефона (только для РФ)

+7 (917) 212-29-59

USDT TRC20

USDT TRC20 QR Code

Support via Cryptocurrency Поддержка криптовалютой

TMtY1YifNf6FKvgeFmqKGQR4NStKr3csGp