C++をEmscriptenでコンパイルしてブラウザ上で動かしてみた

どうも、皆さんこんにちは。 hotoke_nekoです。

今回はC++をコンパイルして、WASMの略称で知られるWebAssemblyを動かすところまでやってみました。

ところでWebAssemblyって？

自分が作成したC/C++やRustなどの言語をWebブラウザ上で実行できるものです。 C++の実行が可能という点から、機械学習を実行する事も可能となります。

コンパイルするにはRustであればwasm-packをインストールすると可能です。C++では今回使用するEmscripten、他の方法でClangとwasi-sdkを使用しても可能です。 Emscripten以外の方法についてはこちらをご参照ください。

Emscriptenについて

EmscriptenはLLVMのコードをJavaScriptに変換するコンパイラで、C/C++で実装されたプログラムをJavaScriptに変換してWebブラウザ上でも実行できるようになります。Node.jsを使って実行可能になるなど、Javascriptを実行できる環境であれば動作確認できます。 今回は、Node.jsなどの方法を使わずにEmscripten付属のコマンドでコンパイルと動作確認をしています。

Emscriptenについてさらに詳しくお知りになりたい方は、以下の公式サイトをご参照ください。

環境構築

動作環境は以下のようになっています。

$ sw_vers
ProductName: macOS
ProductVersion: 12.3.1
BuildVersion: 21E258

Emscriptenをダウンロード&インストール

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

ここまで実行すると、コンパイルを実行する際に必要な環境変数が設定されます。

コード作成

現在いるところから、作業用のフォルダへcdコマンドなどで移動してください。 （自分はemsdkフォルダと同階層にsrcフォルダを作成し、そこでファイル作成しました。）

その後、動作確認用に以下のような簡単なコードを作成しました。

#include<iostream>
using namespace std;

int main(){
    cout << "Hello,World!" << endl;

    return 0;
}

では次にコンパイルしていきましょう！

Emscriptenでコンパイル

C++をコンパイルするには以下コマンドを実行します。

em++ <作成したファイル名>.cpp -s WASM=1 -o <生成するファイル名>.html

オプションの説明は次の通りです。

• -s WASM=1
  • コンパイル後にwasmファイルを出力するオプション
• -o
  • コードを実行するhtmlファイルの指定するオプション

今回自分はhello.cppというC++のコードを作成したので、次のように実行しました。

em++ hello.cpp -s WASM=1 -o hello.html

C++のコードをEmscriptenでコンパイルする事で、指定したファイル名でファイルが複数生成されます。 生成されるファイルは、htmlファイル, javascriptファイル, wasmファイルの3つです。

動作確認

コンパイルしたファイルをemrunコマンドで実行してみてください。

emrun hello.html 

localhostでHello,World!が表示されていれば動作出来ています！

終わりに

今回は、C++のコードを簡単に動作確認をする所までやりました。次の目標として、機械学習のコードをブラウザ上で実行してみたいです。

それでは、また！

参考にしたサイト