{"id":1597,"date":"2017-03-07T16:17:23","date_gmt":"2017-03-07T16:17:23","guid":{"rendered":"https:\/\/www.gravityjack.com\/?p=1597"},"modified":"2023-11-28T16:17:51","modified_gmt":"2023-11-28T16:17:51","slug":"adding-3d-assets-360-vr-video-case-study","status":"publish","type":"post","link":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/","title":{"rendered":"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study"},"content":{"rendered":"\n

By Shane Folden, Gravity Jack Videographer & 3D Artist<\/em><\/p>\n\n\n\n

Here at Gravity Jack, we recently completed a virtual reality (VR) project for Wind River<\/a> (an Intel Company). The goal: Show users what it will be like to drive in an autonomous<\/a>, self-driving car in the very near future!<\/p>\n\n\n\n

This was, of course, a fun project for Gravity Jack — but not without its challenges. Notably, compositing 3D elements seamlessly into a 360\u00ba VR scene.<\/p>\n\n\n\n\n\n\n\n

Interior Effects & Mapping Texture<\/h6>\n\n\n\n

When the experience begins, users find themselves sitting in the driver\u2019s (or non-driver\u2019s, if you will) seat of a futuristic, self-driving car. Throughout the experience, the windows and dash of the vehicle display a wide range of effects, including the user\u2019s route, weather reports, music and entertainment features, and other useful information that people may like to see while being driven around town.<\/p>\n\n\n\n

In addition to creating and attaching these effects to the interior of the car, we also needed to place additional effects on the road\u2019s surface and other passing vehicles in the scene.<\/p>\n\n\n\n

In order to solve the interior needs, Gravity Jack rendered all of the effects onto a flat plane. Once complete, we then mapped the texture to the 3D model. Easy! Done.<\/p>\n\n\n\n

Exterior Scene Elements<\/h6>\n\n\n\n

The exterior effects for this project proved more difficult than originally anticipated.<\/p>\n\n\n\n

For this challenge, we used Mettle\u2019s 360 software<\/a> within After Effects<\/a>. Doing this allowed us to break the equirectangular image into 6 individual images.<\/p>\n\n\n\n

Side note<\/em><\/strong>: \u201cEquirectangular\u201d is just a fancy word for the unwrapped version of a 360\u00ba video. Imagine a cardboard box that has been taken apart, each panel of the cube is a different image.<\/p>\n\n\n\n

The purpose of this step is to effectively track the scene and place objects in the scene as though it were a normal, two-dimensional video. Once this is complete, we are able to take the six individual images and combine them, seamlessly, into one equirectangular image or video (for this case, it was video).<\/p>\n\n\n\n

The Mission At Hand<\/h6>\n\n\n\n

We needed to place a green and red highlight on the road as the car traveled. Red, showing where the user could not travel due to a wreck or construction, and green to show an alternate route for the user.<\/p>\n\n\n\n

To do this, we placed the plane onto the road surface and tracked it to the scene. This makes the plane \u201cstick\u201d to the road, ensuring it does not move around with the video. Ultimately, this effect gives the illusion that the green and red planes were part of the scene.<\/p>\n\n\n\n

Up to this point — so far, so good. That was, until we start driving \u201cover\u201d the plane.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
The Issues We Encountered<\/h6>\n\n\n\n

The first issue we encountered was that the 3D model of the vehicle limited the visibility of the road surface, directly in front of the car. Unfortunately, we only had about 5 seconds of video to work with for this particular scene. We needed to convey the fact that the plane on the ground was part of the scene and not just a brief flash of color.<\/p>\n\n\n\n

Our second issue was that all of the windows on the car were transparent, allowing users to look around within the scene and be fully immersed. When we tracked the plane and placed it in the scene, it matched up and we were able to briefly drive over it; however, when we looked out the driver side window, rather than seeing a soft lit path, we saw a hard-edged green square that had been cut off by the other images.<\/p>\n\n\n\n

Dang.<\/p>\n\n\n\n

This let us know that it had only been tracked within the front facing image.<\/p>\n\n\n\n

Naturally, we went back and tried to track the plane in the other image views as well. The end result was a very sloppy look. Regardless of what we tried, getting the images to line up with each other (and seamlessly within the scene) proved entirely too difficult. So, that idea went…out the window. \ud83d\ude09<\/p>\n\n\n\n

The Solution<\/h6>\n\n\n\n

Instead of trying to track the plane in a 360\u00ba space, we simply added it to the front windshield of the car and masked off the sections that would pull users out of the immersion. This made two important things possible:<\/p>\n\n\n\n

A) Users could drive along the plane for as long as we wished, as it was now part of the car.<\/p>\n\n\n\n

