1. Obtain SDL3 for Wasm 1. Получение SDL3 для Wasm

• Build SDL3 for your Wasm environment: Building SDL3 for WebAssembly. Соберите SDL3 для вашей Wasm-среды: Сборка SDL3 для WebAssembly.

2. Obtain stb_vorbis 2. Получение stb_vorbis

• Copy the stb_vorbis.c file content and remember the version number: Скопируйте содержимое файла stb_vorbis.c и запомните номер версии:
  
• Create the stb_vorbis-x.y folder and copy the stb_vorbis.c file content inside it: Создайте папку с именем stb_vorbis-x.y и скопируйте содержимое файла stb_vorbis.c в эту папку:
  

3. Assets 3. Ресурсы

4. Project Architecture 4. Архитектура проекта

Let's create a project that plays a sound using OpenAL and renders graphics with OpenGL. Давайте создадим проект, который воспроизводит звук с помощью OpenAL и рендерит графику с помощью OpenGL.

C++ Project: Create an empty folder named music-and-sound-2d-openal-opengl-sdl3-wasm-cpp and set up the following hierarchy by creating new CMakeLists.txt and main.cpp files:

Проект на C++: Создайте пустую папку с именем music-and-sound-2d-openal-opengl-sdl3-wasm-cpp и подготовьте следующую иерархию, создав файлы CMakeLists.txt и main.cpp:

music-and-sound-2d-openal-opengl-sdl3-wasm-cpp/
├── CMakeLists.txt
├── config-wasm.bat
├── build-wasm.bat
├── assets/audio/
│   └── Picked Coin Echo 2.wav
│   └── Winds Of Stories.ogg
│── public/
│   └── index.html
└── src/
    └── main.cpp

5. CMake Configuration 5. Конфигурация CMake

Copy and paste the following code into the CMakeLists.txt file:

Скопируйте и вставьте следующее содержимое в файл CMakeLists.txt:

6. Source Code 6. Исходный код

src/main.cpp:

public/index.html:

7. Automation Scripts (.bat) 7. Скрипты автоматизации (.bat)

emcmake cmake -S . -B dist/web

cd dist\web
cmake --build .

cd ..\..
mkdir public\js
set current_dir=%~dp0
copy "%current_dir%dist\web\app.wasm" "%current_dir%public\js"
copy "%current_dir%dist\web\app.js" "%current_dir%public\js"

8. Build and Run 8. Сборка и запуск

Configure and build the project: Сконфигурируйте и соберите проект:

# Configure
config-wasm

# Build
build-wasm

Now, start your local server: Теперь запустите локальный сервер:

# Option 1: Using Node.js (http-server)
http-server -c-1

# Option 2: Using Python
python -m http.server 8080

9. Source Code 9. Исходный код

You can explore the source code and download the complete project directly from the GitHub repository: Вы можете изучить исходный код и скачать готовый проект напрямую из репозитория на GitHub: