Merge branch 'master' into vtkQuad

Author: WesleyTheGeolien

.github/workflows/build-test.yml

@@ -6,8 +6,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-18.04]
-        node: [12, 14, 16]
+        os: [ubuntu-20.04]
+        node: [14, 16, 18]
     name: ${{ matrix.os }} and node ${{ matrix.node }}
     steps:
       - uses: actions/checkout@v2

.github/workflows/pr-checks.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: npm ci
       - name: Enforce code style
         run: npm run validate

.github/workflows/publish.yml

@@ -10,7 +10,7 @@ on:
 jobs:
   publish:
     name: Publish
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout
         uses: actions/checkout@v2
@@ -19,7 +19,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - name: Install dependencies
         run: |
           npm ci

Data/pbr/kiara_dawn_4k.jpg

@@ -41,6 +41,8 @@ vtk.js supports virtual and augmented reality rendering via the [WebXR device AP
 [![VR Cone Example][VrCone]](../examples/VR.html)
 [![SkyboxViewer Example][SkyboxViewerVR]](../examples/SkyboxViewer.html?fileURL=https://data.kitware.com/api/v1/file/5ae8a89c8d777f0685796bae/download)
 [![XR Volume Example][WebXRVolume]](../examples/WebXRVolume.html)
+[![XR Volumetric Example][HeadFullVolume]](../examples/WebXRHeadFullVolumeCVR.html)
+[![XR Hybrid Example][ChestCTHybrid]](../examples/WebXRChestCTBlendedCVR.html)
 
 </div>
 
@@ -53,6 +55,7 @@ vtk.js supports virtual and augmented reality rendering via the [WebXR device AP
 [![GeometryViewer Brain Blood Vessels][GeometryViewerBrainBloodVessels]](../examples/GeometryViewer/GeometryViewer.html?fileURL=[https://data.kitware.com/api/v1/file/61f041f14acac99f42c2ff9a/download,https://data.kitware.com/api/v1/file/61f042024acac99f42c2ffa6/download,https://data.kitware.com/api/v1/file/61f042b74acac99f42c30079/download])
 [![GeometryViewer Chest CT][GeometryViewerchestCT]](../examples/GeometryViewer/GeometryViewer.html?fileURL=[https://data.kitware.com/api/v1/file/61f044354acac99f42c30276/download,https://data.kitware.com/api/v1/file/61f0440f4acac99f42c30191/download,https://data.kitware.com/api/v1/file/61f044204acac99f42c30267/download])
 [![XR Volume Example][WebXRVolume]](../examples/WebXRVolume.html)
+[![XR Gradient Example][HeadGradient]](../examples/WebXRHeadGradientCVR.html)
 
 </div>
 
@@ -75,3 +78,6 @@ While WebXR has broad industry support, it is not yet implemented in all browser
 [SkyboxViewerVR]: ../docs/gallery/SkyboxViewerVR.jpg
 [VrCone]: ../docs/gallery/VrCone.jpg
 [WebXRVolume]: ../docs/gallery/WebXRVolume.png
+[HeadFullVolume]: ../docs/gallery/HeadFullVolume.png
+[ChestCTHybrid]: ../docs/gallery/ChestCTHybrid.png
+[HeadGradient]: ../docs/gallery/HeadGradient.png

Documentation/content/docs/develop_webxr.md

@@ -5,13 +5,14 @@ import 'vtk.js/Sources/favicon';
 // Load the rendering pieces we want to use (for both WebGL and WebGPU)
 import 'vtk.js/Sources/Rendering/Profiles/Geometry';
 
-import JSZip from 'jszip';
+import { strFromU8, unzipSync } from 'fflate';
 
 import macro from 'vtk.js/Sources/macros';
 
 import HttpDataAccessHelper from 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
 import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
 import vtkURLExtract from 'vtk.js/Sources/Common/Core/URLExtract';
+import { fromArrayBuffer } from 'vtk.js/Sources/Common/Core/Base64';
 
 import vtkOBJReader from 'vtk.js/Sources/IO/Misc/OBJReader';
 import vtkMTLReader from 'vtk.js/Sources/IO/Misc/MTLReader';
@@ -50,17 +51,22 @@ function emptyContainer(container) {
   }
 }
 
+function unpack(zipContent) {
+  if (zipContent instanceof Blob) {
+    return zipContent.arrayBuffer().then((ab) => new Uint8Array(ab));
+  }
+  if (zipContent instanceof ArrayBuffer) {
+    return Promise.resolve(new Uint8Array(zipContent));
+  }
+  return Promise.reject(new Error('invalid zip content'));
+}
+
 function loadZipContent(zipContent, renderWindow, renderer) {
   const fileContents = { obj: {}, mtl: {}, img: {} };
-  const zip = new JSZip();
-  zip.loadAsync(zipContent).then(() => {
-    let workLoad = 0;
+  unpack(zipContent).then((zipArrayBuffer) => {
+    const decompressedFiles = unzipSync(new Uint8Array(zipArrayBuffer));
 
     function done() {
-      if (workLoad !== 0) {
-        return;
-      }
-
       // Attach images to MTLs
       const promises = [];
       Object.keys(fileContents.mtl).forEach((mtlFilePath) => {
@@ -108,39 +114,29 @@ function loadZipContent(zipContent, renderWindow, renderer) {
       });
     }
 
-    zip.forEach((relativePath, zipEntry) => {
+    Object.entries(decompressedFiles).forEach(([relativePath, fileData]) => {
       if (relativePath.match(/\.obj$/i)) {
-        workLoad++;
-        zipEntry.async('string').then((txt) => {
-          const reader = vtkOBJReader.newInstance({ splitMode: 'usemtl' });
-          reader.parseAsText(txt);
-          fileContents.obj[relativePath] = reader;
-          workLoad--;
-          done();
-        });
+        const txt = strFromU8(fileData);
+        const reader = vtkOBJReader.newInstance({ splitMode: 'usemtl' });
+        reader.parseAsText(txt);
+        fileContents.obj[relativePath] = reader;
       }
       if (relativePath.match(/\.mtl$/i)) {
-        workLoad++;
-        zipEntry.async('string').then((txt) => {
-          const reader = vtkMTLReader.newInstance({
-            interpolateTextures: !userParams.noInterpolation,
-          });
-          reader.parseAsText(txt);
-          fileContents.mtl[relativePath] = reader;
-          workLoad--;
-          done();
+        const txt = strFromU8(fileData);
+        const reader = vtkMTLReader.newInstance({
+          interpolateTextures: !userParams.noInterpolation,
         });
+        reader.parseAsText(txt);
+        fileContents.mtl[relativePath] = reader;
       }
       if (relativePath.match(/\.jpg$/i) || relativePath.match(/\.png$/i)) {
-        workLoad++;
-        zipEntry.async('base64').then((txt) => {
-          const ext = relativePath.slice(-3).toLowerCase();
-          fileContents.img[relativePath] = `data:image/${ext};base64,${txt}`;
-          workLoad--;
-          done();
-        });
+        const txt = fromArrayBuffer(fileData);
+        const ext = relativePath.slice(-3).toLowerCase();
+        fileContents.img[relativePath] = `data:image/${ext};base64,${txt}`;
       }
     });
+
+    done();
   });
 }
 

Documentation/content/docs/gallery/ChestCTHybrid.png

@@ -1,3 +1,4 @@
+<p class='device_notification' style='color:red;'></p>
 <table>
   <h3>PBR Properties</h3>
   <tr>
@@ -35,3 +36,33 @@ <h3>PBR Properties</h3>
     </td>
   </tr>
 </table>
+<table>
+  <h3>Environment Properties</h3>
+  <tr>
+    <td>
+      <label>Use Textured Background: </label>
+      <input class='use_background' type='checkbox' checked='true'/>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <label>Specular Strength: </label>
+      <input class='e_specular' type='range' min='0.0' max='2.0' value='1.0' step='0.01' oninput="this.nextElementSibling.value = this.value"/>
+      <output>1.00</output>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <label>Diffuse Strength: </label>
+      <input class='e_diffuse' type='range' min='0.0' max='2.0' value='1.0' step='0.01' oninput="this.nextElementSibling.value = this.value"/>
+      <output>1.00</output>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <label>FOV: </label>
+      <input class='angle' type='range' min='30' max='120' value='30' step='1' oninput="this.nextElementSibling.value = this.value"/>
+      <output>30</output>
+    </td>
+  </tr>
+</table>