Difference between revisions of "User:Saul/wasm"

From Organic Design wiki
m (Pointers/Arrays)
(Pointers/Arrays)
 
Line 72: Line 72:
 
</source>
 
</source>
  
== Without Node ==
+
=== Pointers/Arrays ===
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.]
 
 
 
== Pointers/Arrays ==
 
 
To pass an array to c++ use this function:
 
To pass an array to c++ use this function:
 
<source lang="javascript">
 
<source lang="javascript">
Line 89: Line 85:
 
</source>
 
</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.
 
'''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.