recursal/MDN huggingface dataset:
XRProjectionLayer: textureHeight property
=========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`textureHeight`** property of the `XRProjectionLayer` interface indicates the height in pixels of the color textures of this layer.

The projection layer's texture height is determined by the user agent or the device. It is reported in the `XRSubImage`, which can only be accessed inside the frame loop. If you want to manage your own depth buffers and don't want to wait for first frame after layer creation to determine the required dimensions for those buffers, the `textureHeight` property allows access to layer texture height outside the frame loop. Allocation of these buffers can happen directly after layer creation.

Value
-----

A number indicating the height in pixels.

Examples
--------

### Using `textureHeight`

The `textureHeight` of a layer is useful when creating render buffers for a layer. See also `WebGL2RenderingContext.renderbufferStorageMultisample()`.


```js
let glLayer = xrGLBinding.createProjectionLayer();

let color_rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, color_rb);
gl.renderbufferStorageMultisample(
  gl.RENDERBUFFER,
  samples,
  gl.RGBA8,
  glLayer.textureWidth,
  glLayer.textureHeight,
);
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-textureheight |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLBinding.createProjectionLayer()`
* `WebGL2RenderingContext.renderbufferStorageMultisample()`
* `XRSubImage`
XRProjectionLayer: textureArrayLength property
==============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`textureArrayLength`** property of the `XRProjectionLayer` interface indicates layer's layer count for array textures when using `texture-array` as the `textureType`.

The projection layer's layer count for array textures is determined by the user agent or the device. It is reported in the `XRSubImage`, which can only be accessed inside the frame loop. If you want to manage your own depth buffers and don't want to wait for first frame after layer creation to determine the required dimensions for those buffers, the `textureArrayLength` property allows access to layer count for array textures outside the frame loop. Allocation of these buffers can happen directly after layer creation.

Value
-----

A number indicating the number of layers of the color textures when using `texture-array` as the `textureType`. Otherwise it will be `1`.

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-texturearraylength |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRSubImage`
XRProjectionLayer: ignoreDepthValues property
=============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`ignoreDepthValues`** property of the `XRProjectionLayer` interface is a boolean indicating if the XR compositor is not making use of depth buffer values when rendering the layer.

Value
-----

A boolean. `true` indicates the XR compositor doesn't make use of depth buffer values; `false` indicates the content of the depth buffer will be used when rendering the layer.

Examples
--------

### Ignoring depth values

If the `depthFormat` option is `0` when creating a projection layer, the `ignoreDepthValues` property will be `true`. See also `XRWebGLBinding.createProjectionLayer()`.


```js
let glProjectionLayer = xrGLBinding.createProjectionLayer({
  depthFormat: 0,
});

glProjectionLayer.ignoreDepthValues; // true
```

Specifications
--------------

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrprojectionlayer-ignoredepthvalues |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `XRWebGLBinding.createProjectionLayer()`
RemotePlayback: connecting event
================================

The **`connecting`** event of the `RemotePlayback` interface fires when the user agent initiates remote playback.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("connecting", (event) => {});

onconnecting = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent initiates a connection.


```js
RemotePlayback.onconnecting = () => {
  console.log(RemotePlayback.state);
};
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-onconnecting |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: prompt() method
===============================

The **`prompt()`** method of the `RemotePlayback` interface prompts the user to select an available remote playback device and give permission for the current media to be played using that device.

If the user gives permission, the `state` will be set to `connecting` and the user agent will connect to the device to initiate playback.

If the user chooses to instead disconnect from the device, the `state` will be set to `disconnected` and user agent will disconnect from this device.

Syntax
------


```js
prompt()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `undefined` after the user accepts or rejects the prompt.

### Exceptions

The promise will be rejected with one of the following exceptions:

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`OperationError` `DOMException`

Thrown if there is already an unsettled promise for this media element, or browsing context.

`InvalidAccessError` `DOMException`

Thrown if the user has not interacted with this device recently.

`NotSupportedError` `DOMException`

Thrown if the user agent knows that remote playback of this particular media is not feasible.

`NotFoundError` `DOMException`

Thrown if remote playback is unavailable.

Security
--------

Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Examples
--------

In the following example the user is prompted to select a remote playback device to play a video.


```js
devicesBtn.onclick = () => {
  // Request the user to select a remote playback device.
  videoElem.remote
    .prompt()
    // Update the UI and monitor the connected state.
    .then(updateRemotePlaybackState);
  // Otherwise, the user cancelled the selection UI or no screens were found.
};
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-prompt |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: cancelWatchAvailability() method
================================================

