diff --git a/.gitignore b/.gitignore index 72681d1ccd..899b667589 100644 --- a/.gitignore +++ b/.gitignore @@ -10,4 +10,4 @@ __pycache__ *.pyc _version.py .DS_Store - +node_modules diff --git a/doc/dev/BUILD_WASM.md b/doc/dev/BUILD_WASM.md index f7bb53939a..3fcf5b81fe 100644 --- a/doc/dev/BUILD_WASM.md +++ b/doc/dev/BUILD_WASM.md @@ -8,105 +8,35 @@ This guide is describing how to build VTK and F3D with emscripten using Docker o # Building -While it's possible to setup an emscripten cross-compiling toolchain locally, it's easier to use Docker to build it +While it's possible to setup an emscripten cross-compiling toolchain locally, it's easier to use Docker and the provided npm scripts. ## Preparing the build -Install Docker locally and pull the WebAssembly image - -```sh -docker pull dockcross/web-wasm:20240529-0dade71 -``` - -Clone VTK and F3D, it will be assumed that the source code is located in `$VTK_DIR` and `$F3D_DIR` variables in the next steps of this guide. -It's recommended to use VTK commit `7e954a92fba020b160a07420403248f6be87f2b0` which has been tested to work properly. - -## Building VTK - -Configure VTK by running the following command: - -```sh -docker run -v ${VTK_DIR}:/vtk \ - --rm dockcross/web-wasm:20240529-0dade71 \ - cmake -S /vtk -B /vtk/build-wasm \ - -DBUILD_SHARED_LIBS=OFF \ - -DCMAKE_BUILD_TYPE=Release \ - -DVTK_ENABLE_LOGGING=OFF \ - -DVTK_ENABLE_WRAPPING=OFF \ - -DVTK_GROUP_ENABLE_Imaging=DONT_WANT \ - -DVTK_GROUP_ENABLE_MPI=DONT_WANT \ - -DVTK_GROUP_ENABLE_Qt=DONT_WANT \ - -DVTK_GROUP_ENABLE_Rendering=DONT_WANT \ - -DVTK_GROUP_ENABLE_StandAlone=DONT_WANT \ - -DVTK_GROUP_ENABLE_Views=DONT_WANT \ - -DVTK_GROUP_ENABLE_Web=DONT_WANT \ - -DVTK_MODULE_ENABLE_VTK_CommonCore=YES \ - -DVTK_MODULE_ENABLE_VTK_CommonDataModel=YES \ - -DVTK_MODULE_ENABLE_VTK_CommonExecutionModel=YES \ - -DVTK_MODULE_ENABLE_VTK_CommonSystem=YES \ - -DVTK_MODULE_ENABLE_VTK_FiltersGeneral=YES \ - -DVTK_MODULE_ENABLE_VTK_FiltersGeometry=YES \ - -DVTK_MODULE_ENABLE_VTK_IOCityGML=YES \ - -DVTK_MODULE_ENABLE_VTK_IOImage=YES \ - -DVTK_MODULE_ENABLE_VTK_IOImport=YES \ - -DVTK_MODULE_ENABLE_VTK_IOPLY=YES \ - -DVTK_MODULE_ENABLE_VTK_IOParallel=YES \ - -DVTK_MODULE_ENABLE_VTK_IOXML=YES \ - -DVTK_MODULE_ENABLE_VTK_ImagingCore=YES \ - -DVTK_MODULE_ENABLE_VTK_ImagingHybrid=YES \ - -DVTK_MODULE_ENABLE_VTK_InteractionStyle=YES \ - -DVTK_MODULE_ENABLE_VTK_InteractionWidgets=YES \ - -DVTK_MODULE_ENABLE_VTK_RenderingAnnotation=YES \ - -DVTK_MODULE_ENABLE_VTK_RenderingCore=YES \ - -DVTK_MODULE_ENABLE_VTK_RenderingOpenGL2=YES \ - -DVTK_MODULE_ENABLE_VTK_RenderingVolumeOpenGL2=YES \ - -DVTK_MODULE_ENABLE_VTK_TestingCore=YES \ - -DVTK_LEGACY_REMOVE=ON \ - -DVTK_SMP_IMPLEMENTATION_TYPE=Sequential -``` - -Build VTK by running the following command: - -```sh -docker run -v ${VTK_DIR}:/vtk --rm dockcross/web-wasm:20240529-0dade71 cmake --build /vtk/build-wasm --parallel 8 -``` +Install `Docker` and `npm` locally. ## Building F3D -Configure F3D by running the following command: +Go to the `webassembly` folder and run the following command to build F3D: ```sh -docker run -v ${VTK_DIR}:/vtk -v ${F3D_DIR}:/f3d \ - --rm dockcross/web-wasm:20240529-0dade71 \ - cmake -S /f3d -B /f3d/build-wasm \ - -DBUILD_SHARED_LIBS=OFF \ - -DCMAKE_BUILD_TYPE=Release \ - -DVTK_DIR=/vtk/build-wasm \ - -DF3D_PLUGIN_BUILD_EXODUS=OFF \ - -DF3D_WASM_DATA_FILE="/f3d/testing/data/f3d.vtp" +npm run build:deb # or build:rel for optimized build ``` -> You can change the value of `F3D_WASM_DATA_FILE` to embed another file in the virtual filesystem. - -Build F3D by running the following command: - -```sh -docker run -v ${VTK_DIR}:/vtk -v ${F3D_DIR}:/f3d --rm dockcross/web-wasm:20240529-0dade71 cmake --build /f3d/build-wasm --parallel 8 -``` +On completion, a folder `webassembly/dist` is created containing the artifacts. # Testing it locally -Five different files should be located in `$F3D_DIR/build-wasm/bin` folder: +Five different files should be located in `webassembly/dist` folder: - `f3d.js`: javascript library - `f3d.wasm`: webassembly binaries - `f3d.data`: virtual filesystem containing the file specified in `F3D_WASM_DATA_FILE` - `index.html`: example file setting up the web page - `favicon.ico`: icon used to display the logo in the browser tab -It's possible to run a local HTML server by running the following command from `$F3D_DIR/build-wasm/bin`: +Again, use a npm command to test locally by running a HTTP server: ```sh -python -m http.server 8000 +npm run serve ``` -Going to http://localhost:8000 should display the web page and load F3D. +Going to http://localhost:3000 should display the web page and load F3D web app. diff --git a/webassembly/README.md b/webassembly/README.md new file mode 100644 index 0000000000..699be58640 --- /dev/null +++ b/webassembly/README.md @@ -0,0 +1,4 @@ +F3D is a fast and minimalist 3D viewer. Implemented in C++, it has been cross-compiled with emscripten to a WebAssembly module. + +While the webassembly module might be quite large (~14MB), it is self contained and requires no external dependency. + diff --git a/webassembly/app.html b/webassembly/app.html index 48d82a428d..ee19a28a0b 100644 --- a/webassembly/app.html +++ b/webassembly/app.html @@ -94,14 +94,14 @@