Difference between revisions of "User:Saul/wasm"

From Organic Design wiki
m (Install)
(Pointers/Arrays)
Line 75: Line 75:
 
See [https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm Mozilla's guide] for use without node.<br>
 
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.]
 
[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.]
 +
 +
== 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]);
 +
</source>

Revision as of 07:45, 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);
})

Without Node

See Mozilla's guide for use without node.
See also.

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]);