{"id":274,"date":"2018-07-29T08:52:46","date_gmt":"2018-07-29T08:52:46","guid":{"rendered":"http:\/\/dongyoonpark.com\/?p=274"},"modified":"2024-06-25T21:20:37","modified_gmt":"2024-06-25T21:20:37","slug":"type-in-space-explore-spatial-typography-in-mixed-reality-with-hololens","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/type-in-space-explore-spatial-typography-in-mixed-reality-with-hololens","title":{"rendered":"Type In Space\u200a for HoloLens 1 (2018)"},"content":{"rendered":"\n<h2 class=\"uagb-heading-text wp-block-heading\">Your physical environment becomes a new canvas for typography<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.linkedin.com\/in\/cre8ivepark\/\"><\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2018\/07\/TypeInSpaceHero_2400x1200-1024x377.jpg\" alt=\"\" class=\"wp-image-1602\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"c353\">Background<\/h2>\n\n\n\n<p id=\"f356\"><a href=\"https:\/\/www.microsoft.com\/en-us\/hololens\" rel=\"noreferrer noopener\" target=\"_blank\">Microsoft HoloLens<\/a>&nbsp;allows you to place and see holographic objects in your physical environment. Just like real-world physical objects, you can place them on a table or wall, you can move around and see them from different angles. Since HoloLens analyzes the environment and remembers the spatial mapping information, when you come back to the specific space, HoloLens restores the digital objects. It feels magical when you see your holographic object stays right there just like other physical objects, even after days and weeks.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*W-Ay66SLSF4pRFkHAbXOqg.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Microsoft HoloLens<\/figcaption><\/figure>\n\n\n\n<p id=\"05ae\">As a graphic designer who loves type design and typography, I wanted to see beautiful types in space. We have been seeing many examples of type overlay in motion graphics and TV commercials but they were stuck in flat 2D screens. Since I met HoloLens in 2016, I have been exploring types in mixed reality space.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9939\">My previous projects on type in mixed reality<\/h2>\n\n\n\n<p id=\"d7bf\"><a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\"><strong>Typography Insight for HoloLens(2016)<\/strong><\/a>&nbsp;was my first experiment with holographic type in space. With HoloLens, I was able to make an app that allows you to lay out and explore types in the physical space. Being able to lay out and see beautiful holographic types in the real-world physical environment is one of the most exciting experiences.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<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>\n<\/div><\/figure>\n\n\n\n<p id=\"d5d4\">The holographic type shows a magical tactile quality and feels like neon which you cannot experience in the captured videos. The video below is closer to the actual holographic type seen through the lenses. (Captured through a phone camera)<\/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\/decentpoliticalbarracuda\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/decentpoliticalbarracuda\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Video recording with a phone camera through the lens on HoloLens\n<\/figcaption>\n<\/figure>\n\n\n\n<p id=\"ce04\">I expanded my spatial type experiments to a large scale three-dimensional type composition in&nbsp;<a href=\"https:\/\/medium.com\/@dongyoonpark\/holographic-type-sculpture-with-typography-insight-for-hololens-eb188f483e6b\"><strong>Holographic Type Sculpture(2016)<\/strong><\/a>. In this project, I created a geometric 3D composition and placed it in a museum. Just like a physical architecture, literally, you can walk into the shower of your favorite type.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"4575\" src=\"https:\/\/dongyoonpark.com\/wp-content\/uploads\/2022\/12\/1_ahjjIO0kQvwL4T10RAzmrw.webp\" alt=\"\" class=\"wp-image-4575\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"4576\" src=\"https:\/\/dongyoonpark.com\/wp-content\/uploads\/2022\/12\/1_s05cARkU-8AOeaO-K2XYiQ.webp\" alt=\"\" class=\"wp-image-4576\"\/><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Holographic Type Sculpture (2016), News Space (2017)<br><\/figcaption><\/figure>\n\n\n\n<p id=\"a44f\"><a href=\"https:\/\/medium.com\/@dongyoonpark\/news-space-for-hololens-spatial-news-headline-visualizer-in-mixed-reality-669afbdc3b41\"><strong>News Space for HoloLens(2017)<\/strong><\/a>&nbsp;was a spatial-type experiment with text-heavy content, the news article. News headlines fill up your entire room with the spherical layout. With HoloLens\u2019 high-resolution display, small text for the headline and summary text is rendered beautifully while securing readability.<\/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\/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<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"23b3\">In&nbsp;<a href=\"https:\/\/medium.com\/microsoft-design\/museum-of-type-windows-mixed-reality-app-design-development-story-95ef8b35f196\"><strong>Museum of Type(2017)<\/strong><\/a>, I continued my journey in virtual reality space. I wanted to create a virtual environment where you can learn about historically important typefaces with more direct interactions. Using the motion controller, you can grab and observe the beautiful shape of the type. If you love type design and typography, this will be one of the most satisfying experiences interacting with type.<\/p>\n\n\n\n<p id=\"fa0c\">With these experiments, I got great responses from the design community and augmented reality enthusiasts. I also had the honor to demonstrate my app&nbsp;<strong>Typography Insight for HoloLens<\/strong>&nbsp;to Matthew Carter, a legendary master type designer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cc10\">Toolkit for creating mixed reality experiences<\/h2>\n\n\n\n<p id=\"bab7\">I made these HoloLens apps using HoloToolkit, the open-source project for the foundational components for Windows Mixed Reality. Since then, HoloToolkit has evolved a lot and it is re-branded as&nbsp;<a href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>MixedRealityToolkit(MRTK)<\/strong><\/a>. A lot of new building blocks for the common interactions and UI controls have been added to MRTK.&nbsp;<a href=\"https:\/\/medium.com\/@dongyoonpark\/open-source-building-blocks-for-windows-mixed-reality-experiences-hololens-mixedrealitytoolkit-28a0a16ebb61\">I wrote an article to introduce these building blocks in MRTK<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/medium.com\/@dongyoonpark\/open-source-building-blocks-for-windows-mixed-reality-experiences-hololens-mixedrealitytoolkit-28a0a16ebb61\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*boNaoyIMhwp1KbEK0OOgSQ.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p id=\"4892\">With these new building blocks in MRTK, I was able to evolve the type layout experience in my app Typography Insight. Eventually, I extracted the \u2018type playground\u2019 component and created a new app \u2018<a href=\"https:\/\/youtu.be\/qJyr4C6Weck\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Type in Space(2018)<\/strong><\/a>\u2019.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"886e\">Type In Space (2018)<\/h2>\n\n\n\n<p id=\"9624\">This new app has some additional features including two-handed gesture input, improved spatial mapping, and multiple slots for saving &amp; load scenes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*JrbR78YUBMhBsYJmC4Fayg.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Type In Space (2018)<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3f01\">Interacting with text using two-handed gesture<\/h2>\n\n\n\n<p id=\"db40\">By default, text objects are floating in the space. You can grab and move the text object with one hand. To rotate or scale the text object, you can use your both hands. Based on the distance between the hands and their position, the text scales and rotates.<\/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\/orneryanxioushawk\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/orneryanxioushawk\"><\/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=\"5736\">For the rotation, you can specify axis constraints using the toolbar. Using this constraint, you can make the text rotate around a specific axis only.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bc4b\">Floating toolbar<\/h2>\n\n\n\n<p id=\"7c50\">The toolbar contains a collection of a common actions such as Save, Load, Clear Scene and Add New Text. It also has global actions such as \u2018Snap to Surface\u2019 for the spatial mapping activation and \u2018Gravity\u2019 for the physics.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*TTrEBteImhtV40yxtw_-4g.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"cf98\">The toolbar uses the tag-along and body-lock technique to avoid interfering your viewport. It is moving and always stays within a certain range, with a specific offset from your waist. It provides adjustable positioning buttons so that you can easily move up\/down to your favorite offset position from your body. Pin button makes it stay in a fixed location. You can also show or hide the toolbar with a voice command.&nbsp;<em>\u201cShow Toolbar\/Hide Toolbar\u201d<\/em><\/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\/distortedmatureaardwolf\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/distortedmatureaardwolf\"><\/a><\/p>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5e77\">Text properties<\/h2>\n\n\n\n<p id=\"f884\">Using the floating toolbar, you can change the font and color of the text.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/4802\/1*dsBO3xnej-97rLyC3pUqEQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/4748\/1*7Rdj5n8RzVLXot9qSBesPA.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Text properties on the toolbar<\/figcaption><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">Text properties on the toolbar<br><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7632\">Text object menu<\/h2>\n\n\n\n<p id=\"75fd\">Contextual text object menus include object-specific actions such as Edit, Duplicate, and Delete. This text object menu automatically scales up\/down based on the distance to maintain usable size. For example, if the text object is at a distance, it scales up to make it easier to target with the gaze cursor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"937a\">Snap text to a surface with spatial mapping<\/h2>\n\n\n\n<p id=\"ca7c\">One of the most exciting features of HoloLens is spatial mapping capability. HoloLens scans and analyzes the physical environment and gives us information about the surfaces. Using this surface information, we can make objects interact with the physical environment.<\/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\/flimsyunselfishcopperbutterfly\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/flimsyunselfishcopperbutterfly\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Typesetting on the physical surface with spatial mapping\n<\/figcaption>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p id=\"245a\">Air-tapping the \u2018Snap to Surface\u2019 button on the floating toolbar initializes the scanning experience. When you look around your environment, HoloLens will gather information about the surfaces around you. You can understand the progress with blue visual meshes.<\/p>\n\n\n\n<p id=\"f93f\">Once it gathers enough information about the surfaces, the blue mesh will disappear. Now you can air-tap any text object and gaze on the surfaces, the text will snap to surfaces, following your gaze cursor. You can make the text align with various surface types such as walls, and floors. and ceilings. Air-tap again to place the text object.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ee93\">Gravity with physics<\/h2>\n\n\n\n<p id=\"ec83\">Once you have information about the physical surfaces, you can play with physics. Using the button \u2018Gravity\u2019 on the toolbar, you can toggle gravity to the entire scene. The text objects will fall to the floors and tables.<\/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\/flickeringcostlygrayling\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/flickeringcostlygrayling\"><\/a><\/p>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4e1f\">Text input<\/h2>\n\n\n\n<p id=\"6b8f\">You can use the system default keyboard to type in the text. By using the dictation feature, you can easily input the text with your voice.<\/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\/sophisticatedmilkykangaroo\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/sophisticatedmilkykangaroo\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Text input with HoloLens system keyboard input\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"76b2\">Save and Load the scene<\/h2>\n\n\n\n<p id=\"c7e4\">You can save and load your spatial type composition. [Update 9\/1\/2018] Now you can export type composition as an XML file and import XML or TXT text file. On RS1 HoloLens, you need to install the OneDrive app. From RS4, the app uses system File Explorer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1cf5\">[Update: Sep. 2018] Outline Text<\/h2>\n\n\n\n<p id=\"5d9c\">Type in Space now supports the outlined text.<\/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\/smartbarrenaltiplanochinchillamouse\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/smartbarrenaltiplanochinchillamouse\"><\/a><\/p>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0b46\">Where can we use it?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dc22\">Architectural Signage Design<\/h3>\n\n\n\n<p id=\"6c41\">\u2018Snap to Surface\u2019 feature allows you lay out the type on the physical surface. In real-time, you can change the font, color and observe from different angles. It helps you quickly sketch signage without building physical prototypes.<\/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\/imaginaryjovialcatbird\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/imaginaryjovialcatbird\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Real-time signage design sketch on the physical surface\n<\/figcaption>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6c47\">Object Labeling \/ Annotation<\/h3>\n\n\n\n<p id=\"b0e0\">Three-dimensional, world-locked text objects are perfect for spatial annotation. Since the text object stays where you placed, you can use it to annotate three-dimensional physical objects in the real world. The video below shows the example of the labeling on the physical object(jet engine).<\/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\/flickeringfrighteninglark-rainbow6-siege\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/flickeringfrighteninglark-rainbow6-siege\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Labeling the physical object\n<\/figcaption>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"28a0\">Wayfinding<\/h3>\n\n\n\n<p id=\"66a1\">Floating, world-locked text object can be used as spatial wayfinding signs.<\/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\/bewitchednaughtyamphiuma\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/bewitchednaughtyamphiuma\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Using holographic text as wayfinding elements\n\n<\/figcaption>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c00b\">Product Package \/ Book Cover Design<\/h3>\n\n\n\n<p id=\"60e6\">Since you can lay out a type on any physical surface, it could be used to design a logotype on a package or book cover. You can change font, color and observe it from different angles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c4fd\">Data Visualization with dynamic data binding<\/h3>\n\n\n\n<p id=\"2a63\">I have been experimenting with spatial text + dynamic data. News Space is one example of using external API with spatial text. Holographic Type Sculpture could be used to visualize data too. (*Data binding is not available in the Type In Space app)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*oDC6fhK0JRT-xXnlCLlnXQ.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Holographic Type Sculpture with live data<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"37f5\">Typography in Mixed Reality<\/h2>\n\n\n\n<p id=\"86bf\">Typography in three-dimensional space introduces interesting challenges and exciting opportunities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"e278\">Type size in 3D space<\/h3>\n\n\n\n<p id=\"52fc\">Since it involves another dimension \u2014 depth \u2014 it becomes a little bit tricky to communicate type metrics. For example, the 24pt type could be very big or small, depending on the distance in 3D space. In HoloLens, since the&nbsp;<a href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/comfort\" rel=\"noreferrer noopener\" target=\"_blank\">recommended distance for placing a holographic object is 2 meters for the user&#8217;s<\/a> comfort,&nbsp;we can use it as a standard distance to define and communicate type size. In my previous app Typography Insight for HoloLens, I added an example type ramp based on 2 meters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adef\">Display resolution<\/h3>\n\n\n\n<p id=\"a98b\">Another challenge is the headset\u2019s hardware display resolution. The current generation of virtual reality headsets shows the screen-door effect which is not ideal for displaying type. Designers are using larger type size or minimize the use of text in virtual reality applications. HoloLens does not suffer from this screen-door effect because it has a much better resolution(PPD, Pixels Per Degree). It can render a beautiful type with crisp contour. It also works well with serif typefaces too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"b65f\">Improving type rendering quality<\/h3>\n\n\n\n<p id=\"2d57\">Unity\u2019s Text Mesh and UI Text are blurry by default. Therefore, it requires some optimization effort. In my previous article,&nbsp;<a href=\"https:\/\/medium.com\/microsoft-design\/designing-typography-insight-for-hololens-a55fc5fe025\">I described optimization options for Unity\u2019s Text Mesh and UI Text component<\/a>.<\/p>\n\n\n\n<p id=\"03b3\"><a href=\"https:\/\/assetstore.unity.com\/packages\/essentials\/beta-projects\/textmesh-pro-84126\" rel=\"noreferrer noopener\" target=\"_blank\">TextMesh Pro<\/a>&nbsp;is a great solution to secure text rendering quality. Since it uses&nbsp;<a href=\"https:\/\/steamcdn-a.akamaihd.net\/apps\/valve\/2007\/SIGGRAPH2007_AlphaTestedMagnification.pdf\" rel=\"noreferrer noopener\" target=\"_blank\">SDF technology<\/a>, it renders crisp outlines of the text regardless of the distance. From Unity 2018.2,&nbsp;<a href=\"https:\/\/youtu.be\/YpUFxdoLWhA\" rel=\"noreferrer noopener\" target=\"_blank\">TextMesh Pro is included in the Unity editor<\/a>. If you use it with a large-scale font, it shows rounded stroke edges. You can improve this quality by increasing the texture size in TextMesh Pro\u2019s texture generation process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"e959\">Scaling and positioning text in mixed reality<\/h3>\n\n\n\n<p id=\"6d74\">There are interesting techniques for the text display in mixed reality such as \u2018billboarding\u2019 which makes the text always face you regardless of your position or view angle, or \u2018constant angular size\u2019 which maintains type size regardless of the distance to secure the legibility of type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c122\">Volumetric text<\/h3>\n\n\n\n<p id=\"07cc\">When we talk about type in 3D space, we tend to think of extruded, volumetric 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. You can easily imagine how difficult it is to read news headlines with extruded 3D text \ud83d\ude42<\/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 &#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>Your physical environment becomes a new canvas for typography Background Microsoft HoloLens&nbsp;allows you to place [&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-274","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\/274","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=274"}],"version-history":[{"count":3,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/274\/revisions"}],"predecessor-version":[{"id":5219,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/274\/revisions\/5219"}],"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=274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}