forge - devcon 2016: creating your next vr walkthrough with cloud rendered stereo panoramas
TRANSCRIPT
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’ ?
Panoramavs
‘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’ rendering5x magnifying lens focuses eyes onto the screenOmni-stereo (diff between two lat-long images gives depth)
? + ? = 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-lauren-model
Use Pano’s as waypoints…
Solution#1: Navigate like ‘google street view’
?
...Stare at a waypoint to ‘teleport’
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
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 cloud2.Render “Stereo” Panoramas3.Download cubemaps4.Intro to A-Frame5.Create walkthrough with A-Frame6.Share QR-code
Steps:
aframe @michaelb
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
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
3. Download Cubemap’s
What isa
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-lauren-model
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
aframe @michaelb
Add cubemaps to your favorite framework...Today, we will use this one...
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
we’ll be using…
● A-frame (Mozilla)
● Text Editor (Sublime)
● Browser (Chrome)
4. Intro to A-Frame
...aframe is like editing HTML
aframe @michaelb
basic scene
▪ sphere▪ box▪ plane▪ sky
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
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 more detailsCubemap: https://github.com/bryik/aframe-cubemap-componentStereo: https://github.com/oscarmarinmiro/aframe-stereo-component
layer 2right side
layer 1left side
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
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 cloud2.Render “Stereo” Panoramas3.Download cubemaps4.Intro to A-Frame5.Create walkthrough with A-Frame6.Share QR-code
Steps:
Done !
aframe @michaelb
try it on GearVR ...
aframe @michaelb
aframe.io
..
Bloghttp://through-the-interface.typepad.com/
Additional Resources
aframe @michaelb
Questions ?
cardboard.autodesk.com/aframe/final.html
aframe @michaelb