Difference between revisions of "User:Saul/wasm"
From Organic Design wiki
(Created page with a couple of notes for later.) |
(Added my findings.) |
||
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. | + | 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> | ||
+ | === 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; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | '''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); | ||
+ | }) | ||
+ | </source> | ||
+ | == 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.] |
Revision as of 06:14, 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"]
}
}
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);
})
Without Node
See Mozilla's guide for use without node.
See also.