Improve WASM app (f3d-app#1449)

lknknm · Jun 3, 2024 · 7040c4f · 7040c4f
1 parent 2aa9d39
commit 7040c4f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 20 deletions.
diff --git a/doc/dev/BUILD_WASM.md b/doc/dev/BUILD_WASM.md
@@ -4,7 +4,7 @@ F3D can be built in WebAssembly using emscripten in order to embed it into a web
 It is still experimental and only a small fraction of the libf3d public API is bound.
 An example can be seen at https://f3d.app/web
 
-This guide is describing how to build VTK and F3D with emscripten using Docker on Linux.
+This guide is describing how to build VTK and F3D with emscripten using Docker on Linux or Windows.
 
 # Building
 
@@ -25,7 +25,7 @@ Clone VTK and F3D, it will be assumed that the source code is located in `$VTK_D
 Configure VTK by running the following command:
 
 ```sh
-docker run -v $VTK_DIR:/vtk \
+docker run -v ${VTK_DIR}:/vtk \
  --rm dockcross/web-wasm:20240529-0dade71 \
  cmake -S /vtk -B /vtk/build-wasm \
  -DBUILD_SHARED_LIBS=OFF \
@@ -67,30 +67,30 @@ docker run -v $VTK_DIR:/vtk \
 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
+docker run -v ${VTK_DIR}:/vtk --rm dockcross/web-wasm:20240529-0dade71 cmake --build /vtk/build-wasm --parallel 8
 ```
 
 ## Building F3D
 
 Configure F3D by running the following command:
 
 ```sh
-docker run -v $VTK_DIR:/vtk -v $F3D_DIR:/f3d \
+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 
+ -DF3D_WASM_DATA_FILE="/f3d/testing/data/f3d.vtp"
 ```
 
 > 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
+docker run -v ${VTK_DIR}:/vtk -v ${F3D_DIR}:/f3d --rm dockcross/web-wasm:20240529-0dade71 cmake --build /f3d/build-wasm --parallel 8
 ```
 
 # Testing it locally

diff --git a/vtkext/private/module/vtkF3DRenderer.cxx b/vtkext/private/module/vtkF3DRenderer.cxx
@@ -98,6 +98,7 @@ std::string ComputeFileHash(const std::string& filepath)
   return md5Hash;
 }
 
+#ifndef __EMSCRIPTEN__
 //----------------------------------------------------------------------------
 // Download texture from the GPU to a vtkImageData
 vtkSmartPointer<vtkImageData> SaveTextureToImage(
@@ -123,6 +124,7 @@ vtkSmartPointer<vtkImageData> SaveTextureToImage(
   return img;
 }
 #endif
+#endif
 }
 
 //----------------------------------------------------------------------------
@@ -837,6 +839,7 @@ void vtkF3DRenderer::ConfigureHDRILUT()
       }
       assert(lut->GetTextureObject());
 
+#ifndef __EMSCRIPTEN__
       vtkSmartPointer<vtkImageData> img = ::SaveTextureToImage(
         lut->GetTextureObject(), GL_TEXTURE_2D, 0, lut->GetLUTSize(), VTK_UNSIGNED_SHORT);
       assert(img);
@@ -845,6 +848,7 @@ void vtkF3DRenderer::ConfigureHDRILUT()
       writer->SetFileName(lutCachePath.c_str());
       writer->SetInputData(img);
       writer->Write();
+#endif
     }
     this->HasValidHDRILUT = true;
   }
@@ -881,6 +885,7 @@ void vtkF3DRenderer::ConfigureHDRISphericalHarmonics()
           vtkTable::SafeDownCast(sh->GetOutputDataObject(0))->GetColumn(0));
       }
 
+#ifndef __EMSCRIPTEN__
       // Create spherical harmonics cache file
       vtkNew<vtkTable> table;
       table->AddColumn(this->SphericalHarmonics);
@@ -889,6 +894,7 @@ void vtkF3DRenderer::ConfigureHDRISphericalHarmonics()
       writer->SetInputData(table);
       writer->SetFileName(shCachePath.c_str());
       writer->Write();
+#endif
     }
     this->HasValidHDRISH = true;
   }
@@ -923,6 +929,7 @@ void vtkF3DRenderer::ConfigureHDRISpecular()
       }
       assert(spec->GetTextureObject());
 
+#ifndef __EMSCRIPTEN__
       unsigned int nbLevels = spec->GetPrefilterLevels();
       unsigned int size = spec->GetPrefilterSize();
 
@@ -945,6 +952,7 @@ void vtkF3DRenderer::ConfigureHDRISpecular()
       writer->SetFileName(specCachePath.c_str());
       writer->SetInputData(mb);
       writer->Write();
+#endif
     }
     this->HasValidHDRISpec = true;
   }

diff --git a/webassembly/CMakeLists.txt b/webassembly/CMakeLists.txt
@@ -35,16 +35,16 @@ target_link_options(f3djs PRIVATE
   "SHELL:-sEXPORT_EXCEPTION_HANDLING_HELPERS"
 )
 
