Duplicate/clone GUI for primitive VR experience



I’m working on an app, using ionic/cordova/angular, which is supposed to run in browser as well as an app.

One aspect of it, is to be able to run on a mobile phone (android) in a VR headset. A simplified GUI (compared to browser version) is to be controlled with a bluetooth-joystick.

Now, what I am trying to do, is to “duplicate” the entire content of an or an element (which, effectively, contain the entire gui side of the app), and have a copy of it next to the original one. There is some drawing being done on a canvas (based on gyro measurements). A simpler approach is to duplicate this canvas to another one that’s placed next to it, which works per se, but looks silly, as soon as the side menus are to be shown, so cloning the entire app seems to be the better solution.

I’ve considered using WebVR, but can’t really figure out a viable “attack vector” which doesn’t involve writing a WebVR-only app (I’m not experienced in webvr, I must admit). Since no “fancy” true 3D stuff is needed, most “VR” api’s seem like a huge overkill.

Does anyone have any ideas or experiences on how this might be solved?



I have thought about trying out cloneNode() method in HTML5


@indridi hello, this is a very ambitious project because I’m still a newbie after 6 monthes, but Ionic relies mainly on Angular for 2D and 3D functions. I wouild suggest totally dumb things like:

  1. Use the cordova plugin geo ==> to store it locally ==> then send it to any cdn that is VERY fast in upload to accept answer.

All that is dumb of course, because for that kind of things, Cordova and in general PWA is said to be way to slow. If you can work with slow records, and async like with Ionic, but faster local records, I’d suggest you have a talk with @aaronsaunders who micro store transactions on very small micro local db. Might help you.

And it was something like lscache.js, but not that one, he clearly said another micro js to store things in a high i/o thing.


Thanks @FrancoisIonic ,
The geo cordova plugin I can find, seems to have something to do with geolocation, which doesn’t really apply here. Also, sending stuff to a web service for duplication will almost certainly have too much lag to be practical.

What I’m aiming for is to duplicate, or mirror, the content of the app. A naive code example:

 <ion-nav-view style="position:absolute;width:50%;left:0px;">
This is the app
<ion-nav-view style="position:absolute;width:50%;left:50%;"> 
the content in here should be a mirror of the stuff that is on the left side

This code actually results in two independent copies of the app running on the each side of the screen. What I want, is for one side to dynamically mirror the other, so, when a menu is opened on the left side, it pops up also on the right.

Dynamically copying the left side to a canvas on the right would also work, but I haven’t been able to figure out how to do that.