Tutorial XML3D + Blender

Transkript

1 Tutorial XML3D + Blender Deutsch - Windows ab XP by SE V 0.1

2 Vorwort Diese kleine Tutorial entstand aus dem Problem das es aktuell noch kein Deutsches gibt. Ich versuche alles so zu erklären, das jeder ohne Vorkenntnisse in der Lage ist 3D Objekte auf Webseiten zu erstellen. Ein wenig XML bzw. HTML Kenntnisse sind jedoch von Vorteil beim Verstehen der Quellcodes. Diese Tutorial ist nicht als Blender Einsteiger Tutorial gedacht, sondern erwähnt nur hier und da ein paar Funktionen die für die Erstellung des ein oder anderen 3D Objektes notwendig sind. Da ich selbst noch in der Lernphase bin wird diese Tutorial Stück für Stück erweitert. Die Offizielle XML3D Webseite findet Ihr unter (Englisch).

3 Der Download Folgende Dinge müssen wir Herunterladen: Blender 2.49b (3D Software) Neuer wie V 2.49b von XML3D Blender exporter nicht unterstützt (laut Autor in Arbeit) Pyhton (benötigt Blender) Neuer wie V gibt mit Blender 2.49b Probleme XML3D Blender exporter (Plugin zum Export aus Blender) Browser (RTFox) sb.de/fileadmin/cguds/projects/xml3d/browser/rtfox/rtfox-win zip Der Browser wird derzeit noch benötigt, da die Aktuellen Browser XML3D noch nicht unterstützen.

4 Die Installation Python: 1. Starten Sie python msi 2. Lassen Sie die Eistellung bei Install for all Users und gehen sie weiter mit Next > 3. Wählen Sie Ihren Zielordner und merken Sie sich ihn, wir benötigen ihn noch. Weiter mit Next > 4. Behalten Sie alle Paketeile bei und gehen Sie weiter mit Next > 5. Python wird Installiert Beenden Sie die Installation mit Finish. 6. Gehen Sie auf den Windows Desktop, machen Sie einen Rechtsklick (Kontextmenü) auf dem Symbol des Arbeitsplatz und gehen Sie auf Eigenschaften 7. Jetzt auf die Registerkarte Erweitert und dort auf den Button Umgebungsvariablen 8. Nun gehen Sie bei den Systemvariablen (unten) auf Neu 9. Tragen Sie bei Name der Variable PYTHONPATH ein. 10. Bei Wert der Variable tragen Sie den Pfad zu Ihrer Pyhton Installation ein LAUFWERK:\ Python; LAUFWERK:\Python\DLLs; LAUFWERK: \Python\Lib; LAUFWERK:\Python\Lib\lib-tk (ersetzen Sie Laufwerk durch den Laufwerksbuchstaben und passen sie den Pfad ggf. an) 11. Stellen Sie alles Fertig indem Sie 3 mal auf OK klicken. Blender: 1. Starten Sie blender-2.49b-windows.exe und gehen Sie weiter mit Next > 2. Stimmen Sie den Lebensbedingungen zu (I Agree) und weiter mit Next > 3. Wählen Sie Ihren Zielordner und merken Sie sich ihn, wir benötigen ihn noch. Weiter mit Next > 4. Wählen Sie die mittlere Option Use the installation Directory und weiter mit Next >

5 XML3D exporter: 1. Entpacken Sie den XML3D exporter 2. Gehen Sie unter \org.xml3d.exporter.blender\src 3. Kopieren Sie xml3d.py und xml3d_exporter.py in nach \Blender\.blender\scripts\ Browser (RTFox): 1. Entpacken Sie RTfox-win zip 2. Passen Sie ggf. das Programm von xhtml Dateien unter Windows auf die RTFox Browser an ( [ ]\rtfox.exe %1 ) Fertig!

6 Unser erstes XML3D Dokument firstxml3d.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Die XML Grund Struktur <html xmlns=" <head> <title>unser erstes XML3D Dokument</title> </head> <body> <xml3d id="myxml3d" style="width: 150px; height: 100px; border: 1px solid gray" xmlns=" </xml3d> </body> </html> XML3D einbinden 150 Pixel breit 100 Pixel hoch 1px breiter Rahmen als Linie in grau Die XML Grund Struktur (Ende) Unser erstes XML3D Dokument macht an sich nicht sehr viel. Wir Zeichnen eine Rahmen von 150x100 und fertig. Nun ruft das Dokument im RTFox auf und werft einen Blick auf euer erstes XML3D Dokument. Diese Quellcode zum Kopieren & Einfügen findet ihr unter Quellcodes am Ende diese Tutorial. Auch alle weiteren Quellcodes sind dort zu finden.

