Solar System AR

• 

  Demo of AR mode using desktop emulator IWER

• 

  In-browser render using artificial background

• 

  Homepage

Inspiration

Bill Nye Demonstrates Distance Between Planets. The planets are unbelievably away from each other. I thought using AR to project the planets and their orbits can help visualize the aforementioned scale of things.

What it does

There are two modes.

AR mode

This mode requires you use a chrome based browser on android with your phone's camera. The planets and their orbits will be projects in the live feed of the camera. Unfortunetly, this technology uses webXR which is still in its early phase. This tech is quite experimental and therefore doesn't have a good support across devices.

Browser mode

In case your device does not support webXR the app can also render the scene in your browser. This won't be as pretty but it's better then nothing.

Challenges I ran into

Way too many. This was my first time working in 3D. I am still a novice with Three.js so I fell into many pitfalls.

I had to scrap my initial idea of using AR to replace the moon with the planets in the sky to show just how massive they are. This proved to be quite challenging because as it turns out rendering things really far away accurately is very difficult because of computers limited capabilities in doing precise floating-point arithmetic.

Next I pivoted to rendering the solar system in the vicinity of the user. This had its own problems because of the limited support of webXR and AR technology in mobile phones, especially ones with low-end hardware. The objects would start drifting or models would start disappearing if the gyroscopic sensors aren't accurate.

Accomplishments that I'm proud of

I think it all went pretty well with all things considered. I got to use Three.js for the first (but not the last) time and working in 3D was quite fun. This motivated me to incorporate more 3D stuff across my other projects.

What we learned

Most of the tech I work with is very stable so working with experimental technology was quite the learning experience. It really tested my abilities of scavenging the net and making the most out of the very little info I could find especially in a limited time frame.

Special thanks

to solar system scope for providing planet textures. This saved me hours of work that I would have had to spend in blender creating my own GTLF and 3D models. Instead I created the mesh imperatively in code and just applied the texture on the fly.

Built With

• react
• tailwind
• three.js
• typescript