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

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

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 fiddle 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 对象，基本上是 key-value存储，那么C如何访问JS对象的字段呢？ C 不知道如何处理 JS 对象。

WebAssembly 类型

好的，让我们在 WebAssembly 的较低层次上更仔细地看一下。这是 void fill(float *a, float *b):

的编译结果

 (func $fill (; 0 ;) (param [=10=] i32) (param  i32)
  (i32.store
   (get_local [=10=])
   (i32.const 1065353216)
  )
  (i32.store
   (get_local )
   (i32.const 1073741824)
  )
 )

细节就不说了，但至少很容易看出这个函数$fill需要两个i32类型的参数：(param [=18=] i32) (param i32)。 所以 fill() 需要数字，而不是 TypedArrays 作为参数。 WebAssembly 将 the following types 定义为函数参数类型和 return 类型：i32、i64、f32、f64，基本上是 32/64 位 intergers/floats。没有像JSkey-value这样的其他类型存储，连数组类型都没有

因此，无论你在 Wasm 端使用什么语言，你都不应该将除数字以外的任何 JS 类型直接传递给 wasmInstance.exports 下的函数。许多语言，如Golang、Rust 和 Emscripten C++（不是 C）通过包装 JS 端的导出函数并破解这些数字类型和 Wasm 内存地址（因此它们需要 well-defined 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;

const a = new Float32Array(wasmInstance.exports.memory.buffer, ptrA, 1)
const b = new Float32Array(wasmInstance.exports.memory.buffer, ptrB, 1)

wasmInstance.exports.fill(ptrA, ptrB)

log(a)
log(b)

现在你会得到你想要的值;)

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

How does WebAssembly <-> JavaScript memory interaction work with multiple Typed Arrays?

javascript

emscripten

webassembly

typed-arrays

WebAssembly 类型

访问数组