Difference between revisions of "User:Saul/wasm"
From Organic Design wiki
(Created page with a couple of notes for later.) |
(Pointers/Arrays) |
||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | + | This page has some information on how to import c/++ files into your web projects using wasm and [https://kripken.github.io/emscripten-site/index.html emscripten]. | |
− | https:// | + | == Install == |
− | https://github.com/ | + | Follow [https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html these instructions] to setup emscripten.<br> |
+ | Run: | ||
+ | <source lang="bash"> | ||
+ | sudo cp emscripten/X.XX.XX/system/include/* /usr/local/include | ||
+ | </source> | ||
+ | == With Node == | ||
+ | === Install === | ||
+ | Install the required package: | ||
+ | <source lang="bash"> | ||
+ | npm i -D cpp-wasm-loader | ||
+ | </source> | ||
+ | Then configure it with your webpack config like so: | ||
+ | <source lang="javascript"> | ||
+ | configureWebpack: { | ||
+ | module: { | ||
+ | rules: [ | ||
+ | { | ||
+ | test: /\.(c|cpp)$/, | ||
+ | use: { | ||
+ | loader: "cpp-wasm-loader", | ||
+ | options: { | ||
+ | emccPath: "/media/Data/Applications/Linux/emsdk/emscripten/1.38.21/emcc" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | ] | ||
+ | }, | ||
+ | resolve: { | ||
+ | extensions: [".js", ".c", ".cpp"] | ||
+ | } | ||
+ | } | ||
+ | </source> | ||
+ | '''You may have to build as sudo.''' | ||
+ | |||
+ | === Example Use === | ||
+ | '''add.cpp''' | ||
+ | <source lang="cpp"> | ||
+ | #include <emscripten.h> | ||
+ | |||
+ | extern "C" | ||
+ | { | ||
+ | /* Declare Javascript function for use in C/C++ */ | ||
+ | extern int sub(int a, int b); | ||
+ | |||
+ | EMSCRIPTEN_KEEPALIVE /* <= Needed to export this function to javascript "module.exports" */ | ||
+ | int add(int a, int b) | ||
+ | { | ||
+ | return a + b; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </source> | ||
+ | '''add.js''' | ||
+ | <source lang="javascript"> | ||
+ | const wasm = require("./add.cpp"); | ||
+ | |||
+ | wasm.init((imports) => { | ||
+ | // custom javascript function that can be called from C; | ||
+ | imports._sub = (a, b) => a - b; | ||
+ | return imports; | ||
+ | }).then((module) => { | ||
+ | console.log(module.exports.add(1, 2)); // 3 | ||
+ | console.log(module.memory) // Raw ArrayBuffer Memory object | ||
+ | console.log(module.memoryManager) // Memory Manager Class | ||
+ | console.log(module.raw) // The complete unmodified return value of the webassembly init promise. | ||
+ | }).catch((err) => { | ||
+ | console.error(err); | ||
+ | }) | ||
+ | </source> | ||
+ | |||
+ | === Pointers/Arrays === | ||
+ | To pass an array to c++ use this function: | ||
+ | <source lang="javascript"> | ||
+ | function arrayToPtr(array) { | ||
+ | var ptr = module.raw.instance.exports._malloc(array.length * 4); | ||
+ | module.emModule.HEAP32.set(array, ptr / 4) | ||
+ | return ptr | ||
+ | } | ||
+ | |||
+ | var array = new Int32Array([1, 2, 3, 4, 5]); | ||
+ | var cppArray = arrayToPtr(array); | ||
+ | </source> | ||
+ | '''NOTE:'''' You will need to have the '''fullEnv''' option set to true in your webpack settings, [https://github.com/ClickSimply/cpp-wasm-loader see this] for more info. | ||
+ | |||
+ | == Without Node == | ||
+ | See [https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm Mozilla's guide] for use without node.<br> | ||
+ | [https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap See also.] |
Latest revision as of 07:53, 26 December 2018
This page has some information on how to import c/++ files into your web projects using wasm and emscripten.
Install
Follow these instructions to setup emscripten.
Run:
sudo cp emscripten/X.XX.XX/system/include/* /usr/local/include
With Node
Install
Install the required package:
npm i -D cpp-wasm-loader
Then configure it with your webpack config like so:
configureWebpack: {
module: {
rules: [
{
test: /\.(c|cpp)$/,
use: {
loader: "cpp-wasm-loader",
options: {
emccPath: "/media/Data/Applications/Linux/emsdk/emscripten/1.38.21/emcc"
}
}
}
]
},
resolve: {
extensions: [".js", ".c", ".cpp"]
}
}
You may have to build as sudo.
Example Use
add.cpp
#include <emscripten.h>
extern "C"
{
/* Declare Javascript function for use in C/C++ */
extern int sub(int a, int b);
EMSCRIPTEN_KEEPALIVE /* <= Needed to export this function to javascript "module.exports" */
int add(int a, int b)
{
return a + b;
}
}
add.js
const wasm = require("./add.cpp");
wasm.init((imports) => {
// custom javascript function that can be called from C;
imports._sub = (a, b) => a - b;
return imports;
}).then((module) => {
console.log(module.exports.add(1, 2)); // 3
console.log(module.memory) // Raw ArrayBuffer Memory object
console.log(module.memoryManager) // Memory Manager Class
console.log(module.raw) // The complete unmodified return value of the webassembly init promise.
}).catch((err) => {
console.error(err);
})
Pointers/Arrays
To pass an array to c++ use this function:
function arrayToPtr(array) {
var ptr = module.raw.instance.exports._malloc(array.length * 4);
module.emModule.HEAP32.set(array, ptr / 4)
return ptr
}
var array = new Int32Array([1, 2, 3, 4, 5]);
var cppArray = arrayToPtr(array);
NOTE:' You will need to have the fullEnv option set to true in your webpack settings, see this for more info.
Without Node
See Mozilla's guide for use without node.
See also.