7 Die dritte Dimension oder wie war das gleich mit X Y Z? In diesen zwei Bildern will ich kurz zum allgemeinen Verständnis noch mal den Aufbau der drei Dimensionen zeigen. Wir haben also wie im Bild rechts zu sehen eine Breite X, eine Länge Y und eine Tiefe Z. Was wir im Bild rechts auch noch sehen ist, der Punkt 0 von X, Y und Z liegt wenn wir es nicht anders Definieren genau in der Mitte unseres 3D Raumes. Im zweiten Bild (unten) zeige ich den Ausgangspunkt jedes 3D Objektes, ein Dreieck. Wollen wir ein Dreieck in unseren 3D Raum bringen reicht logischer weise ein Dreieck. Wollen wir ein Viereck setzen wir zwei Dreiecke zusammen. Soll es Kreis werden brauchen wir halt ein paar Dreiecke mehr, aber auch diesen würden wir mit reichlich aufwand per Hand zusammen bekommen. Der Aufbau in den folgenden Quelltext wird also immer X Y Z X Y Z X Y Z sein (ohne Komma, nur ein Leerzeichen dazwischen). Oder anders gesagt, wir müssen jeweils für die drei Eckpunkte unseres Dreiecks eine Breite, Höhe und Tiefe festlegen. Wie ich oben beim Kreis schon angedeutet habe ist das Programmieren eines Dreiecks bzw. Vierecks per Hand durchaus noch möglich. Bei einem Kreis wird jedoch schon so komplex das es sich empfiehlt zur reinen Objekt Gestaltung Blender zu nutzen. Doch dazu später mehr. X Y Z

8 Dreieck & Viereck dreieckviereck.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <title>unser erstes XML3D Dokument</title> </head> <body> <xml3d id="myxml3d" style="width: 300px; height: 300px; border: 1px solid gray" xmlns=" <mesh type="triangles"> <int name="index">0 1 2</int> <float3 name="position"> </float3> <float3 name="normal"> </float3> </mesh> <mesh type="triangles"> <int name="index"> </int> <float3 name="position"> </float3> <float3 name="normal"> Die XML Grund Struktur (Im folgenden Text taucht der Begriff Tag auf, gemeint sind damit die XML-Tags) Als erstes Definieren wir unser Objekt. Diese geschieht durch <mesh ></mesh>. Als erstes finden wir nun einen Tag der mit int beginnt. Diese Abkürzung steht für das Englische Wort Integer (dt. Ganzahl) und beschreibt den Aufbau der Werte. Zudem steht in diesem Tag name= index. So definieren wir aus welsche der im Tag position folgenden Wertepaare die Eckpunkt unseres Dreiecks bildet. Dabei fangen wir beim ersten Wertepaar mit 0 an zu Zählen. Der Tag Anfang float3 besagt, dass es sich um drei zusammen gehörige Gleitkommazahlen (float) handelt. Es gibt auch noch float2 (zweier Wertepaar) und float4 (vierer Wertepaar). Das zweite Objekt (mesh) beschreibt das Viereck welsches auf zwei Dreiecken besteht.

9 </float3> </mesh> </xml3d> </body> </html> Dabei sehen wir das wir das Wertepaar 1 und 2 doppelt nutzen, da hier unsere beiden Dreiecke zusammen kommen um das Viereck zu bilden. Die XML Grund Struktur (Ende) Beim Betrachten des Codes sollte uns zudem aufgefallen sein das Z -5 ist und nicht 0. Die Frage warum ist sehr schnell geklärt. Ihr Monitor ist Z = 0 und Sie Sitzen wohl etwa bei Z = 50. Ist Z also nicht kleiner 0 befinden wir uns im nicht sichtbaren Bereich.

10 Farbe im Spiel In diesem Beispiel greifen wir auf das vorhergehende Beispiel zurück und bringen etwas Farbe in Spiel. dreieckviereckfrabe.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > <html xmlns="  <head> <title>dreieck, Viereck mit Farbe</title> </head>  <body>  <xml3d id="myxml3d" style="width: 300px; height: 300px; border: 1px solid gray" xmlns="  <defs>  <shader id="sch_dreieck" script="urn:xml3d:shader:phong"> <float3 name="diffusecolor"> </float3 > <float name="ambientintensity">1.0</float>  </shader>  <shader id="sch_viereck" script="urn:xml3d:shader:phong"> <float3 name="diffusecolor"> </float3>  <float name="ambientintensity">0.7</float>  </shader> </defs>

11  <group style="shader: url(#sch_dreieck)">  <mesh type="triangles"> <int name="index">0 1 2</int> <float3 name="position"> </float3> <float3 name="normal"> </float3> </mesh> </group>  <group style="shader: url(#sch_viereck)">  <mesh type="triangles"> <int name="index"> </int> <float3 name="position"> </float3> <float3 name="normal"> </float3> </mesh> </group> </xml3d> </body> </html>

12 Quellcodes firstxml3d.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>unser erstes XML3D Dokument</title> </head> <body> <xml3d id="myxml3d" style="width: 150px; height: 100px; border: 1px solid gray" xmlns=" </xml3d> </body> </html>

13 dreieckviereck.xhtml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > <html xmlns=" <head> <title>dreieck, Viereck</title> </head> <body> <xml3d id="myxml3d" style="width: 300px; height: 300px; border: 1px solid gray" xmlns=" <mesh type="triangles"> <int name="index">0 1 2</int> <float3 name="position"> </float3> <float3 name="normal"> </float3> </mesh> <mesh type="triangles"> <int name="index"> </int> <float3 name="position"> </float3> <float3 name="normal"> </float3> </mesh> </xml3d> </body> </html>