Das 3D-Modell als JSON Datei

In diesem Abschnitt wird erläutert wie eine JSON-Datei aufgebaut ist, wenn man ein 3D-Modell aus Blender exportiert. Es wird grob auf die Struktur eingegangen und auf die Zeilen und Werte, die man im Nachhinein noch anpassen kann.

Der Aufbau

Zunächst folgt ein Beispiel einer exportierten JSON Datei. Es handelt sich hierbei um das Tür-Modell, das im vorherigen Kapitel zu sehen war:

Das Tür-Modell im JSON Format. Die gelb markierten Zeilen wurden nach dem Export gelegentlich angepasst. Dazu gleich mehr.

Allgemeine Informationen

Die ersten beiden Felder im JSON beinhalten allgemeine Informationen über das Objekt. Im Feld "name" ist der Name des Objektes enthalten, der äquivalent zum Namen der in Blender vergeben wurde, ist. In "metadata" sind Informationen zum Exporter, sowie Anzahl von vertices, faces und materials vom Objekt angegeben.

Das Gerüst

Als nächstes Folgen die Felder "vertices", "uvs" und "faces". Wie im Kapitel vorher erwähnt, befinden sich im Feld "vertices" ein Array mit den Vertices des Objektes in Modellkoordinaten und in "uvs" die Texturkoordinaten. Das Array hinter "faces" beinhaltet, anders als man zunächst vielleicht annehmen würde, keine Koordinaten oder Indizes. Die Zahlen im Array sind als 8 Bit Code zu verstehen und liefern zusätzliche Informationen zu den Faces. Das erste Bit sagt zum Beispiel aus, ob es sich um eine drei- oder viereckige Fläche handelt. Die Bedeutungen der verschiedenen Bits sind nachfolgend aufgelistet. Siehe auch: three.js "JSON Model format 3" Dokumentation.

8 Bit Codierung

• 00 00 00 00 = TRIANGLE
• 00 00 00 01 = QUAD
• 00 00 00 10 = FACE_MATERIAL
• 00 00 01 00 = FACE_UV
• 00 00 10 00 = FACE_VERTEX_UV
• 00 01 00 00 = FACE_NORMAL
• 00 10 00 00 = FACE_VERTEX_NORMAL
• 01 00 00 00 = FACE_COLOR
• 10 00 00 00 = FACE_VERTEX_COLOR

Die Materials

Das Feld "materials" beinhaltet alle Informationen über die eingefärbten und texturierten Flächen des Objektes. Es sind Werte für Namen, Farbe, sowie Helligkeit des Modells abgelegt und boolesche Werte für Beispielsweise Sichtbarkeit und Transparenz.

Einige der Werte konnte man nach dem Export noch anpassen um Änderungen am Objekt vorzunehmen. Sie sind im JSON Beispiel oben gelb markiert. Auf diese wird jetzt genauer eingegangen.

Opacity

Hier konnte man mit niedrigeren Werten als 1, Materialien durchsichtig erscheinen lassen. Das bot sich wunderbar für Glasmaterialien an, wie z.B. den Glastüren im Erdgeschoss oder dem Pförtnerhaus.

links: opacity Wert von 0.5;

rechts: opacity Wert von 1

mapDiffuse

Dieser Wert wurde angepasst um das Projekt im späteren Verlauf übersichtlicher und strukturierter zu gestalten. In "mapDiffuse" ist der Pfad der Textur für das Material hinterlegt. Auf diese Weise konnte man extra Unterordner für die Bilddateien erstellen.

Shading

Im JSON Beispiel weiter oben ist "phong" als shading für beide Materials gewählt worden. Um die Performance zu steigern wurde dieser Wert am Ende des Projekts nochmal geändert, um simplere Shadings zu verwenden. Hier ein Beispiel, welche optischen Unterschiede die Änderung dieses Wertes mit sich trug.

Die verschiedenen shadings. Von links nach rechts: Basic, Lambert, Phong. Die Kugeln sind bis auf den Shadingart identisch.