ENH: add modelviewer example

Plus some small fixes.
pieper · May 28, 2023 · 98c0db8 · 98c0db8
1 parent cf0525b
commit 98c0db8
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 1 deletion.
diff --git a/Modules/Scripted/WebServer/CMakeLists.txt b/Modules/Scripted/WebServer/CMakeLists.txt
@@ -24,6 +24,7 @@ set(MODULE_PYTHON_RESOURCES
   Resources/docroot/ServerTests/timecube.html
   Resources/docroot/ServerTests/threejs.html
   Resources/docroot/ServerTests/threejs.css
+  Resources/docroot/ServerTests/modelviewer.html
   Resources/docroot/ServerTests/webgl-utils.js
   Resources/docroot/stylesheets/application.css
   )

diff --git a/Modules/Scripted/WebServer/Resources/docroot/ServerTests/modelviewer.html b/Modules/Scripted/WebServer/Resources/docroot/ServerTests/modelviewer.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <title>3D Slicer &lt;model-viewer&gt; example</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head> 
+
+  <body>
+
+    <div id="info">
+      <a href="https://modelviewer.dev" target="_blank" rel="noopener">3D Slicer modelviewer</a>
+      <p> Please wait while content is generated and loaded... (be sure Slicer's exec API is enabled)</p>
+    </div>
+
+    <model-viewer
+      style="width:512px; height:512px"
+      src="/slicer/threeDGraphics"
+      alt="A 3D model from Slicer"
+      shadow-intensity="1"
+      auto-rotate ar
+      camera-controls>
+    </model-viewer>
+
+  <footer>
+    <span>This page is a basic demo of the <a href="https://github.com/GoogleWebComponents/model-viewer" target="_blank">&lt;model-viewer&gt;</a> web component.</span>
+  </footer>
+
+  </body>
+
+  <script type="module" 
+    src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js">
+  </script>
+
+</html>
diff --git a/Modules/Scripted/WebServer/Resources/docroot/ServerTests/threejs.html b/Modules/Scripted/WebServer/Resources/docroot/ServerTests/threejs.html
@@ -10,7 +10,7 @@
 
         <div id="info">
             <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> Click on an object to toggle bloom<br>By pieper based on example from <a href="http://github.com/Temdog007" target="_blank" rel="noopener">Temdog007</a>
-            <p> Please wait while content is generated and loaded...</p>
+            <p> Please wait while content is generated and loaded... (be sure Slicer's exec API is enabled)</p>
         </div>
 
         <script type="x-shader/x-vertex" id="vertexshader">

diff --git a/Modules/Scripted/WebServer/Resources/docroot/index.html b/Modules/Scripted/WebServer/Resources/docroot/index.html
@@ -138,6 +138,20 @@ <h3>ThreeJS example</h3>
     </li>
   </ul>
 
+  <ul>
+    <li>
+      <a href='./ServerTests/modelviewer.html'>
+        <h3>modelviewer example</h3>
+      </a>
+      <p>Example of using Slicer data with Google's modelviewer web component for web and XR.</p>
+      <p>This example uses the /slicer/threeDGraphics endpoint to get a glTF representation of the threeD view.  If you have a segmentations or models in Slicer it will load your current threeD view, otherwise it will download a scene with sample models.</p>
+      <p>The data is loaded in <a href='https://modelviewer.dev'>modelviewer</a> demo scene.  </p>
+      <p>The javascript source code for this demo shows how to access the threeDGraphics endpoint and how to populate the mrml scene using the exec endpoint to send python code from javascript.</p>
+
+      <p>Depending on scene complexity this may take a few moments to load.</p>
+    </li>
+  </ul>
+
 </body>
 
 </html>
diff --git a/Modules/Scripted/WebServer/WebServerLib/SlicerRequestHandler.py b/Modules/Scripted/WebServer/WebServerLib/SlicerRequestHandler.py
@@ -982,6 +982,7 @@ def threeDGraphics(self, request):
             renderWindow = lm.threeDWidget(widgetIndex).threeDView().renderWindow()
             exporter = vtk.vtkGLTFExporter()
             exporter.SetInlineData(True)
+            exporter.SetSaveNormal(True)
             exporter.SetRenderWindow(renderWindow)
             result = exporter.WriteToString()
             lm.threeDWidget(widgetIndex).mrmlViewNode().SetBoxVisible(boxWasVisible)