Periodic Table of the Elements
May 2017, Ecosystem Experience Design | Analog | Microsoft
HoloLens 2 version – Direct hand interaction
HoloLens 1st gen version – Gaze & air-tap interaction
Periodic Table of the Elements is an open-source sample app published on GitHub. The intention was to demonstrate how to use MRTK’s UX building blocks to create Mixed Reality experiences. Through this project developers and creators can learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Also, it shows how to create interactable objects that respond to standard inputs from HoloLens.
The app visualizes the chemical elements and each of their properties in a 3D space. It incorporates the core interactions of HoloLens such as gaze and air tap. Users can learn about the elements with animated 3D models. They can visually understand an element’s electron shell and its nucleus – which is composed of protons and neutrons.
* Originally, I designed and developed the app for HoloLens 1st gen device back in 2017. With the release of HoloLens 2 and MRTK v2, I have updated the app to support hand-tracking and eye-tracking input.
Background
After I first experienced HoloLens, a periodic table app was an idea I knew that I wanted to experiment with in mixed reality. Since each element has many data points that are displayed with text, I thought it would be a great subject matter for exploring typographic composition in a 3D space. Being able to visualize the element’s electron model was another interesting part of this project.
Design
For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. The surface of each box would be translucent so that the user could get a rough idea of the element’s volume. With gaze and air tap, the user could open up a detailed view of each element. To make the transition between the table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.
In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. The animated 3D electron model is displayed in the center area and can be viewed from different angles.
The user can change the surface type by air tapping the buttons on the bottom of the table – they can switch between plane, cylinder, sphere and scatter.
Prototype running on HoloLens device:
Development
I used the following building blocks from MRTK to create the experience. Used open-source JSON file for the periodic table data and JSON parser to load and layout the elements in space.
Interactable Object
Object collection
Outcome
The Periodic Table of the Elements app has been used and referenced by many Mixed Reality developers. Some developers connected it with other cloud services or converted the app to run on other cross-platform devices. Internally, the Periodic Table app has been a useful sample app to validate the MRTK version upgrade whenever we release a new version of MRTK.
Some videos shared by the MR developer community
Updates for HoloLens 2
To help the developer and creator community, I wrote an article that shares my experience on bringing the Periodic Table app to HoloLens 2. You can find the porting story on the Periodic Table for HoloLens 2.
Updates for OpenXR + Unity2020 + MRTK 2.7
Wrote and shared a story on upgrading the Periodic Table app project to OpenXR and Unity 2020.
GitHub
https://github.com/Microsoft/MRDesignLabs_Unity_PeriodicTable
Docs
https://docs.microsoft.com/en-us/windows/mixed-reality/periodic-table-of-the-elements