WASM实践

game.wasm: game.c
        clang --target=wasm32 -I./linux/include --no-standard-libraries -Wl,--no-entry -Wl,--allow-undefined -o game.wasm game.c

(module $game.wasm
  (table (;0;) 1 1 funcref)
  (memory (;0;) 2)
  (global $__stack_pointer (mut i32) (i32.const 66560))
  (export "memory" (memory 0)))

(module $game.wasm
  (type (;0;) (func (param i32 i32 i32)))
  (type (;1;) (func (result i32)))
  (type (;2;) (func))
  (type (;3;) (func (param i32)))
  (type (;4;) (func (param i32 i32) (result i32)))
  (import "env" "InitWindow" (func $InitWindow (type 0)))
  (import "env" "WindowShouldClose" (func $WindowShouldClose (type 1)))
  (import "env" "BeginDrawing" (func $BeginDrawing (type 2)))
  (import "env" "ClearBackground" (func $ClearBackground (type 3)))
  (import "env" "EndDrawing" (func $EndDrawing (type 2)))
  (import "env" "CloseWindow" (func $CloseWindow (type 2)))
  (func $__original_main (type 1) (result i32)
    (local i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32 i32)
    global.get $__stack_pointer
    local.set 0
    i32.const 16
    local.set 1
    local.get 0
    local.get 1
    i32.sub
    local.set 2
    local.get 2
    global.set $__stack_pointer
    i32.const 0
    local.set 3
    local.get 2
    local.get 3
    i32.store offset=12
    i32.const 800
    local.set 4
    i32.const 450
    local.set 5
    i32.const 1024
    local.set 6
    local.get 4
    local.get 5
    local.get 6
    call $InitWindow
    block  ;; label = @1
      loop  ;; label = @2
        call $WindowShouldClose
        local.set 7
        i32.const -1
        local.set 8
        local.get 7
        local.get 8
        i32.xor
        local.set 9
        i32.const 1
        local.set 10
        local.get 9
        local.get 10
        i32.and
        local.set 11
        local.get 11
        i32.eqz
        br_if 1 (;@1;)
        call $BeginDrawing
        i32.const 230
        local.set 12
        local.get 2
        local.get 12
        i32.store8 offset=8
        i32.const 41
        local.set 13
        local.get 2
        local.get 13
        i32.store8 offset=9
        i32.const 55
        local.set 14
        local.get 2
        local.get 14
        i32.store8 offset=10
        i32.const 255
        local.set 15
        local.get 2
        local.get 15
        i32.store8 offset=11
        local.get 2
        i32.load offset=8 align=1
        local.set 16
        local.get 2
        local.get 16
        i32.store offset=4
        i32.const 4
        local.set 17
        local.get 2
        local.get 17
        i32.add
        local.set 18
        local.get 18
        call $ClearBackground
        call $EndDrawing
        br 0 (;@2;)
      end
    end
    call $CloseWindow
    i32.const 0
    local.set 19
    i32.const 16
    local.set 20
    local.get 2
    local.get 20
    i32.add
    local.set 21
    local.get 21
    global.set $__stack_pointer
    local.get 19
    return)
  (func $main (type 4) (param i32 i32) (result i32)
    (local i32)
    call $__original_main
    local.set 2
    local.get 2
    return)
  (table (;0;) 1 1 funcref)
  (memory (;0;) 2)
  (global $__stack_pointer (mut i32) (i32.const 66592))
  (export "memory" (memory 0))
  (export "main" (func $main))
  (data $.rodata (i32.const 1024) "Hello, from WebAssembly\00"))

game.wasm: game.c
        clang --target=wasm32 -I./linux/include --no-standard-libraries -Wl,--no-entry -Wl,--allow-undefined -o game.wasm game.c -Wl,--export=main

game.wasm: game.c
        clang \
        -v \
        --target=wasm32 \
        --sysroot=/tmp/wasi-libc \
        -Wl,--verbose \
        -I./wasm/include \
        -L./wasm/lib \
        -I/tmp/wasi-libc/include/wasm32-wasi \
        -L/tmp/wasi-libc/lib/wasm32-wasi \
        -o $@ $^ \
        '-l:libraylib.a' \
        -lm

// main.c
void from_c_to_js_string(char *);

void test(void) {
  from_c_to_js_string("Hello, world!");
}

