VR/AR

Jump to

Installing VR Services and allowing VR access

Limitations in immersive VR

Locations menu

Mediaboards & Videos

Immersive Mode

iPhone / iOS Cardboard

Limitations in AR

Which Headset should I buy?

What browser/app should I use to view VR in a headset?

Choice Menu Vertical Position in VR (2.9+)

3D Custom Captions (2.9+)

Captions Positions

1. Add More Actors

2. Change Caption Position with Script

Caption Overlap Timing

Hiding the Custom Captions

Installing VR Services and allowing VR access

Depending on the device, users might get a popup asking for the installation of “VR Services”. This is required for the device to be able to get into VR mode, so you should tap on “Install” if asked, and subsequently tap on “Allow VR”

  1. Tap on install
  1. Allow VR

If you mistakenly tapped on “Block” instead, you can reset the permission by following the “How do I… > Reset browser permissions” guide

Limitations in immersive VR

Locations menu

Will display in VR but only works in browsers that support linking, Firefox, Samsung

Mediaboards & Videos

Any links to iframes, embeds or popups won’t display in VR immersive mode.

In the Meta Quest VR Headset, displaying content of this type will exit immersive mode to allow viewing the content. Upon closing the content popup immersive mode will resume.

In the Meta Quest VR Headset, content of this type that inject/uses the <video> html is displayed as a floating video in the immersive mode with simple play/pause controls.

Immersive Mode

In the Meta Quest VR Headset, setting the Default View Mode to Immersive VR will show a button in the 2D browser that must be clicked by the user to enter immersive mode. Entering immersive mode automatically without a user interaction is not supported. Note the first time entering immersive mode on a website you will be prompted by the browser to allow immersive permissions, much like allowing microphone or video permissions.

iPhone / iOS Cardboard

In Safari for iOS, fullscreen is emulated using <meta name="apple-mobile-web-app-capable" content="yes"> and requires the user to add the page to their Homescreen and launch the experience from there.

  1. Tap the bookmark icon

2. Tap on 'Add to home screen'

3. Change the shortcut name (Optional)

4. Launch via the new shortcut on your homescreen

Chrome, Firefox and other non-Safari browsers can not show VR accurately as WebKit does not support the Fullscreen API and the URL bar is never hidden.

Limitations in AR

LearnBrite AR is not compatible with third party browsers on iOS, such as Chrome or most in-app webviews, due to Safari being the only browser with access to the camera.

Which Headset should I buy?

Choices are

Fully immersive:

  • Oculus Rift/RiftS
  • HTC Vive
  • Valve Index
  • Oculus Quest all-in-one
  • Pico all-in-one
  • Mixed Reality (Samsung Odyssey has OLED bright screens and a wider field of view than others and more ergonomic hand controllers, also Dell Visor, HP, Asus, Acer, Lenovo(also have a version sold at Lidl) )
  • Mixed Reality devices require Windows 10 which comes free with Mixed Reality Portal
  • Mixed Reality devices require no external tracking setup
  • Mixed Reality devices run on a wider range of laptops than Vive/Oculus
  • Browser supported Edge and Firefox
  • Edge does not yet support streaming webcam
  • Firefox must be used through Steam/SteamVR and performs well
  • Lenovo Mirage Solo
  • Standalone headset, no cables!
  • ~1 hour battery life
  • Runs Google Daydream 2 ecosystem on Android.
  • As of August 2018 built in support for Chrome WebVR/XR
  • Single 3 degrees of freedom hand controller

360 immersive

  • Oculus Go all-in-one
  • Oculus Immersive Browser
  • Firefox Reality Browser
  • Google Daydream View (requires a daydream compatible phone, pixel 2, samsung etc)
  • Chrome Browser includes immersive capabilities
  • Firefox Reality Browser
  • Samsung Gear VR (requires a samsung phone)
  • Oculus Immersive Browser
  • Firefox Reality Browser
  • Samsung Internet Immersive Browser
  • Vive Focus all-in-one
  • Cardboard for android/iphone https://vr.google.com/cardboard/get-cardboard/

For AR

  • ARCore capable phone https://developers.google.com/ar/discover/ 
  • We use an experimental version of Chrome called WebARCore that you need to install on your phone.
  • Google Pixel phones get updates sooner than other brands
  • Samsung phones can be used both in Daydream View headset and Samsung GearVR headset so offers a wider range of platforms to test with
  • Hololens/Hololens 2 WebVR in Edge browser
  • Magic Leap One

What browser/app should I use to view VR in a headset?

Is there an application I have to download on Steam?

You will use a browser to view the content. Here is a list of recommended browsers based on the device you are using https://webvr.info/ 

Choice Menu Vertical Position in VR (2.9+)

The Menu vertical position can be changed from its default of -0.15

Use a script as follows

LB.scenarioConfig.vrui.containers.middle.positionY = 0.1

3D Custom Captions (2.9+)

This replaces how Scenario displays the captions. When this is enabled, no 2D captions or VR captions will be shown, but independent (one per actor) 3d in-scene caption will be displayed.

There are a set of CAFs that need to be added to the Actor

customCaptions_enabled

  • Boolean
  • default (empty)
  • For the individual actors set to true

customCaptions_position

  • Text
  • default (empty), matching the world position for the caption for that avatar

customCaptions_color

  • Text
  • default white, (text color) can be “red”, “white” or “rgba(255,123,123,0.5)” default “white”

customCaptions_bgcolor

  • Text
  • default default: rgba(0, 0, 0, 0.8) – background color

customCaptions_style

  • Text
  • default “bubble” it’s the default and only style for now.

customCaptions_duration

  • Number in milliseconds (default 5000)
  • Duration of the caption

Captions Positions

You may need to change caption positions if you are using multiple 360 videos in one space and people/items in the scene are in different places. Or you may want to show captions at different places at different times, perhaps to highlight items in the scene. There are two methods depending on your scenario needs.

1. Add More Actors

We need 1 actor per person talking to apply different position and color to the caption. So I added another actor and now they’re called man and woman.

  • In the case where you are using multiple 360 videos in the same Space, the next conversation may have different positions for each Actor, you may need to create copies of the actors (one per conversation), that way, woman in conversation 1 will be actor “woman_1”, second conversation will be “woman_2”, etc.

2. Change Caption Position with Script

An alternative is to adjust the position with a script call, you will need to escape the quotes around x, y and z with slashes as follows: LB.cmPlayer.ds.actors["Mike"].customCaptions_position(“{\"x\":-0.12,\"y\":1.57,\"z\":0.72}”)

  • To get position coordinates easily add a Note to the scene on the floor close to the Nadir (straight down). Look at the settings for the note, copy them and adjust the `y` figure to be 1.5 this will give the position a good height in front of the learner.

Caption Overlap Timing

In order to be able to display 2 captions at the same time we need to stop using voice delays to trigger/end nodes. So we can’t use voice with volume 0. We need to disable the voice and the delays.

  • There are 2 new Voice CAF values for the actors
  • “none”: This will produce no voice but use time estimation from RV to display the captions
  • “bypass”: This totally ignores the voice and the time estimation and executes the nodes without delays. This allows the hack Danny did in CM (using timed conditions to execute nodes) to work more quickly as the nodes are executed immediately and we’re back to the main loop within a few milliseconds.
  • For this same reason we need to remove the 0.7s default delay between nodes, that’s done by setting the Conversation CAF delay_enter to 0 default in the conversation.

Hiding the Custom Captions

In order to hide all the visible captions this function call needs to be added to the node script field:

LB.cmPlayer.hideCustomCaptions();

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?