要素の定期処理テーブルPeriodic Table of the Elements


この資料で説明した調査用のサンプル、混合現実デザイン Labs、について学習したことを共有の場所とに関する推奨事項は、現実アプリ開発を混在させます。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. 実際にはアプリのエクスペリエンスを混合独自に作成する、このプロジェクトのコンポーネントを使用することができます。You can use this project's components to create your own mixed reality app experience.


アプリの詳細について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. 要素の electron シェルであり、その中核は-protons と neutrons で構成されますが、視覚的に理解できます。They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.


HoloLens をまずが発生した後、周期表アプリは、複合現実で実験したいことがわかってアイデアをしました。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. 要素の電子モデルを視覚化することがこのプロジェクトの別の興味深い部分です。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. 視線入力や air をタップして、ユーザーは各要素の詳細なビューを開くでした。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 electron モデルでは、中央の領域に表示され、さまざまな角度から表示できます。The animated 3D electron model is displayed in the center area and can be viewed from different angles.


プロトタイプの対話Interaction prototypes

ユーザーは、テーブルの下部にあるボタンをタップして air によってサーフェスのタイプを変更することができます - プレーン、円柱、球、散布図を切り替えることができます、します。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. これは、任意のオブジェクトを簡単に適用できるプレハブ/スクリプトとして提供されます。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



既定では、ホログラムをユーザーが gazing は場所に配置するが、現時点では、アプリケーションが起動します。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 デザイン Labs GitHubします。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

要素のサンプルの定期テーブルとしては、同じコントロールと対話モデルを使用して、株式市場データを視覚化するアプリを構築できます。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)
要素のサンプル アプリの定期的テーブルで使用されるオブジェクトのコレクションを財務アプリで使用する方法の例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

これは、オブジェクトのコレクションと要素のサンプル アプリの定期的テーブルからその他のコンポーネントを使用して、スポーツ データの視覚化の例です。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)
要素のサンプル appcould の周期の表ではオブジェクトのコレクションを使用する方法の例は、スポーツ アプリで使用します。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 ドン Yoon ParkDong Yoon Park
UX デザイナー @MicrosoftUX Designer @Microsoft

関連項目See also