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