// glup.js
const from_c_to_js_string = (str_addr) => {
  console.group("=============================");
  console.log(`from_c_to_js_string(${str_addr})`);
  const mem = new Uint8Array(wasmExports.memory.buffer);
  // C 语言的字符串是以 '\0' 结尾的, 所以找到 str_addr 之后的第一个 '\0' 字符就可以算出字符串长度
  let len = 0;
  let ptr = str_addr;
  while (mem[ptr] != 0) {
    len++;
    ptr++;
  }
  const bytes = new Uint8Array(wasmExports.memory.buffer, str_addr, len);
  console.log(new TextDecoder().decode(bytes));
  console.groupEnd();
};

// 在 IMPORTS 中添加 from_c_to_js_string

// main.c
void from_c_to_js_array(int[], int);

void test(void) {
  from_c_to_js_array((int[]){ 1, 2, 3, 4 }, 4);
}

// glup.js
const from_c_to_js_array = (arr_addr, len) => {
  console.group("=============================");
  console.log(`from_c_to_js_array(${arr_addr}, ${len})`);
  /*
    arr 是 int 数组: (int []){ 1, 2, 3, 4 }, 长度为 4 个元素, 每个元素 4 bytes, 也就是 32 bits.
   */
  const int_arr = new Uint32Array(wasmExports.memory.buffer, arr_addr, len);
  console.log(int_arr);
  console.groupEnd();
};

// 在 IMPORTS 中添加 from_c_to_js_array

// main.c
typedef struct {
  int a;
  long b;
} example_struct;   /* size = 16 bytes in 64-bit, 8 bytes in 32-bit */

void from_c_to_js_struct(example_struct);

void test(void) {
  from_c_to_js_struct((example_struct){
      .a = 10,
      .b = 200
    });
}

// glup.js
const from_c_to_js_struct = (example_struct_addr) => {
  console.group("=============================");
  console.log(`from_c_to_js_struct(${example_struct_addr})`);
  /* { a: int, b: long }
     在 wasm32 的情况下, size 为 8 bytes;
     在 wasm64 的情况下, size 为 16 bytes;
     到目前为止只支持 wasm32.
  */
  // Uint32 = 4 bytes * 8 bits = 32 bits
  const data = new Uint32Array(wasmExports.memory.buffer, example_struct_addr, 2);
  console.log(`example_struct = { a=${data[0]}, b=${data[1]} }`);
  console.groupEnd();
};

// 在 IMPORTS 中添加 from_c_to_js_struct

// main.c
typedef union {
  char c;
  long li;
} example_union;    /* size = 8 bytes in 64-bit, 4 bytes in 32-bit */

void from_c_to_js_union(example_union);

void test(void) {
  example_union un;

  un.c = 'a';
  from_c_to_js_union(un, 0);

  un.li = 100;
  from_c_to_js_union(un, 1);

  un.c = 'B';
  from_c_to_js_union(un, 0);
}

// glup.js
const from_c_to_js_union = (example_union_addr, field_index) => {
  console.group("=============================");
  console.log(`from_c_to_js_union(${example_union_addr})`);
  /*
    example_union 为 { c: char, li: long },

    联合中大小最大的字段 li, 类型是 long,

    因此, example_union 在 wasm32 下大小为 4 个字节, 在 wasm64 下大小为 8 个字节;
  */
  const bytes = new Uint8Array(wasmExports.memory.buffer, example_union_addr, 4);
  if (0 == field_index) {
    console.log(`example_union.c = ${String.fromCharCode(bytes[0])}`);
  } else {
    console.log(`example_union.li = ${new Uint32Array(bytes)[0]}`);
  }
  console.groupEnd();
}

// 在 IMPORTS 中添加 from_c_to_js_union

=============================
from_c_to_js_union(66552)
example_union.c = a
=============================
from_c_to_js_union(66556)
example_union.li = 100
=============================
from_c_to_js_union(66560)
example_union.c = B

// main.c
void from_c_to_js_pointer(example_struct *);

void test(void) {
  example_struct *est;
  est->a = 5;
  est->b = 200;
  from_c_to_js_pointer(est);
}

// glup.js
const from_c_to_js_pointer = (est_ptr) => {
  console.group("=============================");
  console.log(`from_c_to_js_pointer(${est_ptr})`);
  const data = new Uint32Array(wasmExports.memory.buffer, est_ptr, 2);
  console.log(`example_struct = { a=${data[0]}, b=${data[1]} }`);
  console.groupEnd();
};

// main.c
static void callback_static(void) {
  print("Message from static callback!");
}

void callback_extern(void) {
  print("Message from extern callback!");
}

// 以函数指针作为参数的函数, 在 JavaScript 里面导入
void from_c_to_js_function_ptr(void (*)(void));