The **`cancelWatchAvailability()`** method of the `RemotePlayback` interface cancels the request to watch for one or all available devices.

Syntax
------


```js
cancelWatchAvailability()
cancelWatchAvailability(id)
```

### Parameters

`id` Optional

The `callbackId` of a particular remote playback device.

If a `callbackId` of a specific device is passed in, then that device will be removed from the list of watched devices. Otherwise, the whole list will be cleared.

### Return value

A `Promise` that resolves with `undefined`.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`NotFoundError` `DOMException`

Thrown if an `id` is passed but it does not match any available `callbackId`.

Examples
--------

Once a remote playback device has been identified and is connected, the monitoring of available devices can be stopped using `cancelWatchAvailability().`


```js
function switchToRemoteUI() {
  // Indicate that the state is 'connecting' or 'connected' to the user.
  // For example, hide the video element as only controls are needed.
  videoElem.style.display = "none";

  // Stop monitoring the availability of remote playback devices.
  videoElem.remote.cancelWatchAvailability();
}
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-cancelwatchavailability |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: watchAvailability() method
==========================================

The **`watchAvailability()`** method of the `RemotePlayback` interface watches the list of available remote playback devices and returns a `Promise` that resolves with the `callbackId` of a remote playback device.

Syntax
------


```js
watchAvailability(RemotePlaybackAvailabilityCallback)
```

### Parameters

`RemotePlaybackAvailabilityCallback(boolean)`

A callback that allows the page to obtain the remote playback device availability for the corresponding media element. It is passed a boolean which, if true, indicates that remote playback is available.

### Return value

A `Promise` that resolves with an integer. This is the `callbackId` for the identified remote playback device.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `disableRemotePlayback` is `true` for the media element.

`NotSupportedError` `DOMException`

Thrown if the user agent is unable to continuously monitor the list of available remote playback devices.

Examples
--------

In the following example, after checking that there is no currently connected device, `watchAvailability()` is used to watch for remote devices becoming available. See the working example (Requires a supported device and a connected remote playback device).


```js
if (video.remote.state === "disconnected") {
  video.remote.watchAvailability(handleAvailabilityChange).then((id) => {
    log(`> Started watching remote device availability: ${id}`);
    callbackId = id;
  });
}
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-watchavailability |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: connect event
=============================

The **`connect`** event of the `RemotePlayback` interface fires when the user agent connects to the remote device.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("connect", (event) => {});

onconnect = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent successfully connects.


```js
RemotePlayback.onconnect = () => {
  console.log(RemotePlayback.state);
};
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-onconnect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: disconnect event
================================

The **`disconnect`** event of the `RemotePlayback` interface fires when the user agent disconnects from the remote device.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("disconnect", (event) => {});

ondisconnect = (event) => {};
```

Event type
----------

A generic `Event`.

Example
-------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent disconnects from the remote device.


