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.
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…
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
:(
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
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
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
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
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
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