XRView

Instanzeigenschaften

eye Schreibgeschtzt

Welches der beiden Augen (left) oder (right) diese XRView-Perspektive darstellt. Dieser Wert wird verwendet, um sicherzustellen, dass jeder Inhalt, der vorab gerendert ist, fr die Darstellung in einem bestimmten Auge korrekt verteilt oder positioniert wird. Der Wert kann auch none sein, wenn die XRView monokulare Daten prsentiert (wie z.B. ein 2D-Bild, eine Vollbildansicht von Text oder eine Nahansicht von etwas, das nicht in 3D erscheinen muss).

isFirstPersonObserver Schreibgeschtzt

Gibt einen booleschen Wert zurck, der anzeigt, ob die XRView eine First-Person-Observer-Ansicht ist.

index Schreibgeschtzt

Gibt eine Zahl zurck, die den Index der aktuellen XRView im XRViewerPose.views-Array angibt.

projectionMatrix Schreibgeschtzt

Die Projektionsmatrix, die die Szene so transformiert, dass sie korrekt erscheint, basierend auf dem durch eye angegebenen Blickpunkt. Diese Matrix sollte direkt verwendet werden, um Prsentationsverzerrungen zu vermeiden, die potenziell ernste Benutzerbeschwerden verursachen knnen.

recommendedViewportScale Schreibgeschtzt

Der empfohlene Viewport-Skalenwert, den Sie fr requestViewportScale() verwenden knnen, falls der User-Agent eine solche Empfehlung hat; andernfalls null.

transform Schreibgeschtzt

Ein XRRigidTransform, der die aktuelle Position und Orientierung des Blickpunkts in Bezug auf den angegebenen XRReferenceSpace beschreibt, als getViewerPose() auf dem zu rendernden XRFrame aufgerufen wurde.

Instanzmethoden

requestViewportScale() Schreibgeschtzt

Fordert, dass der User-Agent die angeforderte Viewport-Skala fr diesen Viewport auf den angeforderten Wert setzen soll.

Verwendungshinweise

Positionen und Anzahl der XRViews pro Frame

Beim Rendern einer Szene wird die Menge der Ansichten, die zur Darstellung der Szene fr den Betrachter als aktueller Frame verwendet werden, durch Aufrufen der Methode getViewerPose() des XRFrame-Objekts erhalten, um die XRViewerPose zu erhalten, die (im Wesentlichen) die Position des Kopfes des Betrachters darstellt. Die views-Eigenschaft dieses Objekts ist eine Liste aller XRView-Objekte, die die Blickpunkte darstellen, die verwendet werden knnen, um die Szene fr die Prsentation dem Benutzer gegenber zu konstruieren.

Es ist mglich, XRView-Objekte zu haben, die sich berlappende Bereiche darstellen sowie vllig verschiedene Bereiche; in einem Spiel knnten Sie Ansichten haben, die prsentiert werden knnen, um einen entfernten Ort mit einer berwachungskamera oder einem anderen Gert zu beobachten. Mit anderen Worten: Gehen Sie nicht davon aus, dass es genau zwei Ansichten fr einen bestimmten Betrachter gibt; es kann so wenige wie eine geben (z.B. wenn die Szene im inline-Modus gerendert wird), und mglicherweise viele (besonders wenn das Sichtfeld sehr gro ist). Es knnte auch Ansichten geben, die Beobachter zeigen, die die Handlung verfolgen, oder andere Sichtpunkte, die nicht direkt mit dem Auge des Spielers verbunden sind.

Darber hinaus kann sich die Anzahl der Ansichten jederzeit ndern, abhngig von den aktuellen Bedrfnissen. Daher sollten Sie die Ansichtsliste jedes Mal verarbeiten, ohne Annahmen basierend auf vorherigen Frames zu treffen.

Alle Positionen und Orientierungen innerhalb der Ansichten fr eine gegebene XRViewerPose sind im Referenzraum angegeben, der an XRFrame.getViewerPose() bergeben wurde; dies wird als Viewer-Referenzraum bezeichnet. Die transform-Eigenschaft beschreibt die Position und Orientierung des Auges oder der Kamera, die durch die XRView dargestellt wird, angegeben in diesem Referenzraum.

Die Ziel-Rendering-Ebene

Um einen Frame zu rendern, durchlaufen Sie die Ansichten des XRViewerPose und rendern jede von ihnen in den entsprechenden Viewport innerhalb der XRWebGLLayer des Frames. Derzeit ist die Spezifikation (und daher alle aktuellen Implementierungen von WebXR) darauf ausgelegt, jede XRView in eine einzelne XRWebGLLayer zu rendern, die dann auf dem XR-Gert dargestellt wird, wobei die Hlfte fr das linke Auge und die Hlfte fr das rechte Auge verwendet wird. Das XRViewport fr jede Ansicht wird verwendet, um das Rendering in der richtigen Hlfte der Ebene zu positionieren.

Falls es in Zukunft mglich wird, dass jede Ansicht in eine andere Ebene gerendert wird, mssten nderungen an der API vorgenommen werden, daher ist es vorerst sicher anzunehmen, dass alle Ansichten in dieselbe Ebene gerendert werden.

Beispiele

Vorbereitung fr das Rendern jeder Ansicht fr eine Pose

Um alles zu zeichnen, was der Benutzer sieht, muss in jedem Frame die Liste der Ansichten durchlaufen werden, die von der XRViewerPose-Objektliste views zurckgegeben wird:

