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

• Prerequisite: Ensure you have followed the Emscripten Setup Guide. Предварительное условие: Убедитесь, что вы выполнили инструкции из руководства по настройке Emscripten.
• Download my pre-built SDL 3.4.4 lib for emsdk 4.0.15: SDL3-devel-3.4.4-wasm.zip. Extract the archive to C:/libs/SDL3-devel-3.4.4-wasm Скачайте мою готовую сборку SDL 3.4.4 для emsdk 4.0.15: SDL3-devel-3.4.4-wasm.zip. Распакуйте архив в C:/libs/SDL3-devel-3.4.4-wasm
• Alternatively, you can build it yourself following my guide: Building SDL3 for WebAssembly. Или же вы можете собрать её самостоятельно по моей инструкции: Building SDL3 for WebAssembly.

2. Project Configuration (CMakeLists.txt) 2. Конфигурация проекта (CMakeLists.txt)

• Create a new empty folder for your project (e.g., rectangles-sdl3). Создайте новую пустую папку для вашего проекта (например, rectangles-sdl3).
• Inside that folder, create a file named CMakeLists.txt and paste the following content: Внутри этой папки создайте файл с именем CMakeLists.txt и вставьте следующее содержимое:

cmake_minimum_required(VERSION 3.21)
project(rectangles-sdl3)

# Set the C standard
set(CMAKE_C_STANDARD 17)
set(CMAKE_C_STANDARD_REQUIRED ON)

# Specify the exact location of the library configuration files
# The variable name must strictly match: LibraryName_DIR
set(SDL3_DIR "C:/libs/SDL3-devel-3.4.4-wasm/lib/cmake/SDL3")

# Check for the presence of the library in the system
# If it is not found, CMake will abort the configuration with an error
# REQUIRED means the library is mandatory for the build
find_package(SDL3 REQUIRED)

# Set the name of the future application (on the web it will be app.js / app.wasm,
# while on Windows it would be app.exe)
add_executable(app)

# Add source code to the project
target_sources(app
    PRIVATE
    src/main.c
)
 
# Link the library to our application (configures linking and include paths)
target_link_libraries(app PRIVATE SDL3::SDL3)

cmake_minimum_required(VERSION 3.21)
project(rectangles-sdl3)

# Set the C++ standard
set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# Specify the exact location of the library configuration files
# The variable name must strictly match: LibraryName_DIR
set(SDL3_DIR "C:/libs/SDL3-devel-3.4.4-wasm/lib/cmake/SDL3")

# Check for the presence of the library in the system
# If it is not found, CMake will abort the configuration with an error
# REQUIRED means the library is mandatory for the build
find_package(SDL3 REQUIRED)

# Set the name of the future application (on the web it will be app.js / app.wasm,
# while on Windows it would be app.exe)
add_executable(app)

# Add source code to the project
target_sources(app
    PRIVATE
    src/main.cpp
)
 
# Link the library to our application (configures linking and include paths)
target_link_libraries(app PRIVATE SDL3::SDL3)

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

src/main.c (or src/main.cpp):

#define SDL_MAIN_USE_CALLBACKS 1 // Use callback functions instead of main()

#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>

// We will use this renderer to draw into this window every frame
static SDL_Window *window = NULL;
static SDL_Renderer *renderer = NULL;

// This function runs once at startup
SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[])
{
    if (!SDL_Init(SDL_INIT_VIDEO))
    {
        SDL_Log("Couldn't initialize SDL: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }

    if (!SDL_CreateWindowAndRenderer("SDL3 Rectangles", 500, 500, SDL_WINDOW_RESIZABLE, &window, &renderer))
    {
        SDL_Log("Couldn't create window/renderer: %s", SDL_GetError());
        return SDL_APP_FAILURE;
    }

    SDL_SetRenderVSync(renderer, 1);

    return SDL_APP_CONTINUE; // Continue program execution!
}

// This function runs whenever a new event occurs (mouse input, key presses, etc.)
SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
{
    if (event->type == SDL_EVENT_QUIT)
    {
        return SDL_APP_SUCCESS; // Terminate the program, reporting success to the OS
    }
    return SDL_APP_CONTINUE; // Continue program execution!
}

// This function runs once per frame and is the heart of the program
SDL_AppResult SDL_AppIterate(void *appstate)
{
    SDL_SetRenderDrawColor(renderer, 38, 43, 51, 255);

    // Clear the window with the draw color
    SDL_RenderClear(renderer);

    SDL_FRect rect1;
    rect1.x = 100;
    rect1.y = 50;
    rect1.w = 200;
    rect1.h = 60;
    SDL_SetRenderDrawColor(renderer, 220, 80, 80, SDL_ALPHA_OPAQUE);
    SDL_RenderFillRect(renderer, &rect1);

    SDL_FRect rect2;
    rect2.x = 50;
    rect2.y = 200;
    rect2.w = 100;
    rect2.h = 50;
    SDL_SetRenderDrawColor(renderer, 80, 180, 100, SDL_ALPHA_OPAQUE);
    SDL_RenderFillRect(renderer, &rect2);

    // Present the freshly cleared result to the screen
    SDL_RenderPresent(renderer);

    return SDL_APP_CONTINUE; // Continue program execution!
}

// This function runs once upon shutdown
void SDL_AppQuit(void *appstate, SDL_AppResult result)
{
    // SDL will clean up the window and renderer for us
}

public/index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <canvas id="canvas"></canvas>
    <script async src="./js/app.js"></script>
</body>

</html>

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

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

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"

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

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

# Configure
config-wasm

# Build
build-wasm

http-server -c-1