Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered Stereo Panoramas

990 views

Published on

Michael Beale, Autodesk

If you are building a VR walkthrough like Google Street View, learn how you can use Forge to generate your stereo-panorama assets. A simple cube-map is all you need to display on your mobile device to experience depth and immersion. Using the API, you can learn how to extract alpha maps and depth maps to create parallax effects with camera translation, and blend in real 3D geometry into the scene.

Published in: Technology
  • Be the first to comment

Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered Stereo Panoramas

  1. 1. Michael Beale Autodesk Developer Creating your Next VR Walkthrough (with Cloud Rendered Stereo Panoramas)
  2. 2. “I have rendered lots of random panoramas …” ...“How can I connect them into a VR story ?” aframe @michaelb
  3. 3. Architect Firm Example Scenario Floorplan Pre-Viz Panoramas aframe @michaelb
  4. 4. Forge APIs Developers + Forge... to the rescue ! VR Dev Tools < Your Solution Here /> aframe @michaelb
  5. 5. Today we are going to build... A “VR” Walkthrough but first... why call it ‘stereo’ ?
  6. 6. Panorama vs ‘Stereo’ Panorama aframe @michaelb
  7. 7. “Magic Eye” © 2016 Autodesk The difference between the pixels, gives the illusion of depth
  8. 8. “View Master” © 2016 Autodesk difference between two images gives depth
  9. 9. Google Cardboard © 2016 Autodesk Called ‘side by side’ rendering 5x magnifying lens focuses eyesonto the screen Omni-stereo (diff between two lat-long images gives depth)
  10. 10. ? + ? = stereo pano Architects share the ‘feeling of space’ ... ... Conveniently through your phone
  11. 11. But how to Navigate? Planning a walkthrough experience... https://gallery.autodesk.com/a360rendering/projects/brooke-and-lauren-model Use Pano’s as waypoints…
  12. 12. Solution#1: Navigate like ‘google street view’ ? ...Stare at a waypoint to ‘teleport’
  13. 13. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Build Time! aframe @michaelb
  14. 14. Render API is a ‘work in progress’... ...So we will use the web-site :(
  15. 15. Upload from Revit/Autocad/Max
  16. 16. Login to A360 Rendering https://rendering.360.autodesk.com/mygallery.aspx
  17. 17. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: aframe @michaelb
  18. 18. Render Stereo Panoramas https://youtu.be/XyvJ6GaLZLE?t=59s For each Thumbnail, ▪ Click the down arrow ▪ Select Stereo Pano ▪ Click ‘Render’ *Wait* ▪ Click ‘Preview’ ▪ Scan QR code to test
  19. 19. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: aframe @michaelb
  20. 20. 3. Download Cubemap’s What is a cubemap? Cloud Rendering
  21. 21. What is a cubemap ? Facebook F8 conference / USA Today Video
  22. 22. Lat/Long vs Cubemap Facebook F8 conference / USA Today Video
  23. 23. Download One Cubemap ▪ first, let’s download one cubemap https://gallery.autodesk.com/a360rendering/projects/brooke-and-lauren-model
  24. 24. Download All Four Cubemaps ▪ now... let’s download all 4 of them... ...with a script
  25. 25. You’re folder structure should look like this... ...4 x 2 x 6 = 48 .jpg’s 4 waypoints / rooms Left and Right eye 6 faces aframe @michaelb
  26. 26. Add cubemaps to your favorite framework... Today, we will use this one...
  27. 27. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: aframe @michaelb
  28. 28. we’ll be using… ● A-frame (Mozilla) ● Text Editor (Sublime) ● Browser (Chrome) 4. Intro to A-Frame ...aframe is like editing HTML aframe @michaelb
  29. 29. basic scene ▪ sphere ▪ box ▪ plane ▪ sky
  30. 30. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: aframe @michaelb
  31. 31. first scene ▪Add a bull’s-eye cursor ▪ onCursor-Click does: ▪ get ’href’ property ▪ set new Sky color
  32. 32. UX cues (adding animation) ▪Hover Animation ▪ mouse-enter ▪ mouse-leave ▪onClick Animation ▪ cursor scale animation
  33. 33. adding <a-sky> … ie. a skybox
  34. 34. We will use: - chrome debugger - set camera position Now, let’s move the cubes into place aframe @michaelb
  35. 35. - hide waypoints - js cleanup Last part... and... aframe @michaelb
  36. 36. ... add those “Stereo” Cubemaps ! Leverage THREE.js layers ▪ add two <a-box>’s ▪ add a ‘stereocam’ component git repo for more details Cubemap: https://github.com/bryik/aframe-cubemap-component Stereo: https://github.com/oscarmarinmiro/aframe-stereo-component layer 2 right side layer 1 left side
  37. 37. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: aframe @michaelb
  38. 38. Hosting it... ▪ Upload ▪ make public ▪ gen QR code
  39. 39. Final Result... goo.gl/Ea2z24 Try on your Phone now ! aframe @michaelb
  40. 40. 1.Upload your Revit scene to the cloud 2.Render “Stereo” Panoramas 3.Download cubemaps 4.Intro to A-Frame 5.Create walkthrough with A-Frame 6.Share QR-code Steps: Done ! aframe @michaelb
  41. 41. try it on GearVR ... aframe @michaelb
  42. 42. aframe.io .. Blog http://through-the-interface.typepad.com/ Additional Resources aframe @michaelb
  43. 43. Questions ? cardboard.autodesk.com/aframe/final.html aframe @michaelb

×