Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. HTML5

WebGL-Physik und Kollisionserkennung mit Babylon.js und Oimo.js

by
Read Time:12 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Heute möchte ich Ihnen die Grundlagen von Kollisionen, Physik und Begrenzungsrahmen vermitteln, indem ich mit der WebGL Babylon.js-Engine und einem Physik-Engine-Begleiter namens Oimo.js spiele.

Hier ist die Demo, die wir gemeinsam erstellen werden: Babylon.js Espilit Physics-Demo mit Oimo.js.

Babylonjs Espilit Physics demo with OimojsBabylonjs Espilit Physics demo with OimojsBabylonjs Espilit Physics demo with Oimojs

Sie können es in einem WebGL-kompatiblen Browser starten – wie IE11, Firefox, Chrome, Opera, Safari 8 oder Microsoft Edge in der technischen Vorschau von Windows 10 – und sich dann wie in einem FPS-Spiel in der Szene bewegen. Drücken Sie die s-Taste, um einige Kugeln/Bälle zu starten, und die b-Taste, um einige Boxen zu starten. Mit der Maus können Sie auch auf eine der Kugeln oder Kästchen klicken, um eine Impulskraft darauf auszuüben.

1. Kollisionen verstehen

Wenn wir uns die Wikipedia-Definition zur Kollisionserkennung ansehen, können wir Folgendes lesen:

Kollisionserkennung bezieht sich typischerweise auf das Rechenproblem der Erkennung des Schnittpunkts von zwei oder mehr Objekten. Während das Thema am häufigsten mit seiner Verwendung in Videospielen und anderen physikalischen Simulationen in Verbindung gebracht wird, hat es auch Anwendungen in der Robotik. Zusätzlich zur Feststellung, ob zwei Objekte kollidiert sind, können Kollisionserkennungssysteme auch die Aufprallzeit (TOI) berechnen und einen Kontaktverteiler (den Satz von Schnittpunkten) melden. Die Kollisionsreaktion beschäftigt sich mit der Simulation dessen, was passiert, wenn eine Kollision erkannt wird (siehe Physik-Engine, Ragdoll-Physik). Die Lösung von Kollisionserkennungsproblemen erfordert die umfassende Nutzung von Konzepten aus der linearen Algebra und der Computergeometrie.

Packen wir diese Definition nun in eine coole 3D-Szene aus, die als Ausgangspunkt für dieses Tutorial dient.

Sie können sich in diesem großartigen Museum wie in der realen Welt bewegen. Sie werden nicht durch den Boden fallen, durch Wände gehen oder fliegen. Wir simulieren die Schwerkraft. All das scheint ziemlich offensichtlich zu sein, aber es erfordert eine Menge Berechnungen, um dies in einer virtuellen 3D-Welt zu simulieren.

Die erste Frage, die wir beantworten müssen, wenn wir über die Kollisionserkennung nachdenken, ist, wie komplex sie sein sollte. Tatsächlich könnte das Testen, ob zwei komplexe Meshes kollidieren, viel CPU kosten, noch mehr bei einer JavaScript-Engine, bei der es komplex ist, dies auf etwas anderes als den UI-Thread auszulagern.

Um besser zu verstehen, wie wir mit dieser Komplexität umgehen, navigieren Sie zum Espilit-Museum in der Nähe dieses Schalters:

the Espilit museum near the deskthe Espilit museum near the deskthe Espilit museum near the desk

Sie werden vom Tisch blockiert, auch wenn auf der rechten Seite noch Platz frei zu sein scheint. Ist es ein Fehler in unserem Kollisionsalgorithmus? Nein, ist es nicht (Babylon.js ist frei von Fehlern!). Das liegt daran, dass Michel Rousseau, der 3D-Künstler, der diese Szene gebaut hat, dies freiwillig getan hat. Um die Kollisionserkennung zu vereinfachen, hat er einen speziellen Collider verwendet.

Was ist ein Collider?

Anstatt die Kollisionen mit den vollständigen detaillierten Netzen zu testen, können Sie sie in einfache unsichtbare Geometrien einfügen. Diese Collider fungieren als Netzdarstellung und werden stattdessen von der Kollisions-Engine verwendet. Meistens werden Sie die Unterschiede nicht sehen, aber es wird uns ermöglichen, viel weniger CPU zu verbrauchen, da die Mathematik dahinter viel einfacher zu berechnen ist.

