ClangでWebAssemblyにコンパイル

前回までに必要なツールは揃ったので、コンパイル + 出力コードの検証を進めていきます。

コンパイル方法

以下のコードをコンパイルすることを想定します。

コード1: test.c

#define export __attribute__((used)) //__attribute__((visibility("default"))) だと消えちゃう

export int add(int a, int b){
  return a + b;
}

これを WASM にコンパイルするには以下のコマンドで OK です。

clang --target=wasm32 -Oz test.c -c -o test.o
wasm-ld -o test.wasm --no-entry test.o

clang がコンパイル、wasm-ld がリンクです。今回はエントリポイントがないため、wasm-ld に --no-entry を渡しています。

出力されたコードをテキストフォーマットにして中身を見てみます。

コード2: テキストフォーマットへの変換

wasm2wat test.wasm -o test.wat

コード3: test.wat

(module
  (type (;0;) (func (param i32 i32) (result i32)))
  (func $add (type 0) (param i32 i32) (result i32)
    local.get 1
    local.get 0
    i32.add)
  (table (;0;) 1 1 funcref)
  (memory (;0;) 2)
  (global (;0;) (mut i32) (i32.const 66560))
  (global (;1;) i32 (i32.const 66560))
  (global (;2;) i32 (i32.const 1024))
  (export "memory" (memory 0))
  (export "__heap_base" (global 1))
  (export "__data_end" (global 2))
  (export "add" (func $add)))

足し算をする「add」関数が出力されているのがわかります。

ところで、出力されたコードをみると「__heap_base」という変数が定義されていました。動的にメモリを確保する場合は、なんとなく、ここをベースにヒープ領域の確保していくのが良さそうです。

外部公開とエントリポイント

C の関数を JavaScript 側から呼べるようにするには、関数の前に

__attribute__((used))

をつけます。検索すると

__attribute__((visibility("default")))

と書くとあったのですが、なぜかこちらではうまくいきませんでした。

公開した関数は、JavaScript 側から同じ名前で呼び出せます。

WebAssembly.instantiateStreaming(fetch("test.wasm"), {})
.then(function(obj){
	console.log( obj.instance.exports);
	// instance.exports のメンバになっている
	console.log( obj.instance.exports.add(10,20));
);

先程は、wasm-ld に --no-entry をつけてリンクしましたが、エントリポイントを設定する場合は不要です。エントリポイントは _start という名前の関数になります。シグネチャは何でも良さそうです。

ところで、この _start が、いつ呼ばれているのか？戻り値はどうやって取得しているのか？そもそも自動的に呼ばれているのか？などはよくわかりません。今度調べてみます。

C 関数から文字列を受け取る

C 関数から char 型のポインタを返すと、当然そのポインタアドレスが返ります。そこで、そのアドレスからバッファを読んでデコードすれば JavaScript の string オブジェクトに変換できます。

コード4: C のコード

#define export __attribute__((used))

// ポインタが返る
export char* getStr()
{
	return "Hello World";
}

コード5: JS のコード

<script type="text/javascript">

WebAssembly.instantiateStreaming(fetch("add.wasm"), {})
.then(function(obj){
	var strPtr = obj.instance.exports.getStr();
	var ub8 = new Uint8Array(obj.instance.exports.memory.buffer, strPtr);
	var strLen = 0;
	for(;ub8[strLen] != 0; strLen++);
	ub8 = new Uint8Array(obj.instance.exports.memory.buffer, strPtr, strLen);
	var str = String.fromCharCode.apply("", ub8);
	console.log(str);
}
);
</script>

もうちょっと効率のいい方法があるきがしますが、まぁ、いいか。

まとめ

WASM へのコンパイル方法と、関数の公開方法を紹介しました。次回は、C 側から JavaScript の関数を呼ぶ方法を実験してまとめたいと思います。

ClangでWebAssemblyにコンパイル

コンパイル方法

外部公開とエントリポイント

C 関数から文字列を受け取る

まとめ

目次

アウトライン