WIP: AR support

ipyvolume/pylab.py

@@ -1803,11 +1803,11 @@ def light_hemisphere(
 def light_directional(
         light_color=default_color_selected,
         intensity=1,
-        position=[10, 10, 10],
+        position=[2, 2, 2],
         target=[0, 0, 0],
         near=0.1,
-        far=100,
-        shadow_camera_orthographic_size=10,
+        far=5,
+        shadow_camera_orthographic_size=3,
         cast_shadow=True):
     """Create a new Directional Light
 

ipyvolume/styles.py

@@ -3,6 +3,7 @@
 Possible properies
 
  * background-color
+ * background-opacity
  * axes
   * color
   * visible
@@ -31,6 +32,7 @@
 
 styles = {}
 _defaults = {
+    'background-opacity': 1.0,
     'axes': {'visible': True, 'label': {'color': 'black'}, 'ticklabel': {'color': 'black'}},
     'box': {'visible': True},
 }
@@ -73,6 +75,13 @@ def create(name, properties):
 minimal = {'box': {'visible': False}, 'axes': {'visible': False}}
 nobox = create("nobox", {'box': {'visible': False}, 'axes': {'visible': True}})
 
+_ar = {
+    'background-color': '#000001',  # for some reason we cannot set it to black!?!
+    'background-opacity': 0,
+}
+utils.dict_deep_update(_ar, minimal)
+ar = create("ar", _ar)
+
 if __name__ == "__main__":
     source = __file__
     dest = os.path.join(os.path.dirname(source), "../js/data/style.json")

ipyvolume/ui.py

@@ -25,6 +25,7 @@ class Container(v.VuetifyTemplate):
     children = traitlets.List().tag(sync=True, **widgets.widget_serialization)
     models = traitlets.Any({'figure': {}}).tag(sync=True)
     panels = traitlets.List(traitlets.CInt(), default_value=[0, 1, 2]).tag(sync=True)
+    ar_supported = traitlets.Bool(False).tag(sync=True)
 
 
 class Popup(v.VuetifyTemplate):

ipyvolume/vue/container.vue

@@ -29,6 +29,12 @@
                     </v-expansion-panel-content>
                 </v-expansion-panel>
             </v-expansion-panels>
+            <div v-if="ar_supported">
+                <v-btn @click="startAR" outlined>
+                    <v-icon left>mdi-glasses</v-icon>
+                    start ar
+                </v-btn>
+            </div>
         </div>
     </div>
 </template>
@@ -44,13 +50,17 @@
 
 <script>
     module.export = {
-        created() {
+        async created() {
             console.log('created', this.$refs)
+            if ('xr' in navigator) {
+                const supported = await navigator.xr.isSessionSupported('immersive-ar')
+                this.ar_supported = supported;
+            }
         },
         mounted() {
             const figureComponent = this.$refs.figure;
             (async () => {
-                const figure = await this.viewCtx.getModelById(this.figure.substr(10));
+                const figure = await this.figureModel;
                 function bbproxy(model, attrs, widgetAttrs) {
                     const proxy = {}
 
@@ -109,7 +119,18 @@
                 this.$set(this.models, 'figure', bbproxy(figure, ["show"]));
             })();
         },
+        computed: {
+            figureModel() {
+                return this.viewCtx.getModelById(this.figure.substr(10))
+            }
+        },
         methods: {
+            getFigureModel() {
+                return
+            },
+            async startAR() {
+                (await this.figureModel).set('start_ar', true);
+            }
         }
     }
 

ipyvolume/widgets.py

@@ -358,6 +358,8 @@ class Figure(ipywebrtc.MediaStream):
         pythreejs.Camera, allow_none=True, help='A :any:`pythreejs.Camera` instance to control the camera'
     ).tag(sync=True, **widgets.widget_serialization)
 
+    start_ar = traitlets.Bool(False).tag(sync=True)
+
     @traitlets.default('camera')
     def _default_camera(self):
         # see https://github.com/maartenbreddels/ipyvolume/pull/40 for an explanation

js/data/style.json

@@ -1,78 +1,76 @@
 {
+  "light": {
+    "background-color": "white",
+    "axes": {
+      "color": "black"
+    }
+  },
+  "dark": {
+    "background-color": "#000001",
+    "axes": {
+      "color": "white",
+      "label": {
+        "color": "white"
+      },
+      "ticklabel": {
+        "color": "white"
+      }
+    }
+  },
   "demo": {
     "background-color": "white",
     "box": {
       "color": "pink",
       "visible": true
     },
     "axes": {
-      "z": {
-        "color": "#00f",
-        "ticklabel": {
-          "color": "#0f0"
-        },
-        "label": {
-          "color": "#f00"
-        }
-      },
-      "ticklabel": {
-        "color": "black"
-      },
-      "label": {
-        "color": "black"
-      },
+      "color": "black",
+      "visible": true,
       "x": {
         "color": "#f00",
-        "ticklabel": {
-          "color": "#00f"
-        },
         "label": {
           "color": "#0f0"
+        },
+        "ticklabel": {
+          "color": "#00f"
         }
       },
       "y": {
         "color": "#0f0",
-        "ticklabel": {
-          "color": "#f00"
-        },
         "label": {
           "color": "#00f"
+        },
+        "ticklabel": {
+          "color": "#f00"
         }
       },
-      "color": "black",
-      "visible": true
+      "z": {
+        "color": "#00f",
+        "label": {
+          "color": "#f00"
+        },
+        "ticklabel": {
+          "color": "#0f0"
+        }
+      }
     }
   },
-  "dark": {
-    "background-color": "black",
+  "nobox": {
     "box": {
-      "visible": true
+      "visible": false
     },
     "axes": {
-      "color": "white",
-      "ticklabel": {
-        "color": "white"
-      },
-      "visible": true,
-      "label": {
-        "color": "white"
-      }
+      "visible": true
     }
   },
-  "light": {
-    "background-color": "white",
+  "ar": {
+    "background-color": "#000001",
+    "background-opacity": 0,
     "box": {
-      "visible": true
+      "visible": false
     },
     "axes": {
-      "color": "black",
-      "ticklabel": {
-        "color": "black"
-      },
-      "visible": true,
-      "label": {
-        "color": "black"
-      }
+      "visible": false
     }
   }
 }

js/package.json

@@ -91,7 +91,7 @@
     "ndarray-pack": "^1.2.1",
     "screenfull": "^3.3.1",
     "style-loader": "^0.18.2",
-    "three": "^0.97.0",
+    "three": "^0.112.1",
     "three-text2d": "~0.4.1",
     "tslint": "^5.20.0",
     "underscore": "^1.8.3",

js/src/ar.js

@@ -0,0 +1,106 @@
+export const closeOverlay = document.createElement("div");
+closeOverlay.style.display = "none";
+document.body.appendChild(closeOverlay);
+
+let onClose = () => console.log("onClose not set");
+
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+svg.setAttribute("width", 38);
+svg.setAttribute("height", 38);
+svg.style.position = "absolute";
+svg.style.right = "20px";
+svg.style.top = "20px";
+svg.addEventListener("click", () => onClose());
+closeOverlay.appendChild(svg);
+
+const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
+path.setAttribute("stroke", "#fff");
+path.setAttribute("stroke-width", 2);
+svg.appendChild(path);
+
+function setOnClose(fn) {
+    onClose = fn;
+}
+
+function showCloseOverlay(value) {
+    closeOverlay.style.display = value ? "" : "none";
+}
+
+let lastXrTransform = null;
+let lastWidth = null;
+let lastHeight = null;
+
+export function createController(renderer, scene, onSelect) {
+    const arController = renderer.xr.getController(0);
+    arController.addEventListener("select", () => onSelect(lastXrTransform));
+    scene.add(arController);
+    return arController;
+}
+
+export async function start(renderer, renderFn, onStop) {
+    if (renderer.xr.getSession() !== null) {
+        return;
+    }
+    renderer.xr.enabled = true;
+
+    const sessionInit = {
+        optionalFeatures: ["dom-overlay", "hit-test"],
+        domOverlay: { root: closeOverlay }
+    };
+
+    showCloseOverlay(true);
+
+    const session = await navigator.xr.requestSession("immersive-ar", sessionInit);
+    renderer.xr.setReferenceSpaceType("local");
+    renderer.xr.setSession(session);
+    const { x, y } = renderer.getSize();
+    lastWidth = x;
+    lastHeight = y;
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    lastXrTransform = null;
+
+    renderer.setAnimationLoop(
+        await extractHitTransform(
+            renderer,
+            renderFn,
+            (xrTransform) => { lastXrTransform = xrTransform; }));
+
+    setOnClose(onStop);
+}
+
+export function stop(renderer) {
+    if (renderer.xr.getSession() === null) {
+        return;
+    }
+    renderer.xr.getSession().end();
+    renderer.xr.setSession(null);
+    lastXrTransform = null;
+    showCloseOverlay(false);
+    renderer.setAnimationLoop(() => null);
+    renderer.setSize(lastWidth, lastHeight);
+}
+
+async function extractHitTransform(renderer, renderFn, onXrTransformChange) {
+    const session = renderer.xr.getSession();
+    const referenceSpace = await session.requestReferenceSpace("viewer");
+    const hitTestSource = await session.requestHitTestSource({ space: referenceSpace });
+
+    return (time, frame) => {
+        if (frame) {
+            // based on https://threejs.org/examples/webxr_ar_hittest.html
+            const referenceSpace = renderer.xr.getReferenceSpace();
+
+            if (hitTestSource) {
+                const hitTestResults = frame.getHitTestResults(hitTestSource);
+                if (hitTestResults.length) {
+                    const hit = hitTestResults[0];
+                    const pose = hit.getPose(referenceSpace);
+                    onXrTransformChange(pose.transform);
+                }
+            }
+        }
+        renderFn(time, frame);
+    };
+}