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/server.py

@@ -0,0 +1,17 @@
+import sys
+import os
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+import ssl
+
+
+def main(args=sys.argv):
+ os.system("openssl req -nodes -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -subj '/CN=mylocalhost'")
+ port = 443
+ httpd = HTTPServer(('0.0.0.0', port), SimpleHTTPRequestHandler)
+ httpd.socket = ssl.wrap_socket(httpd.socket, keyfile='key.pem', certfile="cert.pem", server_side=True)
+ print(f"Server running on https://0.0.0.0:{port}")
+ httpd.serve_forever()
+
+
+if __name__ == "__main__":
+ main()

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);
+ };
+}