Web/API/XRView/eye

Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The XRView interface's read-only eye property is a string taken from the XREye enumerated type, indicating which eye's viewpoint the XRView represents: left or right. For views which represent neither eye, such as monoscopic views, this property's value is none.

Syntax

let eye = xrView.eye;

Value

A DOMString whose value is one of the strings enumerated by the XREye type:

left: The XRView represents the point-of-view of the viewer's left eye.
right: The view represents the viewer's right eye.
none: The XRView describes a monoscopic view, or the view otherwise doesn't represent a particular eye's point-of-view.

Usage notes

The primary purpose of this property is to allow the correct area of any pre-rendered stereo content to be presented to the correct eye. For dynamically-rendered 3D content, you can usually ignore this and simply render each of the viewer's views, one after another.

Examples

This code, from the viewer pose's renderer, iterates over the pose's views and renders them. However, we have flags which, if true, indicate that a particular eye has been injured during gameplay. When rendering that eye, if the flag is true, that view is skipped instead of being rendered.

glLayer = xrSession.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
gl.clearColor(0,0, 0, 1.0);
gl.clearDepth(1.0);
gl.clear(gl.COLOR_BUFFER_BIT, gl.DEPTH_BUFFER_BIT);

for (let view of xrPose.views) {
  let skipView = false;

  if (view.eye == "left" && body.leftEye.injured) ||
    skipView = updateInjury(body.leftEye);
  } else if (view.eye == "right" && body.rightEye.injured) {
    skipView = updateInjury(body.rightEye);
  }

  if (!skipView) {
    let viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
    renderScene(gl, view);
  }
}

For each of the views, the value of eye is checked and if it's either left or right, we check to see if the body.leftEye.injured or body.rightEye.injured property is true; if so, we call a function updateInjury() on that eye to do things such as allow a bit of healing to occur, track the progress of a poison effect, or the like, as appropriate for the game's needs.

updateInjury() returns true if the eye is still injured or false if the eye has been restored to health by the function,. If the result is false, indicating that the eye is now healthy, we render the scene for that eye. Otherwise, we don't.

Specifications

Specification	Status	Comment
WebXR Device APIThe definition of 'XRView.eye' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`eye`	Chrome Full support 79	Edge Full support 79	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android Full support 79	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android Full support 11.2

Legend

Full support: Full support
No support: No support

XRView.eye by Mozilla Contributors is licensed under CC-BY-SA 2.5.