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:
Simple importing wasm into your projects:
+
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://medium.com/@brockreece/vue-webassembly-1a09e38d0389
+
== Install ==
https://github.com/ballercat/wasm-loader
+
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.