Post on 16-Apr-2017
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