SDL3 + WebGPU: Setup for Desktop (MinGW) and Wasm SDL3 + WebGPU: Настройка для Desktop (MinGW) и Wasm

Configure a single C/C++ codebase to run a rotating triangle using WebGPU on both native Windows and the Web. Настройка единого кода на C/C++ для запуска вращающегося треугольника через WebGPU в Windows и браузере.

1. Prerequisites & Environment 1. Предварительные условия и окружение

Ensure you have followed the MinGW Setup Guide and the Emscripten Setup Guide. Убедитесь, что вы выполнили настройку MinGW и настройку Emscripten.
Install Node.js and the http-server: npm install -g http-server. Установите Node.js и http-server: npm install -g http-server.

2. Download Required Libraries 2. Загрузка необходимых библиотек

wgpu-native: Download wgpu-windows-x86_64-gnu-release.zip (v29.0.0.0). Unzip to C:/libs/wgpu-windows-x86_64-gnu-release-29.0.0.0. wgpu-native: Скачайте wgpu-windows-x86_64-gnu-release.zip (v29.0.0.0). Распакуйте в C:/libs/wgpu-windows-x86_64-gnu-release-29.0.0.0.
Environment Path: Add C:\libs\wgpu-windows-x86_64-gnu-release-29.0.0.0\lib to your System Path so the OS can find wgpu_native.dll. Переменные окружения: Добавьте C:\libs\wgpu-windows-x86_64-gnu-release-29.0.0.0\lib в системный Path, чтобы ОС могла найти wgpu_native.dll.

sdl3webgpu: I have downloaded sdl3webgpu.h and sdl3webgpu.c from this specific commit. I have applied the fix described in my GitHub issue (Jan 2026) to sdl3webgpu.h and sdl3webgpu.c to ensure compatibility with the latest SDL3/WebGPU releases. sdl3webgpu: Я скачал скачал sdl3webgpu.h и sdl3webgpu.c из этого коммита. Я применил исправление, описанное в моем GitHub issue (январь 2026) к файлу sdl3webgpu.h и sdl3webgpu.c, чтобы обеспечить совместимость.

3. Desktop Build (MinGW) 3. Сборка для Desktop (MinGW)

You can open CMakeLists.txt in CLion or QtCreator to set breakpoints and debug natively. To build via command line, use: Вы можете открыть CMakeLists.txt в CLion или QtCreator для отладки. Для сборки через командную строку используйте:

config-exe.bat

cmake -S . -B dist/exe -G "MinGW Makefiles"

build-exe.bat

cmake --build dist/exe

run-exe.bat

start ./dist/exe/app.exe

4. WebAssembly Build (Emscripten) 4. Сборка для WebAssembly (Emscripten)

config-wasm.bat

emcmake cmake -S . -B dist/web ^
-DCMAKE_BUILD_TYPE=Debug

build-wasm.bat

cmake --build dist/web
# ... copy app.js/wasm to public/js ...

5. Running and Debugging Wasm 5. Запуск и отладка Wasm

Run the local server: Запустите локальный сервер:

http-server -c-1

Go to localhost:8080. You can set breakpoints directly in C++ code within Chrome using this guide: Debugging SDL3 Wasm in Chrome. Перейдите на localhost:8080. Вы можете ставить точки остановки прямо в C++ коде в Chrome, используя это руководство: Debugging SDL3 Wasm in Chrome.

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

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

Sberbank

Direct transfer via phone number Перевод по номеру телефона

+7 (917) 212-29-59

Bybit (USDT TRC20)

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

TMtY1YifNf6FKvgeFmqKGQR4NStKr3csGp

← Back to Tutorials ← Назад к туториалам