# XrView

Class · extends [`RenderView`](https://api.playcanvas.com/engine/classes/RenderView.md) · category: XR

Source: https://github.com/playcanvas/engine/blob/970d89f6d3bc6667f4e1f88153abd6e7e82ed52c/src/framework/xr/xr-view.js#L18

Represents an XR View which represents a screen (monoscopic scenario such as a mobile phone) or an eye
(stereoscopic scenario such as an HMD context). It provides access to the view's color and depth information
based on the capabilities of underlying AR system.

## Accessors

### depthUvMatrix

```ts
get depthUvMatrix(): Mat4
```

4x4 matrix that should be used to transform depth texture UVs to normalized UVs in a shader.
It is updated when the depth texture is resized. Refer to [EVENT_DEPTHRESIZE](https://api.playcanvas.com/engine/classes/XrView.md#event_depthresize).

**Example**

```ts
material.setParameter('matrix_depth_uv', view.depthUvMatrix.data);
```

### depthValueToMeters

```ts
get depthValueToMeters(): number
```

Multiply this coefficient number by raw depth value to get depth in meters.

**Example**

```ts
material.setParameter('depth_to_meters', view.depthValueToMeters);
```

### eye

```ts
get eye(): string
```

An eye with which this view is associated. Can be any of:

- [XREYE_NONE](https://api.playcanvas.com/engine/variables/XREYE_NONE.md): None - indicates a monoscopic view (likely mobile phone screen).
- [XREYE_LEFT](https://api.playcanvas.com/engine/variables/XREYE_LEFT.md): Left - indicates left eye view.
- [XREYE_RIGHT](https://api.playcanvas.com/engine/variables/XREYE_RIGHT.md): Right - indicates a right eye view.

### textureColor

```ts
get textureColor(): Texture | null
```

Texture associated with this view's camera color. Equals to null if camera color is
not available or is not supported.

### textureDepth

```ts
get textureDepth(): Texture | null
```

Texture that contains packed depth information which is reconstructed using the underlying
AR system. This texture can be used (not limited to) for reconstructing real world
geometry, virtual object placement, occlusion of virtual object by the real world geometry,
and more.
The format of this texture is any of `PIXELFORMAT_LA8`, [PIXELFORMAT_DEPTH](https://api.playcanvas.com/engine/variables/PIXELFORMAT_DEPTH.md), or
[PIXELFORMAT_R32F](https://api.playcanvas.com/engine/variables/PIXELFORMAT_R32F.md) based on [XrViews#depthPixelFormat](https://api.playcanvas.com/engine/classes/XrViews.md#depthpixelformat). It is UV transformed
based on the underlying AR system which can be normalized using [depthUvMatrix](https://api.playcanvas.com/engine/classes/XrView.md#depthuvmatrix).
Equals to null if camera depth is not supported.

**Example**

```ts
// GPU path, attaching texture to material
material.setParameter('texture_depthSensingMap', view.textureDepth);
material.setParameter('matrix_depth_uv', view.depthUvMatrix.data);
material.setParameter('depth_to_meters', view.depthValueToMeters);
```

**Example**

```ts
// GLSL shader to unpack depth texture
// when depth information is provided in form of LA8
varying vec2 vUv0;

uniform sampler2D texture_depthSensingMap;
uniform mat4 matrix_depth_uv;
uniform float depth_to_meters;

void main(void) {
    // transform UVs using depth matrix
    vec2 texCoord = (matrix_depth_uv * vec4(vUv0.xy, 0.0, 1.0)).xy;

    // get luminance alpha components from depth texture
    vec2 packedDepth = texture2D(texture_depthSensingMap, texCoord).ra;

    // unpack into single value in millimeters
    float depth = dot(packedDepth, vec2(255.0, 256.0 * 255.0)) * depth_to_meters; // m

    // normalize: 0m to 8m distance
    depth = min(depth / 8.0, 1.0); // 0..1 = 0m..8m

    // paint scene from black to white based on distance
    gl_FragColor = vec4(depth, depth, depth, 1.0);
}
```

## Methods

### getDepth

```ts
getDepth(u: number, v: number): number | null
```

Get a depth value from depth information in meters. The specified UV is in the range 0..1,
with the origin in the top-left corner of the depth texture.

**Parameters**

- `u` (`number`): U coordinate of pixel in depth texture, which is in range from 0.0 to
  1.0 (left to right).
- `v` (`number`): V coordinate of pixel in depth texture, which is in range from 0.0 to
  1.0 (top to bottom).

**Returns** `number | null`: Depth in meters or null if depth information is currently not
available.

**Example**

```ts
const depth = view.getDepth(u, v);
if (depth !== null) {
    // depth in meters
}
```

## Events

### EVENT_DEPTHRESIZE

```ts
static EVENT_DEPTHRESIZE: string = 'depth:resize'
```

Fired when the depth sensing texture has been resized. The [depthUvMatrix](https://api.playcanvas.com/engine/classes/XrView.md#depthuvmatrix) needs
to be updated for relevant shaders. The handler is passed the new width and height of the
depth texture in pixels.

**Example**

```ts
view.on('depth:resize', () => {
    material.setParameter('matrix_depth_uv', view.depthUvMatrix);
});
```

## Inherited from [RenderView](https://api.playcanvas.com/engine/classes/RenderView.md)

- `get viewport(): Vec4`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`