3D – Darstellungen im Webbrowser

Blender Schlagwörter: 0 Kommentare

VRML: Cosmo Player 2.0 fertig lautet am 22.12.1997 die Schlagzeile bei Heise. Wenige Monate später wurde der Webbrowser Netscape Navigator der mit einem VRML-PlugIn (CosmoPlayer) ausgeliefert. Im Browserkrieg wurde die Integration von Java im Browser eingestellt und Netscape gab auf und stellte den Quellcode des Navigator unter Open Source. Damit gab es praktisch keine standardisierten Möglichkeiten mehr im Browser VRML Welten darzustellen.

Am Montag habe ich euch meine Skulptur: Liegende Figur 2015 in einer 3D Animation bereits gezeigt.

 

And now, what you buy is what you see!

Der verwendete 3D-Viewer bietet eine extrem realistische Visualisierung meiner Skulptur. Der 3D-Viewer ist mit allen Standardtechnologien kompatibel: Java, Flash und JavaScript, je nach Konfiguration deines Computers. Außerdem lässt sich der 3D-Viewer ebenso einfach wie ein YouTube-Video in Deinen Blog oder Deiner Webseite integrieren. Wenn ihr noch mehr erfahren möchtet, besucht meinen Entwurf bei Sculpteo.

Mit WebGL und dem API x3dom sind nun wieder standardisierte 3D-Modelle im Browser möglich. Und das Ganze funktioniert sogar ohne PlugIn in aktuellen Browsern.

WebGL

WebGL steht für Web Graphics Library (englisch für Web-Grafik-Bibliothek) und ist ein Bestandteil von Webbrowsern, mit dessen Hilfe hardwarebeschleunigte 3D-Grafiken direkt im Browser – ohne zusätzliche Erweiterungen – dargestellt werden können.

WebGL ist eine 3D-Grafik-Programmierschnittstelle für Webbrowser, auf der Basis von OpenGL ES (Version 2.0) im Zusammenspiel mit der Programmiersprache JavaScript, die von der Khronos Group und Mozilla als lizenzfreier Standard entwickelt wird. Die Arbeiten an dem Projekt wurden im April 2009 begonnen. Im Mai 2010 wurde bekannt gegeben, dass die Firma Google den Standard ebenfalls unterstützen wird.

Erste Implementierungen von WebGL wurden in den Rendering-Engines WebKit und Gecko realisiert. Zudem haben sich bereits seit August 2009 die IT-Unternehmen AMD, Ericsson, Nvidia und Opera an der Entwicklung des Projektes beteiligt.

Am 3. März 2011 wurde die erste Version der WebGL-Spezifikation auf der Game Developers Conference in San Francisco freigegeben. Im März 2011 wurde WebGL von Googles Webbrowser Chrome und Mozillas Firefox unterstützt und ansonsten in Browser-Vorabversionen von Safari und Opera standardmäßig aktiviert.

WebGL Ressourcen

WebGL Spezifikation
Der Entwurf der WebGL Spezifikation.

Khronos WebGL Seite
Die Hauptseite für WebGL der Khronos Group.

Learning WebGL
Eine Reihe von Tutorials über WebGL (Englisch).

Das WebGL Kochbuch
Rezepte für das Schreiben von WebGL-Code (Englisch).

Sylvester
Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.

Planet WebGL
Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.

x3dom

Ist ein Wrapper, der X3d in WebGL übersetzt.

Sehr professionelle, effiziente und einfache Schnittstelle zwischen WebGL und X3D. Extensible 3D, kurz X3D, ist eine auf XML (XML-Encoding, Datei-Endung .x3d) basierende Beschreibungssprache für 3D-Modelle, die in einem Webbrowser angezeigt werden können. X3D wird durch das Web3D Consortium betreut und wurde im Jahre 2001 vom W3C-Konsortium als offizieller Standard für 3D-Inhalte im Internet verabschiedet. Es wurde als Nachfolger von VRML 2.0 eingeführt. Entwickelt wird x3Dom vom Fraunhofer IGD, Darmstadt.

Es müssen folgende Dateien im gleichen Ordner gespeichert sein:

x3dom.js
x3dom.css
x3dom.swf

Erster Versuch

Erster Versuch
https://blog.r23.de/3d/x3dom/02122015/moore.html

Navigationshilfe

3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen oder rechte Maustaste gedrückt halten und Maus bewegen
Verschieben: Strg-Taste und eine Maustaste gedrückt halten und die Maus bewegen

Die Oberfläche ist noch sehr dunkel. Die Skulptur dreht sich nicht. Je nach Navigation Mode verschwindet die Skulptur vom Monitor.

XML3D

Mit XML3D sollen sich künftig dreidimensionale Grafiken direkt in Webseiten einbetten und mit HTML beschreiben lassen. Dargestellt werden sie entweder als Raster oder per Echtzeit-Raytracing.

Für Blender gibt es eine Erweiterung.

https://github.com/ksons/xml3d-blender-exporter

Erster Versuch

erster Versuch

https://blog.r23.de/3d/xml3d/02122015/moore.html

Die Oberfläche ist noch sehr dunkel. Vergrößern/Verkleinern ist leider nicht möglich.

Three.js

Three.js ist eine umfangreiche JavaScript 3D API mit der man Szenen, Kameras, Objekte, Lichter, Materialien und mehr im Browser erstellen kann. Three.js verfolgt den Ansatz, die Komplexität auf ein verständliches Level zu reduzieren. Unternehmen und Entwickler interaktiver Websites setzen immer öfter auch auf die vielseitigen Möglichkeiten und Vorteile, die three.js bietet.

Für Blender gibt es eine Erweiterung
https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

blender_erweitern

Schreibe einen Kommentar

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

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.