Foto zu 3D-Objekt Teil 3: 3D-Objekte im Browser

Nach längerer Pause nun zum finalen Teil des 3D-Tutorials.
In Teil 1 ging es um die Erstellung dder nötigen Fotos und der .obj atei mit Textur, die wir für alle weiteren Schritte benötigen.
Teil 2 zeigt, wie das Objekt in Blender positioniert, als .stl exportiert und dann mit U3D-2-PDF in ein PDF ohne Texturen umgewandelt wird.
Teil 3 wird nun zeigen, wie das Objekt direkt im Browser angezeigt werden kann.

Vorbereitung und ein kleiner Wermutstropfen

3D-Objekte im Browser benutzen WebGL, das leider kein Standard ist.
Der Internet Explorer (sei verflucht, Internet Explorer!) hat seiner Natur gemäß überhaupt keine Unterstützung für WebGL, andere Browser haben die Möglichkeit, WebGL darszustellen, aber bei Ihnen ist es per default ausgeschaltet.Firefox-Einstellungen
Hintergrund hierfür ist, dass rein theoretisch die Grafikkarte des Benutzers überlastet werden könnte, wenn zuviele Berechnungen an sie weitergegeben werden würden.
Das fuchsige an WebGL ist nämlich, das die Rechenarbeit auf dem Rechner des Nutzers und nicht auf dem Server geleistet wird.
Nach allem, was ich herausgefunden habe, könnte dies maximal zum Systemabsturz führen, was wir ja alle aus der guten alten Zeit kennen.

Wie auch immer:
Firefox kann WebGL darstellen, wenn man ihm das befiehlt.
Dafür muss man lediglich in der Adresszeile „about:config“ eingeben, bei der Warnung bestätigen, dass man vorsichtig sein wird, wenn man in den Eingeweiden des Feuerfuchses herumwühlt und dann ungefähr 100m nach unten scrollen, bis man auf den Eintrag „webgl.force-enabled“ stößt.
Der steht auf „false“ und ein Doppelklick ändert das in „true“.
so einfach geht das!

ALso bitte mal kurz machen, sonst hat dieses Tutorial keinen großen Sinn.
Wer keinen Firefox hat möge ihn sich endlich installieren, statt die bösen bösen anderen Browser zu benutzen.

Der Beispielhase

Ich habe den Hasen jetzt nicht in diese Seite direkt eingebundenHaselink – was ginge, aber ich wollte nicht für ganz psychoborg.org eine javascript-Datei laden lassen, die ich nur hier brauche – daher gibt’s den Hasen auf einer schmucklos weissen Seite.
Bitte nicht wundern:
Das Laden dauert eine kleine Ewigkeit (bei mir 20 Sekunden, bis der Hase da ist und 40 Sekunden bis dann auch die Texturen geladen wurden).
Danach einfach den Browser auf Vollbild schalten (F11) und schon kann nach belieben gedreht (linke Mautaste) und gezoomt werden (Mausrad/rechte Maustaste).

soooo, Howdunnit?

Hase ausrichten


Zunächst einmal muss das Objekt aus Blender als .x3d exportiert werden.
Diesmal muss das Objekt allerdings etwas anders ausgerichtet werden als bei der PDF-Fassung, nämlich mit dem Mittelpunkt auf der Kreuzung aller Achsen und mit dem Gesicht dem grünen Pfeil folgend.

exportieren


Dann markiere ich den Hasen mit der rechten Maustaste, gehe auf file->export->X3D Extesible 3D, suche mir einen auffindbaren Speicherort, gebe einen passenden Namen, wie z.B. „Hase“ an und schwupps – hase.x3d ist am rechten Platz.
Einfach soweit, gelle?
Wichtig!
„Apply Modifyiers“ abschalten, sonst wird das Stndard-Licht aus Blender mitexportiert (und so schön ist das nicht).
Ohne die Lampe bekommt man genau das, was man fotografiert hat.
Zusätzlich sollte „selection only“ angetickt sein, weil wir ja auch nur den Hasen wwollen.

jetzt geht es online weiter


Um nun den Hasen samt seinem zeitlos designten Pulli in webtaugliche Form zu bringen gibt eis ein schickes kleines Tool auf der Seite von Instantreality.org.
Wer keine Lust hat zu suchen, hier der direkte Link:
X3D Encoding Converter
Sehr (!) übersichtliche Bedienoberfläche.

Hier müssen zwei Dinge eingestellt werden.
1. input encoding muss auf „XML encoding (X3D)“ gesetzt werden, damit unser Hase eingelesen werden kann und
2. output encoding auf „HTML5“ oder „XHTML5“ gestellt werden, damit wir das bekommen, was wir wollen, nämlich eine kleine einzelne Webseite.

von offline zu online


Jetzt muss die Datei hase.x3d mit dem Editor geöffnet werden und der gesamte Inhalt kopiert (Strg+a, Strg+c) un dann in das „paste input code“-Kästchen auf der Webseite eingefügt werden (Strg+v).
Nicht wundern, das dauert ein bißchen.
Auch wenn es „nur“ Text ist, es ist Text im Wert von rund 11 MB im Falle des Hasen.

Jetzt auf „convert encoding“ klicken und… warten.
Rumsurfen macht in der Zeit wenig Spaß, also einfach mal Pipi machen gehen, Kaffee aufsetzen, Fische füttern o.ä., was einem so 2/3 bis 5 Minuten die Zeit vertreiben kann.
Es kann passieren, das Firefox dann kurzzeitig „keine Rückmeldung“ anzeigt, aber das gibt sich von alleine.

und wieder von online zu offline!


Wenn der Output dann da ist, muss er nur in eine leere Textdatei rüberkopiert werden.
WICHTIG!
Den Code von Hand markieren und zwar so, dass die Zeilen-Zahlen nicht mitmarkiert sind.
Also markieren, kopieren (Strg+c) und in ein neu angelegtes .html-dokument einfügen.
(Einfach den Editor öffnen, Strg+v drücken und bei „Speichern unter…“ „hase.html“ eingeben.
Fertig!

kleine Anpassungen


Unsere HTML-Datei zeigt das Häschen recht klein mit 400×400 Pixeln und vor sehr dunkelgrauem Hintergrund.
Hier sind die Codeschnipsel, die man abändern muss, um etwas Kontrolle zu bekommen.
(Wer mit dem ganzen so zufrieden ist kann es natürlich so lassen)
Für die Größe empfehle ich 800×800 Pixel, weil es in jeden Browser passt.
Wenn man die kompletten Farbangaben ersetzt durch DEF=’SingleColorBackground‘ transparency=’1.0′ kann man einen transparenten Hintergrund einsetzen und (ich will jetzt kein HTML-tutorial anfangen) da dann die Farbe nach gusto über den BODY-Tag steuern.

So, ich hoffe, der eine oder andere mag das nachbasteln und schickt mir einen Link mit seinen Ergebnissen.

Schreibe einen Kommentar

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