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

Configuring your cross-platform OpenGL project for the browser using Emscripten. Настройка кроссплатформенного OpenGL-проекта для браузера с использованием 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. Project Architecture 2. Архитектура проекта

Let's create a project that renders a simple triangle with OpenGL. Давайте создадим проект, который рисует простой треугольник с помощью OpenGL.
Screenshot

C Project: Create an empty folder named simple-triangle-opengl-sdl3-wasm-c and set up the following hierarchy by creating new empty files: CMakeLists.txt, main.c and so on:

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

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

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

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

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

3. CMake Configuration 3. Конфигурация 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:

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

`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), чтобы увидеть результат.

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

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++)