Jede Engine unterstützt mindestens zwei Arten von Collidern: die Begrenzungsbox und die Begrenzungskugel. Sie werden es besser verstehen, wenn Sie sich dieses Bild ansehen:

Illustration of bounding box and bounding sphereIllustration of bounding box and bounding sphereIllustration of bounding box and bounding sphere
Auszug aus: Computervisualisierung, Raytracing, Videospiele, Austausch von Bounding Boxes

Diese schöne gelbe Ente ist das darzustellende Netz. Anstatt die Kollisionen gegen jede ihrer Flächen zu testen, können wir versuchen, sie in die beste Begrenzungsgeometrie einzufügen. In diesem Fall scheint eine Box die bessere Wahl als eine Kugel zu sein, um als Netzbetrüger zu fungieren. Aber die Wahl hängt wirklich vom Mesh selbst ab.

Kehren wir zur Espilit-Szene zurück und zeigen das unsichtbare Begrenzungselement in einer halbtransparenten roten Farbe an:

invisible bounding element in a semitransparent red colorinvisible bounding element in a semitransparent red colorinvisible bounding element in a semitransparent red color

Sie können jetzt verstehen, warum Sie sich nicht an der rechten Seite des Schreibtisches bewegen können. Das liegt daran, dass Sie mit dieser Box kollidieren (na ja, die Babylon.js-Kamera kollidiert). Wenn Sie dies möchten, ändern Sie einfach die Größe, indem Sie die Breite verringern, um sie perfekt an die Breite des Schreibtisches anzupassen.

Hinweis: Wenn Sie mit dem Erlernen von Babylon.js beginnen möchten, können Sie den kostenlosen Schulungskurs der Microsoft Virtual Academy (MVA) besuchen. Sie können zum Beispiel direkt zu Einführung in WebGL 3D mit HTML5 und Babylon.js springen: Babylon.js für Anfänger verwenden, wo wir diesen Kollisionsteil von Babylon.js behandeln. Sie können sich auch den Code in unserem interaktiven Playground-Tool Babylon.js Playground: Collisions-Beispiel ansehen.

Basierend auf der Komplexität der Kollisions- oder Physik-Engine stehen andere Arten von Collidern zur Verfügung: die Kapsel und das Netz zum Beispiel.

Box sphere capsule and mesh collidersBox sphere capsule and mesh collidersBox sphere capsule and mesh colliders
Auszug aus: Erste Schritte mit Unity - Colliders & UnityScript

Kapsel ist für Menschen oder Humanoide nützlich, da sie besser zu unserem Körper passt als eine Schachtel oder eine Kugel. Mesh ist fast nie das vollständige Mesh selbst – es ist vielmehr eine vereinfachte Version des ursprünglichen Meshs, das Sie anvisieren – aber es ist immer noch viel präziser als eine Box, eine Kugel oder eine Kapsel.

2. Laden der Startszene

Um unsere Espilit-Szene zu laden, haben Sie verschiedene Möglichkeiten:

Option 1: Laden Sie es von unserem GitHub-Repository herunter und folgen Sie dann dem Modul Introduction to WebGL 3D with HTML5 and Babylon.js: Loading Assets unseres MVA-Kurses, um zu erfahren, wie Sie eine .babylon-Szene laden. Grundsätzlich müssen Sie die Assets und die Babylon.js-Engine auf einem Webserver hosten und die richtigen MIME-Typen für die .babylon-Erweiterung festlegen.

Option 2: Laden Sie diese vorgefertigte Visual Studio-Lösung (ZIP-Datei) herunter.

Hinweis: Wenn Sie mit Visual Studio nicht vertraut sind, werfen Sie einen Blick auf diesen Artikel: Webentwickler, Visual Studio könnte ein großartiges kostenloses Tool zum Entwickeln sein… Bitte beachten Sie auch, dass die Pro-Version jetzt für viele verschiedene Szenarien kostenlos ist. Es heißt Visual Studio 2013 Community Edition.

