SDL3 & GLES 3.0: WebAssembly Texture Loading with SDL3_image SDL3 и GLES 3.0: Загрузка текстур в WebAssembly с помощью SDL3_image

A guide to loading image files into GPU memory using SDL3_image and OpenGL ES 3.0 for browser deployment. Руководство по загрузке файлов изображений в память GPU с помощью SDL3_image и OpenGL ES 3.0 для запуска в браузере.

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

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

Build SDL3: Building SDL3 for WebAssembly Соберите SDL3: Сборка SDL3 для WebAssembly
Build SDL3_image: Building SDL3_image for WebAssembly Соберите SDL3_image: Сборка SDL3_image для WebAssembly

2. Obtain zlib and libpng for Wasm 2. Получение zlib и libpng для Wasm

Build zlib from source: Building zlib for WebAssembly Соберите zlib из исходников: Сборка zlib для WebAssembly
Build libpng from source: Building libpng for WebAssembly Соберите libpng из исходников: Сборка libpng для WebAssembly

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

Before creating the files, download the required asset: Перед созданием файлов скачайте необходимый ресурс:

Download the PNG file with transparent background: right-arrow.zip Скачайте PNG-файл с прозрачным фоном: right-arrow.zip
Note: This is a free file taken from this link. Примечание. Это бесплатный файл, который был взят по ссылке.

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

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

C Project: Create an empty folder named simple-texture-sdl3-image-opengl-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-texture-sdl3-image-opengl-wasm-c/
├── CMakeLists.txt
├── config-wasm.bat
├── build-wasm.bat
├── assets/images/
│   └── right-arrow.png
│── public/
│   └── index.html
└── src/
    └── main.c

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

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

simple-texture-sdl3-image-opengl-wasm-cpp/
├── CMakeLists.txt
├── config-wasm.bat
├── build-wasm.bat
├── assets/images/
│   └── right-arrow.png
│── 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:

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

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

public/index.html:

6. Automation Scripts (.bat) 6. Скрипты автоматизации (.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"

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

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