Einführung in die polygonale Modellierung und Three.js.

Wenn die dritte Dimension in ein Unterhaltungsmedium eingeführt wird, verändert sie für immer die Art und Weise, wie das Medium präsentiert und konsumiert wird. Der Fotorealismus der CGI-Dinosaurier im Jurassic Park öffnete den Filmschaffenden die Türen, um mit Hilfe von Computern visuelle Umgebungen zu schaffen, die sonst nie möglich gewesen wären. VeggieTales brachte eine neue Art von Cartoon hervor, in denen 3D-Objekte anstelle von Zeichnungen verwendet wurden. Es folgten zahlreiche Pixar- und Dreamworks-Blockbuster bis hin zu Samstagmorgen-Cartoons.

Computersoftware war von diesem neuen Trend bei den visuellen Medien stark betroffen. 3D-Computerspiele wie Wolfenstein 3D, Quake und Doom haben das PC-Gaming neu erfunden und klassische Franchises, die eine Generation mit ihren ihren zweidimensionalen Spielen inspirierten, wie Super Mario Bros und Zelda, wurden in ihren nachfolgenden Titeln auf 3D aktualisiert.

Bis zum Erscheinen der offiziellen WebGL-Spezifikation im Jahr 2011 war dieser dreidimensionale Trend bei der Penetration von Web und Browser nicht weit fortgeschritten. In den letzten Jahren haben wir jedoch Fortschritte bei der Nutzung von 3D-Modellen und Animationen im Web gesehen, ähnlich wie bei Fernsehen, Film und nativer Software.

WebGL-Demonstrationen, wie die gemeinsamen Bemühungen von Epic und Mozilla, eine rein browserbasierte Version der epischen Zitadelle zu erstellen, zeigen das enorme Potenzial dieser neuen Technologie. Wenn wir uns an die Schwierigkeiten erinnern, Unreal Tournament nativ auf unseren alten 90er Jahre Desktop auszuführen, finden wir es verblüffend, dass diese Art von Präsentation jetzt mit unseren Webbrowsern verwendet werden kann.

Ein wichtiger Katalysator für das Interesse der Webentwickler an 3D war die Erstellung der JavaScript-Bibliothek Three.js durch Ricardo Cabello. Ziel des Projekts ist es, Entwicklern mit wenig 3D- und WebGL-Erfahrung zu ermöglichen, unglaublich anspruchsvolle Szenen mit gängigen JavaScript-Verfahren zu erstellen. Einfach nur in JavaScript und den Grundlagen der Modellierung vertraut zu sein, ist mehr als ausreichend, um loszulegen.

Einstellen der Szene.

Während Sie mit Three.js hacken können, ohne mit 3D-Software gearbeitet zu haben, sollten Sie, um die Tiefe der API zu nutzen, die Grundlagen der Modellierung und Animation verstehen. Wir werden uns jeden der Teile ansehen, aus denen sich eine Szene zusammensetzt und wie sie miteinander interagieren. Sobald wir diese Grundlagen verstanden haben, wird die Anwendung auf unsere Three.js Demo viel sinnvoller sein.

Das Mesh.

Das Skelett, das die Form der 3D-Objekte ausmacht, mit denen wir arbeiten werden, wird allgemein als Mesh bezeichnet, obwohl es auch als Wireframe oder Modell bezeichnet werden kann. Der typischerweise verwendete Gittertyp und der, den wir hier verwenden werden, ist das Polygonmodell.

(Zwei weitere Arten von Meshes werden zur Modellierung von 3D-Objekten verwendet. Die Kurvenmodellierung beinhaltet Einstellpunkte in der Szene, die durch Kurven verbunden sind, die das Modell formen. Beim Digital Sculpting wird eine Software verwendet, die tatsächliche Substanzen nachahmt. Zum Beispiel, anstatt mit Formen und Polygonen zu arbeiten, würde es sich eher wie eine Skulptur aus Ton anfühlen.)

