{"id":2804,"date":"2021-01-25T17:25:39","date_gmt":"2021-01-25T17:25:39","guid":{"rendered":"http:\/\/desres20.netornot.at\/?p=2804"},"modified":"2021-01-25T17:31:20","modified_gmt":"2021-01-25T17:31:20","slug":"setting-up-the-environment-for-vr-designing","status":"publish","type":"post","link":"http:\/\/desres20.netornot.at\/?p=2804","title":{"rendered":"Setting up the environment for VR designing"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"512\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-1024x512.png\" alt=\"\" class=\"wp-image-2806\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-1024x512.png 1024w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-300x150.png 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-768x384.png 768w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-1536x768.png 1536w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR-1140x570.png 1140w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/VR.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2>Canvas size<\/h2>\n\n\n\n<p>To apply mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.<br>Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"408\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_KYYxqfSCZyTtFEvF.png\" alt=\"\" class=\"wp-image-2808\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_KYYxqfSCZyTtFEvF.png 700w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_KYYxqfSCZyTtFEvF-300x175.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>The full width of the projection represents 360 degrees horizontally and 180 degrees vertically. We can use this to define the pixel size of the canvas: 3600 \u00d7 1800. Working with such a big size can be a challenge. But because we\u2019re primarily interested in the interface aspect of VR apps, we can concentrate on a segment of this canvas.<\/p>\n\n\n\n<p>The area of interest represents the one-ninth of the 360-degree environment. It\u2019s positioned right at the center of the equirectangular image and is 1200 \u00d7 600 pixels in size.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:71% auto\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" loading=\"lazy\" width=\"780\" height=\"390\" src=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_aX_2K32N3lNzB4Ol.png\" alt=\"\" class=\"wp-image-2809\" srcset=\"http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_aX_2K32N3lNzB4Ol.png 780w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_aX_2K32N3lNzB4Ol-300x150.png 300w, http:\/\/desres20.netornot.at\/wp-content\/uploads\/2021\/01\/0_aX_2K32N3lNzB4Ol-768x384.png 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><strong>Let\u2019s sum up:<\/strong><\/p>\n\n\n\n<p><br>\u201c360 View\u201c: 3600 \u00d7 1800 pixels<br>\u201cUI View\u201c: 1200 \u00d7 600 pixels<\/p>\n<\/div><\/div>\n\n\n\n<h2>Pencil &amp; Paper<\/h2>\n\n\n\n<p>Before getting into any software, it\u2019s crucial to get your ideas out on paper. It\u2019s fast, cheap, and helps you express ideas that may take hours in software. This is especially important because moving from sketches to hi-fidelity can cost much more in 3D than in 2D.<\/p>\n\n\n\n<h2>Software<\/h2>\n\n\n\n<p>Some designers start with tools they already know like Sketch, others use it as an opportunity to learn new tools. It really depends on what engine you are going to use to build your app. If you are building a 3D game, you\u2019ll want to use Unity or Unreal Engine. Cinema 4D and Maya are also widely used, but mostly for complex animations and renderings.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Canvas size To apply mobile app workflow to VR UIs, you first have to figure out a canvas size that makes sense.Below is what a 360-degree environment looks like when flattened. This representation is called an equirectangular projection. In a 3D virtual environment, these projections are wrapped around a sphere to mimic the real world.<\/p>\n<footer class=\"entry-footer index-entry\">\n<div class=\"post-social pull-left\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D2804\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-facebook\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/twitter.com\/home?status=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D2804\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"><\/i><\/a><a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=http%3A%2F%2Fdesres20.netornot.at%2F%3Fp%3D2804&#038;title=Setting+up+the+environment+for+VR+designing\" target=\"_blank\" class=\"social-icons\"><i class=\"fa fa-linkedin\" aria-hidden=\"true\"><\/i><\/a><\/div>\n<p class=\"link-more\"><a href=\"http:\/\/desres20.netornot.at\/?p=2804\" class=\"more-link\">Continue reading <span class=\"meta-nav\">\u2192<\/span><\/a><\/p>\n<\/footer>\n","protected":false},"author":54,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/2804"}],"collection":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2804"}],"version-history":[{"count":3,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/2804\/revisions"}],"predecessor-version":[{"id":2811,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=\/wp\/v2\/posts\/2804\/revisions\/2811"}],"wp:attachment":[{"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2804"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/desres20.netornot.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}