Whether meshlib supports running on the browser through wasm about meshlib HOT 11 CLOSED

You should execute build scripts from MeshLib root directory, like this

MeshLib/readme.md

Lines 196 to 220 in d64b98a

	## Build with Emscripten on Linux
	This installation was checked on Ubuntu 20.04.4 with emscripten 3.1.23.
	Install Emscripten (find more on [emscripten official page](https://emscripten.org/docs/getting_started/downloads.html))
	```
	git clone https://github.com/emscripten-core/emsdk.git
	cd emsdk
	optional git pull # optional
	./emsdk install 3.1.23 # (or enother version / latest)
	./emsdk activate 3.1.23
	source ./emsdk_env.sh
	```
	Build
	```
	cd ~/MeshLib
	./scripts/build_thirdparty.sh # select emscripten in the corresponding question
	./scripts/build_sorces.sh # select emscripten in the corresponding question
	```
	Run
	```
	python3 -m http.server 8000 # note that server should have specific COEP and COOP policies for multithread version
	# open in browser 127.0.0.1:8000
	```

The problem has been resolved, thanks to this excellent library and your outstanding contributions.

from meshlib.

Hello! MeshLib can be built with emscripten, and run in browser. You can have a look at https://app.meshinspector.com/ that is powered by MeshLib!

from meshlib.

Hello! MeshLib can be built with emscripten, and run in browser. You can have a look at https://app.meshinspector.com/ that is powered by MeshLib!

I noticed, that is great! I wonder how to build meshlib with emscripten and i need to use some of these features. Do I compile the meshlib library through emscripten first, and then convert it to a wasm file through emcmake?

from meshlib.

If you want to use meshlib in your wasm project you need to compile it with emscripten and link with your project, so there will be only one wasm file.
Otherwise if you want to use meshlib wasm function in your js: first you need to expose needed functions with cpp code like this

than compile meshlib with your cpp files (that expose needed functions). Than use this functions in your project.
You can find more information about emscripten on thier official page https://emscripten.org/ (we use emsdk 3.1.23)

from meshlib.

If you want to use meshlib in your wasm project you need to compile it with emscripten and link with your project, so there will be only one wasm file. Otherwise if you want to use meshlib wasm function in your js: first you need to expose needed functions with cpp code like this

MeshLib/source/MRViewer/MRViewer.cpp

Lines 57 to 101 in c924dfb

	#ifdef __EMSCRIPTEN__
	#include <emscripten/html5.h>
	#define GLFW_INCLUDE_ES3
	namespace
	{
	double sEmsPixelRatio = 1.0f;
	}
	extern "C"
	{
	EMSCRIPTEN_KEEPALIVE int resizeEmsCanvas( float width, float height )
	{
	auto pixelRatio = emscripten_get_device_pixel_ratio();
	if ( sEmsPixelRatio != pixelRatio )
	{
	sEmsPixelRatio = pixelRatio;
	MR::getViewerInstance().postRescale( float( sEmsPixelRatio ), float( sEmsPixelRatio ) );
	}
	float newWidth = width * pixelRatio;
	float newHeight = height * pixelRatio;
	glfwSetWindowSize( MR::getViewerInstance().window, int( newWidth ), int( newHeight ) );
	MR::getViewerInstance().incrementForceRedrawFrames( MR::getViewerInstance().forceRedrawMinimumIncrementAfterEvents, false );
	return 1;
	}
	EMSCRIPTEN_KEEPALIVE void emsPostEmptyEvent( int forceFrames )
	{
	auto& viewer = MR::getViewerInstance();
	viewer.incrementForceRedrawFrames( forceFrames, true );
	viewer.postEmptyEvent();
	}
	EMSCRIPTEN_KEEPALIVE void emsUpdateViewportBounds()
	{
	auto& viewer = MR::getViewerInstance();
	auto bounds = viewer.getViewportsBounds();
	#pragma clang diagnostic push
	#pragma clang diagnostic ignored "-Wdollar-in-identifier-extension"
	EM_ASM( updateVPBounds($0,$1,$2,$3), bounds.min.x,bounds.min.y, MR::width( bounds ),MR::height( bounds ) );
	#pragma clang diagnostic pop
	}
	}
	#endif

than compile meshlib with your cpp files (that expose needed functions). Than use this functions in your project. You can find more information about emscripten on thier official page https://emscripten.org/ (we use emsdk 3.1.23)

Thanks, I'll give it a try.

from meshlib.

If you want to use meshlib in your wasm project you need to compile it with emscripten and link with your project, so there will be only one wasm file. Otherwise if you want to use meshlib wasm function in your js: first you need to expose needed functions with cpp code like this

MeshLib/source/MRViewer/MRViewer.cpp

Lines 57 to 101 in c924dfb

	#ifdef __EMSCRIPTEN__
	#include <emscripten/html5.h>
	#define GLFW_INCLUDE_ES3
	namespace
	{
	double sEmsPixelRatio = 1.0f;
	}
	extern "C"
	{
	EMSCRIPTEN_KEEPALIVE int resizeEmsCanvas( float width, float height )
	{
	auto pixelRatio = emscripten_get_device_pixel_ratio();
	if ( sEmsPixelRatio != pixelRatio )
	{
	sEmsPixelRatio = pixelRatio;
	MR::getViewerInstance().postRescale( float( sEmsPixelRatio ), float( sEmsPixelRatio ) );
	}
	float newWidth = width * pixelRatio;
	float newHeight = height * pixelRatio;
	glfwSetWindowSize( MR::getViewerInstance().window, int( newWidth ), int( newHeight ) );
	MR::getViewerInstance().incrementForceRedrawFrames( MR::getViewerInstance().forceRedrawMinimumIncrementAfterEvents, false );
	return 1;
	}
	EMSCRIPTEN_KEEPALIVE void emsPostEmptyEvent( int forceFrames )
	{
	auto& viewer = MR::getViewerInstance();
	viewer.incrementForceRedrawFrames( forceFrames, true );
	viewer.postEmptyEvent();
	}
	EMSCRIPTEN_KEEPALIVE void emsUpdateViewportBounds()
	{
	auto& viewer = MR::getViewerInstance();
	auto bounds = viewer.getViewportsBounds();
	#pragma clang diagnostic push
	#pragma clang diagnostic ignored "-Wdollar-in-identifier-extension"
	EM_ASM( updateVPBounds($0,$1,$2,$3), bounds.min.x,bounds.min.y, MR::width( bounds ),MR::height( bounds ) );
	#pragma clang diagnostic pop
	}
	}
	#endif

than compile meshlib with your cpp files (that expose needed functions). Than use this functions in your project. You can find more information about emscripten on thier official page https://emscripten.org/ (we use emsdk 3.1.23)

Thanks, I'll give it a try.

I also need to convert my project to wasm for browser call, how to do it with Emscripten, thank you very much!

from meshlib.

If you want your project to run in browesr you need to compile it with emsdk you can have a look at our cmake files and build scripts for example
https://github.com/MeshInspector/MeshLib/blob/master/CMakeLists.txt
https://github.com/MeshInspector/MeshLib/blob/master/scripts/build_thirdparty.sh
https://github.com/MeshInspector/MeshLib/blob/master/scripts/build_source.sh
https://github.com/MeshInspector/MeshLib/blob/master/docker/emscriptenDockerfile

also you can compile MeshLib

from meshlib.

Hello! MeshLib can be built with emscripten, and run in browser. You can have a look at https://app.meshinspector.com/ that is powered by MeshLib!

For example, I currently have this main.cpp file： examples/cmake-example/main.cpp , and I'd like to compile it into wasm for JavaScript usage. I've already executed commands like cd MeshLib, ./scripts/build_thirdparty.sh, and ./scripts/build_sources.sh inside a container built from an EmscriptenDockerfile. My project is located under the /example. What should I do next to compile /example/main.cpp into wasm? I would greatly appreciate it if you could provide specific instructions.

from meshlib.

This exapmle is not meant for wasm, thanks for pointing on it! We will work on enother one.
Simpliest way for you now is to modify code here
https://github.com/MeshInspector/MeshLib/blob/master/source/MRViewerApp
https://github.com/MeshInspector/MeshLib/blob/master/source/MRViewerApp/MRViewerApp.cpp
and use our scripts.
More complex solution is to create your own project folder and include it as subdirectory to our main cmake.

Hope it helps!

from meshlib.

This exapmle is not meant for wasm, thanks for pointing on it! We will work on enother one. Simpliest way for you now is to modify code here https://github.com/MeshInspector/MeshLib/blob/master/source/MRViewerApp https://github.com/MeshInspector/MeshLib/blob/master/source/MRViewerApp/MRViewerApp.cpp and use our scripts. More complex solution is to create your own project folder and include it as subdirectory to our main cmake.

Hope it helps!

Thank you very much for your response. Here are the steps I followed:

cd MeshLib/source/MRViewerApp
mkdir build
cd build
emcmake cmake ..

However, it's reporting the following errors. Should I specify the paths for ${CMAKE_RUNTIME_OUTPUT_DIRECTORY} and ${MR_RESOURCES_DIR}? If so, how should I set them?

CMake Error at CMakeLists.txt:10 (file):
  file COPY given no DESTINATION

CMake Error at CMakeLists.txt:33 (install):
  install FILES given no DESTINATION!

from meshlib.

You should execute build scripts from MeshLib root directory, like this

from meshlib.