Forge - DevCon 2016: Creating your next VR Walkthrough with Cloud Rendered Stereo Panoramas

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