WebAssembly <-> JavaScript 内存交互如何与多个类型化数组一起工作？

Question

我有一个简单的 c 函数。

void fill(float *a, float *b)
{
  a[0] = 1;
  b[0] = 2;
}

int main()
{
    float a[1];
    float b[1];

    fill(a, b);

    printf("%f\n", a[0]);
    printf("%f\n", b[0]);

    return 0;
}

这给了我

1.000000
2.000000

现在我正在尝试做同样的事情，但是通过 WebAssembly 从 JavaScript 进行。

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);

const a = new Float32Array(wasmInstance.exports.memory.buffer, 0, 1)
const b = new Float32Array(wasmInstance.exports.memory.buffer, 4, 1)

wasmInstance.exports.fill(a, b)

log(a)
log(b)

这是 wasm 小提琴 https://wasdk.github.io/WasmFiddle/?19x523

这次

a

是

[2]

，b是

[0]

。我想我的记忆出了问题。我假设

a

和

b

都指向记忆的开始。这就是为什么

a

首先是

[1]

，然后是

[2]

。我虽然从

new Float32Array(wasmInstance.exports.memory.buffer, 4, 1)

的偏移量（偏移量为

4

）以某种方式转换为 WebAssembly。

如何才能实现

a

和

b

实际上使用不同的内存？谢谢。我真的被困住了。

Answer 1

此导出函数调用有问题：

wasmInstance.exports.fill(a, b)

a

和

b

是 JS

Float32Array

对象。 永远不要假设任何 JS 对象会自动转换为任何 C 数据类型。 虽然 JS TypedArray 的行为类似于 C 数组，但 TypedArray 仍然是一个 JS 对象，基本上是一个键值存储，那么 C 如何访问 JS 对象的字段？ C 不知道如何处理 JS 对象。

WebAssembly 类型

好吧，让我们在 WebAssembly 的较低级别更仔细地看看它。这是

void fill(float *a, float *b)

的编译结果：

 (func $fill (; 0 ;) (param $0 i32) (param $1 i32)
  (i32.store
   (get_local $0)
   (i32.const 1065353216)
  )
  (i32.store
   (get_local $1)
   (i32.const 1073741824)
  )
 )

我不会详细介绍，但至少很容易弄清楚这个函数

$fill

需要两个

i32

类型的参数：

(param $0 i32) (param $1 i32)

。 因此

fill()

需要数字而不是 TypedArray 作为参数。 WebAssembly 将以下类型定义为函数参数类型和返回类型：

i32

、

i64

、

f32

、

f64

，基本上是 32/64 位整数/浮点数。没有像 JS 键值存储那样的其他类型，甚至没有数组类型。

因此，无论你在 Wasm 端使用什么语言，你都不应该直接将数字以外的任何 JS 类型传递给

wasmInstance.exports

下的函数。 许多语言，如 Golang、Rust 和 Emscripten C++（不是 C）都提供了接口通过包装 JS 端的导出函数以及破解这些数字类型和 Wasm 内存地址（因此它们需要一个明确定义的 ABI）来实现无缝类型转换。但是，如果您直接通过

WebAssembly.Instance.exports

访问导出的函数，您仍然必须仅传递数字类型。

访问数组

那么您需要将什么整数值传递给

fill()

？好吧，我认为您已经接近问题的答案，因为您正确设置了数组的偏移量。您需要将 C 指针的值作为整数传递。 在 Wasm 线性内存中，C 指针是 Wasm 内存的偏移地址。所以你需要稍微改变一下代码：

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);

const ptrA = 0; // Yeah it's the same value as NULL, I'd avoid using zero...
const ptrB = 4;

//# fill the WASM memory (any pointer gives automatic access to memory)
wasmInstance.exports.fill(ptrA, ptrB); //# pointer is a position INT for memory

//# after fill updates, extract the new filled values back from WASM memory
const a = new Float32Array(wasmInstance.exports.memory.buffer, ptrA, 1);
const b = new Float32Array(wasmInstance.exports.memory.buffer, ptrB, 1);

console.log("float32 from memory[0] : " + a);
console.log("float32 from memory[4] : " + b);

现在您将获得您想要的值;)

相关：使用emscripten如何将C++ uint8_t数组获取到JS Blob或UInt8Array