Die Meshes aus denen ein polygonales Modell besteht, bestehen aus drei Teilen: Flächen, Kanten und Ecken. Die Flächen sind die einzelnen Polygone, die Sie beim Betrachten eines Meshes sehen und die dem Objekt seine Form und Struktur verleihen. Kanten verlaufen entlang der Außenseite der Flächen und sind die Verbindungen zwischen den Nodes. Ein Node ist der Punkt, an dem sich eine beliebige Anzahl dieser Kanten überschneiden. Wenn das Mesh richtig ausgeplant und gebaut ist, dann befindet sich jeder Node sowohl am Schnittpunkt der Kanten als auch an den Ecken der angrenzenden Fläche.

Dies ermöglicht es, dass die Flächen und Kanten mit den Nodes zusammengeschoben werden und erklärt, warum das Verschieben von Nodes in einem vollständigen Modell die häufigste und effektivste Art der Skulptur ist. Jeder dieser Teile ist eine separate und wählbare Einheit mit unterschiedlichem Verhalten.

Die polygonale Modellierung ist für die Verwendung im Browser sinnvoller als andere Typen, nicht nur, weil sie viel beliebter ist, sondern auch, weil sie die geringste Zeit in Anspruch nimmt, die der Computer für das Rendern benötigt. Der Nachteil dieser gespeicherten Geschwindigkeit ist, dass Polygone planbar sind und nicht gebogen werden können. Aus diesem Grund sieht ein Roh-3D-Modell „blockig“ aus.

Um dieses Problem zu beheben, haben Programme wie Blender, Maya und 3ds Max ein Glättungsprogramm, das vor dem Export verwendet wird und dem Modell viele kleine Polygone hinzufügt. Das Hinzufügen dieser Polygone entlang einer Kurve erzeugt viele kleine Winkel, bei denen sich ein zuvor scharfer Winkel von zwei großen Polygonen traf, was die Illusion von Glätte vermittelt.

Bei der Verwendung von Meshes ist es möglich, verschiedene Materialien zu verwenden, um unterschiedliche Verhaltensweisen und Interaktionen zu erzielen. Ein grundlegendes Mesh und Material wird als flache Polygone dargestellt, die das Modell in flacher Farbe darstellen. Die Verwendung eines Lambertmaterials verhindert, dass Licht von der Oberfläche reflektiert wird und gilt allgemein als nicht glänzend. Viele Prototypen werden aus Lambertmaterialien hergestellt, um sich auf die Struktur und nicht auf die Ästhetik zu konzentrieren. Phong-Materialien sind das Gegenteil, statt glänzende Oberflächen zu erzeugen. Diese können in Kombination mit der richtigen Verwendung von Licht einige wirklich fantastische Effekte zeigen.

Zusätzlich zu den Meshmaterialien können Materialien für Sprites, Partikel und Shader gleichermaßen eingesetzt werden.

(Ein polygonales Modell wird als „facettiert“ bezeichnet, da es aus polygonalen Flächen besteht, die die Form der Struktur definieren.)

Kameras.

Damit diese Meshes gerendert werden können, müssen Kameras platziert werden, die dem Renderer mitteilen, wie sie zu betrachten sind. Three.js hat zwei Arten von Kameras, orthografische und perspektivische. Orthografische Projektionen eliminieren die Perspektive und zeigen alle Objekte auf der gleichen Skala an, unabhängig davon, wie weit sie von der Kamera entfernt sind. Dies ist für das Engineering nützlich, da unterschiedliche Größen aufgrund der Perspektive die Unterscheidung der Objektgröße erschweren können. Für die Montage von Möbeln oder Modellautos würden Sie orthographische Projektionen in alle Richtungen erkennen. Die perspektivische Kamera enthält Eigenschaften für ihre Position in Bezug auf die Szene und kann, wie der Name schon andeutet, die Größe des Modells basierend auf dem Abstand der Eigenschaften zur Kamera darstellen.