for (const view of pose.views) {
  const viewport = glLayer.getViewport(view);

  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  // Draw the scene; the eye being drawn is identified
  // by view.eye.
}

Spezielle Ansichten-Transformationen

Es gibt einige spezielle Transformationen, die auf die Ansicht angewendet werden, whrend eine Szene gerendert und beleuchtet wird.

Modell-View-Matrix

Die Modell-View-Matrix ist eine Matrix, die die Position eines Objekts relativ zu dem Raum definiert, in dem es sich befindet: Wenn objectMatrix eine auf das Objekt angewendete Transformation ist, um dessen grundlegende Position und Rotation bereitzustellen, dann kann die Modell-View-Matrix berechnet werden, indem die Matrix des Objekts mit der Inversen der Transformationsmatrix der Ansicht multipliziert wird, wie folgt:

mat4.multiply(modelViewMatrix, view.transform.inverse.matrix, objectMatrix);

Normal-Matrix

Die Normal-Matrix der Modell-View-Matrix wird verwendet, wenn die Szene beleuchtet wird, um die Normalenvektoren jeder Oberflche zu transformieren und sicherzustellen, dass das Licht in die richtige Richtung reflektiert wird, gegeben die Orientierung und Position der Oberflche relativ zur Lichtquelle(n). Sie wird durch Invertieren und dann Transponieren der Modell-View-Matrix berechnet:

mat4.invert(normalMatrix, modelViewMatrix);
mat4.transpose(normalMatrix, normalMatrix);

Teleportieren eines Objekts

Um ein Objekt programmatisch zu bewegen und/oder zu drehen (oft als teleportieren bezeichnet), mssen Sie einen neuen Referenzraum fr dieses Objekt erstellen, der eine Transformation anwendet, die die gewnschten nderungen beinhaltet. Die Funktion createTeleportTransform() gibt die Transformation zurck, die bentigt wird, um ein Objekt, dessen aktuelle Situation durch den Referenzraum refSpace beschrieben ist, in eine neue Position und Orientierung zu bewegen und zu drehen, die unter Verwendung zuvor aufgezeichneter Maus- und Tastatureingabedaten berechnet wird, die Versetzungen fr Gieren, Neigen und Position entlang aller drei Achsen generiert haben.

function applyMouseMovement(refSpace) {
  if (
    !mouseYaw &&
    !mousePitch &&
    !axialDistance &&
    !transverseDistance &&
    !verticalDistance
  ) {
    return refSpace;
  }

  // Compute the quaternion used to rotate the image based
  // on the pitch and yaw.

  quat.identity(inverseOrientation);
  quat.rotateX(inverseOrientation, inverseOrientation, -mousePitch);
  quat.rotateY(inverseOrientation, inverseOrientation, -mouseYaw);

  // Compute the true "up" vector for our object.

  vec3.cross(vecX, vecY, cubeOrientation);
  vec3.cross(vecY, cubeOrientation, vecX);

  // Now compute the transform that teleports the object to the
  // specified point and save a copy of it to display to the user
  // later; otherwise we probably wouldn't need to save mouseMatrix
  // at all.

  let newTransform = new XRRigidTransform(
    { x: transverseDistance, y: verticalDistance, z: axialDistance },
    {
      x: inverseOrientation[0],
      y: inverseOrientation[1],
      z: inverseOrientation[2],
      w: inverseOrientation[3],
    },
  );
  mat4.copy(mouseMatrix, newTransform.matrix);

  // Create a new reference space that transforms the object to the new
  // position and orientation, returning the new reference space.

  return refSpace.getOffsetReferenceSpace(newTransform);
}

Dieser Code ist in vier Abschnitte unterteilt. Im ersten wird das Quaternion inverseOrientation berechnet. Dies stellt die Drehung des Objektes dar, gem den Werten von mousePitch (Drehung um die X-Achse des Objekts im Referenzraum) und mouseYaw (Drehung um die Y-Achse des Objekts).

Der zweite Abschnitt berechnet den "oben"-Vektor fr das Objekt. Dieser Vektor gibt die Richtung an, die in der Szene insgesamt "oben" ist, jedoch im Referenzraum des Objekts.

Der dritte Abschnitt erstellt den neuen XRRigidTransform, wobei ein Punkt, der die Versetzungen entlang der drei Achsen bereitstellt, als erster Parameter und das Orientierungs-Quaternion als zweiter Parameter angegeben werden. Die matrix-Eigenschaft des zurckgegebenen Objekts ist die tatschliche Matrix, die Punkte vom Referenzraum der Szene in die neue Position des Objekts transformiert.

Schlielich wird ein neuer Referenzraum erstellt, um die Beziehung zwischen den beiden Referenzrumen vollstndig zu beschreiben. Dieser Referenzraum wird an den Aufrufer zurckgegeben.

Um diese Funktion zu verwenden, bergeben wir den zurckgegebenen Referenzraum an XRFrame.getPose() oder getViewerPose(), je nachdem, was bentigt wird. Die zurckgegebene XRPose wird dann verwendet, um die Szene fr den aktuellen Frame zu rendern.

Ein umfangreicheres und vollstndigeres Beispiel finden Sie in unserem Artikel Bewegung, Orientierung und Bewegung.

Spezifikationen

Browser-Kompatibilitt