Natürlich können Sie diesem Tutorial trotzdem folgen, wenn Sie Visual Studio nicht verwenden möchten. Hier ist der Code zum Laden unserer Szene. Denken Sie daran, dass die meisten Browser WebGL jetzt unterstützen – denken Sie daran, den Internet Explorer sogar auf Ihrem Mac zu testen.

Wenn Sie dieses Material verwenden, profitieren Sie nur von der eingebetteten Kollisions-Engine von Babylon.js. Tatsächlich machen wir einen Unterschied zwischen unserer Kollisions-Engine und einer Physik-Engine.

Die Kollisions-Engine ist hauptsächlich der Kamera gewidmet, die mit der Szene interagiert. Sie können die Schwerkraft auf der Kamera aktivieren oder nicht, und Sie können die checkCollision-Option auf der Kamera und auf den verschiedenen Meshes aktivieren.

Die Kollisions-Engine kann Ihnen auch dabei helfen, zu erkennen, ob zwei Meshes kollidieren. Aber das ist alles (das ist tatsächlich schon viel!). Die Kollisions-Engine generiert keine Aktionen, Kraft oder Impulse, nachdem zwei Babylon.js-Objekte kollidieren. Sie brauchen dafür eine Physik-Engine, um den Objekten Leben einzuhauchen.

Wir haben Physik in Babylon.js über einen Plugin-Mechanismus integriert. Mehr dazu können Sie hier lesen: Hinzufügen Ihres eigenen Physik-Engine-Plugins zu Babylon.js. Wir unterstützen zwei Open-Source-Physik-Engines: Cannon.js und Oimo.js. Oimo ist jetzt die bevorzugte Standard-Physik-Engine.

Wenn Sie Option 1 zum Laden der Szene gewählt haben, müssen Sie Oimo.js von unserem GitHub herunterladen. Es ist eine leicht aktualisierte Version, die wir erstellt haben, um Babylon.js besser zu unterstützen. Wenn Sie Option 2 gewählt haben, wird sie bereits referenziert und ist in der VS-Lösung im Ordner scripts verfügbar.

3. Physikunterstützung in der Szene aktivieren und Collider in Physik-Betrüger verwandeln

Das erste, was Sie tun müssen, ist, die Physik vor Ort zu aktivieren. Fügen Sie dazu bitte diese Codezeilen hinzu:

Sie richten das Schwerkraftniveau (-10 auf der Y-Achse in diesem Beispielcode, das mehr oder weniger dem auf der Erde entspricht) und die Physik-Engine ein, die Sie verwenden möchten. Wir verwenden Oimo.js, aber die kommentierte Zeile zeigt, wie Cannon.js verwendet wird.

Jetzt müssen wir alle nicht sichtbaren Collider durchlaufen, die von der Kollisions-Engine verwendet werden, und die physikalischen Eigenschaften darauf aktivieren. Dazu müssen Sie einfach alle Meshes finden, bei denen checkCollisions auf true gesetzt ist, aber in der Szene nicht sichtbar ist:

Bitte deklarieren Sie auch die meshesColliderList:

Und wir sind fertig! Wir sind bereit, einige Objekte in unsere Szene zu werfen und viel Chaos in dieses schöne, aber viel zu ruhige Museum zu bringen.

4. Erstellen von Kugeln und Boxen mit physikalischen Zuständen

Wir werden der Szene nun einige Kugeln (mit einer Amiga-Textur) und einige Boxen (mit einer Holztextur) hinzufügen.

Diese Netze haben einen physikalischen Zustandssatz. Dies bedeutet zum Beispiel, dass sie auf dem Boden abprallen, wenn Sie sie in die Luft schleudern, zwischen ihnen abprallen, nachdem eine Kollision erkannt wurde usw. Die Physik-Engine muss wissen, welche Art von Betrüger Sie für das Netz verwenden möchten (heute Ebene, Kugel oder Box), sowie die Masse- und Reibungseigenschaften.

Wenn Sie Option 1 gewählt haben, können Sie die beiden Texturen hier herunterladen.

Fügen Sie diesen Code zu Ihrem Projekt hinzu:

