Initialize WebXR.

Following the guide in the WebXRInterface documentation.

Initializes, but fails in Chrome because of missing support for 'layers'.

Author: mgiuca

scenes/main.gd

@@ -42,10 +42,16 @@ const FADE_TIME : float = 0.2
 var music_fade_tween : Tween
 
 var xr_interface : XRInterface
+## If WebXR, this is equal to [member xr_interface], but cast to a more specific
+## type. If not, null.
+var webxr_interface : WebXRInterface
+var vr_supported : bool = false
 
 @onready var left_hand : XRController3D = $XROrigin/LeftHand
 @onready var right_hand : XRController3D = $XROrigin/RightHand
 
+@onready var web_xr_setup_ui : CanvasLayer = $WebXRSetupUI
+
 func _ready() -> void:
   Globals.init_settings(music_volume, sound_effects_volume)
   Globals.main = self
@@ -62,7 +68,23 @@ func _ready() -> void:
     # Change our main viewport to output to the HMD
     get_viewport().use_xr = true
   else:
-    print("OpenXR not initialized; assuming regular mode")
+    webxr_interface = XRServer.find_interface("WebXR") as WebXRInterface
+    if webxr_interface:
+      xr_interface = webxr_interface
+      # Set up WebXR callbacks.
+      webxr_interface.session_supported.connect(self._webxr_session_supported)
+      webxr_interface.session_started.connect(self._webxr_session_started)
+      webxr_interface.session_ended.connect(self._webxr_session_ended)
+      webxr_interface.session_failed.connect(self._webxr_session_failed)
+
+      # This returns immediately; the result is delivered to the
+      # _webxr_session_supported callback.
+      webxr_interface.is_session_supported("immersive-vr")
+
+      # Show the button to enter WebXR.
+      web_xr_setup_ui.visible = true
+    else:
+      print("OpenXR/WebXR not initialized; assuming regular mode")
 
   if override_startup_scene != '':
     # This will be set if another scene was loaded by the editor.
@@ -198,3 +220,61 @@ func _on_audio_volume_changed(type: AudioManager.AudioType, volume: float) -> vo
     # Check before assigning, to avoid restarting already-playing music.
     if music_player.playing != (volume > 0):
       music_player.playing = volume > 0
+
+# --- WebXR stuff --- #
+# TODO: Move all VR setup to a separate file.
+
+func _webxr_session_supported(session_mode: String, supported: bool) -> void:
+  if session_mode == 'immersive-vr':
+    vr_supported = supported
+
+func _on_btn_enter_web_xr_pressed() -> void:
+  if not vr_supported:
+    OS.alert("Your browser doesn't support VR")
+    return
+
+  # We want an immersive VR session.
+  webxr_interface.session_mode = 'immersive-vr'
+  # 'bounded-floor' is room scale, 'local-floor' is a standing or sitting
+  # experience (it puts you 1.6m above the ground if you have 3DoF headset),
+  # whereas as 'local' puts you down at the XROrigin.
+  # This list means it'll first try to request 'bounded-floor', then
+  # fallback on 'local-floor' and ultimately 'local', if nothing else is
+  # supported.
+  webxr_interface.requested_reference_space_types = 'bounded-floor, local-floor, local'
+  # In order to use 'local-floor' or 'bounded-floor' we must also
+  # mark the features as required or optional. By including 'hand-tracking'
+  # as an optional feature, it will be enabled if supported.
+  webxr_interface.required_features = 'local-floor'
+  webxr_interface.optional_features = 'bounded-floor, hand-tracking'
+  # TODO: I probably don't want hand tracking. I do want to validate that
+  # the device actually has two controllers though.
+
+  # This will return false if we're unable to even request the session,
+  # however, it can still fail asynchronously later in the process, so we
+  # only know if it's really succeeded or failed when our
+  # _webxr_session_started() or _webxr_session_failed() methods are called.
+  if not webxr_interface.initialize():
+    OS.alert("Failed to initialize WebXR")
+    return
+
+func _webxr_session_started() -> void:
+  web_xr_setup_ui.visible = false
+  # This tells Godot to start rendering to the headset.
+  get_viewport().use_xr = true
+  # This will be the reference space type you ultimately got, out of the
+  # types that you requested above. This is useful if you want the game to
+  # work a little differently in 'bounded-floor' versus 'local-floor'.
+  print("Reference space type: ", webxr_interface.reference_space_type)
+  # This will be the list of features that were successfully enabled
+  # (except on browsers that don't support this property).
+  print("Enabled features: ", webxr_interface.enabled_features)
+
+func _webxr_session_ended() -> void:
+  web_xr_setup_ui.visible = true
+  # If the user exits immersive mode, then we tell Godot to render to the web
+  # page again.
+  get_viewport().use_xr = false
+
+func _webxr_session_failed(message: String) -> void:
+  OS.alert("Failed to initialize WebXR: " + message)

scenes/main.tscn

@@ -90,6 +90,36 @@ layout_mode = 2
 size_flags_vertical = 0
 theme_override_font_sizes/font_size = 10
 
+[node name="WebXRSetupUI" type="CanvasLayer" parent="."]
+layer = 102
+visible = false
+
+[node name="Scrim" type="ColorRect" parent="WebXRSetupUI"]
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+mouse_filter = 2
+color = Color(0, 0, 0, 0.5019608)
+
+[node name="BtnEnterWebXR" type="Button" parent="WebXRSetupUI"]
+z_index = 1
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -61.5
+offset_top = -15.5
+offset_right = 61.5
+offset_bottom = 15.5
+grow_horizontal = 2
+grow_vertical = 2
+size_flags_horizontal = 4
+size_flags_vertical = 4
+text = "Enter WebXR"
+
 [node name="XROrigin" type="XROrigin3D" parent="."]
 
 [node name="XRCamera" type="XRCamera3D" parent="XROrigin"]
@@ -105,3 +135,5 @@ show_when_tracked = true
 transform = Transform3D(1, 0, 0, 0, 1, 0, 0, 0, 1, 0.5, 1, -0.5)
 tracker = &"right_hand"
 show_when_tracked = true
+
+[connection signal="pressed" from="WebXRSetupUI/BtnEnterWebXR" to="." method="_on_btn_enter_web_xr_pressed"]