Home > WebGL

WebGL Demos

WebGL hat sich recht schnell als 'neuer 3D Standard im Web' etabliert.

Um den jeweiligen Entwicklungsstand verschiedener APIs zu verdeutlichen, werden hier aktuelle Beispiele vorgestellt.

Die Beispiele spiegeln zum einen meine Umgebung wider

(hier finden sich einige der Vorlagen im Bild),

und sind zum anderen durch fiktive Medien ergänzt.

Meine 'Sintflut' Szene im Seitenkopf wird momentan abwechselnd mit den APIs 'x3dom' und 'three' weiterentwickelt. Gemeinsame Schnittmenge ist dabei mein Wasser Shader.

Die Links zu den Vollbildschirm Szenen finden Sie weiter unten - damit ist dann der Menüinhalt über Browserskalierung voll verfügbar !

__________________________________________________

Neu (Feb 12)

Eine auf Stereoskopie (anaglyph) optimierte Szene ist hier zu finden.

__________________________________________________

Update (Jan 12)

Endlich die Unterwasserumgebung etwas besser angepasst
- in Abhängigkeit von der Kameraposition:

1. den Normalenvektor im Vertex Shader invertieren
2. im Unterwasserbereich Zusatzebenen ausblenden
3. blauen Nebel zu/abschalten

was nun das Gesamtverhalten etwas 'plausibler' erscheinen lässt.

__________________________________________________

Update (Dez 11)

Austauschbare Umgebungen (cubemaps) über die Menüpunkte INSIDE/OUT und CHANGE ENVIRONMENT, Bones-Animation von Hund 'Pau', Blendenfleck Simulation und verbesserte Maussteuerung.

___________________________________________________

Update (Nov 11)

Animation in WebGL über ColladaLoader.
Nach einigen Anlaufschwierigkeiten kann nun eine Bones Animation importiert und gerendert werden. Die Szene zeigt meine Konzeptstudie 'Koi schwimmt' (zu erreichen über den Link weiter unten).

___________________________________________________

Update (Juli 11)

Es besteht nun die Möglichkeit den Shader bzw Materialien 'on the fly' zu wechseln.
Weitreichende Parametrisierung (über jquery Regler) zeigt den Einfluss auf die Kenngrößen des Shadercodes.
Für Programmierer: In Verbindung mit dem Quelltext hilft das sicherlich bei der Entwicklung eigener Wassershader (bei Weiterbenutzung -> schön wäre ein Hinweis auf meine Seiten).

Übrigens - wem die Quelltexte nicht genügen kann mir auch Fragen in Form eines Kommentars auf meinem Blog hinterlassen.

Zu der aktuell etwas ausgedehnten Ladezeit der Seite - einige meiner 3D-Modelle werden initial geladen, sind allerdings erstmal unsichtbar - sie lassen sich innerhalb des Menüs ein/ausschalten.

______________________________________________

x3dom lehnt sich an X3D (VRML) an und liefert mit einem stark abstrahierenden Szenengraph eine leicht zu benutzende Schnittstelle.
Somit ermöglicht x3dom auch dem 'unerfahrenen' Webmaster recht schnell zu Ergebnissen zu kommen.

https://github.com/mrdoob/three.js

three stellt ebenfalls Mechanismen zum Aufbau eines Scenegraph zur Verfügung, lässt aber auch 'tiefergreifende' Mechanismen zu.
Hier lag in letzter Zeit der Schwerpunkt meiner Experimente mit wesentlicher Betonung in der Entwicklung von neuen Materialien, seien es Texturen oder auch Procedurals in Form von Shadern für die Wasseroberflächen.
Hierzu gibt es bisher zu GLSL keine nennenswerten Hilfsmittel im Kontext von WebGL.
Mein Ziel ist es dabei Darstellungen zu erzielen, die sowohl realistisch aber auch bewusst 'künstlich' im Sinne von 'so könnte man es auch sehen' wirken.
Shader Programmierung ist mühselig - bescheidenes Debugging, teils hardwareabhängig, stark mathelastig - die Fortschritte dementsprechend schleppend - überzeugen Sie sich -

3D Inhalte ohne Browser Plugin mit

WebGL

Die Sintflut Szene in der Vollbildversion abrufen

Eine weitere Szene mit Bones Animation des Koi-Avatars ist

hier in der Vollbildversion abzurufen


Sitemap | Impressum | Datenschutzerklaerung | Kontakt | ©2011 koi.web