Die Kameras steuern das Sichtfeld oder den sichtbaren Bereich der Szene. Der Blickfang kann als eine Box dargestellt werden, die durch ihre Nah- und Ferneigenschaften sowie durch das „Seitenverhältnis“, das die Abmessungen der Box definiert. Jedes Objekt, das außerhalb des Betrachtungsraumes existiert, wird nicht in der Szene gezeichnet – sondern gerendert.

Wie erwartet, können solche Objekte unnötig Systemressourcen beanspruchen und müssen ausgemerzt werden. Beim Culling werden die Objekte, die sich außerhalb der Ebene des Sturzes befinden, mit einem Algorithmus gefunden und aus der Szene entfernt, sowie Datenstrukturen wie ein Octree zur Leistungssteigerung verwendet.

Belichtung.

Da eine Kamera die Art und Weise erfasst, wie das Objekt gerendert wird, müssen Lichtquellen so platziert werden, dass das Objekt sichtbar ist und sich die Materialien wie erwartet verhalten. Licht wird von 3D-Künstlern in vielerlei Hinsicht genutzt, aber aus Gründen der Effizienz werden wir uns auf die in Three.js verfügbaren konzentrieren. Zum Glück bietet diese Bibliothek viele Möglichkeiten für Lichtquellen.

• Point. Möglicherweise die am häufigsten verwendete, funktioniert das Point Light ähnlich wie eine Glühbirne und wirkt auf alle Objekte gleichermaßen, solange sie sich innerhalb des vordefinierten Bereichs befinden. Diese können das von einer Deckenleuchte abgegebene Licht nachahmen.
• Spot. Das Spot Light ähnelt dem Punktlicht, ist aber fokussiert und beleuchtet nur die Objekte innerhalb seines Lichtkegels und seiner Reichweite. Da es nicht alles gleich beleuchtet wie das Punktlicht, werfen Objekte einen Schatten und haben eine „dunkle“ Seite.
• Umgebung. Dadurch wird eine Lichtquelle hinzugefügt, die alle Objekte in der Szene gleichermaßen beeinflusst. Umgebungslichter, wie Sonnenlicht, werden als allgemeine Lichtquelle verwendet. Dadurch können Objekte im Schatten sichtbar gemacht werden, denn alles, was vor direkten Strahlen verborgen ist, wäre sonst völlig dunkel. Aufgrund der allgemeinen Natur des Umgebungslichts ändert die Quellenposition nicht, wie sich das Licht auf die Szene auswirkt.
• Hemisphäre. Diese Lichtquelle funktioniert ähnlich wie eine Pool-Tischleuchte, indem sie direkt über der Szene positioniert ist und sich das Licht nur von diesem Punkt aus verteilt.
• Richtungsweisend. Das gerichtete Licht ist auch dem Point- und Spot Light sehr ähnlich, da es alles in seinem Kegel beeinflusst. Der große Unterschied besteht darin, dass das gerichtete Licht keine Reichweite hat. Es kann weit von den Objekten enfernt platziert werden, da das Licht unendlich lange anhält.
• Bereich. Das Flächenlicht, das direkt von einem Objekt in der Szene mit bestimmten Eigenschaften ausgeht, ist äußerst nützlich für die Nachahmung von Vorrichtungen wie überhängendem Leuchtstofflicht und LCD-Hintergrundbeleuchtung. Wenn Sie eine Flächenleuchte bilden, müssen Sie ihre Form (in der Regel rechteckig und kreisförmig) und Abmessungen angeben, um den Bereich zu bestimmen, den das Licht abdecken wird.

Um die Vorteile von Flächenlichtern in Three.js zu nutzen, müssen Sie den Deferred Renderer verwenden. Dieser Renderer ermöglicht es der Szene, mit Hilfe von Deferred Shading zu rendern, einer Technik, die die Szene in zwei statt in einem Teil darstellt. Im ersten Durchlauf werden die Objekte selbst gerendert, einschließlich ihrer Positionen, Meshes und Materialien. Der zweite Durchgang berechnet die Beleuchtung und Beschattung aller Objekte und fügt sie der Szene hinzu.

