要素の定期的なテーブルPeriodic Table of the Elements


この記事では、 Mixed Reality 設計ラボで作成した探索的サンプルについて説明します。これは、学習の概要と、mixed reality アプリの開発に関する提案を共有する場所です。This article discusses an exploratory sample we’ve created in the Mixed Reality Design Labs, a place where we share our learnings about and suggestions for mixed reality app development. 設計関連の記事とコードは、新しい検出を行うと進化します。Our design-related articles and code will evolve as we make new discoveries.

要素の定期テーブルは、Microsoft の混合現実設計ラボのオープンソースのサンプルアプリです。Periodic Table of the Elements is a open-source sample app from Microsoft's Mixed Reality Design Labs. このプロジェクトでは、 オブジェクトコレクション を使用して、さまざまな種類の種類の3d 空間にオブジェクトの配列をレイアウトする方法を学習できます。With this project, you can learn how to lay out an array of objects in 3D space with various surface types using an Object collection. また、HoloLens から標準入力に応答する対話型オブジェクトを作成する方法についても説明します。Also learn how to create interactable objects that respond to standard inputs from HoloLens. このプロジェクトのコンポーネントを使用して、独自の mixed reality アプリエクスペリエンスを作成することができます。You can use this project's components to create your own mixed reality app experience.

Elements アプリの期間テーブル

アプリについてAbout the app

要素の周期テーブルは、3D 空間の化学要素と各プロパティを視覚化します。Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. これには、宝石やエアタップなどの HoloLens の基本的なやり取りが組み込まれています。It incorporates the basic interactions of HoloLens such as gaze and air tap. ユーザーは、アニメーション化された3D モデルを使用して要素について学習できます。Users can learn about the elements with animated 3D models. 要素の電子シェルとその中核を視覚的に理解できます。これは、protons と neutrons で構成されています。They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.


初めて HoloLens を使用した後、定期的なテーブルアプリは、mixed reality で試してみたいと思っていました。After I first experienced HoloLens, a periodic table app was an idea I knew that I wanted to experiment with in mixed reality. 各要素には、テキストと共に表示されるデータポイントが多数あるため、3D 空間でのタイポグラフィの合成を調べるのには大きな問題があると考えました。Since each element has many data points that are displayed with text, I thought it would be great subject matter for exploring typographic composition in a 3D space. このプロジェクトでは、要素の電子モデルを視覚化できることがもう1つの興味深い部分でした。Being able to visualize the element's electron model was another interesting part of this project.


周期テーブルの既定のビューについては、各要素の電子モデルを含む3次元のボックスを想定しています。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 table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.

スケッチのデザインDesign sketch
スケッチのデザインDesign sketches

詳細ビューでは、美しくに表示されるテキストを使用して、各要素の情報を3D 空間に視覚化する必要がありました。In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. アニメーション化された3D 電子モデルは中心領域に表示され、さまざまな角度から表示できます。The animated 3D electron model is displayed in the center area and can be viewed from different angles.


相互作用プロトタイプInteraction prototypes

ユーザーは、テーブルの下部にあるボタンをエアタップすることで、画面の種類を変更できます。平面、円柱、球体、および散布を切り替えることができます。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 and patterns used in this app

対話型オブジェクト (ボタン)Interactable object (button)

対話型オブジェクトは、基本的な HoloLens 入力に応答できるオブジェクトです。Interactable object is an object which can respond to basic HoloLens inputs. これは、任意のオブジェクトに簡単に適用できる事前 fab/スクリプトとして提供されています。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. 詳細Learn more

nteractable オブジェクト

オブジェクトコレクションObject collection

オブジェクトコレクションは、さまざまな図形で複数のオブジェクトをレイアウトするのに役立つオブジェクトです。Object collection is an object which helps you lay out multiple objects in various shapes. 平面、円柱、球、および散布図がサポートされています。It supports plane, cylinder, sphere and scatter. Radius、行の数、間隔などの追加のプロパティを構成できます。You can configure additional properties such as radius, number of rows and the spacing. 詳細Learn more



既定では、ホログラムは、アプリケーションが起動された時点でユーザーが使用している場所に配置されます。By default, holograms will be placed in the location where the user is gazing at the moment the application is launched. これは、たとえば、ホログラムが壁の内側またはテーブルの中央に配置されているなど、望ましくない結果につながることがあります。This sometimes leads to unwanted result such as holograms being placed behind a wall or in the middle of a table. [Fitbox] を使用すると、ユーザーは、宝石を使用して、ホログラムが配置される場所を決定できます。A fitbox allows a user to use gaze to determine the location where the hologram will be placed. これは、独自のイメージまたは3D オブジェクトを使用して簡単にカスタマイズできる単純な PNG イメージテクスチャを使用して作成されます。It is made with a simple PNG image texture which can be easily customized with your own images or 3D objects.


技術的な詳細Technical details

Mixed Reality Design Labs GitHubでは、Elements アプリの周期テーブルのスクリプトと prefabs を見つけることができます。You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

アプリケーションの例Application examples

ここでは、このプロジェクトのコンポーネントを利用して作成できるものについて、いくつかのアイデアを示します。Here are some ideas for what you could create by leveraging the components in this project.

株価データ可視化アプリStock data visualization app

Elements サンプルの定期テーブルと同じコントロールと相互作用モデルを使用して、株式市場データを視覚化するアプリを作成できます。Using the same controls and interaction model as the Periodic Table of the Elements sample, you could build an app which visualizes stock market data. この例では、オブジェクトコレクションコントロールを使用して、球体図形にストックデータを配置します。This example uses the Object collection control to lay out stock data in a spherical shape. 各在庫に関する追加情報が興味深い方法で表示されるような詳細ビューを想像することができます。You can imagine a detail view where additional information about each stock could be displayed in an interesting way.

アプリケーションの例:Finance (1/3)

アプリケーションの例:Finance (2/3)

アプリケーションの例:Finance (3/3)Application example: Finance (3 of 3)
Elements サンプルアプリの定期テーブルで使用されるオブジェクトコレクションを finance アプリで使用する方法の例An example of how the Object collection used in the Periodic Table of the Elements sample app could be used in a finance app

スポーツアプリSports app

ここでは、オブジェクトコレクションや、Elements サンプルアプリの定期テーブルのその他のコンポーネントを使用して、スポーツデータを視覚化する例を示します。This is an example of visualizing sports data using Object collection and other components from the Periodic Table of the Elements sample app.

アプリケーションの例:スポーツ (1/3)

アプリケーションの例:スポーツ (2/3)

アプリケーションの例:スポーツ (3/3)Application example: Sports (3 of 3)
要素の定期テーブルで使用されるオブジェクトコレクションをスポーツアプリで使用する方法の例An example of how the Object collection used in the Periodic Table of the Elements sample appcould be used in a sports app

作成者についてAbout the author

Picture of Dong Yoon Park 駐車中Dong Yoon Park
UX デザイナー@MicrosoftUX Designer @Microsoft

関連項目See also