-# Option to copy example.html file to index.html in the binary folder
-# In order to test the example:
+# Option to copy app.html file to index.html in the binary folder
+# In order to test the app:
 # - go to the binary folder where f3d.js, f3d.wasm and f3d.data are located
 # - run `python -m http.server 8000`
 # - open a browser to http://localhost:8000
-option(F3D_WASM_COPY_EXAMPLE "Copy HTML example to binary folder" ON)
+option(F3D_WASM_COPY_APP "Copy HTML app file to binary folder" ON)
 
-if(F3D_WASM_COPY_EXAMPLE)
+if(F3D_WASM_COPY_APP)
   configure_file(
-    "${CMAKE_CURRENT_SOURCE_DIR}/example.html"
+    "${CMAKE_CURRENT_SOURCE_DIR}/app.html"
     "${CMAKE_BINARY_DIR}/bin/index.html"
     COPYONLY)
   configure_file(

diff --git a/webassembly/example.html → webassembly/app.html b/webassembly/example.html → webassembly/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="dark">
+<html class="theme-dark">
 
 <head>
   <meta charset="utf-8">
@@ -20,11 +20,19 @@
 
 <body>
   <section class="section">
-    <div class="container">
-      <h1 class="title">F3D Web</h1>
-      <p class="subtitle">
-        A WebAssembly application using libf3d
-      </p>
+    <div class="columns">
+      <div class="column">
+        <h1 class="title">F3D Web</h1>
+        <p class="subtitle">
+          A WebAssembly application using libf3d
+        </p>
+      </div>
+      <div class="column">
+        <div class="field is-pulled-right">
+          <input id="dark" type="checkbox" name="dark" class="switch is-rounded" checked>
+          <label for="dark">Dark theme</label>
+        </div>
+      </div>
     </div>
   </section>
   <section class="section">
@@ -39,14 +47,14 @@ <h1 class="title">F3D Web</h1>
             <span class="file-name" id="file-name"></span>
           </label>
         </div>
-        <p class="menu-label">Widgets</p>
         <div class="is-flex is-flex-direction-row is-align-items-center">
           <button id="y-up" class="button mx-1 is-small">+Y</button>
           <button id="z-up" class="button mx-1 is-small is-active">+Z</button>
           <label class="mx-1">Up</label>
         </div>
+        <p class="menu-label">Widgets</p>
         <div class="field">
-          <input id="grid" type="checkbox" name="grid" class="switch is-rounded">
+          <input id="grid" type="checkbox" name="grid" class="switch is-rounded" checked>
           <label for="grid">Grid</label>
         </div>
         <div class="field">
@@ -62,6 +70,15 @@ <h1 class="title">F3D Web</h1>
           <input id="tone" type="checkbox" name="tone" class="switch is-rounded" checked>
           <label for="tone">Tone mapping</label>
         </div>
+        <div class="field">
+          <input id="ssao" type="checkbox" name="ssao" class="switch is-rounded" checked>
+          <label for="ssao">Ambient occlusion</label>
+        </div>
+        <p class="menu-label">Lighting</p>
+        <div class="field">
+          <input id="ambient" type="checkbox" name="ambient" class="switch is-rounded" checked>
+          <label for="ambient">Ambient light</label>
+        </div>
       </aside>
       <div class="column">
         <div class="container" id="main">
@@ -72,6 +89,21 @@ <h1 class="title">F3D Web</h1>
   </section>
   <script type="text/javascript" src="f3d.js"></script>
   <script type="text/javascript">
+
+    // theme switch
+    document.querySelector('#dark').addEventListener('change', (evt) => {
+        if (evt.target.checked)
+        {
+          document.documentElement.classList.add('theme-dark');
+          document.documentElement.classList.remove('theme-light');
+        }
+        else
+        {
+          document.documentElement.classList.add('theme-light');
+          document.documentElement.classList.remove('theme-dark');
+        }
+      });
+
     const settings = {
       canvas: document.getElementById("canvas"),
       setupOptions: (options) => {
@@ -83,9 +115,14 @@ <h1 class="title">F3D Web</h1>
         // 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.hdri.ambient');
+
+        // display widgets
         options.toggle('interactor.axis');
+        options.toggle('render.grid.enable');
 
-        // up is +Z on this file
+        // default to +Z
         options.set_string('scene.up-direction', '+Z');
       }
     };
@@ -132,6 +169,8 @@ <h1 class="title">F3D Web</h1>
         mapToggleIdToOption('axis', 'interactor.axis');
         mapToggleIdToOption('fxaa', 'render.effect.anti-aliasing');
         mapToggleIdToOption('tone', 'render.effect.tone-mapping');
+        mapToggleIdToOption('ssao', 'render.effect.ambient-occlusion');
+        mapToggleIdToOption('ambient', 'render.hdri.ambient');
 
         // up callback
         document.querySelector('#z-up')