EmscriptenでC/C++アプリをWASM化してブラウザで動かしてみた

Emscriptenで C/C++アプリを WASM化してブラウザで動かしてみた Koji AGAWA @atty303

Koji AGAWA @atty303 ソフトウェアエンジニア AI事業本部ミライネージ普段は Scala書いてます (10年弱 )
趣味で Rust書いてます (半年 ) #times_atty303

今回のターゲットアプリケーション

デスクトップ版

Web版

7日で 7000Visitsぐらい

PoBのアーキテクチャ

100% Lua ! Luaは、軽量で柔軟なスクリプト言語であり、組み込み用途やゲーム開発に広く使用されている

Host Adapter 例えば描画に関係する関数はこれだけ GetScreenSize SetDrawLayer SetViewport SetDrawColor DrawImage DrawImageQuad DrawString
DrawStringWidth DrawStringCursorIndex

Luaをなんとかブラウザで動かせれば PoBのブラウザ版が作れそう Luaのオリジナル実装は C言語他の言語（ JSや Rust）での実装もあったが互換性に不安ありオリジナル実装をブラウザで動かしたい！

Compile your existing projects written in C or C++ —
or any language that uses LLVM — to browsers.

Emscriptenとは？ LLVMをベースにしたコンパイラツールチェイン C/C++コードを WASMに変換する WASM黎明期からあるツールだがまだ開発が続いている Unityの WebGLエキスポートなどでも使われている

WebAssembly(WASM)とは？主要なブラウザでサポートされる新しめの言語？ランタイム？高速（ GCがない！） JSと相互運用が可能

Emscriptenの使い方のイメージ普通の CMakeでのビルド cd build cmake .. ninja Emscriptenによる CMakeでのビルド
cd build emcmake cmake .. ninja

Cと JSの相互作用

EM_ASM_JS / C → JS static int DrawStringWidth(lua_State *L) {
int n = lua_gettop(L); assert(n >= 3); assert(lua_isnumber(L, 1)); assert(lua_isstring(L, 2)); assert(lua_isstring(L, 3)); int height = lua_tointeger(L, 1); int font = luaL_checkoption(L, 2, "FIXED", fontMap); const char *text = lua_tostring(L, 3); int width = EM_ASM_INT({ return Module.getStringWidth($0, $1, UTF8ToString($2)); }, height, font, text); lua_pushinteger(L, width); return 1; } EM_ASM_JSマクロでインラインで JSが書ける

Asyncify EM_ASYNC_JS(int, paste, (), { var text = await Module.paste();
var lengthBytes = lengthBytesUTF8(text) + 1; var stringOnWasmHeap = Module._malloc(lengthBytes); stringToUTF8(text, stringOnWasmHeap, lengthBytes); return stringOnWasmHeap; }); static int Paste(lua_State *L) { const char *text = (const char *)paste(); lua_pushlstring(L, text, strlen(text)); free((void *)text); return 1; } Cから同期的に JSの Promiseを解決できる

cwrap / JS → C const onFrame = module.cwrap("on_frame", "number",
[], { async: true }); onFrame(); EMSCRIPTEN_KEEPALIVE int on_frame() { lua_State *L = GL; draw_begin(); void *buffer; size_t size; draw_get_buffer(&buffer, &size); EM_ASM({ Module.drawCommit($0, $1); }, buffer, size); draw_end(); return 0; }

WASMヒープ const wasmMemory = new WebAssembly.Memory(); const HEAPU8 = new
Uint8Array(wasmMemory.buffer); WASMのヒープは JSから見ると単なる ArrayBuffer Emscriptenでは HEAPU8などの TypedArrayが公開されている JSで mallocして Cで freeなどもできる

C/C++ ←→ JS のやりとりとメモリ表現がわかればあとはなんとかなった

高速化のために C/C++（ WASM）から細かく JSの関数を呼ぶとそれなりに遅いなるべくそれぞれのランタイムに閉じる時間を長くする描画関数は Cの世界でバッファに貯めて、フレーム終了時にまとめて JSへ転送

苦労するところメモリ管理を間違えると例外が出る Cのメモリ破壊と同じく例外から原因が分からないデバッグビルド＋サニタイザでパフォーマンスを犠牲にある程度デバッグできる

雑感 Emscripten＋ WASMはかなり実用的既存の C/C++コードの実行プラットフォームを広げたいときの選択肢としてアリ新規で作る時は Rustなど WASMをネイティブサポートしている言語を使うほうが良いと思うどちらにせよ昨今の
GCあり言語ほど楽ではないので覚悟は必要 WasmGCが実用レベルになってきているようなので GCあり言語から利用するのが一番楽そう

EmscriptenでC/C++アプリをWASM化してブラウザで動かしてみた

EmscriptenでC/C++アプリをWASM化してブラウザで動かしてみた

AGAWA Koji

More Decks by AGAWA Koji

Other Decks in Programming

Featured

Transcript