Emscripten (Wasm) Environment Setup Установка окружения Emscripten (Wasm)

1. Prerequisites: Git 1. Подготовка: Git

To clone the Emscripten SDK, you first need to install Git. Download the installer from the official site and follow the standard installation steps. Для клонирования Emscripten SDK сначала необходимо установить Git. Скачайте установщик с официального сайта и следуйте стандартной процедуре установки.

2. Emscripten SDK (emsdk) Installation 2. Установка Emscripten SDK (emsdk)

Open CMD at the root of your drive (e.g., C:\) and run: Откройте CMD в корне диска (например, C:\) и выполните:

# Clone the repository
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# Install and activate version 4.0.15
emsdk install 4.0.15
emsdk activate 4.0.15

Note: Always build your libraries with the same emsdk version. Do not mix versions. Add C:\emsdk\upstream\emscripten to your Path environment variable. Примечание: Всегда собирайте библиотеки одной и той же версией emsdk. Не смешивайте версии. Добавьте путь C:\emsdk\upstream\emscripten в переменную окружения Path.

3. CMake & Node.js 3. CMake и Node.js

Install CMake (msi installer). Verify with cmake --version Установите CMake (msi установщик). Проверьте командой cmake --version
Install Node.js. Then, install a local server: Установите Node.js. Затем установите локальный сервер:
```
npm i http-server -g
```

4. "Hello World" Project 4. Проект "Hello World"

Structure your project hello-wasm-c as follows: Создайте структуру проекта hello-wasm-c следующим образом:

src/main.c:

#include <stdio.h>
#include <emscripten.h>

// Function that will be called by the browser every iteration (frame)
void loop()
{
    // User input processing or frame updates usually happen here
}

int main()
{
    printf("Hello from WebAssembly!\n");

    // Sets the main application loop. 
    // 0 — use the browser's default frame rate.
    // 1 — simulate an infinite loop (prevents exiting main).
    emscripten_set_main_loop(loop, 0, 1); 

    return 0;
}

CMakeLists.txt:

cmake_minimum_required(VERSION 3.21)
project(hello-wasm-c)

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

# Define the output application name (on Windows it would be app.exe, 
# while for the web it will be app.js / app.wasm)
add_executable(app)

# Add source files to the executable build
target_sources(app
PRIVATE
    src/main.c
)

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>

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

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

# Configure
emcmake cmake -S . -B dist -DCMAKE_BUILD_TYPE=Debug

# Build
cmake --build dist

Move app.js and app.wasm to your public/js/ folder, create an index.html linking the script, and start the server: Переместите app.js и app.wasm в public/js/, создайте index.html с подключением скрипта и запустите сервер:

http-server -c-1

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

Support My Work Поддержать проект

If these tutorials helped you, consider buying me a coffee! Если эти туториалы вам помогли, вы можете поддержать автора.

Sberbank

Direct transfer via phone number Перевод по номеру телефона

+7 (917) 212-29-59

Bybit (USDT TRC20)

Support via Cryptocurrency Поддержка криптовалютой

TMtY1YifNf6FKvgeFmqKGQR4NStKr3csGp

← Back to Tutorials ← Назад к туториалам