VRDisplay: requestAnimationFrame() Methode

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die requestAnimationFrame()-Methode der VRDisplay-Schnittstelle ist eine spezielle Implementierung von Window.requestAnimationFrame, die eine Callback-Funktion enthält, die jedes Mal aufgerufen wird, wenn ein neues Bild der VRDisplay-Präsentation gerendert wird:

Hinweis: Diese Methode war Teil der alten WebVR API. Sie wurde durch die WebXR Device API ersetzt.

Wenn das VRDisplay keine Szene präsentiert, ist dies funktional äquivalent zu Window.requestAnimationFrame.
Wenn das VRDisplay präsentiert, wird der Rückruf mit seiner nativen Bildwiederholrate aufgerufen.

Syntax

requestAnimationFrame(callback)

Parameter

callback: Eine Callback-Funktion, die jedes Mal aufgerufen wird, wenn ein neues Bild der VRDisplay-Präsentation gerendert wird.

Rückgabewert

Ein Long, der das Handle des requestAnimationFrame()-Aufrufs darstellt. Dieses kann dann an einen VRDisplay.cancelAnimationFrame()-Aufruf übergeben werden, um den Rückruf abzumelden.

Beispiele

const frameData = new VRFrameData();
let vrDisplay;

navigator.getVRDisplays().then((displays) => {
  vrDisplay = displays[0];
  console.log("Display found");
  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
  btn.addEventListener("click", () => {
    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  const curFramePose = frameData.pose;
  const curPos = curFramePose.position;
  const curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  const projectionMatrixLocation = gl.getUniformLocation(
    shaderProgram,
    "projMatrix",
  );
  const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye's view to the left half of the canvas
  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(
    projectionMatrixLocation,
    false,
    frameData.leftProjectionMatrix,
  );
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye's view to the right half of the canvas
  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(
    projectionMatrixLocation,
    false,
    frameData.rightProjectionMatrix,
  );
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

  // …

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}

Hinweis: Sie können diesen vollständigen Code unter raw-webgl-example ansehen.

Spezifikationen

Diese Methode war Teil der alten WebVR API, die durch die WebXR Device API ersetzt wurde. Sie ist nicht mehr auf dem Weg, ein Standard zu werden.

Bis alle Browser die neuen WebXR APIs implementiert haben, wird empfohlen, auf Frameworks wie A-Frame, Babylon.js oder Three.js oder ein Polyfill zu setzen, um WebXR-Anwendungen zu entwickeln, die in allen Browsern funktionieren. Lesen Sie für weitere Informationen den Leitfaden zum Portieren von WebVR auf WebXR von Meta.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

WebVR API