OGC Testbed 17

Ethar GDC WebXR client

Using this application

The Ethar Web-based GDC client with WebXR-based immersive display is our contribution to the ongoing development of the Geo-Data Cube standard.

The application can be accessed from https://au.gmented.com/app/OGCT17. Alternately, checkout the code, serve it from your webserver of choice, and load index.html in your browser.

Additional examples may be added to the above example when available.

The HTML on the page is very simple, with just a status prompt and button to enter the immersive environment, plus an indication of whether native WebXR is in use or the so-called “polyfill” (which emulates WebXR on WebVR-only or non-XR browsers), and the last modified date of the HTMLfile.

The immersive app.

Once the HTML page has loaded, the WebAssembly module will be loaded, and provided the user has WebXR available, the button will display either “Enter AR” or “Enter VR”, depending on device capabilities. Clicking the button will enter immersive mode.

In immersive mode, the geo-data will be visible in front of the user. If using a head-mounted device with a controller, pointing the controller will display a ray which acts as a pointer for selection and action. On handheld devices, touching the screen will have the same effect. You should be able to walk up to and around the geo-data model to inspect it.

To exit and return to the web page, use the normal control on your device. E.g. controller button, home button, or similar.

Dependencies

The Ethar GDC client utilizes the following libraries:

  • The HTML+JS code is licensed under the MPL2.
  • The AROSG portions under the LGPLv3, and OpenSceneGraph under the OSGPL.

All of these licenses are compatible with use in a proprietary and/or commercial application.

WebAssembly requirements

While WebAssembly itself is supported on all WebXR-capable browsers, OpenSceneGraph assumes availability of threading and so must (at present) be built with WebAssembly’s threads support enabled. WebAssembly threads depends in turn on Javascript’s SharedArrayBuffer type, which now has tighter security requirements. You must ensure “cross origin isolation” is enabled for your site. (See below for details on how to enable “cross origin isolation”.)

Supported browsers:

  • Oculus Browser (Oculus Quest 1 and 2)

  • Chrome for Windows and macOS has SharedArrayBuffer enabled by default.

  • Chrome for Android requires a config flag to enable use of SharedArrayBuffer with WebAssembly threads. In Chrome, type chrome://flags in the URL bar, and then in the flags search box type WebAssembly threads. Tap the pop-up and change the value from “Default” to “Enabled”.

  • Microsoft Edge for Hololens 2 has SharedArrayBuffer enabled by default.

  • Firefox 79 and later (Windows, macOS, Linux).

    Earlier versions of Firefox require a config flag to re-enable SharedArrayBuffer. In Firefox, type about:config in the URL bar, accept the warning, and then in the config search box type javascript.options.shared_memory. Click the ⇌ arrows symbol so that the value changes to true and close the config.

Unsupported browsers:

  • Safari for macOS/iOS does not yet support SharedArrayBuffer.
  • Magic Leap Helio (Magic Leap) browser does not yet support multithreaded WebAssembly (as of Leap OS 0.98.20) although Magic Leap have tentatively committed to re-enabling support in a future release.
  • Firefox Reality (Oculus, HTC Vive, Pico VR) has SharedArrayBuffer disabled by default. Unfortunately, there is no user-accessible means to change the configuration. (Previous versions of Firefox Reality had SharedArrayBuffer enabled by defaul).
  • Mozilla WebXR Viewer for iOS Since this is based on WebKit, like Safari for iOS, it does not support SharedArrayBuffer.

Enabling “cross origin isolation”

“Cross-origin isolation” refers to server-side config that enables protection features in the browser that make re-enablement of SharedArrayBuffer possible.

If your site is served by Apache, the simplest method is to create a .htaccess file in the top-level directory of your application with these lines included:

Header set Cross-Origin-Opener-Policy: same-origin
Header set Cross-Origin-Embedder-Policy: require-corp

To serve these, you will need to ensure that your apache config also loads the “headers” module. For Apache2, check the config file (/etc/apache2/httpd.conf or similar) has the option LoadModule headers_module libexec/apache2/mod_headers.so uncommented and enabled.

Skip to content