seb*_*piq 15 javascript c++ browser emscripten webassembly
我想测试WebAssembly做一些复杂的数组计算.
所以我写了一个简单的C++函数,添加了两个int包含3个元素的数组:
// hello.cpp
extern "C" {
void array_add(int * summed, int* a, int* b) {
for (int i=0; i < 3; i++) {
summed[i] = a[i] + b[i];
}
}
}
并编译了这个:
emcc hello.cpp -s WASM=1 -s "MODULARIZE=1" -s "EXPORT_NAME='HELLO'" -s "BINARYEN_METHOD='native-wasm'" -s "EXPORTED_FUNCTIONS=['_array_add']" -o build/hello.js
其中包括a js和a wasm文件.我用以下html页面加载这些:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="build/hello.js"></script>
<script type="text/javascript">
function reqListener () {
// Loading wasm module
var arrayBuffer = oReq.response
HELLO['wasmBinary'] = arrayBuffer
hello = HELLO({ wasmBinary: HELLO.wasmBinary })
// Calling function
var result = new Int32Array(3)
var a = new Int32Array([1, 2, 3])
var b = new Int32Array([4, 5, 2])
hello._array_add(result, a, b)
console.log('result', result)
}
var oReq = new XMLHttpRequest();
oReq.responseType = "arraybuffer";
oReq.addEventListener("load", reqListener);
oReq.open("GET", "build/hello.wasm");
oReq.send();
</script>
</head>
<body>
</body>
</html>
但不知何故,result阵列总是如此[0, 0, 0].
我已经尝试了各种各样的东西,包括调用函数ccall()(参见emscripten docs),似乎我不能将一个数组作为我的wasm编译函数的参数传递.
例如,使用以下C++函数:
extern "C" {
int first(int * arr) {
return arr[0];
}
}
在JavaScript中调用的结果是random-ish整数,而不是我作为参数传递的数组的期望值.
我错过了什么？
注意:我对C++几乎一无所知,所以如果这是一个与我的C++无知相关的初学者问题,那么所有道歉......
JF *_*ien 17
您的问题与此问题非常相似:WebAssembly仅支持i32/ i64/ f32/ f64 值类型以及i8/ i16存储.
这意味着您无法传入指针.当你从C++的角度来看时,你所做的事情是完全理智的(不需要为无知而道歉!),但这并不是WebAssembly的边界是如何运作的.这对C++专家来说也是令人惊讶的.
在字符串问题中,您需要:
set(size_t index, int value)),一次复制一个数组.ArrayBuffer为JavaScript,并直接写入所需ArrayBuffer的值.您可以使用我在另一个答案中提出的相同代码来执行后者:
const bin = ...; // WebAssembly binary, I assume below that it imports a memory from module "imports", field "memory".
const module = new WebAssembly.Module(bin);
const memory = new WebAssembly.Memory({ initial: 2 }); // Size is in pages.
const instance = new WebAssembly.Instance(module, { imports: { memory: memory } });
const arrayBuffer = memory.buffer;
const buffer = new Uint8Array(arrayBuffer);
来自C++你可能想知道:"但指针如何工作？".上面我解释一下WebAssembly↔JavaScript你无法传递指针!内部WebAssembly指针表示为简单i32值.Empscripten依赖于LLVM来实现这一点,并且由于WebAssembly将自身呈现为具有4GiB最大堆大小的ILP32,因此Just Works.
它确实对间接函数调用和函数指针有意义!我会留下另一个问题;-)
然而,这确实意味着JavaScript可以"谈论"指向WebAssembly的指针:a i32是一个i32.如果您知道某个值位于堆中的某个位置,那么您可以将其传递i32给JavaScript,JavaScript可以对其进行修改并将其传递回WebAssembly.如果JavaScript可以访问堆,ArrayBuffer那么i32可以让你知道堆中的位置,并像在C++中那样修改堆.
WebAssembly堆与大多数C++堆不同:它不能访问可执行页,也不能访问调用堆栈(或者更确切地说,大多数调用堆栈:LLVM之类的编译器可能会"溢出"某些地址-taken值到堆而不是使用WebAssembly的本地).这基本上就是哈佛架构所做的(而不是冯·诺伊曼).
那你hello._array_add(result, a, b)在做什么？使用强制转换a和b数组ToInteger.这就变成了0,在WebAssembly中是一个有效的堆位置!您正在访问堆中非常意外的部分!
所以感谢其他类似的问题:
和API文档:
https://kripken.github.io/emscripten-site/docs/api_reference/preamble.js.html#getValue
我已经弄清楚了.为了举例说明如何将数组传递给wasm函数/获取数组,我在C++中实现了一个简单的数组副本:
#include <stdint.h>
extern "C" {
int* copy_array(int* in_array, int length) {
int out_array[length];
for (int i=0; i<length; i++) {
out_array[i] = in_array[i];
}
return out_array;
}
}
您可以这样编译:
emcc wasm_dsp.cpp -s WASM=1 -s "MODULARIZE=1" -s "EXPORT_NAME='WasmDsp'" -s "BINARYEN_METHOD='native-wasm'" -s "EXPORTED_FUNCTIONS=['_copy_array']" -o build/wasm_dsp.js
并在浏览器中运行如下:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="build/wasm_dsp.js"></script>
<script type="text/javascript">
function reqListener () {
// Loading wasm module
var arrayBuffer = oReq.response
WasmDsp['wasmBinary'] = arrayBuffer
wasmDsp = WasmDsp({ wasmBinary: WasmDsp.wasmBinary })
var inArray = new Int32Array([22, 44, 66, 999])
var nByte = 4
copyArray = wasmDsp.cwrap('copy_array', null, ['number', 'number']);
// Takes an Int32Array, copies it to the heap and returns a pointer
function arrayToPtr(array) {
var ptr = wasmDsp._malloc(array.length * nByte)
wasmDsp.HEAP32.set(array, ptr / nByte)
return ptr
}
// Takes a pointer and array length, and returns a Int32Array from the heap
function ptrToArray(ptr, length) {
var array = new Int32Array(length)
var pos = ptr / nByte
array.set(wasmDsp.HEAP32.subarray(pos, pos + length))
return array
}
var copiedArray = ptrToArray(
copyArray(arrayToPtr(inArray), inArray.length)
, inArray.length)
console.log(copiedArray)
}
var oReq = new XMLHttpRequest();
oReq.responseType = "arraybuffer";
oReq.addEventListener("load", reqListener);
oReq.open("GET", "build/wasm_dsp.wasm");
oReq.send();
</script>
</head>
<body>
</body>
</html>
注意这里的函数arrayToPtr和ptrToArray函数......它们是执行传递/返回数组的工作.
| 归档时间： |
|
| 查看次数： |
8689 次 |
| 最近记录： |