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.

1. Michael Beale
Autodesk Developer
Creating your Next VR Walkthrough
(with Cloud Rendered Stereo Panoramas)

2. “I have rendered lots of random panoramas …”
...“How can I connect them into a VR story ?”
aframe @michaelb

3. Architect
Firm
Example Scenario
Floorplan Pre-Viz
Panoramas
aframe @michaelb

4. Forge APIs
Developers + Forge... to the rescue !
VR Dev Tools
< Your
Solution
Here />
aframe @michaelb

5. Today we are going to build...
A “VR” Walkthrough
but first... why call it ‘stereo’ ?

6. Panorama
vs
‘Stereo’ Panorama
aframe @michaelb

7. “Magic Eye”
© 2016 Autodesk
The difference between the pixels, gives the illusion of depth

8. “View Master”
© 2016 Autodesk
difference between two images gives depth

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. ? + ? = stereo pano
Architects share the ‘feeling of space’ ...
... Conveniently through your phone

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. Solution#1: Navigate like ‘google street view’
?
...Stare at a waypoint to ‘teleport’

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. Render API is a ‘work in progress’...
...So we will use the web-site
:(

15. Upload from Revit/Autocad/Max

16. Login to A360 Rendering
https://rendering.360.autodesk.com/mygallery.aspx

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. 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. 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. 3. Download Cubemap’s
What
is
a
cubemap?
Cloud
Rendering

21. What is a cubemap ?
Facebook F8 conference / USA Today Video

22. Lat/Long vs Cubemap
Facebook F8 conference / USA Today Video

23. Download One Cubemap
▪ first, let’s download one cubemap
https://gallery.autodesk.com/a360rendering/projects/brooke-and-lauren-model

24. Download All Four Cubemaps
▪ now... let’s download all 4 of them...
...with a script

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. Add cubemaps to your favorite framework...
Today, we will use this one...

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. 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. basic scene
▪ sphere
▪ box
▪ plane
▪ sky

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. first scene
▪Add a bull’s-eye cursor
▪ onCursor-Click does:
▪ get ’href’ property
▪ set new Sky color

32. UX cues (adding animation)
▪Hover Animation
▪ mouse-enter
▪ mouse-leave
▪onClick Animation
▪ cursor scale animation

33. adding <a-sky> … ie. a skybox

34. We will use:
- chrome debugger
- set camera position
Now, let’s move the cubes into place
aframe @michaelb

35. - hide waypoints
- js cleanup
Last part...
and...
aframe @michaelb

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. 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. Hosting it...
▪ Upload
▪ make public
▪ gen QR code

39. Final Result... goo.gl/Ea2z24
Try on your Phone now !
aframe @michaelb

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. try it on GearVR ...
aframe @michaelb

42. aframe.io
..
Blog
http://through-the-interface.typepad.com/
Additional Resources
aframe @michaelb

43. Questions ?
cardboard.autodesk.com/aframe/final.html
aframe @michaelb