Meshlib WASM Web Execution

[emil-peters]

Heya,

I know you have the MeshInspector cloud/local software and was wondering how you guys do things in the cloud?
I was planning on making a small web-app which would use some meshlib calls.

I saw there is some WASM docs but I wasn't able to make this work?

What would be the best way to use MeshLib in a cloud webapp?

[Grantim]

Hello!

I saw there is some WASM docs but I wasn't able to make this work?

Basically you should be able to build MeshLib for wasm with https://github.com/MeshInspector/MeshLib#wasmemscripten this instruction. Please describe what errors have you got?

---

What would be the best way to use MeshLib in a cloud webapp?

If you only need some functions easiest way is to create your own cpp project linked with MeshLib, create decorator functions in your project and expose it to js with https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html (we use https://emscripten.org/docs/api_reference/emscripten.h.html#c.EMSCRIPTEN_KEEPALIVE this way to mark cpp functions that we need to be called from js code)

[emil-peters]

Thanks for the info! I'll get back to you with more information once I get the time to work on this

[emil-peters]

Hi @Grantim,

I had another go at Emscripten and managed to do the following:

• Followed the steps in your docs (https://github.com/MeshInspector/MeshLib?tab=readme-ov-file#wasmemscripten) and built using Emscripten (Ubuntu 20.04, emcc 3.1.48, cmake 3.30.2) without errors.

• There are now a lot of files under the /build/release folder, under which:

  • /build/release/MRMesh/ —> I assume that this is just intermediate output?
  • /build/release/bin/ —> I assume that this contains the actual relevant output?

• When I serve the build folder using a simple Python HTTP server (adding the mandatory CORS headers for the SharedArrayBuffer), and navigate to /release/bin, I’m able to open up MeshViewer locally in my browser (see screenshot).

  • Is it normal that this is a very basic view-only version of MeshInspector, e.g. without any of the Transform tools?
  • Is this actually using MeshLib under the hood, or is this just a viewer?
  • Screenshot:
    

• Could you guide me towards the next steps, allowing me to import the MeshLib library from a NodeJS web project? I already explored the following, but not sure if I’m doing the right thing:

  • Noticed that there is a /build/release/bin/libMRMesh.a file, which I’m assuming to contain the statically linked MeshLib library (but I guess this can not be directly imported from JS?).
  • I compiled this further using emcc ./libMRMesh.a -o ./libMRMesh.js, which produces a JS and a WASM file. Can these two files be imported as-is?

My end goal is to be able to use meshlib functions on meshes in a javascrip webapp.

• For example: load a mesh from ThreeJS, convert it to a meshlib mesh, apply mr.relax() to the mesh, and convert it back to a ThreeJS mesh.

Thanks in advance & kind regards,
Emil

[Grantim]

Hello @emil-peters !

• /build/release/MRMesh/ —> I assume that this is just intermediate output?
  Yes, it is

• /build/release/bin/ —> I assume that this contains the actual relevant output?
  Yes, it is, but also has intermediate output. Actually, only *.wasm, *.data, *.js, *.css, *.html, *.svg are relevant

• Is it normal that this is a very basic view-only version of MeshInspector, e.g. without any of the Transform tools?
  Yes, it is correct, MeshLib UI have only small subset of MeshInspector tools.

• Is this actually using MeshLib under the hood, or is this just a viewer?
  Yes, it uses MeshLib (all meshlib including viewer linked statically into wasm file)

• Noticed that there is a /build/release/bin/libMRMesh.a file, which I’m assuming to contain the statically linked MeshLib library (but I guess this can not be directly imported from JS?)
  It is MRMesh project compiled as static lib, and linked into resulting wasm file, it cannot be with js directly (as far as I know)

• I compiled this further using emcc ./libMRMesh.a -o ./libMRMesh.js, which produces a JS and a WASM file. Can these two files be imported as-is?
  I think js file in this case is just accessor for wasm file, but it does not have bound meshlib functions.

---

For now we does not have JS version for MeshLib (but is in our plans).
One simple way to call MeshLib functions form JS is this:
(expose c++ function for js call)

MeshLib/wasm/color_theme.js

Lines 1 to 10 in 425fcfb

	var themeChangedCallback = function () {
	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
	// dark mode
	Module.ccall('emsChangeColorTheme', 'number', ['number'], [0]);
	}
	else {
	// light mode
	Module.ccall('emsChangeColorTheme', 'number', ['number'], [1]);
	}
	}

MeshLib/source/MRViewer/MRColorTheme.cpp

Lines 31 to 40 in 425fcfb

	EMSCRIPTEN_KEEPALIVE int emsChangeColorTheme( int theme )
	{
	using namespace MR;
	if ( theme == 0 )
	ColorTheme::setupDefaultDark();
	else
	ColorTheme::setupDefaultLight();
	ColorTheme::apply();
	return 1;
	}

This method is quite simple, it has types limitations, so it will be more like C API if you need to access classes

Other way is what we plan to do with meshlib in future: embind
It allows expose functions and class to js library very similar to python bindings.