B) We could now allow the plane to pass by the car on the side windows, which masked out the section we didn\u2019t want the user to see.<\/p>\n\n\n\n

Additionally, we were now able to manually track the plane to fit naturally within the scene. Doing this ensured it was flat on the road, curved with the road, and didn\u2019t jump onto the sidewalk or parked cars.<\/p>\n\n\n\n

It was a perfect fit!<\/p>\n\n\n\n

Our Takeaway<\/h6>\n\n\n\n

Our takeaway from all of this: Don\u2019t make life more difficult by trying to overdo\/overthink your effects. KISS (keep it simple stupid).<\/p>\n\n\n\n

The solution was actually the fastest and most effective way to get our point across. Moving forward, we will continue to place 3D objects into a 360\u00ba scene, pushing the boundaries of our abilities every chance we get.<\/p>\n\n\n\n

From time to time it’s important to take a step back and analyze what is truly needed and allow ourselves as creatives to step \u2018outside of the box.\u2019<\/p>\n\n\n\n

To see the final experience for yourself, you can download the free Wind River Experience<\/a> app for both iOS<\/a> and Android<\/a>.<\/p>\n\n\n\n

If you\u2019re a videographer, 3D artist or developer running into similar struggles, feel free to reach out to us with your question! We\u2019re always happy to help answer questions!<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

By Shane Folden, Gravity Jack Videographer & 3D Artist Here at Gravity Jack, we recently completed a virtual reality (VR) project for Wind River (an Intel Company). The goal: Show users what it will be like to drive in an autonomous, self-driving car in the very near future! This was, of course, a fun project … Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study<\/span><\/a><\/p>\n","protected":false},"author":9,"featured_media":1599,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3,14],"tags":[],"class_list":["post-1597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-vr"],"acf":[],"yoast_head":"\nAdding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study<\/title>\n<meta name=\"description\" content=\"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study\" \/>\n<meta property=\"og:description\" content=\"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Jack\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-07T16:17:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-28T16:17:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"344\" \/>\n\t<meta property=\"og:image:height\" content=\"194\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gravity Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gravity Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/\",\"url\":\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/\",\"name\":\"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityjack.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg\",\"datePublished\":\"2017-03-07T16:17:23+00:00\",\"dateModified\":\"2023-11-28T16:17:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc\"},\"description\":\"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage\",\"url\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg\",\"contentUrl\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg\",\"width\":344,\"height\":194},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityjack.com\/#website\",\"url\":\"https:\/\/www.gravityjack.com\/\",\"name\":\"Gravity Jack\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gravityjack.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc\",\"name\":\"Gravity Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g\",\"caption\":\"Gravity Admin\"},\"url\":\"https:\/\/www.gravityjack.com\/author\/gjmagravityjack-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study","description":"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/","og_locale":"en_US","og_type":"article","og_title":"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study","og_description":"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.","og_url":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/","og_site_name":"Gravity Jack","article_published_time":"2017-03-07T16:17:23+00:00","article_modified_time":"2023-11-28T16:17:51+00:00","og_image":[{"width":344,"height":194,"url":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg","type":"image\/jpeg"}],"author":"Gravity Admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gravity Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/","url":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/","name":"Adding 3D Assets To A 360 Virtual Reality (VR) Video Scene: Case Study","isPartOf":{"@id":"https:\/\/www.gravityjack.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage"},"image":{"@id":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg","datePublished":"2017-03-07T16:17:23+00:00","dateModified":"2023-11-28T16:17:51+00:00","author":{"@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc"},"description":"Placing 3D elements into a 360\u00ba VR scene can prove to be a challenge. Our blog explains how we overcame these problems within our app for Wind River.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityjack.com\/news\/adding-3d-assets-360-vr-video-case-study\/#primaryimage","url":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg","contentUrl":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/Wind_River_Blog_Header_Google-Play-1.jpg","width":344,"height":194},{"@type":"WebSite","@id":"https:\/\/www.gravityjack.com\/#website","url":"https:\/\/www.gravityjack.com\/","name":"Gravity Jack","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gravityjack.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc","name":"Gravity Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g","caption":"Gravity Admin"},"url":"https:\/\/www.gravityjack.com\/author\/gjmagravityjack-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts\/1597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/comments?post=1597"}],"version-history":[{"count":0,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts\/1597\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/media\/1599"}],"wp:attachment":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/media?parent=1597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/categories?post=1597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/tags?post=1597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}