원소의 주기율표Periodic Table of the Elements

참고

이 문서에서는 혼합 현실 앱 개발에 대 한 학습 정보 및 제안을 공유 하는 위치를 혼합 현실 디자인 랩에서만든 예비 샘플에 대해 설명 합니다.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 an open-source sample app from Microsoft's Mixed Reality Design Labs. 개체 컬렉션 을 사용 하 여 다양 한 표면 형식으로 3d 공간에서 개체의 배열을 레이아웃 하는 방법에 대해 알아봅니다.Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. 또한 HoloLens에서 표준 입력에 응답 하는 interactable 개체를 만드는 방법에 대해 알아봅니다.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.

요소 앱의 기간 테이블

데모 동영상Demo video

혼합 현실 캡처를 사용 하 여 HoloLens 2로 기록 됨Recorded with HoloLens 2 using Mixed Reality Capture

앱 정보About the app

요소의 주기적 테이블은 시각화 요소와 각 속성을 3D 공간에 만듭니다.Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. 이 도구는 응시 및 air 탭과 같은 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.

배경Background

HoloLens를 처음 경험 한 후에는 혼합 현실에서 정기적으로 테이블 앱을 시험 하고자 했습니다.After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app 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. 사용자에 게 요소의 전자 모델을 시각화할 수 있는 기회를이 프로젝트의 또 다른 흥미로운 부분으로 제공 합니다.Giving users the chance to visualize the element's electron model was another interesting part of this project.

디자인Design

정기적 테이블의 기본 보기에서는 각 요소의 전자 모델을 포함 하는 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 전자 모델은 가운데 영역에 표시 되며 다른 각도에서 볼 수 있습니다.The animated 3D electron model is displayed in the center area and can be viewed from different angles.

상호 작용

모델링할Prototypes
상호 작용 프로토타입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 개체 (button)Interactable object (button)

Interactable 개체 는 기본 HoloLens 입력에 응답할 수 있는 개체입니다.Interactable object is an object, which can respond to basic HoloLens inputs. Prefab/스크립트로 제공 되며 개체에 쉽게 적용할 수 있습니다.It's provided as a prefab/script, which you can easily apply to any object. 예를 들어 장면 interactable에서 커피 컵을 만들고 응시, 공중 탭, 탐색 및 조작 제스처와 같은 입력에 응답할 수 있습니다.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

개체 컬렉션

기술 세부 정보Technical details

혼합 현실 디자인 실험 GitHub에서 Elements 앱의 주기 테이블에 대 한 스크립트 및 prefabs를 찾을 수 있습니다.You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

HoloLens의 포팅 스토리 2Porting story for HoloLens 2

요소 앱의 주기 테이블이 HoloLens 2의 instinctual 상호 작용으로 업데이트 된 방법에 대 한 스토리를 읽어 보세요.Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

원소의 주기율표 2.0Periodic Table of the Elements 2.0

작성자 정보About the author

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
UX 디자이너 @MicrosoftUX Designer @Microsoft

참조See also