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



Run Solar System for Cardboard

Note:

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:

Get Google Cardboard





Or one of the many alternatives, such as Dodocase .

The one I currently use: a ColorCross VR headset.



Use a modern/powerful smartphone with Google's Chrome browser that supports these capabilities:

WebGL

- For the 3d graphics (Three.js).

- 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.

- 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.



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.



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.





- 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. 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!

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.

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.