v2
This takes a Javascript typed array (Float32Array), asks a C++ piece of code to process it and we can access it again from Javascript in it's modified version.
This example was taken from Emscripten website http://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#interacting-with-code
For large arrays in JS to C++ http://kapadia.github.io/emscripten/2013/09/13/emscripten-pointers-and-pointers.html
| #include <math.h> | |
| // otherwise C++ function names are mangled | |
| extern "C" { | |
| void float_multiply_array(float *data, int w, int h, int ncpp) { | |
| int length = w*h; | |
| int currentPixelIndex = 0; | |
| for(int i=0; i<w; i++){ | |
| for(int j=0; j<h; j++){ | |
| currentPixelIndex = j * w + i; | |
| data[currentPixelIndex] = pow( data[i] , 2 ); | |
| } | |
| } | |
| } | |
| } |
| <!doctype html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Emscripten-Generated Code</title> | |
| <script type="text/javascript" src="arrayFunction.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| function arrayFunctionCpp(w, h, ncpp){ | |
| var length = w * h * ncpp; | |
| // Create example data to test float_multiply_array | |
| var data = new Float32Array(length); | |
| data[5] = 10; | |
| var t0 = performance.now(); | |
| // Import function from Emscripten generated file | |
| float_multiply_array = Module.cwrap( | |
| 'float_multiply_array', null, ['number', 'number', 'number'] | |
| ); | |
| // Get data byte size, allocate memory on Emscripten heap, and get pointer | |
| var nDataBytes = data.length * data.BYTES_PER_ELEMENT; | |
| //Module.TOTAL_MEMORY = nDataBytes; // added by jo | |
| var dataPtr = Module._malloc(nDataBytes); | |
| // Copy data to Emscripten heap (directly accessed from Module.HEAPU8) | |
| var dataHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, nDataBytes); | |
| dataHeap.set(new Uint8Array(data.buffer)); | |
| var t0bis = performance.now(); | |
| // Call function and get result | |
| float_multiply_array(dataHeap.byteOffset, w, h, ncpp); | |
| var t1bis = performance.now(); | |
| var result = new Float32Array(dataHeap.buffer, dataHeap.byteOffset, data.length); | |
| // Free memory | |
| Module._free(dataHeap.byteOffset); | |
| var t1 = performance.now(); | |
| console.log("C++ took " + (t1 - t0) + " milliseconds. (including memory transfer)"); | |
| console.log("C++ took " + (t1bis - t0bis) + " milliseconds. (just function runtime)"); | |
| console.log( result ); | |
| } | |
| function arrayFunctionJs(w, h, ncpp){ | |
| var length = w * h * ncpp; | |
| var currentPixelIndex = 0; | |
| // Create example data to test float_multiply_array | |
| var data = new Float32Array( length ); | |
| data[5] = 10; | |
| var t0 = performance.now(); | |
| for(var i=0; i<w; i++){ | |
| for(var j=0; j<h; j++){ | |
| currentPixelIndex = j * w + i; | |
| data[currentPixelIndex] = Math.pow( data[i] , 2 ); | |
| } | |
| } | |
| var t1 = performance.now(); | |
| console.log("JS took " + (t1 - t0) + " milliseconds."); | |
| console.log(data); | |
| } | |
| var w = 10000; | |
| var h = 5000; | |
| var ncpp = 1; | |
| arrayFunctionCpp( w, h, ncpp ); | |
| arrayFunctionJs( w, h, ncpp ); | |
| //------------------------------ | |
| </script> | |
| </body> | |
| </html> |
| emcc -O3 arrayFunction.cpp -o arrayFunction.js -s ALLOW_MEMORY_GROWTH=1 -s EXPORTED_FUNCTIONS="['_float_multiply_array']" |