void test(void) {
  from_c_to_js_function_ptr(callback_static);
  from_c_to_js_function_ptr(callback_extern);
}

.PHONY: clean

# 1. 添加 -Wl,--export=callback,--export=callback2 选项
# 2. 添加 -Wl,--export-table 选项导出 WebAssembly.Table, 并且自动记录函数指针所指向的函数的引用
c.wasm: main.c
        clang \
        -v \
        --target=wasm32-unknown-wasi \
        --sysroot=/tmp/wasi-libc \
        -nostartfiles \
        -Wl,--no-entry \
        -Wl,--unresolved-symbols=ignore-all \
        -Wl,--import-undefined \
        -Wl,--export=test,--export=from_js_to_c_struct,--export=from_js_to_c_string,--export=from_js_to_c_enum,--export=from_js_to_c_union,--export=from_c_to_js_return_struct,--export=sum_for_struct,--export=from_c_to_js_return_string,--export=from_c_to_js_return_union,--export=from_js_to_c_array \
        -Wl,--export=callback,--export=callback2 \
        -Wl,--export-table \
        -o $@ $^

clean:
        rm -rf c.wasm

// glup.js
const from_c_to_js_function_ptr = (callback_ptr) => {
  console.group("=============================");
  console.log(`from_c_to_js_function_ptr(${callback_ptr})`);
  // 这里编译得到的 WASM 模块的 WebAssembly.Table 的字段是 __indirect_function_table
  // callback_ptr 是函数指针, 也就是 WebAssembly.Table 上元素的索引
  wasmExports["__indirect_function_table"].get(callback_ptr)(/* 对于接受参数的函数可以传参数 */);
  console.groupEnd();
}

// 在 IMPORTS 中添加 from_c_to_js_string

// main.c
typedef enum { A=1, B, C } example_enum;

void from_c_to_js_enum(example_enum);

void test(void) {
  from_c_to_js_enum(B);
}

// glup.js
const from_c_to_js_enum = (example_enum) => {
  console.group("=============================");
  console.log(`from_c_to_js_enum(${example_enum})`);
  console.groupEnd();
};

// 在 IMPORTS 中添加 from_c_to_js_enum

// main.c
/* 在 JavaScript 中实现, 用来输出字符串到控制台 */
void print(char *);

void from_js_to_c_string(char *str) {
    unsigned int len = 0;
    char *ptr = str;
    while ('\0' != *ptr) {
      ptr++;
      len++;
    }
    print(str);
}

// glup.js
function print(cstrAddr) {
  let len = 0;
  let ptr = cstrAddr;
  const mem = new Uint8Array(wasmExports.memory.buffer);
  while (mem[ptr] != 0) {
    len++;
    ptr++;
  }
  const bytes = new Uint8Array(wasmExports.memory.buffer, cstrAddr, len);
  console.log(new TextDecoder().decode(bytes));
}

// glup.js
function test_from_js_to_c_string(text) {
  console.group("=============================");
  console.log(`from_js_to_c_string(${text})`);
  let jsStr = "Message from JavaScript";
  let cStr = jsStr + "\0";
  let bytesForcStr = (new TextEncoder()).encode(cStr);
  const strAddr = wasmExports.malloc(bytesForcStr.length);
  console.log(`strAddr = ${strAddr}`);
  const memBlock = new Uint8Array(wasmExports.memory.buffer, strAddr, bytesForcStr.length);
  memBlock.set(bytesForcStr);
  wasmExports.from_js_to_c_string(strAddr);
  wasmExports.free(strAddr);
  console.groupEnd();
}

// 在 EXPORTS 中添加该函数的调用 test_from_js_to_c_string("Message from JavaScript")

.PHONY: clean

# 1. 把 -Wl,--export-table 替换成 -Wl,--import-table
c.wasm: main.c
        clang \
        -v \
        --target=wasm32-unknown-wasi \
        --sysroot=/tmp/wasi-libc \
        -nostartfiles \
        -Wl,--no-entry \
        -Wl,--unresolved-symbols=ignore-all \
        -Wl,--import-undefined \
        -Wl,--export=test,--export=from_js_to_c_struct,--export=from_js_to_c_string,--export=from_js_to_c_enum,--export=from_js_to_c_union,--export=from_c_to_js_return_struct,--export=sum_for_struct,--export=from_c_to_js_return_string,--export=from_c_to_js_return_union,--export=from_c_to_js_return_function_ptr,--export=from_js_to_c_array,--export=from_js_to_c_function_ptr,--export=callback_to_set \
        -Wl,--export=callback,--export=callback2 \
        -Wl,--import-table \
        -Wl,--export=malloc,--export=free \
        -o $@ $^

