From 98c0db8b6f32a2f76af1967f6ea7b9925b6848e4 Mon Sep 17 00:00:00 2001
From: Steve Pieper <pieper@isomics.com>
Date: Sun, 28 May 2023 14:02:35 -0400
Subject: [PATCH] ENH: add modelviewer example

Plus some small fixes.
---
 Modules/Scripted/WebServer/CMakeLists.txt     |  1 +
 .../docroot/ServerTests/modelviewer.html      | 37 +++++++++++++++++++
 .../docroot/ServerTests/threejs.html          |  2 +-
 .../WebServer/Resources/docroot/index.html    | 14 +++++++
 .../WebServerLib/SlicerRequestHandler.py      |  1 +
 5 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 Modules/Scripted/WebServer/Resources/docroot/ServerTests/modelviewer.html
diff --git a/Modules/Scripted/WebServer/CMakeLists.txt b/Modules/Scripted/WebServer/CMakeLists.txt
index 53df5e9837c..dfe0cd1633b 100644
--- 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
new file mode 100644
index 00000000000..688eed231a4
--- /dev/null
+++ 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
index d051690dd18..a830a127963 100644
--- 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
index fbf2ee63491..ac34d854388 100644
--- 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
index eb93abdf571..8f1ab7a22f6 100644
--- 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)
