{"id":52,"date":"2016-11-16T03:05:44","date_gmt":"2016-11-16T03:05:44","guid":{"rendered":"http:\/\/dongyoonpark.com\/?p=52"},"modified":"2024-10-12T17:29:30","modified_gmt":"2024-10-12T17:29:30","slug":"designing-typography-insight-for-hololens","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/designing-typography-insight-for-hololens","title":{"rendered":"Typography Insight for HoloLens 1 (2016)"},"content":{"rendered":"\n<h2 class=\"graf graf--h4 graf-after--h3 graf--subtitle wp-block-heading\" id=\"978a\">A designer\u2019s journey into type in mixed\u00a0reality<\/h2>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\">\n<p><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/SameFailingIchneumonfly?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F7744a6c4d74517bc6b9227498aa7f8cf%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n\n\n\n<p class=\"graf graf--p\">I would like to share my journey of designing and developing Typography Insight for HoloLens. Typography Insight for HoloLens is an app that allows you to experiment and play with types in three-dimensional mixed reality space. I first published the app on iOS about five years ago and it was embraced by the design and education communities. Here is my story on how I brought the app from iOS to Windows, and from Windows to HoloLens.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1epKCRODRClUL92W6UllvPQ.png\" alt=\"\" class=\"wp-image-53\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"graf graf--h3 wp-block-heading\">My Background<\/h2>\n\n\n\n<p class=\"graf graf--p\">As a kid, I loved doodling a lot. My textbooks were always filled with characters and machines from animations. However, my favorite topic for doodling was company logos. Even though I didn\u2019t know about \u2018typography\u2019, I fell in love with the systematic and harmonized beautiful letterforms of the logotypes. Since I was into computers, I loved drawing the logos of computer companies.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/Doodles_DongYoonPark.png\" alt=\"\" class=\"wp-image-54\"\/><\/figure>\n<\/div>\n\n\n<p class=\"graf graf--p\">In college, I studied electrical engineering and worked as a software engineer. Then I went back to design school to study graphic design. With this mixed background, I have been creating iOS apps and have written an iOS programming book published in Korea.<\/p>\n\n\n\n<h2 class=\"graf graf--h3 wp-block-heading\">Typeface Explorer\u00a0(2008)<\/h2>\n\n\n\n<p class=\"graf graf--p\">With my strong interest in typography, interactive media, and 3D space, I created the flash app \u2018Typeface Explorer\u2019 in 2008, with Adobe Flash and Papervision3D (3D engine for flash). I was exploring high-quality typeface rendering with vectors in varying scales. This was the beginning of my interest in typography on interactive digital media.<\/p>\n\n\n\n<div style=\"position: relative; padding-bottom: 60%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/WideFarArmadillo?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F75bab83920290e83a4a624b5b1bfc145%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"9719\">Typography Insight\u00a0(2011)<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"7faa\">When the iPad was announced in 2010, I thought it would be a great platform for learning and playing with typefaces. I could imagine the power of being able to physically touch and interact with type on any scale. This was the beginning of my app Typography Insight which became my graduate thesis project at the Parsons School of Design MFA Design & Technology program. Originally I made the app for\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/itunes.apple.com\/us\/app\/typography-insight\/id432722506?mt=8\" href=\"https:\/\/itunes.apple.com\/us\/app\/typography-insight\/id432722506?mt=8\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">iPad<\/a>, adding\u00a0the <a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/itunes.apple.com\/us\/app\/typography-insight-for-iphone\/id516501242?mt=8\" href=\"https:\/\/itunes.apple.com\/us\/app\/typography-insight-for-iphone\/id516501242?mt=8\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">iPhone version<\/a>\u00a0a few months later.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-149\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-e5PapkvB08iZvKIK9ILCIw.png\" alt=\"\" class=\"wp-image-149\"\/><figcaption class=\"wp-element-caption\">Typography Insight for iOS (2011)<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Typography Insight is a toolkit for learning and teaching typography. I published it in May 2011 with my graduation and it was featured on iTunes AppStore several times, ranked second in the US education category. I presented this project at AIGA\/NY. It was reviewed in\u00a0<em class=\"markup--em markup--p-em\">FastCompany<\/em>,\u00a0<em class=\"markup--em markup--p-em\">The Atlantic,<\/em>\u00a0and\u00a0<em class=\"markup--em markup--p-em\">Gizmodo<\/em>.<\/p>\n\n\n\n<div style=\"position: relative; padding-bottom: 75%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/CanineOblongBrahmanbull?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Fddb4cc7e1f4eba04ccf683f53abb1a0a%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"f202\"><em class=\"markup--em markup--p-em\">Introductory video\u00a0<\/em><a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/youtu.be\/ZSrdvc_ItBM\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/youtu.be\/ZSrdvc_ItBM\"><em class=\"markup--em markup--p-em\">https:\/\/youtu.be\/ZSrdvc_ItBM<\/em><\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cAnyone who loves books, words, history, or fine art\u200a\u2014\u200aeven in the slightest bit\u200a\u2014\u200awill find Typography Insight as intoxicating as Wikipedia and as fun as a video game.\u201d\u200a\u2014\u200a<a class=\"markup--anchor markup--blockquote-anchor\" href=\"http:\/\/www.fastcodesign.com\/1664123\/typography-insight-ipad-app-is-type-design-101-for-just-199\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/www.fastcodesign.com\/1664123\/typography-insight-ipad-app-is-type-design-101-for-just-199\"><strong class=\"markup--strong markup--blockquote-strong\">Fast Company<\/strong><\/a><\/p>\n\n\n\n<p>\u201cLearning the subtleties of Helvetica and Garamond used to be a pain\u200a\u2014\u200abut a sleek new app has made the process easier\u201d\u200a\u2014\u200a<a class=\"markup--anchor markup--blockquote-anchor\" href=\"http:\/\/www.theatlantic.com\/technology\/archive\/2011\/06\/typography-insight-ipad-app-teaches-fonts-like-never-before\/239984\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/www.theatlantic.com\/technology\/archive\/2011\/06\/typography-insight-ipad-app-teaches-fonts-like-never-before\/239984\/\"><strong class=\"markup--strong markup--blockquote-strong\">The Atlantic<\/strong><\/a><\/p>\n\n\n\n<p>\u201cTypography Insight is sort of like an iPad typeface encyclopedia. Only encyclopedias are boring, and Typography Insight is beautiful and fun.\u201d\u200a\u2014\u200a<a class=\"markup--anchor markup--blockquote-anchor\" href=\"http:\/\/gawker.com\/5804778\/typography-insight-makes-learning-fonts-gorgeous-and-easy\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"http:\/\/gawker.com\/5804778\/typography-insight-makes-learning-fonts-gorgeous-and-easy\"><strong class=\"markup--strong markup--blockquote-strong\">Gizmodo<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--blockquote wp-block-heading\" id=\"583d\">Bringing Typography Insight to Windows with Windows Bridge for\u00a0iOS<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"204f\">I have been continuously updating Typography Insight over the past five years but didn\u2019t have a chance to bring it to other platforms. Fortunately, Microsoft announced the open-source project\u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/bridges\/ios\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/bridges\/ios\">Windows Bridge for iOS<\/a>\u00a0which allows iOS developers bring their apps to Windows using existing Objective-C code.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-29\">\n<figure class=\"alignleft\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/WindowsBridgeUX.png\" alt=\"\" class=\"wp-image-29\"\/><figcaption class=\"wp-element-caption\">Mapping the UX elements of iOS to Windows<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"2afb\">With Windows Bridge for iOS, I was able to bring Typography Insight to Windows. It was\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/www.microsoft.com\/store\/apps\/9nblggh4qrs5\" href=\"https:\/\/www.microsoft.com\/store\/apps\/9nblggh4qrs5\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">published to Windows Store<\/a>\u00a0in June 2016. Now it is running on Windows 10 desktop and tablet devices as a UWP (Universal Windows Platform) app.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"47c1\">Since Windows Bridge takes care of translating iOS\u2019 UI controls and UX patterns into Windows versions, I didn\u2019t have to worry about updating the visuals of the UI. It supports a keyboard and mouse as well as touch input. Luckily, AutoLayoutConstraints on iOS worked well on Windows which made it easy to support varying window sizes and different resolutions. The app was introduced as an example of Windows Bridge for iOS, at Microsoft Build 2016 developer conference.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-155\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-SdNtgG4TluEPUCRFNKj5Xw.png\" alt=\"\" class=\"wp-image-155\"\/><figcaption class=\"wp-element-caption\">Typography Insight on Windows 10 \u2014 Universal Windows Platform app made with Windows Bridge for iOS<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image size-full wp-image-156\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-o1bCZQudBMNp0hAjD2BdSA.png\" alt=\"\" class=\"wp-image-156\"\/><figcaption class=\"wp-element-caption\">Typography Insight on Microsoft Surface Pro<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"fb59\">Designing Typography Insight for\u00a0HoloLens<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"ae30\">When I first met\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"http:\/\/hololens.com\" href=\"http:\/\/hololens.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">HoloLens<\/a>, I thought typography would not be a relevant topic in 3D space since typography has been all about flat 2D spaces\u2014 paper, books, screens, and print. However, as soon as I started putting type into 3D space with HoloLens, I realized that typography in a mixed-reality space could be really gorgeous! It has a totally different physicality compared to traditional display or paper media.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-157\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/MicrosoftHoloLens.png\" alt=\"\" class=\"wp-image-157\"\/><figcaption class=\"wp-element-caption\">Microsoft HoloLens<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"ee05\">In HoloLens, the type is constructed as a hologram with light based on the additive color system. Since you can place type in the actual environment and the type is world locked, you can observe it from any angle just like real-life objects. The parallax effect between the type and the environment makes it even more magical, especially when there are multiple types layered in mixed reality space.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"0e3c\">When we talk about typing in 3D space, we tend to think of extruded 3D text. However, besides some logotype designs or limited applications, I don\u2019t think extruded 3D text gives us that much value. Extruded text degrades readability, especially for displaying information.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"a4bb\">After some experiments, I started thinking about bringing the \u2018Type Inspector\u2019 feature from my original 2D Typography Insight app to a holographic experience. \u2018Type Inspector\u2019 allows you to observe and experiment with type in various scales. In HoloLens, I thought this could effectively become a toolkit for experimenting with types in mixed reality space, with different sizes, colors, and distances.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-160\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/Sketch_TypePlayground2.jpg\" alt=\"\" class=\"wp-image-160\"\/><figcaption class=\"wp-element-caption\">Idea sketches for Type Playground<\/figcaption><\/figure>\n<\/div>\n\n\n<p>I was also interested in translating learning components such as \u2018Historical Typefaces\u2019 or \u2018Typeface Anatomy\u2019 into 3D space. Since \u2018Historical Typefaces\u2019 involves chronological order based on a type classification system, I thought I could visualize the timeline in 3D space.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-161\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/Sketch_TypeAnatomy.jpg\" alt=\"\" class=\"wp-image-161\"\/><figcaption class=\"wp-element-caption\">Idea sketches for Type Anatomy<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"1191\">Design Iterations<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"d959\"><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">Using publicly available resources \u2014 <a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/github.com\/Microsoft\/HoloToolkit-Unity\" href=\"https:\/\/github.com\/Microsoft\/HoloToolkit-Unity\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">HoloToolkit<\/a>,\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/academy\" href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/academy\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Holographic Academy Samples<\/a>, and\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/github.com\/Microsoft\/GalaxyExplorer\" href=\"https:\/\/github.com\/Microsoft\/GalaxyExplorer\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Galaxy Explorer<\/a>\u2014I started constructing the UI and text objects. <\/span>Initially, it took a long time for me to get used to the hierarchy and the relationships between the prefabs and scripts. Starting with box collider, I learned how to use Unity\u2019s Animation Controller to build animated UI for font list menus. Since I didn\u2019t know how to create shaders, I decided to use PNG images for some of the hover effects in the Typeface Anatomy scene.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"93b6\">The biggest challenges in the design process were scale and position. It was hard to imagine an object\u2019s actual size and position until deploying and actually experiencing it in the device. I spent a lot of time finding the proper dimensions and positions for the objects.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-165\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/TypographyInsightFoHoloLens_Iterations.jpg\" alt=\"\" class=\"wp-image-165\"\/><figcaption class=\"wp-element-caption\">Design iterations<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"60d4\">UX Elements \u2014 Toolbar\u00a0UI<\/h3>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/SeparateSoupyEel?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F25df943ba32894ef71870eacb0e9d4fc%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">I used Unity\u2019s cube primitives with UI Text and PNG 2D Sprites to construct the button toolbar interface.<\/span>\u00a0For the secondary menus, I used Unity\u2019s Animation Controller with triggers to achieve an animated menu system on an air tap event.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\"><a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_210#chapter_6_-_tag-along\" href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_210#chapter_6_-_tag-along\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Tag-Along\u00a0<\/a>and\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_210#chapter_5_-_billboarding\" href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_210#chapter_5_-_billboarding\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Billboarding\u00a0<\/a>were important concepts to design this floating user interface.<\/span>\u00a0Tag-Along makes the object follow you. With Billboarding, you can make holograms always face toward you. Using these two techniques, I was able to create a floating toolbar that stays in the view frustum.<\/p>\n\n\n\n<h3 class=\"graf graf--h3 graf-after--p wp-block-heading\" id=\"f0e0\">UX Elements \u2014 Gestures<\/h3>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/ShamelessAdorableAuklet?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2Ffa7ee296326a486a0ab67f91ac39c3a0%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">For the manipulation gestures, I used Navigation and Manipulation gesture examples from the\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_211\" href=\"https:\/\/developer.microsoft.com\/en-us\/windows\/holographic\/holograms_211\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Holograms 211 tutorial<\/a>.<\/span>\u00a0These gesture inputs are used to move, rotate and resize the type. A basic tap gesture is used for text objects or menu selection.<\/p>\n\n\n\n<h3 class=\"graf graf--h3 graf-after--p wp-block-heading\" id=\"9221\">UX Elements \u2014 Spatial\u00a0Mapping<\/h3>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/CommonForcefulAmericanwirehair?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F4abd3665765e597559df41478d79123b%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p>Spatial Mapping is a unique and powerful capability in HoloLens. Using spatial perception capability we can place holographic objects in the real environment. In Typography Insight, I used Spatial Mapping to project and place text objects on the wall.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">Spatial Mapping prefab from HoloToolkit and Tap To Place example from Holographic Academy projects were very helpful to get basic environmental mesh and placing interaction.<\/span>\u00a0Currently, I am looking into \u2018Plane Finder\u2019 in HoloToolkit which provides advanced spatial understanding such as walls, floors, and tables.<\/p>\n\n\n\n<h3 class=\"graf graf--h3 graf-after--p wp-block-heading\" id=\"08f2\">UX Elements \u2014 Text\u00a0Input<\/h3>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/ImmenseDisastrousHammerheadshark?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F2a3719ab3118429114cff845d92fe6d3%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<div class=\"section-inner sectionLayout--insetColumn\">\n<p id=\"0912\" class=\"graf graf--p graf-after--figure\">Currently, the system keyboard is only supported in 2D XAML mode. Because of this, there is an abrupt context change between exclusive 3D and 2D mode when using the keyboard input. The system keyboard has integrated voice input.<\/p>\n<h2 id=\"6b01\" class=\"graf graf--h3 graf-after--p\">Publishing v1.0 to Windows\u00a0Store<\/h2>\n<p id=\"01fe\" class=\"graf graf--p graf-after--h3\">Publishing to Windows Store was straightforward. Since Windows Holographic apps are essentially UWP apps, the process was exactly same. Below is the intro video of the version 1.0.<\/p>\n<\/div>\n\n\n\n<div class=\"section-inner sectionLayout--fullWidth\">\n<p><\/p><\/div>\n\n\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Typography Insight for HoloLens (2016)\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/eTI6NBanGkA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"3c23\">Experiment at Bellevue Arts\u00a0Museum<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"8b44\">One day, I went to Bellevue Arts Museum and I realized that the space was really beautiful. I wanted to do something with holograms and decided to build a spatial typographic composition. I quickly started some prototypes with layered typography and created this \u2018Holographic Type Sculpture.\u2019 Below is the mixed reality video captured at Bellevue Arts Museum.<\/p>\n\n\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Holographic Type Sculpture (2016) for HoloLens\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/sevWuuHYXXc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-167\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/TypographyInsightFoHoloLens_Studies.jpg\" alt=\"\" class=\"wp-image-167\"\/><figcaption class=\"wp-element-caption\">Early experiments and studies for Holographic Type Sculpture<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-168\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/TypographyInsightFoHoloLens_Studies2.jpg\" alt=\"\" class=\"wp-image-168\"\/><figcaption class=\"wp-element-caption\">Early experiments and studies for Holographic Type Sculpture<\/figcaption><\/figure>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"411a\">Historical Type Timeline and Color\u00a0Picker<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"6af0\">In the latest update, I have added a \u2018Type Timeline\u2019 feature which I introduced above in this article: Type Explorer, 2008. In this feature, I explore the possibility of visualizing chronological data in three-dimensional space, leveraging depth. You can explore historically important typefaces from Old Style\/Garald to modern Humanist Sans-Serif, with summary information. You can scroll this 3D list with the scroll gesture.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"8c3b\">Together with this new feature, now you can change the color of the types using newly added color picker. I hope this color feature can help you experiment with types in mixed reality space.<\/p>\n\n\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Type Timeline and Colors added to Typography Insight for\u00a0HoloLens\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/W-XfxEZMiwU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--figure wp-block-heading\" id=\"93e1\">Distance indicator, Save & Load\u00a0scene<\/h2>\n\n\n\n<div style=\"position: relative; padding-bottom: 57%;\"><iframe loading=\"lazy\" style=\"position: absolute; top: 0; left: 0;\" src=\"https:\/\/gfycat.com\/ifr\/OrderlyUnfoldedIrrawaddydolphin?referrer=https%3A%2F%2Fmedium.com%2Fmedia%2F35534526a850f8ee0299fabbcbd8f262%3FpostId%3Da55fc5fe025\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"0adb\">The app was already showing the distance information \u2014 the distance from HoloLens to the text object. However, it<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"19fecdf21c95\">\u00a0<\/span>was hard to see this information since the distance information was displayed on the toolbar. In the latest update, I have added this distance information as an annotation close to the text object, together with the font size information.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"e95c\">The Save and Load feature is finally ready. Now you can save your layout composition and restore it later. These feature updates are available in the latest version of the Windows Holographic Store.<\/p>\n\n\n\n<h2 class=\"graf graf--h3 graf-after--p wp-block-heading\" id=\"d8d1\">Tips: Getting Beautiful Type for HoloLens in\u00a0Unity<\/h2>\n\n\n\n<p class=\"graf graf--p graf-after--h3\" id=\"b4ba\">Text is the most important component in Typography Insight.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">To display text, there are two types of text components you can use in Unity \u2014 UI Text and 3D Text Mesh.<\/span>\u00a0Both are very blurry in default and you need to tweak some of the variables to get sharp high-quality text.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">For UI Text, Unity provided\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/forum.unity3d.com\/threads\/unity-ui-on-the-hololens.394629\/\" href=\"https:\/\/forum.unity3d.com\/threads\/unity-ui-on-the-hololens.394629\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this guideline<\/a>\u00a0for HoloLens but I wanted to figure out more accurate scaling factors to get proper text size.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/UnityTexts.png\" alt=\"\" class=\"wp-image-170\"\/><\/figure>\n\n\n\n<p>I did an experiment with a printed type ramp on the wall.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">From a 2-meter distance, using Typography Insight for HoloLens with a type ramp and debug menu, I overlaid and resized holographic text to match the physical one.<\/span>\u00a0With this experiment, I was able to find the proper scaling factor. (2-meter is the recommended comfort distance for placing holographic objects)<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-171\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-QTJuouOR9T1DXKea6lRHRA.png\" alt=\"\" class=\"wp-image-171\"\/><figcaption class=\"wp-element-caption\">Type experiment to get the proper scaling factor<\/figcaption><\/figure>\n\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"f865\"><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82 4e7afd28dda1\">The scaling factors from this experiment are approximately\u00a0<strong class=\"markup--strong markup--p-strong\">0.0005 for UI Text\u00a0<\/strong>and\u00a0<strong class=\"markup--strong markup--p-strong\">0.005 for 3D Text Mesh<\/strong>.\u00a0Even though it might not be perfectly accurate, with these scaling factors, you can get the relevant type size which will be similar to the physical type size at a 2-meter distance.\u00a0If you use this scaling factor, you can say 48pt type size at a 2-meter distance is same in Unity and Adobe Illustrator.<\/span><\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"2881\"><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"4e7afd28dda1\">For UI Text, you can adjust the additional parameter \u2018Dynamic Pixels Per Unit\u2019 in Canvas to improve text rendering quality. However, if you increase this too much, you will get an unexpected type size and performance will degrade. With a scaling factor of 0.0005, a DPPU value between 2\u20133 gave me decent rendering quality.<\/span><\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"3e3a\"><span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">*For further details on the text scaling factor, please refer to\u00a0<a class=\"markup--anchor markup--p-anchor\" data-href=\"https:\/\/github.com\/Microsoft\/HoloToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/UI\/README.md\" href=\"https:\/\/github.com\/Microsoft\/HoloToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/UI\/README.md\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this README.md file in HoloToolkit<\/a>. The font Scale and Font Sizes section describes how these values can be calculated by Points and Unity units.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-172\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-QaMbnef13Fjy2CaJjxjS-Q.png\" alt=\"\" class=\"wp-image-172\"\/><figcaption class=\"wp-element-caption\">Unity UI Text with different Dynamic Pixels Per Unit values<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-173\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/1-sL2vgmD-jfRFyte4ijXsyA.png\" alt=\"\" class=\"wp-image-173\"\/><figcaption class=\"wp-element-caption\">Unity 3D Text Mesh with different font sizes<\/figcaption><\/figure>\n\n\n\n<p>Below is the comparison between UI Text and 3D Text Mesh. As you can see, using these scaling factors, you can expect the exact size of text. This site will be also the same as the text from Illustrator or Photoshop.<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-183\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2017\/07\/2016-11-06-00_19_44-Unity-Personal-64bit-Untitled-TextQuality-Windows-Store-Apps_-_DX11_.png\" alt=\"\" class=\"wp-image-183\"\/><figcaption class=\"wp-element-caption\">UI Text and 3D Text size comparison<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"graf graf--p graf-after--figure\" id=\"083b\">As you can expect, type sizes that we\u2019ve been using on PC or tablet devices (typically between 12\u201332pt) look quite small at a 2-meter distance.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">It depends on the characteristics of types but in general, recommended minimum type size for legibility without stroke vibration is around 20pt, based on the scaling factor introduced above.<\/span>\u00a0If your app is supposed to be used at a closer distance, smaller types could be used.<\/p>\n\n\n\n<p class=\"graf graf--p graf-after--p\" id=\"6b02\">For the font selection, Segoe UI (the default font for Windows) works well in most cases.\u00a0<span class=\"markup--quote markup--p-quote is-other\" data-creator-ids=\"9051bf86ec82\">However, I would recommend avoiding using light or semi-light for the type sizes under 42 pt since thin vertical strokes will vibrate and it will degrade legibility.<\/span>\u00a0In general, modern fonts with enough stroke thickness work well. For example, Helvetica and Arial look gorgeous and very legible in HoloLens with regular or bold weights.<\/p>\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 \u2013 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 \u2013 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 [\u2026] <\/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 [\u2026] <\/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 \u2013 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 \u2013 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 [\u2026] <\/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 [\u2026] <\/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 [\u2026] <\/p><\/div><\/div>\n<\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A designer\u2019s journey into type in mixed\u00a0reality I would like to share my journey of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4567,"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":[],"class_list":["post-52","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","category-projects"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2018\/07\/TypeInSpaceHero_2400x1200-1-760x400-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/52","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=52"}],"version-history":[{"count":2,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":4734,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/52\/revisions\/4734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media\/4567"}],"wp:attachment":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media?parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}