{"id":311,"date":"2018-11-01T05:01:29","date_gmt":"2018-11-01T05:01:29","guid":{"rendered":"http:\/\/dongyoonpark.com\/?p=311"},"modified":"2022-12-24T21:43:31","modified_gmt":"2022-12-24T21:43:31","slug":"open-source-building-blocks-for-windows-mixed-reality-experiences","status":"publish","type":"post","link":"https:\/\/mixedrealitynow.com\/ko\/open-source-building-blocks-for-windows-mixed-reality-experiences","title":{"rendered":"MRTK v1: Open-Source Building Blocks for Mixed Reality"},"content":{"rendered":"\n<h2 class=\"graf graf--h4 graf-after--h3 graf--subtitle wp-block-heading\" id=\"096f\">Learn about the latest building blocks in Mixed Reality Toolkit for creating apps for HoloLens and immersive headsets.<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"http:\/\/dongyoonpark.com\/wp-content\/uploads\/2018\/11\/MRTK_BuildingBlocks.png\" alt=\"\" class=\"wp-image-312\"\/><\/figure>\n<\/div>\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"c46b\"><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\" target=\"_blank\" rel=\"noopener ugc nofollow\">Mixed Reality Toolkit-Unity<\/a>\u00a0is an open-source project to share foundational components, building blocks for common interactions and UI controls for building Mixed Reality experiences in Unity.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*gV1gaodalYQRkOTeFNC1Vw.jpeg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Windows Mixed Reality devices \u2014 Microsoft HoloLens and immersive HMD by Samsung<\/figcaption><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"7620\">From Mixed Reality Toolkit, I picked up some of the most frequently used building blocks and interaction patterns. For each building blocks, I\u2019ll show where you can find the example scene in the repository, and how you can use it in your projects.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong class=\"ku jd\">IMPORTANT: This article is about MRTK v1(also known as HoloToolkit).<br>* Branch name is\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/htk_release\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">htk_release<\/strong><\/a><strong class=\"ku jd\"><br>* Release package is\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/releases\/tag\/2017.4.3.0-Refresh\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">HoloToolkit<\/strong><\/a><strong class=\"ku jd\">\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/releases\/tag\/2017.4.3.0-Refresh\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">2017.4.3.0<\/strong><\/a><\/p>\n\n\n\n<p><strong class=\"ku jd\">New MRTK v2.0.0 is now available with HoloLens 2\u2019s articulated Hand Tracking and Eye Tracking input support. (9\/1\/2019)<br>* Branch name is\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">mrtk_release<\/strong><\/a><strong class=\"ku jd\"><br>* Available on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/microsoft\/MixedRealityToolkit-Unity\/releases\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">Release Page<\/strong><\/a><\/p>\n\n\n\n<p><strong class=\"ku jd\"><em class=\"jc\">MRTK v2 is NOT compatible with MRTK v1(HoloToolkit)<\/em><\/strong><em class=\"jc\">. However, most of the building blocks have been ported over MRTK v2.\u00a0<\/em><strong class=\"ku jd\"><em class=\"jc\">Please see\u00a0<\/em><\/strong><a class=\"au lo\" href=\"https:\/\/microsoft.github.io\/MixedRealityToolkit-Unity\/README.html\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\"><em class=\"jc\">the new documentation portal for more details about new building blocks in MRTK v2<\/em><\/strong><\/a><strong class=\"ku jd\"><em class=\"jc\">.<\/em><\/strong><\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Pc_Wo9B8Oexdu2y57X91Pg.jpeg\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"6d7a\">Whether you are creating apps for HoloLens or immersive headset, you need to set up your scene with proper input module, camera, cursor or motion controllers to interact with your content. And Mixed Reality Toolkit makes it easy.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"a4b0\">Example Scenes<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"6d9f\">When you first start creating apps for mixed reality, these two example scenes are the perfect place to start with.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/Input\/Scenes\/<strong class=\"ku jd\">InputManagerTest.unity<br><\/strong>HoloToolkit-Examples\/Input\/Scenes\/<strong class=\"ku jd\">MotionControllerTest.unity<br>Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit\/Input\/README.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*YbGXJf16cWAMOP-CGtS6Mg.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">InputManagerTest and MotionControllerTest scene<\/figcaption><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"f43f\">Through these scenes, you can learn how to use MRTK\u2019s InputManager and access data handle events from the motion controller buttons.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"0874\">How to use: automatic scene setup<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"43e4\">When you import\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/releases\" target=\"_blank\" rel=\"noopener ugc nofollow\">MRTK release Unity packages<\/a>\u00a0or clone the project from the GitHub repository, you are going to find a new menu \u2018<strong class=\"ku jd\">Mixed Reality Toolkit<\/strong>\u2019 in Unity.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*D0J60PdrZh_1EBQ6vT9KdA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"4162\">Under \u2018Configure\u2019 menu, you will see the menu \u2018Apply Mixed Reality Scene Settings\u2019.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/940\/1*kLGZT7tQ5QZDcQorvZsQAg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"2488\">When you click it, it removes the default camera and adds foundational components \u2014\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/Input\/Prefabs\/InputManager.prefab\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">InputManager<\/strong><\/a>,\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/Input\/Prefabs\/MixedRealityCameraParent.prefab.meta\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">MixedRealityCameraParent,<\/strong><\/a><strong class=\"ku jd\">\u00a0<\/strong>and\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/Input\/Prefabs\/Cursor\/DefaultCursor.prefab\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">DefaultCursor<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"8aa6\">You can also manually add these from the project panel. You can find these components as prefabs. When you search\u00a0<strong class=\"ku jd\">MixedRealityCamera<\/strong>, you will be able to see two different camera prefabs.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*02LxWJjg9GtJNc-ePnrpyA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"9647\">The difference is,\u00a0<strong class=\"ku jd\">MixedRealityCamera\u00a0<\/strong>is the camera only prefab whereas,\u00a0<strong class=\"ku jd\">MixedRealityCameraParent\u00a0<\/strong>includes additional components for the immersive headsets such as\u00a0<strong class=\"ku jd\">Teleportation<\/strong>,\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/Input\/Prefabs\/MotionControllers.prefab\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">Motion Controller<\/strong><\/a>\u00a0and,\u00a0<strong class=\"ku jd\">Boundary<\/strong>.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"4ec2\"><strong class=\"ku jd\">MixedRealtyCamera\u00a0<\/strong>supports both HoloLens and immersive headset. It detects the device type and optimizes the properties such as clear flags and Skybox.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"1dd7\">Below you can find some of the useful properties you can customize such as custom Cursor, Motion Controller models, and Floor.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*wr9uGje4ZYye0HaEekZgrw.png\" alt=\"\"\/><\/figure>\n\n\n\n<div class=\"iy iz l\">\u00a0<\/div>\n\n\n\n<div>\u00a0<\/div>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/admirableoddballaustralianshelduck\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/admirableoddballaustralianshelduck\"><\/a><\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Default Input setup for HoloLens & Immersive headset \u2014 Gaze, Gesture, Motion Controllers, Floor<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"0071\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/gaze\" target=\"_blank\" rel=\"noopener ugc nofollow\">Core building blocks: Gaze<\/a><\/li>\n\n\n\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/gestures\" target=\"_blank\" rel=\"noopener ugc nofollow\">Core building blocks: Gesture<\/a><\/li>\n\n\n\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/motion-controllers\" target=\"_blank\" rel=\"noopener ugc nofollow\">Core building blocks: Motion controllers<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*f2uRShCD7bpBmSSVHzFQTQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/GreenMammothKentrosaurus\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/GreenMammothKentrosaurus\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Interactable Object Example scene in MRTK<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"afd6\">Interactable Object examples show how to make any object interactable and make it respond to standard input <\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"afd6\">states such as observation, targeted and pressed. In mixed reality, a button could be anything from a coffee cup to a balloon, it doesn\u2019t have to be a flat rectangular shape that we have been using in 2D screens. It is important to provide clear visual feedback so that people can understand which object is interactable.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"cbd9\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"5022\">You can find the examples of Interactable Objects in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/UX\/Scenes\/<strong class=\"ku jd\">InteractableObjectExample.unity<br>Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_InteractableObjectExample.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Xa5xEsIsYgHNP_v2FXKp6A.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">InteractableObjectExample scene<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"25bd\">How to use<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"f9db\">To make an object interactable, you can use series of the scripts called\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/tree\/master\/Assets\/HoloToolkit\/UX\/Scripts\/Buttons\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">CompoundButton<\/strong><\/a>. They are modular scripts for various interaction elements such as mesh, text, animation, icon, sound, and speech.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*ajdocFMiQq3A2Zy3RV9QeA.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Compound Button script series in MRTK<\/figcaption><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"374d\">You can mix & match these scripts for your purpose.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*h2rVxc6FnodWErVSniRwbg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"ae61\">Interaction states<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong class=\"ku jd\">Disabled<\/strong>: Object is inactive<\/li>\n\n\n\n<li><strong class=\"ku jd\">Observation<\/strong>: Cursor not on the object, Hand not raised<\/li>\n\n\n\n<li><strong class=\"ku jd\">Observation<\/strong>\u00a0Targeted: Cursor on the object, Hand not raised<\/li>\n\n\n\n<li><strong class=\"ku jd\">Interactive<\/strong>: Cursor not on the object, Hand ready gesture<\/li>\n\n\n\n<li><strong class=\"ku jd\">Targeted<\/strong>: Cursor on the object, Hand ready gesture<\/li>\n\n\n\n<li><strong class=\"ku jd\">Pressed<\/strong>: Cursor on the object, Hand air-tapped gesture<\/li>\n<\/ul>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/plushuglycattle\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/plushuglycattle\"><\/a><\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"0499\">InteractableObjectExample.unity scene includes HolographicButton prefab and ToolBar prefab made with HolographicButton + ObjectCollection.<\/p>\n\n\n\n<div class=\"it iu iv iw gc o gn\">\n<figure class=\"nw im nx ny nz oa ob paragraph-image\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"ce ir is c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1300\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg\" alt=\"\" width=\"584\" height=\"228\"><\/figure><div class=\"in io do ip ce iq\" tabindex=\"0\" role=\"button\"><picture><source srcset=\"https:\/\/miro.medium.com\/max\/640\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 640w, https:\/\/miro.medium.com\/max\/720\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 720w, https:\/\/miro.medium.com\/max\/750\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 750w, https:\/\/miro.medium.com\/max\/786\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 786w, https:\/\/miro.medium.com\/max\/828\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 828w, https:\/\/miro.medium.com\/max\/1100\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 1100w, https:\/\/miro.medium.com\/max\/1168\/1*uBlOHAVcFyOi7fb11Q3imQ.webp 1168w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 584px\"><source srcset=\"https:\/\/miro.medium.com\/max\/640\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 640w, https:\/\/miro.medium.com\/max\/720\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 720w, https:\/\/miro.medium.com\/max\/750\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 750w, https:\/\/miro.medium.com\/max\/786\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 786w, https:\/\/miro.medium.com\/max\/828\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 828w, https:\/\/miro.medium.com\/max\/1100\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 1100w, https:\/\/miro.medium.com\/max\/1168\/1*uBlOHAVcFyOi7fb11Q3imQ.jpeg 1168w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 584px\" data-testid=\"og\"><\/picture><\/div>\n<\/figure>\n<figure class=\"nw im oc ny nz oa ob paragraph-image\">\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"ce ir is c\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/1280\/1*aXVfbpksxoRya0LXM8_IqA.jpeg\" alt=\"\" width=\"417\" height=\"314\"><\/figure><div class=\"in io do ip ce iq\" tabindex=\"0\" role=\"button\"><picture><source srcset=\"https:\/\/miro.medium.com\/max\/640\/1*aXVfbpksxoRya0LXM8_IqA.webp 640w, https:\/\/miro.medium.com\/max\/720\/1*aXVfbpksxoRya0LXM8_IqA.webp 720w, https:\/\/miro.medium.com\/max\/750\/1*aXVfbpksxoRya0LXM8_IqA.webp 750w, https:\/\/miro.medium.com\/max\/786\/1*aXVfbpksxoRya0LXM8_IqA.webp 786w, https:\/\/miro.medium.com\/max\/828\/1*aXVfbpksxoRya0LXM8_IqA.webp 828w, https:\/\/miro.medium.com\/max\/1100\/1*aXVfbpksxoRya0LXM8_IqA.webp 1100w, https:\/\/miro.medium.com\/max\/834\/1*aXVfbpksxoRya0LXM8_IqA.webp 834w\" type=\"image\/webp\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 417px\"><source srcset=\"https:\/\/miro.medium.com\/max\/640\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 640w, https:\/\/miro.medium.com\/max\/720\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 720w, https:\/\/miro.medium.com\/max\/750\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 750w, https:\/\/miro.medium.com\/max\/786\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 786w, https:\/\/miro.medium.com\/max\/828\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 828w, https:\/\/miro.medium.com\/max\/1100\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 1100w, https:\/\/miro.medium.com\/max\/834\/1*aXVfbpksxoRya0LXM8_IqA.jpeg 834w\" sizes=\"(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 417px\" data-testid=\"og\"><\/picture><\/div>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn od do oe of\" data-selectable-paragraph=\"\">HolographicButton and ToolBar prefab in MRTK<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"726c\">Interaction Receiver: Handle events in a single place<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"adcf\">Interaction Receiver is a convenient building block that allows you handle the events from multiple objects in a single place.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*F5D1ll7wmim5_Ns1rEBB7A.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"e9bf\">As you can see in this diagram, Interaction Receiver can store list of the objects and when it receives events, it can do something based on the triggered object.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"3bd6\">How to use<\/h2>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*fXE-b565k4Ykx2SHXwqdwQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*l-jIQpUrtPLmaaLSVqbxsg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"22e7\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/gaze-targeting\" target=\"_blank\" rel=\"noopener ugc nofollow\">Target sizing, feedback and placement<\/a><\/li>\n\n\n\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/interactable-object\" target=\"_blank\" rel=\"noopener ugc nofollow\">Interactable object<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Q4-ykpAEsfsVOQC465y5bQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/TameQuaintGnu\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/TameQuaintGnu\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Interactable Object Example scene in MRTK<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"9c62\">Bounding box is the standard interface for manipulating objects in Windows Mixed Reality. You can find this in the HoloLens shell as well as the cliff house in the immersive headset. With this single UI, you can move, rotate and scale objects. App bar is used to display contextual buttons on the objects. In default, it shows\u00a0<strong class=\"ku jd\">Hide<\/strong>,\u00a0<strong class=\"ku jd\">Adjust<\/strong>, and\u00a0<strong class=\"ku jd\">Remove<\/strong>\u00a0button. Adjust button shows the gizmo affordance for manipulation and remove button deletes the object. You can also add additional custom buttons in the\u00a0<strong class=\"ku jd\">AppBar<\/strong>\u00a0prefab.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"bbd1\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"76a3\">You can find the examples of Bounding Box & App Bar in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/UX\/Scenes\/<strong class=\"ku jd\">BoundingBoxGizmoExample.unity<br>Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_BoundingBoxGizmoExample.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*4b8GS2Eh2a_9Xc4hLMB71w.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">BoundingBoxGizmoExample scene<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"7e55\">How to use<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"0fa4\">Simply assign\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/UX\/Scripts\/BoundingBoxes\/BoundingBoxRig.cs\" target=\"_blank\" rel=\"noopener ugc nofollow\">BoundingBoxRig script<\/a>\u00a0to any object. BoundingBoxBasic prefab is required to get blue wire visualization.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*tZlpbDo6M0FdFuK3srchNQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"27e6\">TwoHandManipulatable script is optional. This allows you move, rotate, and scale using two hands. In default, Bounding Box does not move the object.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"bf68\">You can also add your custom buttons to the AppBar. Search\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit\/UX\/Prefabs\/AppBar\/AppBar.prefab\" target=\"_blank\" rel=\"noopener ugc nofollow\">AppBar prefab<\/a>\u00a0in the project panel and find Button property in the Inspector panel. You will be able to adjust the number of Buttons and define your custom buttons.<\/p>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/UnevenExcitableLemming\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/UnevenExcitableLemming\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Adding custom button to the App Bar<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"7e13\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/app-bar-and-bounding-box\" target=\"_blank\" rel=\"noopener ugc nofollow\">App bar and Bounding box<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*vfu32AySn7NJhMB8FyIyhg.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/ColossalEnlightenedAntipodesgreenparakeet\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/ColossalEnlightenedAntipodesgreenparakeet\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Adding custom button to the App Bar<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"c0a0\">Two Hand Manipulation allows you manipulate objects using both hands. You can scale, rotate and move by tap and hold and moving your both hands. This is the same interaction behavior introduced in April 2018 Update (also known as RS4) HoloLens as well as in the cliff house for the immersive headset. It works with motion controllers too. It is an intuitive way to manipulate the objects in space.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"f416\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"29de\">You can find the examples of Two Hand Manipulation in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/Input\/Scenes\/<strong class=\"ku jd\">TwoHandManipulationTest.unity<br>Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/Input\/Readme\/README_TwoHandManipulationTest.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*G2Poky63rjz6nulYPlbSgg.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">TwoHandManipulationTest scene<\/figcaption><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"2be4\">How to use<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"7118\">Simply assign\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit\/Input\/Scripts\/Utilities\/Interactions\/TwoHandManipulatable.cs\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">TwoHandManipulatable<\/strong><\/a>\u00a0script to any object.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*EdldQ0bU75H4kuIps6ZOQA.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*h2awoJzNDF4CML_sXB3h3A.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/WelldocumentedCarelessHairstreakbutterfly\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/WelldocumentedCarelessHairstreakbutterfly\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Adding custom button to the App Bar<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"1f7a\">With Object Collection, you can easily layout an array of objects in 3D space. You can specify the surface type, row, radius, cell width\/height and facing options. With these various options, you can quickly construct three-dimensional grid system.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"060c\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"ebbd\">You can find the examples of the Object Collection in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/UX\/Scenes\/<strong class=\"ku jd\">ObjectCollectionExample.unity<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/Input\/Scenes\/TwoHandManipulationTest.unity\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\"><br><\/strong><\/a><strong class=\"ku jd\">Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/UX\/Readme\/README_ObjectCollection.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"7bb8\">How to use<\/h2>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Pdlf9wTILohSVTdSmnAq4A.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*3LnepUasCF9kVloCWmDqlw.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"8c45\">Example of making a grid layout UI with HolographicButton prefab and ObjectCollection.<\/p>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/HoarseBogusGreatdane\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/HoarseBogusGreatdane\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Holographic Button + Object Collection\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"d4c7\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/object-collection\" target=\"_blank\" rel=\"noopener ugc nofollow\">Object Collection<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*_f-h8lhlSndKZWOCId4HzQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/DentalRecklessBobolink\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/DentalRecklessBobolink\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Example of Tag-Along + Constant View Size + Surface Magnetism on Start menu<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"818d\">Solver system allows you to combine various object positioning behaviors and run them in order. The Start menu is a good example that shows multiple behaviors such as Tag-along, Surface Magnetism, and Constant View Size. It follows you in a certain range and if it collides with other object surfaces, it follows the surface and automatically scales down or up to maintain the size.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"282d\">Modular Solver script series provide the following object positioning behaviors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tag-along<\/li>\n\n\n\n<li>Billboarding<\/li>\n\n\n\n<li>Radial view<\/li>\n\n\n\n<li>Body lock<\/li>\n\n\n\n<li>Surface magnetism<\/li>\n\n\n\n<li>Constant view size<\/li>\n<\/ul>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"3a88\">In MRTK, there is a simple Tag-along script but Solvers could be better when you want to combine multiple positioning mechanisms such as Tag-along and Surface magnetism.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"1e5e\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"d46e\">You can find the examples of the Object Collection in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/Utilities\/Scenes\/<strong class=\"ku jd\">SolverExamples.unity<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/master\/Assets\/HoloToolkit-Examples\/Input\/Scenes\/TwoHandManipulationTest.unity\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\"><br><\/strong><\/a><strong class=\"ku jd\">Find technical details on the\u00a0<\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/Utilities\/Readme\/README_SolverSystem.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README File<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"d8dc\">How to use<\/h2>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*65-gZuuZjaSe3LM2lpWh5w.png\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/ConcernedSoreCricket\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/ConcernedSoreCricket\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Holographic Button + Object Collection\n<\/figcaption>\n<\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/HandyCanineBasilisk\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/HandyCanineBasilisk\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Solver Body Lock example\n<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"6a9a\">Solver Surface Magnetism + Spatial Processing<\/h2>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/PitifulRareKodiakbear\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/PitifulRareKodiakbear\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Solver Surface Magnetism + Spatial Processing\n<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"24c2\">This example shows how to make objects smoothly align with the physical surface. Find the example scene and\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit-Examples\/SpatialMapping\/SpatialProcessingSurfaceMagnetism.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">README file about Spatial Processing + Solver Surface Magnetism example<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"54ee\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/billboarding-and-tag-along\" target=\"_blank\" rel=\"noopener ugc nofollow\">Billboarding and Tag-along<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*d4kvIwlvZwaUGneD8jAwHQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"3a85\">Voice input is a natural way to interact with an object in mixed reality. It can help users to reduce the time and minimize effort. Windows Mixed Reality shell provides system level commands such as \u201c<strong class=\"ku jd\">Select<\/strong>\u201d, \u201c<strong class=\"ku jd\">Close<\/strong>\u201d, \u201c<strong class=\"ku jd\">Move This<\/strong>\u201d and \u201c<strong class=\"ku jd\">Face Me<\/strong>\u201d.<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"d599\">With MRTK, you can easily add voice commands to your experiences.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"8c31\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"cc3e\">You can find the examples of the voice input in this scene<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/Input\/Scenes\/<strong class=\"ku jd\">SpeechInputSource.unity<\/strong><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"983a\">How to use<\/h2>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*GBGMhk807VQGw8T2qBApyg.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*L-ruEZt7kXTf2ZqaZNkjNg.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"828b\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/voice-input\" target=\"_blank\" rel=\"noopener ugc nofollow\">Voice input<\/a><\/li>\n\n\n\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/voice-design\" target=\"_blank\" rel=\"noopener ugc nofollow\">Voice design<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*KDmrJ0jMYU9oJUkShdq2QQ.jpeg\" alt=\"\"\/><\/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\/DrearyCompleteAustraliankestrel\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/DrearyCompleteAustraliankestrel\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Example of using Spatial Understanding in Fragments<\/figcaption>\n<\/figure>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"3632\">Spatial Understanding is one of the most exciting capabilities in HoloLens. With Spatial Understanding, you can analyze your environment and identify the types of physical surfaces \u2014 such as Floor, Ceiling, Wall, and Platforms. When you leverage these physical surfaces, you can create realistic holograms that interact with the real-life environment.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"4675\">Example Scenes<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"9713\">In MRTK, there are three different examples. Spatial Mapping, Spatial Processing, and Spatial Understanding.<\/p>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*DbJ3jMQIz9aiqly5lJo6fA.png\" alt=\"\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Examples\/SpatialMapping\/Scenes\/<strong class=\"ku jd\">SpatialMappingExample.unity<br><\/strong>Examples\/SpatialMapping\/Scenes\/<strong class=\"ku jd\">SpatialProcessing.unity<br><\/strong>Examples\/SpatialUnderstanding\/Scenes\/<strong class=\"ku jd\">SpatialUnderstandingExample<\/strong><\/p>\n\n\n\n<p><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit\/SpatialMapping\/README.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">Find technical details on the README File \u2014 Spatial Mapping & Processing<\/strong><\/a><strong class=\"ku jd\"><br><\/strong><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/blob\/htk_release\/Assets\/HoloToolkit\/SpatialUnderstanding\/README.md\" target=\"_blank\" rel=\"noopener ugc nofollow\"><strong class=\"ku jd\">Find technical details on the README File \u2014 Spatial Understanding<\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"a773\">Spatial Mapping<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"904c\">You can simply drag and drop SpatialMapping prefab and you can get this kind of meshes of your environment. It is a little bit rough but it is a quick and easy way to make your app interact with the environment.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"4362\">Spatial Processing<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"fe7a\">If you want to get more refined clean surfaces, you can use Spatial Processing. Spatial Processing converts the meshes into planes by merging vertices. Through this, you can get clean planes for the walls, tables, and floors.<\/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\/BlissfulMellowFoal\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/BlissfulMellowFoal\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Spatial Processing Example scene in MRTK<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"4cd2\">Spatial Understanding<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"9676\">This is the most sophisticated one. The example scene shows the room scanning experience and gives you identified surfaces. Using this technique, you can place your content on a specific surface type.<\/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\/SpryFearfulChamois\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/SpryFearfulChamois\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Spatial Understanding Example scene in MRTK<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"ec3e\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/spatial-mapping\" target=\"_blank\" rel=\"noopener ugc nofollow\">Core building blocks: Spatial mapping<\/a><\/li>\n\n\n\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/spatial-mapping-design\" target=\"_blank\" rel=\"noopener ugc nofollow\">Spatial mapping design<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*l_1rWC6fYMnDi67Yfrw0NQ.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"position:relative; padding-bottom:calc(56.25% + 44px)\"><iframe loading=\"lazy\" src=\"https:\/\/gfycat.com\/ifr\/ElaborateSneakyBinturong\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/ElaborateSneakyBinturong\"><\/a><\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"77cf\">If you build an experience for the immersive headset with motion controllers, you can use AttachToController to attach any objects and UI to the controllers.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"678a\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"d518\">You can find great examples in the Mixed Reality Academy Tutorial \u2014 Motion Controllers.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mixed-reality-213\" target=\"_blank\" rel=\"noopener ugc nofollow\">https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/<strong class=\"ku jd\">mixed-reality-213<\/strong><\/a><strong class=\"ku jd\"><br><\/strong>HoloToolkit\/Input\/Scripts\/Utilities\/<strong class=\"ku jd\">AttachToController.cs<\/strong><\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*Aw2TLqc4ZliwZkF_fGtRdw.png\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Mixed Reality Academy \u2014 Motion Controller Tutorial<\/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\/TestyWeightyDegu\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/TestyWeightyDegu\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Mixed Reality Academy \u2014 Motion Controller Tutorial<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"e4b6\">How to use<\/h2>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*n8k2gIjMcjhzIoAB69iVJA.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"5bca\">Design & Development Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/mixed-reality-213\" target=\"_blank\" rel=\"noopener ugc nofollow\">Mixed Reality Academy 213: Motion controllers tutorial<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image it iu iv iw gc im fq fr paragraph-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/1400\/1*9NfXABM6vBvrX6Yf90oFGg.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"d149\">MRTK\/StandardShader is a new shader which provides various kinds of effects such as glowing border, hover highlighting, and animated properties. With this shader, you can easily achieve Fluent Design System\u2019s elements such as light, depth, and material. It is optimized for the performance in HoloLens to run at 60fps.<\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"0c50\">Example Scene<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"7b90\">You can find great examples of the materials based on MRTK\/Standard Shader.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote lt lu lv is-layout-flow wp-block-quote-is-layout-flow\">\n<p>HoloToolkit-Examples\/StandardShader\/Scenes\/<strong class=\"ku jd\">MaterialGallery.unity<\/strong><\/p>\n<\/blockquote>\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\/SkeletalZigzagKookaburra\" frameborder=\"0\" scrolling=\"no\" width=\"100%\" height=\"100%\" style=\"position:absolute;top:0;left:0;\" allowfullscreen=\"\"><\/iframe><\/div><p> <a href=\"https:\/\/gfycat.com\/SkeletalZigzagKookaburra\"><\/a><\/p>\n<figcaption class=\"lq bl fs fq fr lr ls bm b bn bo cn\">Mixed Reality Toolkit Standard Shader example scene<<\/figcaption>\n<\/figure>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"79ab\">Next Step<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"75d4\">I introduced some of the useful building blocks in MRTK. I hope this can help your mixed reality journey! Join the community by\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/issues\" target=\"_blank\" rel=\"noopener ugc nofollow\">opening an issue, reporting a bug<\/a>, and\u00a0<a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\/pulls\" target=\"_blank\" rel=\"noopener ugc nofollow\">contributing your code<\/a>!<\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"257f\"><a class=\"au lo\" href=\"https:\/\/github.com\/Microsoft\/MixedRealityToolkit-Unity\" target=\"_blank\" rel=\"noopener ugc nofollow\">Mixed Reality Toolkit (GitHub)<\/a><\/p>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv kw kd kx ky kz kg la lb lc ld le lf lg lh li lj lk ll lm ln id gl\" id=\"8ce9\"><a class=\"au lo\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/mixed-reality\/academy\" target=\"_blank\" rel=\"noopener ugc nofollow\">Mixed Reality Academy Tutorials<\/a><\/p>\n\n\n\n<h2 class=\"mb mc jc bm md me mf mg mh mi mj mk ml ki mm kj mn kl mo km mp ko mq kp mr ms gl wp-block-heading\" id=\"20a5\">Watch session video from Unity Unite Berlin 2018<\/h2>\n\n\n\n<p class=\"pw-post-body-paragraph ks kt jc ku b kv mt kd kx ky mu kg la lb mv ld le lf mw lh li lj mx ll lm ln id gl\" id=\"203d\">Open-source Building Blocks for Windows Mixed Reality<\/p>\n\n\n\n<figure class=\"it iu iv iw gc im\">\n<div class=\"m ix l do\">\n<div class=\"oy iz l\"><iframe loading=\"lazy\" class=\"gj aq as ag ce\" title=\"Unite Berlin - Day 3 Sessions Livestream\" src=\"https:\/\/cdn.embedly.com\/widgets\/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fa768FLX9bRc%3Fstart%3D17999%26feature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Da768FLX9bRc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fa768FLX9bRc%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube\" width=\"854\" height=\"480\" frameborder=\"0\" scrolling=\"auto\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<\/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 \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>Learn about the latest building blocks in Mixed Reality Toolkit for creating apps for HoloLens [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4574,"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],"tags":[],"class_list":["post-311","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/mixedrealitynow.com\/wp-content\/uploads\/2018\/11\/MRTK_BuildingBlocks-760x400-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/311","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=311"}],"version-history":[{"count":2,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"predecessor-version":[{"id":4729,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/posts\/311\/revisions\/4729"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media\/4574"}],"wp:attachment":[{"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mixedrealitynow.com\/ko\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}