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 @@

F3D Web

options.set_color('render.background.color', 0, 0, 0); // setup coloring - options.set_string('model.scivis.array-name', 'Colors'); + options.set_string('model.scivis.array_name', 'Colors'); options.set_integer('model.scivis.component', -2); options.toggle('model.scivis.cells'); // make it look nice - options.toggle('render.effect.anti-aliasing'); - options.toggle('render.effect.tone-mapping'); - options.toggle('render.effect.ambient-occlusion'); + options.toggle('render.effect.anti_aliasing'); + options.toggle('render.effect.tone_mapping'); + options.toggle('render.effect.ambient_occlusion'); options.toggle('render.hdri.ambient'); // display widgets @@ -109,7 +109,7 @@

F3D Web

options.toggle('render.grid.enable'); // default to +Z - options.set_string('scene.up-direction', '+Z'); + options.set_string('scene.up_direction', '+Z'); } }; @@ -166,9 +166,9 @@

F3D Web

mapToggleIdToOption('grid', 'render.grid.enable'); mapToggleIdToOption('axis', 'interactor.axis'); - mapToggleIdToOption('fxaa', 'render.effect.anti-aliasing'); - mapToggleIdToOption('tone', 'render.effect.tone-mapping'); - mapToggleIdToOption('ssao', 'render.effect.ambient-occlusion'); + mapToggleIdToOption('fxaa', 'render.effect.anti_aliasing'); + mapToggleIdToOption('tone', 'render.effect.tone_mapping'); + mapToggleIdToOption('ssao', 'render.effect.ambient_occlusion'); mapToggleIdToOption('ambient', 'render.hdri.ambient'); switchDark = () => { @@ -198,7 +198,7 @@

F3D Web

// up callback document.querySelector('#z-up') .addEventListener('click', (evt) => { - Module.engineInstance.getOptions().set_string('scene.up-direction', '+Z'); + Module.engineInstance.getOptions().set_string('scene.up_direction', '+Z'); document.getElementById('z-up').classList.add('is-active'); document.getElementById('y-up').classList.remove('is-active'); openFile(document.getElementById('file-name').innerHTML); @@ -206,7 +206,7 @@

F3D Web

document.querySelector('#y-up') .addEventListener('click', (evt) => { - Module.engineInstance.getOptions().set_string('scene.up-direction', '+Y'); + Module.engineInstance.getOptions().set_string('scene.up_direction', '+Y'); document.getElementById('y-up').classList.add('is-active'); document.getElementById('z-up').classList.remove('is-active'); openFile(document.getElementById('file-name').innerHTML); diff --git a/webassembly/build.sh b/webassembly/build.sh new file mode 100755 index 0000000000..12cb275ee5 --- /dev/null +++ b/webassembly/build.sh @@ -0,0 +1,15 @@ +#!/bin/bash + +cmake -S /src -B /build \ + -DBUILD_SHARED_LIBS=OFF \ + -DF3D_STRICT_BUILD=ON \ + -DF3D_PLUGIN_BUILD_EXODUS=OFF \ + -DF3D_WASM_COPY_APP=ON \ + -DCMAKE_BUILD_TYPE=$1 \ + -DVTK_DIR:PATH=/depends/lib/cmake/vtk + +cmake --build /build + +# Copy generated js/wasm to dist +mkdir -p /src/webassembly/dist +mv /build/bin/* /src/webassembly/dist diff --git a/webassembly/package.json b/webassembly/package.json new file mode 100644 index 0000000000..7a5f0a5b2e --- /dev/null +++ b/webassembly/package.json @@ -0,0 +1,31 @@ +{ + "name": "f3d", + "version": "2.5.0", + "description": "Fast and minimalist 3D viewer framework", + "main": "f3d.js", + "files": ["main.js", "dist/f3d.*"], + "scripts": { + "_docker": "docker run --rm -e CMAKE_BUILD_PARALLEL_LEVEL -v $(pwd)/..:/src ghcr.io/f3d-app/f3d-wasm:latest", + "clean": "npm run _docker -- rm -rf /src/webassembly/dist", + "build:rel": "npm run _docker -- /src/webassembly/build.sh Release", + "build:deb": "npm run _docker -- /src/webassembly/build.sh Debug", + "serve": "npx serve dist", + "prepare": "npm run clean && npm run build:rel" + }, + "repository": "github:f3d-app/f3d", + "keywords": [ + "3d", + "webassembly", + "viewer", + "animation", + "cad", + "gltf", + "vtk", + "stl" + ], + "author": "Michael Migliore and Mathieu Westphal", + "license": "BSD-2-Clause", + "bugs": "https://github.com/f3d-app/f3d/issues", + "funding": "https://github.com/sponsors/f3d-app", + "homepage": "https://f3d.app" +}