Sie sehen, dass die Boxen um den Faktor 4 schwerer sind als die Kugeln.

Hinweis: Wenn Sie wissen möchten, wie Material in Babylon.js funktioniert, sehen Sie sich das Modul Introduction to WebGL 3D with HTML5 and Babylon.js: Understanding Materials and Inputs an oder spielen Sie mit unserem speziellen Playground-Beispiel, Babylon.js Playground: Materials-Beispiel.

Fügen Sie diese beiden Codezeilen nach der Zeile scene.enablePhysics hinzu:

Und starten Sie das Webprojekt. Navigieren Sie zum Zentrum des Museums und drücken Sie die Tasten s oder b. Sie erhalten dieses lustige Ergebnis:

Demo scene with spheres and boxes floating in the airDemo scene with spheres and boxes floating in the airDemo scene with spheres and boxes floating in the air

5. Hinzufügen von Picking-Unterstützung zum Klicken auf Meshes

Fügen wir ein weiteres cooles Feature hinzu: die Möglichkeit, auf eines der Objekte zu klicken, um es wegzuwerfen. Dazu müssen Sie einen Strahl von den 2D-Koordinaten der Maus in die 3D-Szene senden, prüfen, ob dieser Strahl eines der interessanten Netze berührt, und wenn ja, eine Impulskraft auf ihn ausüben, um zu versuchen, ihn zu bewegen.

Hinweis: Um zu verstehen, wie die Kommissionierung funktioniert, lesen Sie bitte das MVA-Modul Einführung in WebGL 3D mit HTML5 und Babylon.js: Erweiterte Funktionen. Oder spielen Sie mit unserem Online-Beispiel Babylon.js Playground: Picking-Beispiel.

Fügen Sie diesen Code in die Funktion addListeners() ein:

Starten Sie Ihren Code in Ihrem bevorzugten Browser. Sie können jetzt auf Ihre physikalischen Netze klicken, um mit ihnen zu spielen.

6. Anzeigen der Begrenzungsrahmen, um die ganze Geschichte besser zu verstehen

Schließlich erstellen wir eine Debug-Szene, in der Sie die Collider ein- / ausblenden und ihre physikalischen Eigenschaften aktivieren / deaktivieren können.

Wir werden die Benutzeroberfläche in dieses Div einfügen:

Und wir verwenden diese Funktion, um die Benutzeroberfläche zu handhaben:

Ich weiß, es erzeugt eine sehr hässliche Benutzeroberfläche, aber ich war zu faul, um mehr Zeit damit zu verbringen. Fühlen Sie sich frei, es zu verbessern!

Rufen Sie diese neue Funktion auf und starten Sie das Webprojekt. Zeigen Sie nun zum Beispiel die Collider 12 und 17 an:

colliders 12 and 17colliders 12 and 17colliders 12 and 17

Sie können auch mit der zweiten Checkbox die physikalischen Eigenschaften aktivieren/deaktivieren. Wenn Sie zum Beispiel die physikalischen Eigenschaften von Collider 12 deaktivieren und die Kugeln abfeuern, werden sie jetzt durch diese Wand gehen! Dies ist im folgenden Screenshot als die vom roten Quadrat umgebene Kugel dargestellt:

sphere going through wallsphere going through wallsphere going through wall

Sie können dieses Debugging-Beispiel direkt in Ihrem Browser hier spielen: Babylon.js Espilit Physicsdebug-Demo.

Bitte sehen Sie sich auch diese großartige Demo von Samuel Girardin an, die auch Oimo.js für einige lustige Charaktere verwendet:

demo built by Samuel Girardidemo built by Samuel Girardidemo built by Samuel Girardi

Ich hoffe, Ihnen hat dieses Tutorial gefallen! Zögern Sie nicht, mich auf Twitter anzupingen, um darüber zu kommentieren, oder verwenden Sie das Kommentarfeld unten.

Dieser Artikel ist Teil der Webentwicklungs-Tech-Serie von Microsoft. Wir freuen uns, Microsoft Edge und die neue EdgeHTML-Rendering-Engine mit Ihnen zu teilen. Holen Sie sich kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac-, iOS-, Android- oder Windows-Gerät @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.