clean:
        rm -rf c.wasm

// main.c
void from_js_to_c_function_ptr(void (*func_ptr)(void)) {
  func_ptr();
}

// 测试用的回调函数, 作为参数传入到 from_js_to_c_function_ptr
void callback_to_set(void) {
  print("Callback set in WebAssembly.Table!");
}

// glup.js
// 1. 创建 WebAssembly.Table 储存函数引用, 最大长度为 10, 初始长度为 3
const table = new WebAssembly.Table({ element: "anyfunc", initial: 3, maximum: 10 });

// 2. 在 IMPORTS 添加 "'__indirect_function_table': table" 键值对
WebAssembly.instantiateStreaming(
  fetch('c.wasm'),
  {
    env: {

      '__indirect_function_table': table

      // ...
    }
  }

  // 3. 创建测试函数
  function test_from_js_to_c_function_ptr() {
    console.group("=============================");
    console.log(`from_js_to_c_function_ptr()`);
    // 让 WebAssembly.Table 增长 1, 并返回新地址
    const newref = table.grow(1);
    // 把 callback_to_set 的引用储存在最新地址上
    table.set(newref, wasmExports.callback_to_set);
    wasmExports.from_js_to_c_function_ptr(newref);
    console.groupEnd();
  }
  // 在 EXPORTS 中添加该函数的调用: test_from_js_to_c_function_ptr()

// main.c
example_struct from_js_to_c_struct(example_struct st) {
  return (example_struct){
    .a = st.a * 2,
    .b = st.b * 2
  };
}

// glup.js
function test_from_js_to_c_struct() {
  console.group("=============================");
  console.log("from_js_to_c_struct((example_struct){ .a=10, .b=200 })");
  let structAddr = wasmExports.malloc(8);
  console.log(`structAddr = ${structAddr}`);
  let dv = new DataView(wasmExports.memory.buffer, structAddr, 8);
  dv.setInt32(0, 10, true);
  dv.setInt32(4, 200, true);
  let result = wasmExports.from_js_to_c_struct(structAddr);
  console.log(result);
  wasmExports.free(structAddr);
  console.groupEnd();
}

// 在 EXPORTS 中添加该函数的调用 test_from_js_to_c_struct()

// main.c
int from_js_to_c_array(int arr[], int len) {
  int sum = 0;
  for (int i = 0; i < len; i++) {
    sum += arr[i];
  }
  return sum;
}

// glup.js
function test_from_js_to_c_array(arr) {
  console.group("=============================");
  console.log(`from_js_to_c_array([${arr.join(',')}], ${arr.length})`);
  // arr 是整形数组, 每个元素的大小为 4 bytes
  let arrAddr = wasmExports.malloc(4 * arr.length);
  let dv = new DataView(wasmExports.memory.buffer, arrAddr, 4 * arr.length);
  for (let i = 0; i < arr.length; i++) {
    dv.setInt32(i * 4, arr[i], true);
  }
  const result = wasmExports.from_js_to_c_array(arrAddr, arr.length);
  console.log(result);
  wasmExports.free(arrAddr);
  console.groupEnd();
}

// 在 EXPORTS 中添加该函数的调用 test_from_js_to_c_array([1, 2, 3, 4])

// main.c
long from_js_to_c_union(example_union un, int fid) {
  if (0 == fid)
    return (long)un.c;
  else
    return un.li;
}

// glup.js
function test_from_js_to_c_union(value, fid) {
  console.group("=============================");
  console.log(`from_js_to_c_union(${value}, ${fid})`);
  // 32-bit 下 example_union 的大小为 4 bytes, 64-bit 下为 8 bytes
  let unionAddr = wasmExports.malloc(4);
  console.log(`unionAddr = ${unionAddr}`);
  let dv = new DataView(wasmExports.memory.buffer, unionAddr, 4);
  if (0 == fid) {
    dv.setInt8(0, value.charCodeAt(0), true);
  } else {
    dv.setInt32(0, value, true);
  }
  // console.log(dv.buffer);
  const result = wasmExports.from_js_to_c_union(unionAddr, fid);
  console.log(result);
  wasmExports.free(unionAddr);
  console.groupEnd();
}

/* 在 EXPORTS 中添加该函数的调用:

   test_from_js_to_c_union(200, 1);
   test_from_js_to_c_union('c', 0);
 */