WebXR-Leitfaden zur Leistungsoptimierung

Besprechen Sie allgemeine Punkte wie die Begrenzung der Anzahl verschiedener Schleifen während des Renderings, das Vermeiden unnötiger Zeichnungen usw.

Es können wahrscheinlich auch Inhalte aus diesem Erläuterungsdokument im Spec-Repo enthalten sein.

Dieser Abschnitt wird teilweise aus diesem Erläuterungsdokument im Spec-Repo entnommen.

Inhalte über die Verwaltung der Bildrate.

Dieser Abschnitt kombiniert Informationen aus diesem Erläuterungsdokument und diesem Dokument im Spec-Repo.

Wenn Sie Bibliotheken verwenden, die Aufgaben wie Matrixmathematik durchführen, haben Sie typischerweise eine Reihe von Arbeitsvariablen, durch die verschiedene Vektoren, Matrizen und Quaternionen im Laufe der Zeit gehen. Es macht daher Sinn, eine begrenzte Anzahl dieser Objekte zu haben und deren Inhalte mit den neuen Informationen zu ersetzen, jedes Mal wenn Sie sie verwenden müssen. Sie können als ähnlich den Registern in einem Mikroprozessor betrachtet werden: eine begrenzte Menge von Speicherplätzen für spezifische Datentypen oder Anwendungsfälle.

Auch wenn ein einzelner Vektor oder eine Matrix nicht übermäßig viel Speicherplatz beansprucht, führt die schiere Anzahl der Vektoren, Matrizen und anderer Strukturen, die zur Bildung jedes Einzelbilds einer 3D-Szene verwendet werden, dazu, dass Speicherverwaltung schließlich zu einem Problem wird, wenn Sie Speicherobjekte ständig allozieren und freigeben.

Betrachten Sie das Folgende:

function drawScene(gl, view, programInfo, buffers, texture, deltaTime) {
  // …
  for (const object in scene) {
    const vertexList = [
      /* … */
    ];
    const normalMatrix = mat4.create();
    const modelViewMatrix = mat4.create();
    const objectMatrix = mat4.create();

    // Apply rotation updates to the object if needed

    mat4.rotate(/* … */);
  }
}

Dies rendert eine Szene. Aber es ist ineffizient, da es als lokale Variablen eine Reihe von Dingen allokiert, darunter mindestens zwei Matrizen, ein Array von Scheitelpunkten und mehr. Das bedeutet, dass für jeden Frame die JavaScript-Laufzeit Speicher für diese allokieren und einrichten muss – möglicherweise Abfallbeseitigung auslösen – und wenn jede Interaktion der Schleife abgeschlossen ist, wird der Speicher freigegeben.

Eine einfache Änderung kann dies erheblich optimieren:

const vertexList = [
  /* … */
];
const normalMatrix = mat4.create();
const modelViewMatrix = mat4.create();

function drawScene(gl, view, programInfo, buffers, texture, deltaTime) {
  // …
  for (const object in scene) {
    // …
  }
}

Jetzt verwenden wir statt Variablen in jeder Schleifeniteration globale Konstanten (oder Klassenmitgliedskonstanten). Dies bietet mehrere Vorteile:

• Der für jeden Wert oder jede Struktur zugeordnete Speicher muss nicht in jedem Frame neu zugeordnet werden. Dies reduziert die Wahrscheinlichkeit, die Müllabfuhr auszulösen, und optimiert den Speicherverbrauch.
• Sie können die Objekte, die Ihre Vektoren und Matrizen enthalten, nicht versehentlich löschen, da sie Konstanten sind.
• Sie können jedoch nach wie vor die Inhalte jedes dieser Objekte ersetzen, sodass sie wiederverwendbar sind.

Sie sind jetzt vor mehreren möglichen Programmierfehlern geschützt, und Ihre gesamte Animation wird ebenfalls flüssiger und leistungsfähiger.