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.

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.

About the app

Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. It incorporates the basic 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.

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.

Idea sketches

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.

Prototypes for the element box layout and interaction

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.

Common controls

Interactable Object

Interactable object is an object which can respond to basic HoloLens inputs. It is provided as a prefab/script which you can easily apply to any object. For example, you can make a coffee cup in your scene interactable and respond to inputs such as gaze, air tap, navigation and manipulation gestures.

Object collection

Object collection is an object which helps you lay out multiple objects in various shapes. It supports plane, cylinder, sphere, and scatter. You can configure additional properties such as radius, number of rows, and spacing.

Updates for HoloLens 2

You can find the porting story on the Periodic Table for HoloLens 2.

https://dongyoonpark.medium.com/bringing-the-periodic-table-of-the-elements-app-to-hololens-2-with-mrtk-v2-a6e3d8362158

Updates for OpenXR + Unity2020 + MRTK 2.7

This is a story on upgrading the project to OpenXR and Unity 2020.

https://dongyoonpark.medium.com/updating-mrtk-mixed-reality-project-to-openxr-unity-2020-periodic-table-of-the-elements-4cf55b0479a4

GitHub

https://github.com/Microsoft/MRDesignLabs_Unity_PeriodicTable

Docs

https://docs.microsoft.com/en-us/windows/mixed-reality/periodic-table-of-the-elements