How to pass a buffer pointer to a WebAssembly function

Question

Inside the excellent WasmFiddle tool, I'm using this WASM function:

int f(char *in, char *out, int len) { 
    for (int i = 0; i < len; i++) {
        out[4*i] = in[i];
        out[4*i+1] = in[i];
        out[4*i+2] = in[i];
        out[4*i+3] = 255;
    }   
    return 0;
}

and this JS code:

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);
var width = 1000, height = 1000;
var array = new Uint8Array(width*height).fill().map(() => Math.round(Math.random() * 255)); // random values
var rgba = new Uint8ClampedArray(4*width*height);
wasmInstance.exports.f(array, rgba, width*height);

The last line is an error because it fails to pass the reference/pointer of array and rgba.

How to do this, in particular in this WasmFiddle environment?

I've read Pass array to C function with emscripten, How to handle passing/returning array pointers to emscripten compiled code?, Pass a JavaScript array as argument to a WebAssembly function but I don't see how to apply this here.

---

Attempt #1 inspired from Passing arrays between wasm and JavaScript:

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);
var width = 10, height = 10;
var array = new Uint8Array(wasmInstance.exports.memory.buffer, 0, width*height).fill().map(() => Math.round(Math.random() * 255)); // random values
var rgba = new Uint8ClampedArray(wasmInstance.exports.memory.buffer, width*height, 4*width*height);
wasmInstance.exports.f(array.byteOffset, rgba.byteOffset, width*height);
log(array);
log(rgba);

but in the result we see [0, 0, 0, 255, 0, 0, 0, 255, ...]: other values haven't been modified as expected. Also when increasing the size to width and height = 1000, it doesn't work anymore.

Answer 1

See MDN's documentation for TypedArray.map():

map() does not mutate the typed array on which it is called (although callbackFn, if invoked, may do so).

So, this makes a new typed array rather than modifying the underlying data.

The correct code would be:

var wasmModule = new WebAssembly.Module(wasmCode);
var wasmInstance = new WebAssembly.Instance(wasmModule, wasmImports);
var width = 10, height = 10;
var array = new Uint8Array(wasmInstance.exports.memory.buffer, 0, width*height).fill();
array.forEach((v, i, a) => { a[i] = Math.round(Math.random() * 255); }); // random values
var rgba = new Uint8ClampedArray(wasmInstance.exports.memory.buffer, width*height, 4*width*height);
wasmInstance.exports.f(array.byteOffset, rgba.byteOffset, width*height);
log(array);
log(rgba);

As for memory size, you have a few options.

Essentially, you can either let the WASM create the memory and export it, or let JS create the memory and import it.

LLVM's LLD WebAssembly docs explain you can use the linker flags --initial-memory=<value> and --max-memory=<value> to set the initial and maximum memory size from the linker (in 64KiB pages).

Otherwise, to set the memory from JS, you would use the flag --import-memory, and construct a WebAssembly.Memory object using initial/maximum memory sizes.

It seems WasmFiddle does not support linker flags, and the linker defaults to exporting the memory, so your only option is to grow the existing memory.

// Grow WASM memory by amount used (in 64KiB pages)
wasmInstance.exports.memory.grow((width*height + width*height*4) >> 16);

This seems to cause strange freezing in my browser - I suspect this is a bug in the editor, so try it in another context to see if it has the same issues.