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是 first[1]和立即之后[2]。我虽然偏移量new Float32Array(wasmInstance.exports.memory.buffer, 4, 1)的偏移量4以某种方式转换为 WebAssembly。

我怎样才能做到这一点a并b实际使用不同的内存？谢谢你。我真的被困住了。

Answer 1

这个导出的函数调用有问题：

wasmInstance.exports.fill(a, b)

a和b是 JSFloat32Array对象。永远不要假设任何 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()期望数字而不是 TypedArrays 作为参数。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;

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)

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

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