A Mixed Reality Solar System for Google Cardboard using Three.js

The relative sizes of the planets and moons sizes are incorrect (some are exaggeratedly huge), the orbit and rotation times are incorrect, and so are the orbital distances of the moons. This is purposely done so that you can easily see and follow the planets.

Preparations for using Solar System for Cardboard:
  1. Get Google Cardboard

    Or one of the many alternatives, such as Dodocase.
    The one I currently use: a ColorCross VR headset.

  2. Use a modern/powerful smartphone with Google's Chrome browser that supports these capabilities:
    • WebGL
      - For the 3d graphics (Three.js).
    • HTML5 video, support for navigator.getUserMedia and access to your phone's camera.
      - If HTML5 video is not supported then you can still enjoy the Solar System with a black background.
    • deviceorientation events
      - For detecting your phone's orientation.
    If you're not sure your phone supports all of these, just give it a try.

  3. Increase the "display sleep" settings of your phone to at least 10 minutes.
    Usually the "display sleep" time is quite low, and it is annoying when the screen goes dark while installed in Google Cardboard.

  4. Ensure your phone has a good internet connection (preferably wifi).
    Otherwise it may take a while to load all the textures.

Next, open up Chrome on your phone and go to this page (via complexity.zone) and click the button below:

  • Your phone will ask permission to access your phone's camera.
    - If you allow, then the planets are superimposed on the camera video image.
    - If you don't allow, then the planets are displayed in a black background.
    Note: If you deny camera access, Chrome may stop asking the next time you restart the app. If so, then you can re-enable the "ask for camera access" through Chrome's menu > Settings > Content settings > Website settings.

  • Then tap on the screen for displaying the image full screen (without the browser's address bar).
Next, place your phone in Cardboard and enjoy the view!

Doesn't work? It could be that your phone is not (yet) suitable for this app. Or it could be that there's a bug in my code. If so, please send me an e-mail and let me know the details, thanks.

The goal of this experiment?
    I wanted to create an 'AR' (or some form of Mixed Reality) experience for Google Cardboard
    using Web technology only.
Why AR?
    I really like the concept of VR, very excited about it, but I also like the concept of AR.
    I would like to eventually experience AR with the same intensity as Oculus Rift does for VR.
    This app is not yet true AR, but at least it is Mixed Reality, and the first step from VR
    to AR is to make the real world visible.
Why Google Cardboard?
    I like the idea of technology being available to everyone.
Why Web technology?
    I really think this is the way to go.

Limitations (work in progress):
  • There is no support for navigation with the phone (on the PC you can use the keyboard cursor keys to move around).
  • There is no interaction with or information about the planets or moons.

Experiments tried:
  • I successfully got AR marker tracking working (both with JSARToolKit and js-aruco), but found that the phone's camera video resolution was not high enough for stable tracking. Also, on my phone it slowed down the rendering too much for comfortable viewing. We'll have to wait for more power and more device access.

Thanks Mr.doob for Three.js.
Thanks planetpixelemporium.com for textures.
Thanks Google for Google Cardboard.

Tim Samshuijzen