Da die Objekte bei dieser Berechnung vollständig in der Szene gebildet werden, können sie die Gesamtheit der benachbarten Objekte und Lichtquellen berücksichtigen. Das bedeutet, dass diese Berechnungen nur einmal durchgeführt werden müssen, jedes Mal, wenn die Szene rendert und nicht einmal pro gerendertem Objekt.

Wenn Sie beispielsweise fünf Objekte und Lichtquellen in der Szene mit einem üblichen Renderer rendern, rendert es das erste Objekt, berechnet dann Beleuchtung und Schattierung, rendert dann das zweite Objekt und berechnet die Beleuchtung und Schattierung neu, um beide Objekte aufzunehmen. Dies gilt für alle fünf Objekte und Lichtquellen. Wenn der verzögerte Renderer verwendet wird, werden alle fünf Objekte gerendert und dann werden die Lichtquellen und Schattierungen berechnet und hinzugefügt. Das ist alles.

Wie Sie sehen können, kann dies bei der Verwendung vieler Lichtquellen und Objekte einen enormen Vorteil bei den Rendering-Zeiten haben. Mehrere Nachteile würden Sie davon abhalten, den verzögerten Renderer zu verwenden, es sei denn, er ist erforderlich, einschließlich Probleme bei der Verwendung mehrerer Materialien sowie die Unfähigkeit, Anti-Aliasing nach dem Hinzufügen der Beleuchtung zu verwenden.

Zum Mesh hinzufügen.

Da das Mesh durch das gewählte Material abgedeckt und in einer Ansicht mit Beleuchtung gerendert wird, können ästhetische Anwendungen bis zur Oberseite des Meshes erfolgen. Mit Hilfe von Texturen können Sie Bitmaps in Teile des Objekts einfügen, um es zu veranschaulichen. Dies ist eine äußerst funktionelle Art, die Modelle zum Leben zu erwecken und solange die Struktur mit Sorgfalt erstellt wird, kann sie auf den Meshes makellos aussehen. Shader können auch mit einem speziellen Material aufgetragen werden, das das Objekt unabhängig von der Beleuchtung gezielt abschirmt.

Three.js

Nachdem wir nun die Grundlagen der 3D-Entwicklung mit polygonalen Meshes verstanden haben, können wir sie in der Three.js Bibliothek anwenden. Der wohl größte Teil der Three.js Library ist die Fähigkeit, fantastische Szenen rein aus Experimenten zu erstellen. In diesem Sinne werden wir eine einfache Demo eines rollenden Berges entwickeln, um einige der Grundlagen, die wir gelernt haben und die verschiedenen Implementierungen, die wir vornehmen können, zu präsentieren, mit der Erwartung, dass Sie es von dort aus übernehmen können.

Start des Projekts.

Zuerst sollten Sie ihr HTML und ihr Canvas einrichten und die Bibliothek in ihr Dokument aufnehmen.

Zwei weitere JavaScript-Bibliotheken, dies es wert sind, untersucht zu werden, aber für diese Demo nicht benötigt werden sind im obigen Code Snippet auskommentiert.

Detector.js ist in den Three.js-Beispielen enthalten und erkennen, ob WebGL unterstützt wird. Es funktioniert ähnlich wie die Modernizr-Bibliothek in der Implementierung.

Stats.js ist ein JavaScript-Leistungsmonitor, der vom demselben Mr. Doob erstellt wurde, der auch die Three.js-Bibliothek erstellt hat, es fügt ein kleines Kästchen hinzu, das sowohl Bilder pro Sekunde als auch die Zeit für das Rendern eines Bildes anzeigt. Dies kann bei der Entwicklung sehr hilfreich sein, da 3D-Animationen die Systemressourcen extrem belasten können. Die Überwachung dieser Box informiert Sie in Echtzeit darüber, welche Modelle oder Aktionen zu niedrigen Bildraten in ihrer Szene führen.

Wenn wir mit der Einrichtung der Szene beginnen, beachten Sie, wie viel Arbeit die API für uns leistet. Die meisten unserer Arbeiten beinhalten am Anfang nicht mehr als die Einrichtung der Konstruktoren und Properties. Wir werden die Bibliothek nutzen, um die Szene so auszurichten, wie sie in einer 3D-Software eingerichtet wäre:

1. Erstellen Sie den Renderer.
2. Leiten Sie die Szene ein.
3. Erstellen und positionieren Sie die Kameras.
4. Richten Sie das Mesh ein, indem Sie ein neues Material und eine neue Geometrie kombinieren.
5. Erstellen und positionieren Sie die Lichtquelle.
6. Schreiben Sie eine Funktion, die die Szene in jedem Frame wiedergibt.

Hinzufügen von Three.js-Objekten.

Bevor wir die Szene einrichten, müssen wir einen Renderer deklarieren, seine Größe festlegen und ihn an das Fenster anhängen, damit wir sehen können, woran wir gerade arbeiten.

Wenn Sie sich entschieden haben, die erwähnte Detector.js einzubinden, können Sie stattdessen die folgende Zeile verwenden, um nach WebGL-Unterstützung zu suchen und eine Verschlechterung des Canvas-Renderers einzubinden, falls dies nicht der Fall ist.

Da der Renderer enthalten ist, lassen Sie uns die Szene starten:

Anschließend die Kamera:

Beachten Sie, dass jede Kamera einen separaten Konstruktor verwendet. Da wir beabsichtigen, die Szene dreidimensional zu betrachten, verwenden wir die perspektivische Kamera. Die erste der Eigenschaften ist das Sichtfeld in Grad, so dass unsere Ansicht in einem Winkel von 45° erfolgen würde. Das Seitenverhältnis ist das nächste und wird als Breite / Höhe geschrieben. Dies könnte hier natürlich als 1 geschrieben werden, da unsere Szene zu unserer 600 x 600 Pixel-Leinwand passen wird. Für eine 1200 x 800 Pixel-Szene wird sie als 1200/ der 12/ geschrieben und wenn Sie möchten, dass der Aspekt ständig zum Fenster passt, können Sie auch window.innerWidth / windows.innerHeight schreiben. Die nahen und fernen Eigenschaften sein die dritten und die vierten, die dem zu gießenden Gebiet nah und fern Grenzen setzen.

Für die Platzierung der Kamera muss nur die z-Position eingestellt werden.

Wir müssen nun ein Mesh erstellen, um es in der Szene zu platzieren. Three.js erübrigt die Notwendigkeit, grundlegende Meshes selbst zu erstellen, indem die Erstellung dieser Meshes in die API aufgenommen wird, indem Geometrie und Material kombiniert werden. Die einzige Eigenschaft, die wir angeben müssen, ist der Radius der Geometrie.

Obwohl es Standardeinstellungen hat, ist es auch üblich, die Breite und Höhe der Segmente anzugeben. Das Hinzufügen von Segmenten erhöht die Glätte des Meshes, verringert aber auch die Leistung. Da es sich hierbei nur um einen Stein handelt, sind wir nicht allzu besorgt über die Glätte, also werden wir eine geringe Anzahl von Segmenten einstellen. Die Segmenteigenschaften sind die nächsten beiden nach dem Radius, also fügen Sie sie auf die gleiche Weise hinzu.

Um ein Mesh aus dieser neuen Geometrie zu erstellen, müssen wir noch ein Material hinzufügen. Da wir wollen, dass dieser Stein wirklich das Licht unserer perspektivischen Kamera zeigt, fügen wir das glänzende Phong-Rendering hinzu. Das Hinzufügen dieses Materials ist so einfach wie der Aufruf und die Einstellung der Farbeigenschaft. Beachten Sie, dass die Hexadezimalfarbe das Präfix 0x erfordert, was bedeutet, dass es sich um einen Hex-Wert handelt.

In Three.js wird das eigentliche Mesh durch die Kombination von Geometrie und Material erzeugt. Dazu müssen wir nur den Mesh-Konstruktor aufrufen und sowohl die Geometrie- als auch die Materialvariablen als Argumente hinzufügen.

