WordPress Tutorial: Plugin-Entwicklung Cube-Mapping

Allgemein Schlagwörter: , , 0 Kommentare

Im zweiten Teil der Artikelserie »Plugin-Entwicklung für WordPress« habe ich euch den WordPress Plugin Generator vorgestellt. Nicht Entwickler können leider an der Informationsflut verzweifeln. Wenn du für deinen Blog oder für deine Kunden WordPress Plugins entwicklen möchtest – lohn sich die Beschäftigung mit Netbeans und dem WordPress Plugin Generator.

In unser Artikelserie zeigen wir euch die Plugin-Entwicklung für WordPress. In dieser Artikelserie bekommst du einen Einblick, wie wir unsere WordPress Plugins entwickeln. Wie wir arbeiten? Präzise, transparent, schnell und professionell!

Artikelserie zum Thema Plugin-Entwicklung für WordPress
Schritt 1 = Planung und Vorbereitung
Schritt 2 = WordPress Plugin Boilerplate Generator
Schritt 3 = Cube-Mapping

WordPress Plugin für – Objekte

Mit unserem Plugin möchten wir 3D – Objekte ohne weitere Dienstleister in unserem Blog darstellen. Veröffentlichungsformat für die 3D-Inhalte ist das ™ (GL Transmission Format). Im ersten Teil der Artikelserie »Plugin-Entwicklung« habe ich euch das 3-D Format vorgestellt.

Schneller, kompakter, realistischer – die glTF™ 2.0-Spezifikation vereinfacht auch das Physically Based Rendering (PBR) für Künstler. Die gITF 2.0-Spezifikation ist ein erweiterbares, Laufzeit-neutrales offenes Standardformat zur Übertragung von 3D-Modellen. Der Standard ermöglicht es Künstlern, 3D-Modelle bei schnellerer Ladezeit kompakt zu übertragen, und beinhaltet nun auch eine Spezifikation zur Definition von Materialien auf Basis physikalischer Eigenschaften.

Zur Zeit binden wir noch mit HTML iframe 3D Inhalte ein. HTML iframe fügt innerhalb von body ein Inline-Fenster in ein anderes Dokument ein. Der Browser rendert eine weitere HTML-Datei innerhalb der Webseite.

Anzeige:

Rendern von glTF 3D-Modellen

Navigationshilfe

3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen
Verschieben: Drücken der rechten Maustaste und bewegen der Maus

Quellcode:

HTML iframe zeigen beliebige Inhalte – Formulare, Bilder, Multimedia, Tabellen usw.. YouTube und Vimeo liefern ihre Videos in iframe aus.

Sehen wir uns die Quellcode der helm Datei in einem neuen Browserfenster an.
https://blog.r23.de/r23webvr/three.js-r90/examples/helm.txt

Der Hintergrund ist ein Cube-Mapping

Was ist Cube-Mapping?

Funktionsweise von kubischem Environment Mapping. Mit Hilfe der Vertexnormalen wird berechnet, auf welchen Punkt der Umgebungstextur die Sichtlinie weitergeleitet wird.

In der Computergrafik ist das Cube-Mapping eine Methode des Environment Mapping, bei der die sechs Flächen eines Würfels als Kartenform verwendet werden. Die Umgebung wird auf die Seiten eines Würfels projiziert und als sechs quadratische Texturen gespeichert oder in sechs Regionen einer einzigen Textur aufgefaltet. Die Würfelkarte wird erzeugt, indem man die Szene zunächst sechsmal von einem Standpunkt aus rendert, wobei die Ansichten durch eine 90-Grad-Ansicht definiert werden, die jedes Würfelgesicht repräsentiert.

In den meisten Fällen wird das Cube Mapping der älteren Methode des Sphere Mapping vorgezogen, da es viele der Probleme eliminiert, die mit dem Sphere Mapping verbunden sind, wie z.B. Bildverzerrungen, Viewpoint-Abhängigkeit und Ineffizienz bei der Berechnung. Außerdem bietet das Cube-Mapping eine viel größere Kapazität zur Unterstützung der Echtzeit-Rendering von Reflexionen im Vergleich zum Sphären-Mapping, da die Kombination von Ineffizienz und Viewpoint-Abhängigkeit die Fähigkeit des Sphären-Mapping stark einschränkt, wenn es einen sich ständig ändernden Standpunkt gibt.

