{"id":11866,"date":"2017-10-04T12:44:28","date_gmt":"2017-10-04T11:44:28","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=11866"},"modified":"2017-10-05T11:29:05","modified_gmt":"2017-10-05T10:29:05","slug":"vr-prototyping-marvel","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/","title":{"rendered":"VR Prototyping with Marvel"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">VR is slowly but surely going mainstream. It feels like we've been waiting forever for the technology to go from huge installations <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.pinterest.co.uk\/pin\/185773553358258741\">like this<\/a> to the living room of consumers in the form of PlayStation VR and HTC Vive. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the next 3 years, Forrester predicts that over <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.inc.com\/john-brandon\/what-52-million-virtual-reality-headsets-will-ship-by-2020-means-for-your-busine.html\">52 million virtual reality headsets<\/a> will be sold and earlier this year, Samsung <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.adweek.com\/digital\/samsung-just-revealed-ces-its-sold-5-million-virtual-reality-headsets-175368\/\">revealed<\/a> they've already sold 5 million Gear VRs.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However it still feels like the tools and processes needed to lower the barrier of entry for product designers and wider teams is some way away. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you've tried dipping your toe in and designing or prototyping for VR, you've no doubt been confused with what sizes to make your designs, the equipment you need to buy and the software you need. Don't worry you're not alone!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Luckily, a few kind folks have written posts to help get started, I read through '<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/getting-started-vr-interface-design\">Getting started with VR Interface Design<\/a>' and '<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/design-practices-virtual-reality\/\">Design practise in Virtual Reality<\/a>' to get inspired. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This quote by Alex and Sam caught my eye:<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cWorkflows that designers have spent years refining won\u2019t go to waste and can be used to craft VR UIs\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It got me thinking, what if I could hack my existing workflow to be able design and prototype for VR? I gathered my ingredients:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Some designs made in Sketch<\/li>\n<li>A prototype made in Marvel and viewed in the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/us\/app\/marvel-design-apps-on-your\/id765801658?mt=8\">Marvel iOS app<\/a><\/li>\n<li>A <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/store.google.com\/gb\/product\/google_cardboard?hl=en-GB\">Google Cardboard headset<\/a> (I also considered making my own <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.cnet.com\/uk\/how-to\/how-to-make-a-vr-headset-out-of-a-pizza-box\/\">with a spare pizza box).<\/a><\/ul>\n<\/li>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So after a few days of hacking, here's a glimpse of something fun that I've been working on - <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Marvel for VR<\/strong>!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here's what I did:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Hacking our iOS app<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We have a popular iOS app that allows you to create and view prototypes on your phone. I wanted to use this and Google Cardboard as the headset for my VR prototype in Marvel.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Currently the app only supports 2D designs so I needed a way to support 360\u00b0 images which provide a simple base for our VR scenes. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I used the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developers.google.com\/vr\/ios\/\">Apple SceneKit SDK<\/a> to transform the images in the prototypes into 3D environments, then enabled the accelerometer to track head movements.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Marvel uses 'hotspots' to quickly link designs together to form prototypes. A hotspot is essentially an interaction area you draw over your design that allows the user to click or touch to move to the next screen.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I would need to slightly change the default behaviour of the hotspots in Marvel to work with VR.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Although Google Cardboard (and most VR headsets) includes an action button that works just like a click or touch, I also wanted to allow the user to just look at a hotspot for a couple of seconds and progress to the next screen without needing to do anything else.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now that the tech was sorted, the next step was to figure out how to design for VR prototypes...<\/p>\n<div id='gallery-1' class='gallery galleryid-11866 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2500\" height=\"1407\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Hands_2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Hands_2.jpg 2500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Hands_2-600x338.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Hands_2-768x432.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Hands_2-1500x844.jpg 1500w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Designing for VR<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Apparently, the first thing I needed to start designing for VR was a 2:1 ratio artboard in Sketch or Photoshop.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I found this <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/facebook.design\/vr-template\">great template by Facebook<\/a> to help me get started. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Facebook VR Template also comes with some handy guides. The green guide defines a comfortable viewing angle for the user when wearing the heaset. Yellow shows you what will be at the edges of the users vision and hopefully trigger their curiosity. The red part is what the user can just about see. <\/p>\n<div id='gallery-2' class='gallery galleryid-11866 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"750\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1500x750.png\" class=\"attachment-large size-large\" alt=\"Facebook VR Template\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1500x750.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-600x300.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-768x384.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now we've got our template, I'm ready to start designing. As a big fan of Game of Thrones, I've created two fictional screens for my \u201cGame of Marvel\u201d game. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The first screen is the 3D environment and the second is a menu which displays when the game is paused.<\/p>\n<div id='gallery-3' class='gallery galleryid-11866 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"750\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-2-1500x750.jpg\" class=\"attachment-large size-large\" alt=\"Marvel for VR - Scene\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-2-1500x750.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-2-600x300.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-2-768x384.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For the background, I created a 360\u00b0 image of a scene using Cinema 4D.<br \/>\nHowever! You don't need 3D software to get started, it could be any 360\u00b0 image or even just a white background. Flickr has a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/vr\">great collection of 360\u00b0<\/a> images which you can find <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.flickr.com\/vr\">here<\/a>.<\/p>\n<div id='gallery-4' class='gallery galleryid-11866 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"4000\" height=\"2000\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1.jpg\" class=\"attachment-full size-full\" alt=\"Marvel for VR - Scene\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1.jpg 4000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1-600x300.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1-768x384.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Image-1-1500x750.jpg 1500w\" sizes=\"auto, (max-width: 4000px) 100vw, 4000px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You've probably noticed from the 360 images above, everything looks quite stretched and a bit strange. This is due to images being wrapped around a sphere when you view them through a VR headset to give the impression of a 360\u00b0 view.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I've added a little 3D illustration to give you an idea of what's happening under the hood:<\/p>\n<div id='gallery-5' class='gallery galleryid-11866 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"717\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-08-31-at-08.43.50-1500x717.png\" class=\"attachment-large size-large\" alt=\"Marvel for VR prototyping\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-08-31-at-08.43.50-1500x717.png 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-08-31-at-08.43.50-600x287.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-08-31-at-08.43.50-768x367.png 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Grab the Sketch file <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/10\/Game-of-Marvel.sketch.zip\">here<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A word of warning:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Since your design will be wrapped around a sphere you need to be aware the buttons you add to your design also become spherized. I've noticed the bigger the buttons, the more noticeable the effect becomes. I recommend  to not go over 400x400px for shapes on the 4000x2000px Facebook template. <\/p>\n<div id='gallery-6' class='gallery galleryid-11866 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1000\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr-1500x1000.jpg\" class=\"attachment-large size-large\" alt=\"Marvel for VR prototyping\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr-1500x1000.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr-768x512.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr.jpg 2000w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Prototyping in Marvel<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Nothing crazy here, I created a Marvel project and added my images, then linked them together with hotspots using the editor.<\/p>\n<div id='gallery-7' class='gallery galleryid-11866 gallery-columns-1 gallery-size-large'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"760\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Browser_03.png\" class=\"attachment-large size-large\" alt=\"VR Prototyping in Marvel editor\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Browser_03.png 1300w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Browser_03-600x351.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Browser_03-768x449.png 768w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">End result<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I loaded the project on the Marvel iOS app and slotted my phone into the Google Cardboard headset and viola! The first ever Marvel VR prototype!<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Check out the video below, you can see the interactions with the hotspots in the pause menu.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/fast.wistia.net\/embed\/iframe\/v65cy7unu4\" title=\"Wistia video player\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" autoplay=\"true\" class=\"wistia_embed\" name=\"wistia_embed\" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width=\"710\" height=\"399\"><\/iframe><br \/>\n<script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It took me less than 5 minutes to link my designs together to create a VR prototype and view it using the iOS app. The end result is surprisingly immersive for the amount of time spent and a lot of fun.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">What's next? If this is a feature you would love to see in Marvel, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.cnflx.io\/public\/ideas\/708\">you can add your upvote for it here<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Are you working on VR experiences? We'd love to hear from you via <a class=\"link link--blue fontWeight-4\"href=\"mailto:help@marvelapp.com\">Email<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/twitter.com\/marvelapp\">Twitter<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>VR is slowly but surely going mainstream. It feels like we&#8217;ve been waiting forever for the technology to go from huge installations like this to the living room of consumers in the form of PlayStation VR and HTC Vive. In the next 3 years, Forrester predicts that over 52 million virtual reality headsets will be sold and earlier this year,&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":91,"featured_media":12822,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-11866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VR Prototyping with Marvel | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"VR is slowly but surely going mainstream. It feels like we&#039;ve been waiting forever for the technology to go from huge installations like this to the living room of consumers in the form of PlayStation VR and HTC Vive. In the next 3 years, Forrester predicts that over 52 million virtual reality headsets will be sold and earlier this year,... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-04T11:44:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-05T10:29:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1333\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/10\/Marvel-for-vr.jpg\",\"width\":2000,\"height\":1333,\"caption\":\"Marvel for VR prototyping\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\",\"name\":\"VR Prototyping with Marvel | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#primaryimage\"},\"datePublished\":\"2017-10-04T11:44:28+00:00\",\"dateModified\":\"2017-10-05T10:29:05+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\"},\"headline\":\"VR Prototyping with Marvel\",\"datePublished\":\"2017-10-04T11:44:28+00:00\",\"dateModified\":\"2017-10-05T10:29:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#primaryimage\"},\"articleSection\":\"Small Ships\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/vr-prototyping-marvel\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/c15a12cd56e8c344978415a704279e44\",\"name\":\"Maxime De Greve\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/840c3a50faa4cfc7c6138fbb03bdfb24e590e8949a055d27e411d6067f9cc9e4?s=96&d=mm&r=g\",\"caption\":\"Maxime De Greve\"},\"description\":\"Designer and Developer @marvelapp. Belgian.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/11866","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/91"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=11866"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/11866\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/12822"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=11866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=11866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=11866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}