XRRenderState.inlineVerticalFieldOfView — Eigenschaft · JavaScript-Referenz

Signatur

XRRenderState.inlineVerticalFieldOfView

Beschreibung

Die schreibgeschützte Eigenschaft inlineVerticalFieldOfView des Interfaces XRRenderState gibt das vertikale Sichtfeld in Radiant an, das der Browser für die Projektionsmatrix einer "inline"-Sitzung verwendet. Inline-Sitzungen stellen XR-Inhalte in einem normalen <canvas> auf der Seite dar – etwa als 3D-Vorschau, bevor der Nutzer in den VR-Modus wechselt.

Bei immersiven Sitzungen ("immersive-vr", "immersive-ar") gibt die Eigenschaft immer null zurück, weil das Sichtfeld dort durch die Hardware (Headset-Optik) festgelegt ist und in den Projektionsmatrizen der einzelnen XRView-Objekte steckt.

Der Wert lässt sich nicht direkt zuweisen. Stattdessen übergibt man beim Aufruf von XRSession.updateRenderState() die Option inlineVerticalFieldOfView. Die Änderung wird erst ab dem nächsten Frame in session.renderState sichtbar. Ohne eigene Angabe verwendet der Browser als Standard Math.PI / 2 (90°).

Typische Anwendungsfälle sind Zoom-Funktionen in Inline-Vorschauen oder die Anpassung des Sichtfelds an das Seitenverhältnis bzw. die Größe des Canvas.

Rückgabewert

Typ

number | null

Beschreibung

Vertikales Sichtfeld in Radiant (zwischen 0 und π, exklusiv) bei "inline"-Sitzungen, sonst null.

Beispiele

Sichtfeld einer Inline-Sitzung auslesen

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2', { xrCompatible: true });

const session = await navigator.xr.requestSession('inline');
await session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });

const fovRad = session.renderState.inlineVerticalFieldOfView;
console.log(`Sichtfeld: ${(fovRad * 180 / Math.PI).toFixed(1)}°`);

Sichtfeld: 90.0°

Zoom per Mausrad in der Inline-Vorschau

const MIN_FOV = Math.PI / 8;   // 22,5°
const MAX_FOV = Math.PI * 0.75; // 135°

canvas.addEventListener('wheel', (event) => {
  event.preventDefault();
  const current = session.renderState.inlineVerticalFieldOfView ?? Math.PI / 2;
  const next = Math.min(MAX_FOV, Math.max(MIN_FOV, current + event.deltaY * 0.001));
  // Wirksam ab dem nächsten Frame
  session.updateRenderState({ inlineVerticalFieldOfView: next });
}, { passive: false });

Unterscheidung inline vs. immersiv

const describeFov = (session) => {
  const fov = session.renderState.inlineVerticalFieldOfView;
  return fov === null
    ? 'Immersive Sitzung – Sichtfeld wird vom Gerät bestimmt'
    : `Inline-Sitzung mit ${Math.round(fov * 180 / Math.PI)}°`;
};

const vrSession = await navigator.xr.requestSession('immersive-vr');
console.log(describeFov(vrSession));

Immersive Sitzung – Sichtfeld wird vom Gerät bestimmt

// Wichtig · Fallstricke

Einheit Radiant: Der Wert ist kein Gradwert. Für Anzeigezwecke mit 180 / Math.PI umrechnen.
Immersive Sitzungen: Wer bei einer immersiven Sitzung inlineVerticalFieldOfView an updateRenderState() übergibt, bekommt einen InvalidStateError. Die Eigenschaft ist dort immer null.
Verzögerte Übernahme: Nach updateRenderState() steht der neue Wert erst im nächsten Animations-Frame (requestAnimationFrame-Callback der Sitzung) in renderState zur Verfügung.
Wertebereich: Der Browser begrenzt Werte auf den Bereich zwischen 0 und π (exklusiv). Deshalb besser selbst begrenzen, damit das Ergebnis vorhersehbar bleibt.
Kompatibilität: WebXR wird vor allem von Chromium-basierten Browsern (Chrome, Edge, Samsung Internet, Meta Quest Browser) unterstützt und braucht einen sicheren Kontext (HTTPS). Safari und Firefox bieten nur eingeschränkte oder gar keine Unterstützung. Vor der Nutzung mit 'xr' in navigator prüfen.

Siehe auch

XRRenderState XRSession.updateRenderState() XRSession.renderState XRRenderState.depthNear XRRenderState.depthFar XRView.projectionMatrix XRRenderState.layers