Cube mapping

By Microwerx (Own work) [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons

Environment Mapping oder auch Reflection Mapping ist eine effiziente Methode, um in der Computergrafik spiegelnde Oberflächen zu simulieren und zu rendern. Dabei wird die Umgebung des spiegelnden Objekts als Textur gespeichert und auf die Oberfläche des Objekts abgebildet (mapping). Die am häufigsten gebrauchten Arten, um die umgebende Textur zu speichern, sind das sphärische und das kubische Environment Mapping.

Bei ersterem wird die Textur, die die Umgebung darstellt, auf das Innere einer Kugel abgebildet, während bei zweiterem die Umgebung auf die sechs Seiten eines Würfels „aufgefaltet“ wird. Der Vorteil von Environment Mapping gegenüber Raytracing ist die einfachere und damit schnellere Berechnung der simulierten Reflexionen. Der große Nachteil dieser Technik ist, dass die zu spiegelnde Umgebung bereits vor dem Rendern des Objekts bekannt sein muss und somit sich ändernde Umgebungen bzw. Selbstreflexionen nicht einfach umzusetzen sind.

Kubisches Environment Mapping
Funktionsweise von kubischem Environment Mapping. Mit Hilfe der Vertexnormalen wird berechnet, auf welchen Punkt der Umgebungstextur die Sichtlinie weitergeleitet wird.

Kubisches Environment Mapping funktioniert prinzipiell gleich wie das sphärische Environment Mapping, außer dass die Umgebung auf einen Würfel (analog einer Skybox) abgebildet wird. Dadurch, dass die Umgebung als gerade Flächen projiziert werden kann, entstehen keine Verzerrungen.

Der Hintergrund von dem 3D Inhalt liegt in dem Verzeichnis textures/cube/skyboxsun25deg/

Verzeichnis

CubeTextureLoader

Klasse zum Laden einer CubeTexture. Dieser verwendet den ImageLoader intern zum Laden von Dateien.
Beispiel

Konstrukteur

CubeTextureLoader( Manager)
manager – Der loadingManager für den zu verwendenden Loader. Standard ist THREE.DefaultLoadingManager.

Erstellt einen neuen CubeTextureLoader.

Eigenschaften

.crossOrigin
Wenn gesetzt, wird das crossOrigin-Attribut des Bildes dem Wert von crossOrigin vor dem Start des Ladevorgangs zugewiesen. Standard ist undefiniert.

.manager
Der loadManager, den der Loader verwendet. Standard ist DefaultLoadingManager.

.path
Der Basispfad, von dem aus Dateien geladen werden. Siehe .setPath. Standard ist undefiniert.

Methoden

.load („urls“,“onLoad“,“onProgress“,“onError“)
urls – Array von 6 URLs zu Bildern, eine für jede Seite der CubeTexture. Die URLs sollten in folgender Reihenfolge angegeben werden: pos-x, neg-x, pos-y, neg-y, neg-y, pos-z, neg-z, neg-z.
onLoad – Wird aufgerufen, wenn der Ladevorgang abgeschlossen ist. Das Argument ist die geladene Textur.
onProgress – Wird während des Ladevorgangs aufgerufen. Das Argument wird die XMLHttpRequest-Instanz sein, die .total und .loaded Bytes enthält.
onError – Wird bei Ladefehlern aufgerufen.

Eine Cubemap ist eine Sammlung von sechs quadratischen Texturen, die die Reflexionen einer Umgebung repräsentieren. Die sechs Quadrate bilden die Gesichter eines imaginären Würfels, der ein Objekt umgibt; jedes Gesicht repräsentiert den Blick entlang der Richtungen der Weltachsen (aufwärts, abwärts, links, rechts, vorwärts und rückwärts).

Cubemaps werden oft verwendet, um Reflexionen von Objekten einzufangen.

Beispiele
materials / cubemap
materials / cubemap / balls / reflection
materials / cubemap / balls / refraction
materials / cubemap / refraction

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 Durch das Anhaken der Checkbox erklärst Du Dich mit der Speicherung und Verabeitung Deiner Daten durch diese Webseite einverstanden. Um die Übersicht über Kommentare zu behalten und Missbrauch zu verhindern, speichert diese Webseite Name, E-Mail und Kommentar. Detaillierte Informationen findest Du in meiner Datenschutzerklärung

Aktuell