SDL3 WebAssembly: cglm with OpenGL ES 3.0 Setup SDL3 WebAssembly: Настройка cglm с OpenGL ES 3.0

Configuring your cross-platform OpenGL project with cglm for the browser using Emscripten. Настройка кроссплатформенного OpenGL-проекта c cglm для браузера с использованием Emscripten.

Prerequisite: Ensure you have followed the Emscripten Setup Guide Предварительное условие: Убедитесь, что вы выполнили инструкции из руководства по настройке Emscripten

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

Build SDL3 yourself following my guide: Building SDL3 for WebAssembly. Соберите SDL3 самостоятельно по моей инструкции: Building SDL3 for WebAssembly.

2. Obtain cglm 2. Получение cgl

Download the Source code (zip) (cglm) from the official GitHub releases: Скачайте Source code (zip) (cglm) с официальных релизов GitHub:
Extract it to a folder (e.g., C:/libs). Распакуйте архив в папку (например, C:/libs).

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

Let's create a project that draws a simple rotated rectangle. Давайте создадим проект, который рисует простой повёрнутый прямоугольник.
Screenshot

C Project: Create an empty folder named rectangle-cglm-opengl-sdl3-wasm-c and set up the following hierarchy by creating new CMakeLists.txt and main.c files:

Проект на C: Создайте пустую папку с именем rectangle-cglm-opengl-sdl3-wasm-c и подготовьте следующую иерархию, создав файлы CMakeLists.txt и main.c:

rectangle-cglm-opengl-sdl3-wasm-c/
├── config-wasm.bat
├── build-wasm.bat
├── CMakeLists.txt
├── public/
│   └── index.html
└── src/
    └── main.c

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

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

rectangle-cglm-opengl-sdl3-wasm-cpp/
├── config-wasm.bat
├── build-wasm.bat
├── CMakeLists.txt
├── public/
│   └── index.html
└── src/
    └── main.cpp

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

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

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

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

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

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

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

public/index.html:

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

config-wasm.bat

emcmake cmake -S . -B dist/web

build-wasm.bat

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"

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

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

Open localhost:8080 in your browser and check the console (F12 or Ctrl+Shift+J) to see the output. Откройте localhost:8080 в браузере и проверьте консоль (F12 или Ctrl+Shift+J), чтобы увидеть результат.

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

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

C Version: View C Repo Репозиторий (C)

C++ Version: View C++ Repo Репозиторий (C++)