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.
Michael Beale
Autodesk Developer
Creating your Next VR Walkthrough
(with Cloud Rendered Stereo Panoramas)
“I have rendered lots of random panoramas …”
...“How can I connect them into a VR story ?”
aframe @michaelb
Architect
Firm
Example Scenario
Floorplan Pre-Viz
Panoramas
aframe @michaelb
Forge APIs
Developers + Forge... to the rescue !
VR Dev Tools
< Your
Solution
Here />
aframe @michaelb
Today we are going to build...
A “VR” Walkthrough
but first... why call it ‘stereo’ ?
Panorama
vs
‘Stereo’ Panorama
aframe @michaelb
“Magic Eye”
© 2016 Autodesk
The difference between the pixels, gives the illusion of depth
“View Master”
© 2016 Autodesk
difference between two images gives depth
Google Cardboard
© 2016 Autodesk
Called ‘side by side’ rendering
5x magnifying lens focuses eyesonto the screen
Omni-stere...
? + ? = stereo pano
Architects share the ‘feeling of space’ ...
... Conveniently through your phone
But how to Navigate?
Planning a walkthrough experience...
https://gallery.autodesk.com/a360rendering/projects/brooke-and-l...
Solution#1: Navigate like ‘google street view’
?
...Stare at a waypoint to ‘teleport’
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
Render API is a ‘work in progress’...
...So we will use the web-site
:(
Upload from Revit/Autocad/Max
Login to A360 Rendering
https://rendering.360.autodesk.com/mygallery.aspx
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
Render Stereo Panoramas
https://youtu.be/XyvJ6GaLZLE?t=59s
For each Thumbnail,
▪ Click the down arrow
▪ Select Stereo Pano...
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
3. Download Cubemap’s
What
is
a
cubemap?
Cloud
Rendering
What is a cubemap ?
Facebook F8 conference / USA Today Video
Lat/Long vs Cubemap
Facebook F8 conference / USA Today Video
Download One Cubemap
▪ first, let’s download one cubemap
https://gallery.autodesk.com/a360rendering/projects/brooke-and-la...
Download All Four Cubemaps
▪ now... let’s download all 4 of them...
...with a script
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
a...
Add cubemaps to your favorite framework...
Today, we will use this one...
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
we’ll be using…
● A-frame (Mozilla)
● Text Editor (Sublime)
● Browser (Chrome)
4. Intro to A-Frame
...aframe is like editi...
basic scene
▪ sphere
▪ box
▪ plane
▪ sky
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
first scene
▪Add a bull’s-eye cursor
▪ onCursor-Click does:
▪ get ’href’ property
▪ set new Sky color
UX cues (adding animation)
▪Hover Animation
▪ mouse-enter
▪ mouse-leave
▪onClick Animation
▪ cursor scale animation
adding <a-sky> … ie. a skybox
We will use:
- chrome debugger
- set camera position
Now, let’s move the cubes into place
aframe @michaelb
- hide waypoints
- js cleanup
Last part...
and...
aframe @michaelb
... add those “Stereo” Cubemaps !
Leverage THREE.js layers
▪ add two <a-box>’s
▪ add a ‘stereocam’
component
git repo for ...
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
Hosting it...
▪ Upload
▪ make public
▪ gen QR code
Final Result... goo.gl/Ea2z24
Try on your Phone now !
aframe @michaelb
1.Upload your Revit scene to the cloud
2.Render “Stereo” Panoramas
3.Download cubemaps
4.Intro to A-Frame
5.Create walkthr...
try it on GearVR ...
aframe @michaelb
aframe.io
..
Blog
http://through-the-interface.typepad.com/
Additional Resources
aframe @michaelb
Questions ?
cardboard.autodesk.com/aframe/final.html
aframe @michaelb
Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered Stereo Panoramas
Upcoming SlideShare
Loading in …5
×

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

900 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

×