Wie Sie mehrere WebGL-Canvases auf einer einzigen Seite realisieren.

Vor kurzer Zeit stellte ein User eine interessante Frage über die Verwendung mehrerer Canvas-Elemente auf einer einzigen Seite. Es stellt sich natürlich hier zwangsläufig die Frage, warum jemand so etwas benötigen sollte. In der Praxis finden sich aber viele nützliche Anwendungen, darunter auch solche aus dem bekannten Animagraffs-Studio.

Dieses faszinierende Feature verdient eine eingehende Betrachtung.

Um was geht es genau?

Wenn Sie versuchen mehrere Canvas-Elemente in ihrem Skript zu initialisieren, werden Sie natürlich Fehler generieren, da die Engine viele Variablen verwendet um die Betriebsbedingungen zu speichern.

Hier ist die Idee: Der Webbrowser des Benutzers lädt wie üblich eine und auch wirklich nur eine Engine-Datei. Sie setzen jedoch auch spezifische Namensräume in ihren Skripten. Diese Namensräume ermöglichen es der Engine, ihre Skripte so zu verarbeiten als wären es separate Einheiten, die unabhängig voneinander arbeiten.

Ein bisschen praktische Übung.

Zu Beginn müssen wir einen Platz für mehrere Canvases im HTML-Body vorbereiten. Ich werde eine Standardvorlage verwenden, die der Projektmanager generiert, wenn ein neues Projekt erstellt wird.

Es müssen zwei unabhängige Canvas-Elemente auf der Seite platzieren. Dementsprechend werden Div-Container im HTML-Element definiert.

Der zu implementierende Code soll für verschiedene Container in verschiedenen JavaScript-Dateien gespeichert werden. Die entsprechenden Zeilen müssen dem HTML hinzugefügt werden. Zudem müssen der Speicherort, die Größe und andere Parameter in der CSS-Datei definiert werden:

Zudem müssen der Speicherort, die Größe und andere Parameter in der CSS-Datei definiert werden:

Und nun kommt der interessante Teil. Der Namensraum muss bei der Initialisierung des Moduls in der b4w.require-Funktion gesetzt werden, damit die Engine das Skript der entsprechenden Identifier zuordnen kann. Interne Requirement-Funktionsaufrufe sollten jedoch keine Identifikatoren verwenden.

Am Ende sollte der vom Projektmanager generierte Standardcode wie folgt aussehen:

Und der Code für das zweite Canvas sollte so aussehen:

Die Interaktion zwischen zwei Canvases.

Im Folgenden werden wir einen Blick auf ein komplexeres Beispiel werfen, bei dem Code für verschiedene Canvas-Elemente miteinander interagieren können. Wir werden versuchen eine Animation auf dem ersten Canvas mit einem Mausklick im zweiten Canvas Window zu starten.

Wir definieren die externe Funktion „ext_method“ zum Starten der Animation im ersten Canvas-Code:

Definieren Sie im zweiten Canvas-Code die Animationsfunktion mit Require und setzen Sie den Identifier des benötigten Canvas als Parameter. Beachten Sie, dass in diesem Fall die Require-Methode aus dem globalen Objekt b4w aufgerufen wird.

Nun fügen wir den Standard-Code für die Verarbeitung des „click-„Events hinzu:

Wie Sie sehen ist es nicht besonders schwer mit mehreren Canvases zu arbeiten. Sie werden dadurch erstaunliche neue Möglichkeiten entdecken.