360 VR

360 Space

Setting the 360 image or video

360° on 2.10+

360° before 2.10

360 Photos

Storage

What is the maximum viewable resolution for a 360 photograph?

360 Videos Upload

360 Streaming Conversion

Timed Media Triggers

360 Video Play & Pause

Using Multiple 360 Videos in One Space

Loading Image / Poster

Navigating between 360 Videos with links

360 Space

Using a 360° as a background requires a space created using the 360 template.

The width/height ratio for correctly formatted 360 media is 2:1, so an image 2000px wide will need to be 1000px high to be correctly mapped. If your image is smaller, it is recommended to “pad” it with an appropriate color at the top or bottom, as opposed to changing it lengthwise.

The space will be created with a completely white background.

Setting the 360 image or video

The instructions to change the image will vary slightly depending on the space’s version. We suggest using at least version 2.10 of the platform. An easy way to know which path to follow is to check whether the “Panorama” option is available in the edit menu:

  1. Access the space
  2. Click the edit icon ()

If “Panorama 360° is available in the list, follow the “360° on 2.10+” instructions. If it isn’t, follow the instructions in the “360° before 2.10

360° on 2.10+

  1. Access the space
  2. Click the edit icon ()
  3. Choose “Panorama 360°

  1. In the modal that opens, insert the URL of your 360

  1. Click “Save

The 360 will update immediately.

360° before 2.10

  1. Access the space
  2. Click the edit icon ()
  3. Choose “Show items list

  1. Scroll the list to find “Skybox (or “Panorama in some cases)
  2. Click the “Edit button – the object’s properties will unfold below

  1. Change the “diffuseMap” to the URL of your 360 photo or video
  2. Click “Save item

The 360 will update immediately.

360 Photos

Storage

You may upload 360 images as .jpg files to https://storage.learnbrite.com

What is the maximum viewable resolution for a 360 photograph?

Here at LearnBrite we typically use 8192‬x4096 and 4096×2048 , jpg for spherical panoramas. For cube maps for each face we use 2048px.

A great answer to this question has been supplied on Reddit

https://www.reddit.com/r/oculus/comments/5ypto4/what_is_the_maximum_viewable_resolution_for_a_360/

The default monocular horizontal FOV of the Rift is 79.55°, the horizontal resolution per eye is 1080 pixels, the render target size is ~1.7 to compensate for distortion, so the render target size per eye is ~1404×1560 and has ~17.6 PPD (pixels/degree). For the different 360° formats this means :

  • 360° equirectangular : 6354×3177
  • 360° 3D equirectangular : 6354×6354
  • stereo cubemaps : 19056×1588 (the OTOY format used on the Gear VR is 18432×1536)

Michael Abrash made a prediction that in 3 years headsets would have ~30 PPD, so if you want to be able to view your photos without loss of quality in these headsets this means :

  • 360° equirectangular : 10800×5400
  • 360° 3D equirectangular : 10800×10800
  • stereo cubemaps : 32400×2700

If you want to store your files for the longer term you should maybe use an even higher resolution. The average visual acuity of the Human eye is ~85 pixels/degree (for comparison the Rift has ~13.6 PPD), so to be mostly future-proof (except if you've perfect vision at ~120 PPD) this would mean :

  • 360° equirectangular : 30600×15300
  • 360° 3D equirectangular : 30600×30600
  • stereo cubemaps : 91800×7650

But by this time and probably before 3 years I think we'll have other 360° formats (based on light fields probably) which require a lot more images.

360 Videos Upload

You may upload .mp4 files to https://storage.learnbrite.com delivery performance may vary, so we recommend using our streaming service explained below.

You may also link to files on Vimeo for streaming.

360 Streaming Conversion

LearnBrite has experimental support for video streaming, including 360 video streaming. The conversion of mp4 files to streaming format is on request. Please upload your mp4 to storage and provide the public URL to LearnBrite support along with a request to convert it to streaming format.

Streaming files are store on Amazon S3, a streaming URL .m3u8 will be supplied to you for inclusion in your project.

LearnBrite plans to automate and make this feature self-service in the future.

Timed Media Triggers

ChatMapper nodes can be triggered to execute at certain times when the Media Element (360 video) is playing. An example CMP can be found here: TimedMediaTriggers.cmp

This is achieved in a parent node with a Script which constantly updates a variable to equal the current Media Element time.

First we create a ChatMapper Variable nowTime of type Text

Script:

Variable["nowTime"] = $("#video_Skybox")[0].currentTime;

Then children nodes contain a Condition to check if that time has been reached or exceeded. To stop the node from being executed over and over a check against the SimStatus is used. If the child node has been displayed then it will not be shown again.

For example checking nowTime is EQUAL to 2.2

Dialog[5].SimStatus ~= "WasDisplayed" and Variable["nowTime"]>=2.2

Additionally, a “catch-all” node is inserted, so that whenever the time does not match a condition the conversation goes back to checking the video’s time. This is an empty node, with no condition but Priority set to “BelowNormal”

360 Video Play & Pause

Using a Script to Play

LB.Actions.setVideoboardControls({videoProxy:false,video:"Skybox",videoForcePlay:true,executedFromEA:true});

Using a Script to Pause

LB.Actions.setVideoboardControls({videoProxy:false,video:"Skybox",videoForcePause:true,executedFromEA:true})

Using Multiple 360 Videos in One Space

First we need to get a handle on the 360 background using a Script. The 360 background that is included in the 360 Template you used to create your space. It is called “Skybox”.

First we create a new ChatMapper Variable MediaElement of type Text

Variable["MediaElement"]=LB.Utils.findItem("Skybox");

Then using a Script set it’s diffuseMap to a media URL ending in .m3u8 or .mp4, or a direct URL to an online video service such as Vimeo.

LB.SceneAuthoring.setField(Variable["MediaElement"],"diffuseMap","https://s3.amazonaws.com/lb360/hls/my_video/master.m3u8");

Loading Image / Poster

Before the video has loaded or can be displayed the space/screen will be black. To avoid this you can use a poster parameter with the diffuseMap URL to show a 360 loading image.

Just add the following to your URL , “?poster=URL_OF_IMAGE”

LB.SceneAuthoring.setField(Variable["MediaElement"],"diffuseMap","https://s3.amazonaws.com/lb360/hls/my_video/master.m3u8?poster=https://cache.learnbrite.com/my_image.jpg");

The Media will be paused by default. You will need to execute a Script to Play the video (see 360 Video Play & Pause section)

Navigating between 360 Videos with links

Watch the video tutorial https://www.youtube.com/watch?v=yKYxEXteNqk

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?