Fix web app and add NPM scripts

.gitignore

@@ -10,4 +10,4 @@ __pycache__
 *.pyc
 _version.py
 .DS_Store
-
+node_modules

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.

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.
+

webassembly/app.html

@@ -94,22 +94,22 @@ <h1 class="title">F3D Web</h1>
         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
         options.toggle('interactor.axis');
         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 @@ <h1 class="title">F3D Web</h1>
 
         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,15 +198,15 @@ <h1 class="title">F3D Web</h1>
         // 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);
           });
 
         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);

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

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"
+}