Merge pull request #4 from Kitware/update-vtk-wasm-sdk

Update to use vtk-wasm-sdk image

.github/workflows/build.yml

@@ -29,10 +29,7 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v3
     - name: Build
-      run: |
-        npm install
-        npm run build-wasm
-        npm run build
+      run: ./build.sh
     - name: Setup Pages
       uses: actions/configure-pages@v3
     - name: Upload artifact

.gitignore

@@ -21,6 +21,9 @@ pnpm-debug.log*
 *.sln
 *.sw?
 
+# When using my own VTK branch for testing/development,
+# I clone VTK into dev-vtk/src and build VTK inside dev-vtk/build-vtk-wasm
+dev-vtk
 
 # Wasm output
 out/

README.md

@@ -1,63 +1,20 @@
-# base
+# Project setup
 
-## Project setup
+## Requirements
 
-```
-# yarn
-yarn
-
-# npm
-npm install
-
-# pnpm
-pnpm install
-```
-
-### Build C++
-
-```
-npm run build-wasm
-```
-
-### Compiles and hot-reloads for development
-
-```
-# yarn
-yarn dev
+1. docker
+2. npm
 
-# npm
-npm run dev
+The build process is composed of two steps. You will need to compile C++ components to generate `.wasm` files and then run some `npm` commands to bundle those into a static site. For convenience, the shell scripts provided for Windows and Unix do everything needed to build a website from a fresh clone.
 
-# pnpm
-pnpm dev
-```
-
-### Compiles and minifies for production
-
-```
-# yarn
-yarn build
-
-# npm
-npm run build
+## Build
 
-# pnpm
-pnpm build
+**Windows**
+```sh
+.\build.ps1
 ```
 
-### Lints and fixes files
-
+**Unix**
+```sh
+./build.sh
 ```
-# yarn
-yarn lint
-
-# npm
-npm run lint
-
-# pnpm
-pnpm lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://vitejs.dev/config/).

build.ps1

@@ -0,0 +1,23 @@
+$erroractionpreference = "stop"
+
+$sdk_version="v9.3.0-2490-g97c85d6930-20240401"
+$sdk_image="kitware/vtk-wasm-sdk"
+$sdk_config="Release"
+
+$sdk_dir="/VTK-install/$sdk_config/lib/cmake/vtk"
+
+docker run `
+    --rm `
+    -v"$pwd":/vtkWasmBenchmarks `
+    ${sdk_image}:${sdk_version} `
+    emcmake cmake -GNinja -S /vtkWasmBenchmarks -B /vtkWasmBenchmarks/out -DCMAKE_BUILD_TYPE="$sdk_config" -DVTK_DIR="$sdk_dir"
+
+docker run `
+    --rm `
+    -v"$pwd":/vtkWasmBenchmarks `
+    ${sdk_image}:${sdk_version} `
+    cmake --build /vtkWasmBenchmarks/out
+
+npm i
+
+npm run build

build.sh

@@ -0,0 +1,33 @@
+#!/bin/sh
+
+set -e
+set -x
+
+sdk_version="v9.3.0-2490-g97c85d6930-20240401"
+readonly sdk_version
+
+sdk_image="kitware/vtk-wasm-sdk"
+readonly sdk_image
+
+sdk_config="Release"
+readonly sdk_config
+
+sdk_dir="/VTK-install/$sdk_config/lib/cmake/vtk"
+readonly sdk_dir
+
+docker run \
+    --rm \
+    -u "$(id -u):$(id -g)" \
+    -v"$PWD":/vtkWasmBenchmarks \
+    $sdk_image:$sdk_version \
+    emcmake cmake -GNinja -S /vtkWasmBenchmarks -B /vtkWasmBenchmarks/out -DCMAKE_BUILD_TYPE=$sdk_config -DVTK_DIR=$sdk_dir
+
+docker run \
+    --rm \
+    -v"$PWD":/vtkWasmBenchmarks \
+    $sdk_image:$sdk_version \
+    cmake --build /vtkWasmBenchmarks/out
+
+npm i
+
+npm run build

cpp/ConesViewer/ConesViewer.cxx

@@ -147,6 +147,13 @@ void ConesViewer::ResetView() {
   }
 }
 
+//------------------------------------------------------------------------------
+void ConesViewer::SetSize(int width, int height)
+{
+  std::cout << __func__ << width << ',' << height << std::endl;
+  this->P->Interactor->UpdateSize(width, height);
+}
+
 //------------------------------------------------------------------------------
 int ConesViewer::Run() {
   std::cout << __func__ << std::endl;

cpp/ConesViewer/ConesViewer.h

@@ -10,6 +10,7 @@ class ConesViewer {
   void Initialize();
   void Render();
   void ResetView();
+  void SetSize(int width, int height);
   int Run();
 
   int CreateDatasets(int nx, int ny, int nz, double dx, double dy, double dz);
@@ -31,6 +32,7 @@ EMSCRIPTEN_BINDINGS(ConesViewerJSBindings) {
       .function("initialize", &ConesViewer::Initialize)
       .function("render", &ConesViewer::Render)
       .function("resetView", &ConesViewer::ResetView)
+      .function("setSize", &ConesViewer::SetSize)
       .function("run", &ConesViewer::Run)
       .function("createDatasets", &ConesViewer::CreateDatasets)
       .function("setMapperStatic", &ConesViewer::SetMapperStatic)

cpp/GeometryViewer/GeometryViewer.cxx

@@ -339,6 +339,13 @@ void GeometryViewer::ResetView() {
   }
 }
 
+//------------------------------------------------------------------------------
+void GeometryViewer::SetSize(int width, int height)
+{
+  std::cout << __func__ << width << ',' << height << std::endl;
+  this->P->Interactor->UpdateSize(width, height);
+}
+
 //------------------------------------------------------------------------------
 void GeometryViewer::RemoveAllActors() {
   std::cout << __func__ << std::endl;

cpp/GeometryViewer/GeometryViewer.h

@@ -15,6 +15,7 @@ class GeometryViewer {
   void Initialize();
   void Render();
   void ResetView();
+  void SetSize(int width, int height);
   void RemoveAllActors();
 
   // std::string SetVertexShaderSource(std::string source);
@@ -70,6 +71,7 @@ EMSCRIPTEN_BINDINGS(GeometryViewerJSBindings) {
       .function("initialize", &GeometryViewer::Initialize)
       .function("render", &GeometryViewer::Render)
       .function("resetView", &GeometryViewer::ResetView)
+      .function("setSize", &GeometryViewer::SetSize)
       .function("removeAllActors", &GeometryViewer::RemoveAllActors)
       .function("start", &GeometryViewer::Start)
       .function("halt", &GeometryViewer::Halt)

package.json

@@ -3,9 +3,6 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build-wasm": "npm run build-wasm:release",
-    "build-wasm:release": "npx itk-wasm -i kitware/vtk-wasm-sdk -b out -s . build -- Release -DDEBUGINFO=NONE -DOPTIMIZE=BEST",
-    "build-wasm:debug": "npx itk-wasm -i kitware/vtk-wasm-sdk -b out -s . build -- Debug -DDEBUGINFO=DEBUG_NATIVE -DOPTIMIZE=NO_OPTIMIZATION",
     "build": "vue-tsc --noEmit && vite build",
     "dev": "vite --base /",
     "lint": "eslint . --fix --ignore-path .gitignore"

src/components/ConesViewer/ConesViewer.vue

@@ -130,10 +130,6 @@ onMounted(async () => {
   updateDatasets()
   // starts processing events on browser main thread.
   viewer.run();
-  // sends a resize event so that the render window fills up browser tab dimensions.
-  setTimeout(() => {
-    window.dispatchEvent(new Event("resize"));
-  }, 0);
   if (props.showControls) {
     setupUI();
   }
@@ -163,8 +159,12 @@ onUnmounted(async () => {
     <h3>This application cannot run because your browser does not support WebGPU!</h3>
     <p>Your browser did not provide a GPU adapter. Known to happen on Linux!</p>
   </div>
-  <canvas v-show="(supportsWebGPU && viewApi == 'webgpu') || viewApi == 'webgl'"
-    :class="'ConesViewer' + viewApi + 'Canvas'" id="canvas"></canvas>
+  <div style="position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;">
+    <div class='canvas_container'>
+      <canvas v-show="(supportsWebGPU && viewApi == 'webgpu') || viewApi == 'webgl'"
+        :class="'ConesViewer' + viewApi + 'Canvas'" id="canvas"></canvas>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/components/GeometryViewer/GeometryViewer.vue

@@ -274,28 +274,23 @@ onMounted(async () => {
   viewer.render();
   // starts processing events on browser main thread.
   viewer.start();
-  // sends a resize event so that the render window fills up browser tab dimensions.
-  setTimeout(() => {
-    window.dispatchEvent(new Event('resize'));
-  }, 0);
-
   /// connect drop events
-  const dropContainer = document.getElementById('canvas') as HTMLElement;
-  dropContainer.addEventListener('dragover', (e) => {
+  const dropDestination = document.getElementById('canvas') as HTMLElement;
+  dropDestination!.addEventListener('dragover', (e: DragEvent) => {
     // prevent default to allow drop
     e.preventDefault();
   }, false);
 
-  dropContainer.addEventListener('dragenter', () => {
-    dropContainer.classList.add('drag-active');
+  dropDestination!.addEventListener('dragenter', () => {
+    dropDestination!.classList.add('drag-active');
   });
 
-  dropContainer.addEventListener('dragleave', () => {
-    dropContainer.classList.remove('drag-active');
+  dropDestination!.addEventListener('dragleave', () => {
+    dropDestination!.classList.remove('drag-active');
   });
-  dropContainer.addEventListener('drop', (e) => {
+  dropDestination!.addEventListener('drop', (e: DragEvent) => {
     e.preventDefault();
-    dropContainer.classList.remove('drag-active');
+    dropDestination!.classList.remove('drag-active');
     const dataTransfer = e.dataTransfer as DataTransfer;
     loadFile(dataTransfer.files[0]);
   });
@@ -340,11 +335,16 @@ onUnmounted(async () => {
     <p>Your browser did not provide a GPU adapter. Known to happen on Linux!</p>
   </div>
   <input type='file' id='vtk-input' v-on:change="onFilesChanged" accept='.obj, .ply, .vtk, .vtp, .vtu' required>
-  <canvas v-if="(supportsWebGPU && viewApi == 'webgpu') || viewApi == 'webgl'"
-    :class="'GeometryViewer' + viewApi + 'Canvas'" id="canvas"></canvas>
-  <div class='tooltip'
-    style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
-    unselectable="on" onselectstart="return false;" onmousedown="return false;" oncontextmenu="event.preventDefault()">
+
+  <div style="position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;">
+    <div class='canvas_container'>
+      <canvas v-if="(supportsWebGPU && viewApi == 'webgpu') || viewApi == 'webgl'"
+        :class="'GeometryViewer' + viewApi + 'Canvas'" id="canvas"></canvas>
+    </div>
+    <div class='tooltip'
+      style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
+      unselectable="on" onselectstart="return false;" onmousedown="return false;" oncontextmenu="event.preventDefault()">
+    </div>
   </div>
 </template>