Da das Mesh deklariert ist, können wir es der Szene hinzufügen.

Das Mesh benötigt noch eine Lichtquelle, um richtig betrachtet zu werden. Lassen Sie und ein weißes Licht erzeugen, so wie wir das Mesh initiiert haben. Anschließend spezifizieren wir genau, wo das Licht genau platziert werden soll und fügen es der Szene hinzu, so wie wir das Mesh hinzugefügt haben.

Die Positionen können auf eine von zwei Arten geschrieben werden, je nachdem, was sie versuchen zu erreichen.

Rendern der Szene.

Wir haben alles, was wir für eine Grundszene brauchen, also bleibt nur noch, dem Renderer mitzuteilen, dass er durch die Erstellung einer Renderschleife ausgeführt werden soll. Wir verwenden requestAnimationFrame(), um den Browser über die kommende Animation zu informieren und starten dann den Renderer mit der von uns erstellten Szene. Beachten Sie, dass requestAnimationFrame() nur bedingt unterstützt wird.

Wenn Sie dies in ihrem Browser öffnen, sehen Sie den Ball in der Mitte des Canvas, wobei das Licht von ihm reflektiert wird. Spielen Sie an dieser Stelle mit den Eigenschaften herum, um eine bessere Vorstellung davon zu bekommen, wie kleine Änderungen die Szene beeinflussen.

Da die Szene nun gerendert ist, können wir eine einfache Animation als Ausgangspunkt hinzufügen. Die Renderschleife feuert bereits jedes Animationsframe ab, so dass wir nur noch die Geschwindigkeiten einstellen müssen und anschließend können wir uns die Animation sofort ansehen.

Dem Benutzer die Kontrolle geben.

Wenn Sie an Three.js für die Spieleerstellung interessiert sind, dann möchten Sie, dass der Benutzer mit den Modellen auf dem Bildschirm interagieren kann. Ordnen Sie die Befehle wie sphere.position.x + =1 Zeichenschlüsselcodes zu, die dem Benutzer die Kontrolle geben (in diesem Fall mit den Tasten W, A, S und D zum Bewegen). Eine einfache Switch-Anweisung ordnet die Tastencodes den Positionsänderungen zu. Wenn Sie Positionsänderungen mit der entgegengesetzten Rotationsänderung kombinieren, scheint die Kugel zu rollen (z.B. Position.y +=3 mit Position.x =0.2).

Wenn Sie auch die Bibliothek Stats.js einbinden möchten, fügen Sie sie mit dem folgenden Ausschnitt zu ihrem Dokument hinzu:

Um auf die Demo zurückzukommen, sollten Sie einen Stein haben, der in Richtung des Tastendrucks rollt, zusammen mit Statistiken, die in der Ecke laufen.

Schlussfolgerungen.

Dieser Artikel kratzt kaum an der Oberfläche der Three.js-Bibliothek, wie Sie beim Durchlesen der Dokumentation sehen können. Sobald Sie mit der API vertraut sind, kann das Experimentieren mit Partikeln, Mapping und komplexeren Meshes zu unglaublichen Ergebnissen führen.

Wenn Sie besser verstehen möchten, wie man in 3D arbeitet, aber keinen Zugang zu Maya oder 3ds Max haben, ist Blender kostenlos erhältlich. Wenn Sie lieber im Browser arbeiten möchten, können Sie Sandbox-Apps in Three.js nutzen. Ein Editor befindet sich auf der Three.js-Homepage. Eine Alternative ist ein auf der Homepage ThreeFab vorgestelltes Projekt, das sich derzeit in der Alpha-Phase befindet.

Three.js ist eine Goldmine zur Erstellung schöner und komplexer Webexperimente. Die extrem einfache Demonstration, die hier erklärt wird, zu nehmen und sie in ein atemberaubendes Experiment zu verwandeln, erfordert lediglich Experimente und die Bereitschaft, neue Dinge auszuprobieren. Es geht nicht viel besser, als mit dieser Bibliothek und WebGL zu arbeiten, um derartige Objekte zu erstellen.