```js
RemotePlayback.disconnect = () => {
  console.log(RemotePlayback.state);
};
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-ondisconnect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RemotePlayback: state property
==============================

The **`state`** read-only property of the `RemotePlayback` interface returns the current state of the `RemotePlayback` connection.

Value
-----

One of:

`"connecting"`

The user agent is attempting to initiate remote playback with the selected device.

`"connected"`

The transition from local to remote playback has happened. All commands will now take place on the remote device.

`"disconnected"`

The remote playback has not been initiated, has failed to initiate, or has been stopped.

Examples
--------

In the following example the value of `RemotePlayback.state` is printed to the console when the user agent successfully connects.


```js
RemotePlayback.onconnect = () => {
  console.log(RemotePlayback.state);
};
```

Specifications
--------------

| Specification |
| --- |
| Remote Playback API # dom-remoteplayback-state |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebXR application life cycle
============================

In this guide, we'll get a birds-eye view of what's involved in creating and driving a WebXR application, without diving down to the code level in detail. This serves as preparation for the next few articles in these WebXR guides, which cover starting up and shutting down a WebXR session, geometry, simulating cameras, spatial tracking, and more.

Life cycle outline
------------------

Most applications using WebXR will follow a similar overall design pattern:

1. Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide.
    1. Make sure the WebXR API is available; if `navigator.xr` is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.
    2. Call `navigator.xr.isSessionSupported()`, specifying the WebXR experience mode you want to provide: `inline`, `immersive-vr`, or `immersive-ar`, in order to determine whether or not the type of session you wish to provide is available.
    3. If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.
2. When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an `XRSession` using the desired mode. This is done by calling `navigator.xr.requestSession()`, again specifying the string indicating the mode you want to enable: `inline`, `immersive-vr`, or `immersive-ar`.
3. If the promise returned by `requestSession()` resolves, use the new `XRSession` to manage the WebXR session for the duration of the WebXR experience. This will involve managing inputs, animations, and rendering.
    1. Call the `XRSession` method `requestAnimationFrame()` to schedule the first frame render for the XR device.
    2. If your scene is complex, you should consider creating a `Worker`—or using one that you've previously created for this purpose—to perform the computations needed for each frame to be rendered. This will reduce the chance that the rendering process will noticeably stall the app.
    3. Each `requestAnimationFrame()` callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.
    4. Each time the callback is invoked, it should call `requestAnimationFrame()` again in order to let the browser know that the callback needs to be run again when it's time to render the next frame.
4. When the time comes (such as when the user exits your app or navigates away from your site), end the XR session; otherwise, continue the loop until the user chooses to exit XR mode.
    1. To end the XR session yourself, call `XRSession.end()`.
    2. Include a handler for the `XRSession` event `end` event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.
Targeting and hit detection
===========================

Virtual object hit testing
--------------------------

Detection of collisions with virtual objects usually doesn't actually involve testing for intersection of the ray with one of the scene's polygons, as a typical scene may have hundreds or thousands of polygons, which makes direct tracing of rays to polygons impractical in most cases. Instead, most applications find a way to simplify the implementation of their hit testing algorithms.

It's possible—or even likely—that whatever 3D graphics engine you're using offers hit testing, especially if it's designed specifically for game development.

### Simplified representative objects

One common solution is to overlay simplified, invisible objects atop the objects in your scene. These objects then serve a s. For instance, if you have a more-or-less rectangular object, use a rectangle as a surrogate for the object when performing hit testing. Likewise, if an object is essentially round, use the radius of the minimum enclosing circle to establish a collision test object.

Real-world hit testing
----------------------

The acronym "LIDAR" has multiple definitions depending on specifics of how it's implemented, but the end result is the same. Most commonly, it refers to "*Laser Imaging, Detection, And Ranging*" or "*LIght Detection and Ranging*").

Testing for collisions with the real world is a different problem, which may involve not only interpreting the imagery from the device's camera (if available) but also potentially multiple additional sensors. Some devices include infrared sensors to help range objects, and others provide powerful LIDAR systems, which use lasers (usually infrared lasers, which can't be seen by the human eye) to determine range to objects in the world.

The details of how to work with an individual platform's ranging system is beyond the scope of this article. However, there's hope: a proposal has been floated for a WebXR Hit Test Module that would layer atop WebXR to provide an API for performing hit testing and collision detection.

See also
--------

* 3D collision detection
* HTML5 games: 3D collision detection (Hacks blog)
WebTransportBidirectionalStream: readable property
==================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`readable`** read-only property of the `WebTransportBidirectionalStream` interface returns a `WebTransportReceiveStream` instance that can be used to reliably read incoming data.

**Note:** This feature is available in Web Workers

Value
-----

A `WebTransportReceiveStream`.

Examples
--------

See the main `WebTransportBidirectionalStream` interface page.

Specifications
--------------

| Specification |
| --- |
| WebTransport # dom-webtransportbidirectionalstream-readable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportBidirectionalStream: writable property
==================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`writable`** read-only property of the `WebTransportBidirectionalStream` interface returns a `WebTransportSendStream` instance that can be used to write outgoing data.

**Note:** This feature is available in Web Workers

Value
-----

A `WebTransportSendStream`.

Examples
--------

See the main `WebTransportBidirectionalStream` interface page.

Specifications
--------------

| Specification |
| --- |
| WebTransport # dom-webtransportbidirectionalstream-writable |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
XPathException: code property
=============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`code`** read-only property of the
 `XPathException` interface returns a `short` that contains one
 of the error code constants.

Value
-----

A `short` number representing the error code.

Specifications
--------------

#### No specification found

No specification data found for `api.XPathException.code`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.