{"id":251,"date":"2017-11-20T05:29:05","date_gmt":"2017-11-20T05:29:05","guid":{"rendered":"http:\/\/dongyoonpark.com\/?p=251"},"modified":"2024-10-12T17:29:19","modified_gmt":"2024-10-12T17:29:19","slug":"museum-of-type-windows-mixed-reality-app-design-development-story","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/museum-of-type-windows-mixed-reality-app-design-development-story","title":{"rendered":"Museum of Type for Mixed Reality"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 61.85%;\"><figure><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/ArtisticSnivelingDoe?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fd5019aea3194f76a0c838752e35efcc7%3FpostId%3D95ef8b35f196\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/figure><\/div>\n\n\n\n<p id=\"4fbd\">Last year, with my love of typography, I have explored spatial text layout in the physical space and introduced two apps for HoloLens.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typography Insight for HoloLens<\/strong>: A spatial type layout and reference tool for learning and experimenting with type in physical space.<br>(<a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\">Medium post: Designing Typography Insight for HoloLens<\/a>)<\/li>\n\n\n\n<li><strong>News Space for HoloLens<\/strong>: A spatial news headline visualizer which fills up your room with the latest news headlines.<br>(<a href=\"https:\/\/medium.com\/@dongyoonpark\/news-space-for-hololens-spatial-news-headline-visualizer-in-mixed-reality-669afbdc3b41\">Medium post: News Space for HoloLens<\/a>)<\/li>\n<\/ul>\n\n\n\n<p id=\"0304\">With Windows Mixed Reality immersive headsets, I have continued my journey, exploring the possibilities of the typography education in the virtual space.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*z-TI9h4890Mhb0TGjQ718Q.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Windows Mixed Reality headset with motion controllers (Image credit: DELL)<\/figcaption><\/figure>\n\n\n\n<p id=\"0a77\"><a href=\"https:\/\/youtu.be\/CeJD_DP1YMY\" rel=\"noreferrer noopener\" target=\"_blank\">Museum of Type<\/a>&nbsp;is a virtual museum where you can explore and learn about historically important typefaces. With motion controllers, you can pick up type and observe its detailed shape and characteristics. I wanted to share my design and development story.<\/p>\n\n\n\n<p id=\"b49a\"><strong><em>*I work at Microsoft as a User Experience Designer. Museum of Type, Typography Insight for HoloLens and News Space are my personal projects. All experiments and related opinions are my own.<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fcaa\">Background<\/h2>\n\n\n\n<p id=\"1d8b\">Typography, all the details, and classification of type can be a dry subject and could block the way to learning for many young people and students in this digital era. Books are great but often books on typography get left on the shelves. With mixed reality experience, I wanted to bridge that gap by making the subject come alive, by making it more tactile, physical, and interactable. Typography education leveraging new media and interaction design has been my consistent research topic as you can find in&nbsp;<a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\">my previous article<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/samefailingichneumonfly\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/samefailingichneumonfly\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Typography Insight for HoloLens (2016)\n\n<\/figcaption>\n<\/figure>\n\n\n\n<p id=\"0c14\">When I first experienced virtual reality, I was really excited about the fact that I can construct my own virtual environment at any scale. With this interest in the virtual environment, I started thinking about an imaginary museum space where I can walk around, observe and learn about historically important beautiful typefaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"15d6\">Sketches<\/h2>\n\n\n\n<p id=\"1cc2\">I started sketching out some ideas about the environment. Since this will be a space for type, I wanted to make it a clean, undecorated environment where a user can focus on the content: beautiful typefaces and their history. Because of this, I started with simple planes, and cubes with pure white color to construct the environment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*q0MBpxto1Ld4pOJ---QQEw.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Sketches for the environment and content<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"27fb\">Setting up the tools and environment<\/h2>\n\n\n\n<p id=\"42ec\">Since I learned the importance of experiencing my design in the device from HoloLens app design, I quickly started creating this environment in Unity to see how it feels like in the actual headset. These are the required tools for Windows Mixed Reality app development.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2017\/10\/17\/get-windows-10-fall-creators-update\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Windows 10 Fall Creators Update<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/beta.unity3d.com\/download\/b1565bfe4a0c\/UnityDownloadAssistant.exe\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Unity 2017.2.0p1-MRTP4<\/strong><\/a><br>Unity Mixed Reality Technical Preview is specifically made for Windows Mixed Reality. You need the MRTP version of Unity to develop apps for Windows Mixed Reality\u2019s immersive headsets.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.visualstudio.com\/downloads\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Visual Studio 2017 Community<\/strong><\/a><strong>+&nbsp;<\/strong><a href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/downloads\/windows-10-sdk\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Fall Creators Update SDK (16299)<\/strong><\/a><strong><br><\/strong>Windows 10 SDK 16299 can be installed in Visual Studio\u2019s installation process.<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Mixed Reality Toolkit (MRTK)<\/strong><\/a><br>MRTK contains foundational components for the mixed reality app development. In my project, I used input-related components for the motion controllers and UX components for the button and menu UIs. Here are some of the useful example scenes you can find in MRTK:<br>&#8211;&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit-Examples\/Input\/Scenes\" rel=\"noreferrer noopener\" target=\"_blank\">Motion Controller Test<\/a><br>&#8211;&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit-Examples\/MotionControllers-GrabMechanics\" rel=\"noreferrer noopener\" target=\"_blank\">Grab Mechanics Examples<\/a><br>&#8211;&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_InteractableObjectExample.md\" rel=\"noreferrer noopener\" target=\"_blank\">Interactable Object Examples<\/a><br>&#8211;&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_ObjectCollection.md\" rel=\"noreferrer noopener\" target=\"_blank\">Object Collection Examples<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*K4RYcnxpjGK5GFHqgSQ07A.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Useful building blocks and example scenes in Mixed Reality Toolkit<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PC and Windows Mixed Reality headset with motion controllers<\/strong><br>You can find&nbsp;<a href=\"https:\/\/www.microsoft.com\/en-us\/windows\/windows-mixed-reality\" rel=\"noreferrer noopener\" target=\"_blank\">Windows Mixed Reality headsets from Microsoft Store<\/a>. For the PC, I used my DELL nspiron 7559 laptop which was used for my HoloLens app development. It has an Intel Core i7\u20136700HQ with NVIDIA GTX 960M. Even though this is not a high-performance gaming laptop, I was able to develop apps for Windows Mixed Reality without any performance issue.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"afa8\">Design &amp; Development iteration with Unity and Mixed Reality Portal<\/h2>\n\n\n\n<p id=\"445e\">I started using&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit-Examples\/Input\/Scenes\" rel=\"noreferrer noopener\" target=\"_blank\">Motion Controller Test scene in MRTK<\/a>&nbsp;since it had basic motion controller and camera setup for Windows Mixed Reality. This scene already includes basic teleportation and locomotion with motion controllers. Because of this, you can easily create something in Unity editor and move around with motion controllers wearing the headset.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*QFLru47xAjl98FfnPXf-Xg.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Motion controllers paired and ready in Mixed Reality Portal<\/figcaption><\/figure>\n\n\n\n<p id=\"ed11\">To experience your scene in the immersive headset, open Windows Mixed Reality Portal app and make sure your motion controller is paired and working well in the cliff house.<\/p>\n\n\n\n<p id=\"94ac\">While Mixed Reality Portal is running, simply hit Unity\u2019s \u2018Play\u2019 button to enter the game mode. This mode allows you preview your scene without building\/deploying your project. Now put on your headset and you will see your scene in three-dimensional space with your motion controllers. Using this Unity\u2019s game mode preview, you can quickly experience and iterate your design ideas with your headset.&nbsp;<mark>Always, experiencing and testing your design in the headset is very important in MR app design and development. It could be quite different from what you imagined and designed in the 2D editor.<\/mark><\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/InfamousValidChinchilla\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/InfamousValidChinchilla\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">When you click \u2018Play\u2019 in Unity, your scene is launched in your in your headset instantly\n<\/figcaption>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"b23e\">Constructing the virtual museum environment<\/h2>\n\n\n\n<p id=\"9a9f\">I started laying out the walls using Unity\u2019s cube game object and added text content in the space. With some iterations, I&nbsp;<mark>was able to find right size and distance for the objects and text size in three-dimensional space<\/mark>. I also played with lighting and material for the walls to get a proper amount of contrast with shadow. Since I am not familiar with shader programming, I picked up one of the materials in MRTK and tweaked it for my environment.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*kEu7UTLm6wyUMktnlYGvfQ.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Layout and locomotion testing in Unity<\/figcaption><\/figure>\n\n\n\n<p id=\"6f6d\">In Unity\u2019s game mode, you can still click the scene tab and select\/modify any object in the scene hierarchy. You can see your updates in real-time in the headset. This was really helpful for fine-tuning detailed color, size, and the position of the objects.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*Ykd7zY4EnfBTly6kng-p6A.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Initial test of the skybox, color, material and text rendering in space<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*naFkZMcKNlBsBrRX36rT2g.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Initial test of the skybox, color, material and text rendering in space<\/figcaption><\/figure>\n\n\n\n<p id=\"bfaa\">In virtual reality world, the skybox is an important element that impacts your app experience. You can simply think it as three-dimensional background. Since it is surrounding your entire space, you can use 360-degree images as a texture for the skybox.<\/p>\n\n\n\n<p id=\"9c0c\">The floor is also an important element in virtual reality experience. It makes the user fee<mark>l safe and gr<\/mark>ounded. The floor is included in the&nbsp;<strong>MixedRealityCamera.prefab<\/strong>&nbsp;in MRTK. I just updated the color of the material for my app experience.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*b7VqIN4lMaida9gX1hpAOg.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Building content and environment in Unity<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5354\">Direct manipulation with motion controllers<\/h2>\n\n\n\n<p id=\"9245\">After establishing basic museum environment, I started placing some of the sample type glyphs in the space. I wanted to make it grabbable so that user can pick up, hold and observe its detailed shape. Usually, we don\u2019t have a chance to observe 2D type in a three-dimensional way in real-life. As a type lover, being able to grab type and&nbsp;<mark>observe it from a different angle was a very exciting experience<\/mark>.<\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/EnlightenedDefinitiveGelding\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/EnlightenedDefinitiveGelding\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Grab Mechanics Example scene in MRTK\n<\/figcaption>\n<\/figure>\n\n\n\n<p>To make the type grabbable with motion controllers, I used grabber scripts from&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit-Examples\/MotionControllers-GrabMechanics\" rel=\"noreferrer noopener\" target=\"_blank\">Grab Mechanics Example scene in MRTK<\/a>. This example scene contains useful scripts and prefabs for grabbing and throwing objects with motion controllers. Just simply assigning GrabbableChild and ThrowableObject scripts made my sample type glyphs grabbable with motion controllers. Direct manipulation with motion controllers is one of the most exciting and fun interactive experience in mixed reality.<\/p>\n\n\n\n<p id=\"352b\">Since the motion controllers do not have a rigid body or box collider in default, you cannot grab objects directly. Grab Mechanics Example scene uses two cubes as controllers that have a rigid body and box collider. To make default controllers work with grabbing behavior, you can attach these controller cubes to the controllers. Of course, you can hide the visual of these cube by simply changing the opacity with \u2018fade\u2019 option in the material.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*wuoM-5kZBdRpE8YlepVa9Q.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Rigid body &amp; box collider (blue box) attached to the controllers for grabbing objects<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*MN6NaZcFCsK02f4WGJo4CQ.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The object also needs a box collider(green outline) to make it grabbable<\/figcaption><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/LoathsomeAdmirableEquine\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/LoathsomeAdmirableEquine\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Interacting with type with motion controllers is fun!\n\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ec1c\">Optimizing text rendering quality<\/h2>\n\n\n\n<p id=\"ee57\">I have introduced some of the technics for optimizing the text rendering quality in Unity (3DTextMesh and UIText), in&nbsp;<a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\">my previous<\/a><mark><a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\">&nbsp;article<\/a><\/mark><mark>. Now Unity has new text component \u2018<\/mark><mark><a href=\"https:\/\/www.assetstore.unity3d.com\/en\/#!\/content\/17662\" rel=\"noreferrer noopener\" target=\"_blank\">TextMeshPro\u2019&nbsp;<\/a><\/mark><mark>which enables crisp text rendering regardless<\/mark>&nbsp;of the distance and size, using&nbsp;<a href=\"http:\/\/www.valvesoftware.com\/publications\/2007\/SIGGRAPH2007_AlphaTestedMagnification.pdf\" rel=\"noreferrer noopener\" target=\"_blank\">SDF(signed distance field) technique<\/a>. It shows rounded stroke edge issues on very large scale text but works well in normal size. I used both 3DTextMesh and TextMeshPro to display text content.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*DxR7XFx9gM0yTYvA1gbn4Q.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Used TextMesh Pro for the rendering quality and multi-line text display<\/figcaption><\/figure>\n\n\n\n<p id=\"2b15\">3DTextMesh requires proper material assignment. When you change the font in the editor, Unity reverts the material back to default \u2018Font Material\u2019 which does not support proper occlusion. You can find the&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit\/UX\" rel=\"noreferrer noopener\" target=\"_blank\">instructions for creating and assigning proper font texture and material in MRTK<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*FT0lBrok8YkUTOrxb6wjtA.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">The glyphs behind the wall visible through because of incorrect font material that ignores z-depth<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"b813\">Attaching UI to the motion controller<\/h2>\n\n\n\n<p id=\"6a54\">As the museum grows bigger with more content, I realized that I need some kind of method for easily jumping to different sections. On the left motion controller, I added simple menu interface which makes it easy to teleport to a specific section. One of the benefits of attaching the UI to the motion controller is that user can always access it easily anytime, just like a wristwatch. It is a great place to put user interfaces for quick action.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*X6KE4IW3_ioP_Yi_RW9u1A.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Holographic Button in MRTK\u2019s Interactable Object Example scene<\/figcaption><\/figure>\n\n\n\n<p id=\"664e\">For the menu system, I used MRTK\u2019s Holographic Button which can be found in the&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_InteractableObjectExample.md\" rel=\"noreferrer noopener\" target=\"_blank\">Interactable Object Example scene<\/a>. It contains predefined visual states and animations for different input states such as idle, ready, and pressed. It supports both HoloLens\u2019 gaze and gesture input as well as the immersive headset\u2019s motion controller pointer input.<\/p>\n\n\n\n<p id=\"7209\">In the Interactable Object Example scene, you can also find a great example of using an \u2018Interaction Receiver\u2019. The Receiver makes it easy to manage input events from multiple Interactable Objects in a single script. It is especially useful for the menu system where you have an array of multiple buttons.<\/p>\n\n\n\n<p id=\"09ff\">To construct the menu\u2019s layout, I used MRTK\u2019<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_ObjectCollection.md\" rel=\"noreferrer noopener\" target=\"_blank\">s Object Collection<\/a>&nbsp;script which can lay out an array of objects in three-dimensional space in specific surface type and spacing. The below example shows how I used it to make a curved layout for the multiple-button objects.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*1tCrJMmidAwGqu6-pBlPDw.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Cylindrical grid menu layout with Object Collection script<\/figcaption><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/MeanCapitalAmericancrow\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/MeanCapitalAmericancrow\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Initial test for menu layout and pointer interaction\n<\/figcaption>\n<\/figure>\n\n\n\n<p id=\"47b1\">I attached the menu to the left motion controller using&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/Input\/Scripts\/Utilities\/AttachToController.cs\" rel=\"noreferrer noopener\" target=\"_blank\">AttachToController&nbsp;<\/a>script in MRTK. With AttachToController script, you can easily specify handedness(left or right) and the element of the controller that you want to attach to.<\/p>\n\n\n\n<p id=\"d46a\">Using the pointer of the right controller, you can point and select the menu. Since the menu could be disturbing in grabbing interaction, I added show\/hide animation and assigned it to motion controller\u2019s menu button event. The user can show\/hide by pressing the menu button.<\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/TornOffbeatGavial\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/TornOffbeatGavial\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Show &amp; hide with menu button press event. Teleportation behavior.\n\n<\/figcaption>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7c63\">Intro scene<\/h2>\n\n\n\n<p id=\"f8ab\">With the museum layout and content ready, I added simple intro scene with an animated logo. I used&nbsp;<a href=\"https:\/\/www.blender.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Blender<\/a>(free open-source) to create 3D text logo and imported into Unity. In Unity, I used Animator and Animation clip to achieve a simple animated fade-in effect. Unity\u2019s keyframe animation with a timeline is very similar to other timeline-based application. You can easily understand how to use it if you are familiar with After Effects or Flash.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*YNmRFSKOzuG2HgvYOrwfLQ.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Creating 3D logo in Blender. Adding animation keyframes in Unity.<\/figcaption><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/WateryFreeAmurminnow\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/WateryFreeAmurminnow\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">MRTK\u2019s HoloLens 2 button provides various types of visual feedback\n<\/figcaption>\n<\/figure>\n\n\n\n<p id=\"9a7f\">In the intro scene, the user can overview the museum in a bird\u2019s-eye view and see five different sections based on type classification categories.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*vpSJnyTfPbvGLFuIoigC_A.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Overview of the museum with section indicators<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"f0ec\">Tooltip for the motion controllers<\/h2>\n\n\n\n<p id=\"e090\">One of the important aspects of the first-run experience in mixed reality app is the introduction of the input method and button mapping. Since the user can get lost in a fully immersive virtual space,&nbsp;<mark>it is important to clearly communicate how to interact with the world<\/mark>&nbsp;in your app experience. Especially if your app is using customized button mapping, it is crucial to introduce button mapping information either through tutorial scene or tooltips on the controller.<\/p>\n\n\n\n<p id=\"cf45\">In Museum of Type, I used standard default button mapping:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Trigger&nbsp;<\/strong>for Select<\/li>\n\n\n\n<li><strong>Thumbstick&nbsp;<\/strong>for Teleport and Locomotion<\/li>\n\n\n\n<li><strong>Grab&nbsp;<\/strong>button for grabbing and releasing objects<\/li>\n\n\n\n<li><strong>Menu&nbsp;<\/strong>button for displaying menus<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*kBJe_Jkeh5HS923QiA1Sag.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Default button mapping information \u2014 Mixed Reality Portal<\/figcaption><\/figure>\n\n\n\n<p id=\"205b\">To clearly show available button interactions, I created simple tooltips attached to the controllers. They are pointing to specific buttons and explaining their behavior.<\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/WelllitCharmingFerret\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/WelllitCharmingFerret\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">MRTK\u2019s HoloLens 2 button provides various types of visual feedback\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"e7a7\">Type Playground<\/h2>\n\n\n\n<p id=\"f337\">At the end of the museum experience, I created a space where the user can observe and play with type. It is still in early stage but I want to bring additional features including font and color options, just like Typography Insight for HoloLens. This will become a place where the user can experiment with historically important typefaces in 3D space.<\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/MinorImpracticalAmericantoad\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/MinorImpracticalAmericantoad\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Type Playground\n\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"b785\">Adding 3D app launcher<\/h2>\n\n\n\n<p id=\"fbcc\">In Windows Mixed Reality, you can create a three-dimensional object which can be used as an app launcher. It could be a logo or 3D object that can represent your app. This object can be organized in the cliff house, just like other 3D objects. The 3D model asset should be exported as glTF 2.0(.glb) format. You can find&nbsp;<a href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/mixed-reality\/implementing_3d_app_launchers\" rel=\"noreferrer noopener\" target=\"_blank\">detailed design and development guideline on this page<\/a>.&nbsp;<a href=\"https:\/\/dvlup.com\/2017\/09\/06\/creating-3d-icons-for-your-mixed-reality-uwp-app\/\" target=\"_blank\" rel=\"noopener\">This page<\/a>&nbsp;also introduces detailed steps and examples.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*9LFfld7rC380ubSUYXqTTQ.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Creating 3D model in Blender \/ Testing the model in the cliff house<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*Q5UJLD0fbrD8h94tgiC7Ag.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Default 2D app window vs. 3D app launcher<\/figcaption><\/figure>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/GlitteringIdleLark\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/GlitteringIdleLark\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">3D launcher can be manipulated just like other objects in the cliff house\n\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"07ee\">Publishing app to Microsoft Store<\/h2>\n\n\n\n<p id=\"17f8\">App submission process is similar to 2D Universal Windows Platform app. You just need to specify correct device type and input method: Windows Mixed Reality immersive headset and motion controllers.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*r-c2ib2rRyE2CPGhYbzW-g.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Microsoft Dev Center Dashboard<\/figcaption><\/figure>\n\n\n\n<p id=\"d902\">Since you can include a video trailer, you can demonstrate important experience with a video capture. To capture a video, you can use video recording feature in Mixed Reality Portal. Simply click the \u2018Video\u2019 icon in the Start menu or say \u201c<mark>Hey Cortana<\/mark>, start recording\u201d. Since this voice command also works in your app experience, you can easily take a picture or start\/stop video recording.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*VQ5Dx4XMFjHXPOW0HbVrpg.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Store submission with screenshots and videos<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1050\/1*J9mLg7aD-ZNh5Yv_-AteBg.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">You will be able to see your app in Microsoft Store<\/figcaption><\/figure>\n\n\n<style>.wp-block-kadence-spacer.kt-block-spacer-_167003-9c .kt-block-spacer{height:120px;}.wp-block-kadence-spacer.kt-block-spacer-_167003-9c .kt-divider{border-top-width:1px;height:1px;border-top-color:#eee;width:80%;border-top-style:solid;}<\/style>\n<div class=\"wp-block-kadence-spacer aligncenter kt-block-spacer-_167003-9c\"><div class=\"kt-block-spacer kt-block-spacer-halign-center\"><hr class=\"kt-divider\"\/><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Other Stories<\/h2>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template has-small-font-size is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-5150 post type-post status-publish format-standard has-post-thumbnail hentry category-articles tag-interactionsdk tag-metaquest tag-mixed-reality tag-mr tag-quest\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/how-to-enable-passthrough-for-mixed-reality-meta-quest-3-quest-pro-quest-2\" target=\"_self\"  ><img loading=\"lazy\" decoding=\"async\" width=\"1697\" height=\"1000\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"How to enable Passthrough for Mixed Reality &#8211; Meta Quest 3, Quest Pro, Quest 2\" style=\"object-fit:cover;\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player.png 1697w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player-300x177.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player-1024x603.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player-768x453.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player-1536x905.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2024\/05\/2024-05-29-00_34_04-Media-Player-18x12.png 18w\" sizes=\"auto, (max-width: 1697px) 100vw, 1697px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/how-to-enable-passthrough-for-mixed-reality-meta-quest-3-quest-pro-quest-2\" target=\"_self\" >How to enable Passthrough for Mixed Reality &#8211; Meta Quest 3, Quest Pro, Quest 2<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">#Mixed Reality #Passthrough #Hand Tracking #MetaQuest #Quest3 #Quest2 #QuestPro To enable passthrough, follow these 3 [&hellip;] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-4469 post type-post status-publish format-standard has-post-thumbnail hentry category-articles category-projects\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/designing-type-in-space-for-hololens-2\" target=\"_self\"  ><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"400\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2022\/12\/TypeInSpace2Hero_1920x1080-760x400.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"Designing Type In Space for HoloLens 2\" style=\"object-fit:cover;\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/designing-type-in-space-for-hololens-2\" target=\"_self\" >Designing Type In Space for HoloLens 2<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Background As a designer passionate about typography and spatial computing, I\u2019ve long been captivated by [&hellip;] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-4424 post type-post status-publish format-standard has-post-thumbnail hentry category-articles\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/mrtk-101-how-to-use-crucial-spatial-interactions-and-ui-for-ar-vr-xr-hololens-oculus-quest-openvr-openxr\" target=\"_self\"  ><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"400\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2021\/11\/MRTK03004_Moment3-760x400.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MRTK 2 &#8211; How to build crucial Spatial Interactions\" style=\"object-fit:cover;\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/mrtk-101-how-to-use-crucial-spatial-interactions-and-ui-for-ar-vr-xr-hololens-oculus-quest-openvr-openxr\" target=\"_self\" >MRTK 2 &#8211; How to build crucial Spatial Interactions<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Learn how to use MRTK to achieve some of the most widely used common interaction [&hellip;] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-4872 post type-post status-publish format-standard has-post-thumbnail hentry category-articles category-projects\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/how-to-use-meta-quest-2-quest-pro-with-mrtk3-unity-for-hand-interactions\" target=\"_self\"  ><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"915\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"How to use Meta Quest 2\/Quest Pro with MRTK3 Unity for Hand Interactions\" style=\"object-fit:cover;\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover.png 1920w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover-300x143.png 300w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover-1024x488.png 1024w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover-768x366.png 768w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover-1536x732.png 1536w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2023\/02\/mrtk_ux_v3_cover-18x9.png 18w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/how-to-use-meta-quest-2-quest-pro-with-mrtk3-unity-for-hand-interactions\" target=\"_self\" >How to use Meta Quest 2\/Quest Pro with MRTK3 Unity for Hand Interactions<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">With the support of OpenXR, it is now easy to use MRTK with Meta Quest [&hellip;] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-1485 post type-post status-publish format-standard has-post-thumbnail hentry category-articles category-projects\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/bringing-the-periodic-table-of-the-elements-app-to-hololens-2-with-mrtk-v2\" target=\"_self\"  ><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"400\" src=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2019\/09\/1_xTTHyL_uj-cQfU-QZvqZ4g-760x400-1.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"Bringing the Periodic Table of the Elements app to HoloLens 2 with MRTK v2\" style=\"object-fit:cover;\" srcset=\"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2019\/09\/1_xTTHyL_uj-cQfU-QZvqZ4g-760x400-1.png 760w, https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2019\/09\/1_xTTHyL_uj-cQfU-QZvqZ4g-760x400-1-300x158.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/mixedrealitynow.com\/ko\/bringing-the-periodic-table-of-the-elements-app-to-hololens-2-with-mrtk-v2\" target=\"_self\" >Bringing the Periodic Table of the Elements app to HoloLens 2 with MRTK v2<\/a><\/h2>\n\n<div class=\"wp-block-post-excerpt\"><p class=\"wp-block-post-excerpt__excerpt\">Sharing the story of updating HoloLens app made with HoloToolkit(HTK) to use new Mixed Reality [&hellip;] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Last year, with my love of typography, I have explored spatial text layout in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4576,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31,21],"tags":[23,13,24,15,25,26,20],"class_list":["post-251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-projects","tag-ar","tag-mixed-reality","tag-mr","tag-typography","tag-virtual-reality","tag-vr","tag-windows-mixed-reality"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2017\/11\/RigidBody_Controller-760x400-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/comments?post=251"}],"version-history":[{"count":2,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/251\/revisions"}],"predecessor-version":[{"id":4732,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/251\/revisions\/4732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media\/4576"}],"wp:attachment":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media?parent=251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}