Webdesign mit 2D und 3D-Animation(en) und Effekten

Neue HTML5 Funktionen erlauben auf geeigneten Geräten die Anzeige von interaktiven 3D-Animationen, Effekten und Visualisierungen direkt im Web Browser, HTML5-browserübergreifend und ohne Plug-In. Unsere open source Bibliothek taccgl® hilft bei der Erstellung von Animationen. Darüberhinaus bieten wir Support und die Erstellung von Animationen als Dienstleistung an.

Open Source Bibliothek taccgl®

taccgl® (gespr. wie englisch tackle, geschrieben mit GL) vereinfacht die Erstellung von 3D-Animationen und Effekten auf HTML5 Seiten, ermöglicht sehr schnelle 2D und 3D-Animationen und erlaubt es HTML Elemente in 3D-Szenen zu integrieren, mit korrekter Darstellung von verdeckten Objekten und Schatten.

Einfache Animationen lassen sich durch klassische Webdesigner mit wenigen Zeilen javaScript sowie HTML5 und CSS erstellen.

taccgl® animiert HTML Elemente, eventuell in verformter oder beschinttener Form, sowie mit externen Programmen erstellte 3D-Modelle. Alle Elemente werden zu einer 3D-Szene kombiniert und gemeinsam dargestellt, mit simulierter Beleuchtung, automatischer Behandlung verdeckter Flächen und Schatten. taccgl® ist eine HTML 5 Bibliothek und verwendet, soweit möglich, das HTML5 Canvas Element in seiner 3D- bzw. WebGL-Form. Als Fallback wird auch der 2D Canvas in eingeschränkter Form unterstützt.

3D-Objekte auf HTML Seiten

Der (englischsprachige) Artikel beschreibt und demonstriert, wie sich 3D-Objekte und HTML Text integrieren lassen, zum Artikel

Pop-Up Animationen mit weniger als 4 Zeilen Code

javaScript, für Pop-Up, alert und Dialog Boxen, für Tool-Tips, Status-Infos oder Menüs, weiter

WebGL™ is a trademark of the Khronos Group Inc.
taccgl® ist ein in Deutschland eingetragenes Warenzeichen

 

Bitte Teilen Sie taccgl® in den sozialen Netzwerken oder folgen Sie uns auf twitter

CSS Transition Visibility

CSS Transitionen der visibility Eigenschaft erlauben es nicht, wie man vielleicht erwartet hat, ein Element langsam ein- oder auszublenden. Der Artikel beschreibt verschiedene Alternativen mit anderen CSS und taccgl® Transitionen; zum Artikel.

CSS Transition Display

CSS erlaubt keine Transitionen für die display Eigenschaft. Allerdings gibt es Alternativen z.B. Transitionen von height oder margin-top/margin-bottom. Der Artikel beschreibt dies und zeigt Kombinationsmöglichkeiten mit taccgl® Transitionen auf; zum Artikel.

HTML5 Canvas Animation

Verformung und Morphing von HTML Elementen

Mit taccgl® lassen sich HTML Elemente verformt darstellen, wie dieses Beispiel zeigt. Andere Funktionen ermöglichen die Verformung in einen Kreis oder einen Umblättereffekt; zum Artikel.

Manche Animationen oder Computerspiele können epileptische Anfälle auslösen. Vor dem Abspielen einiger Beispiele wird daher eine entsprechende Warnmeldung angezeigt. Bei der Entwicklung und Veröffentlichung von Animationen und Spielen (egal mit welcher Technologie) ist daher Vorsicht angebracht. Wir verweisen auf die W3C guidelines.

Beta Version 0.60-150902 freigegeben

HTML5 Canvas 3D Animation

Beta Version 0.60-150902 steht zum Download bereit. Versionshinweise unter Version History.

Es handelt sich um eine Vorabversion im Beta-Test, die mit hoher Wahrscheinlichkeit noch Fehler und Auslassungen enthält. Bzgl. Einschränkungen siehe Restrictions und Compatibility. Derzeit ist zumdem die Dokumentation nur auf Englisch verfügbar.

Unter guten Voraussetzungen verwendet die Bibliothek direkt die Graphikhardware des Zielrechners und die performancekritischen Programmteile laufen direkt auf der GPU (graphic unit). Dies ermöglicht eine extreme Beschleunigung verglichen mit DOM und script basierten Animationen und erlaubt flüssige Animationen mit tausenden Elementen.

Falls die Hardwarebeschleunigung nicht verwendet werden kann arbeitet taccGL mit HTML 5 - 2D canvas, der auch schnelle Animationen auf schnellen Computern erlaubt.

Im Falle von langsameren GPUs oder Computern versucht taccGL Animationen zu beschleunigen, indem sie nur auf einem Teil des Bildschirms abgespielt werden. Im Extremfall werden die Animationen komplett abgeschaltet, um nicht die normale Funktion der Seite zu beeinträchtigen.

Ältere nicht HTML5 Browsern ohne canvas, z.B. IE 8, zeigen ebenfalls keine taccGL Animationen.

taccgl® ist eine HTML 5 Bibliothek, die explizit einen HTML 5 Browser benötigt z.B. IE 9.0 und neuer. In älteren Browsern ist die Bibliothek inaktiv, um nicht die normale Funktion der Seiten zu beeinträchtigen.

taccgl® kann mit dem neuen HTML5 3D canvas (WebGL™) auch viele HTML Elemente anzeigen, was alle Vorteile des HTML5 canvas auch für diese HTML Elemente nutzbar macht:

Zum Beispiel können HTML Elemente programmgesteuert mit Hardwarebeschleunigung animiert, beschleunigte Bewegungen simuliert, deformiert, gebogen, oder beleuchtet werden. Durch die Hardwarbeschleunigung ist es bei guter Grafikhardware normalerweise möglich tausende Kopien von HTML Elementen oder Teilen davon parallel zu animieren.

Zudem lassen sich so HTML Elemente vollständig in 3D Szenen integrieren, d.h. sie können einheitlich mit den 3D Objekten beleuchtet dargestellt werden, verdeckte HTML Elemente oder durch HTML Elemente verdeckte 3D Objekte werden korrekt dargestellt, selbst wenn sich Elemente und 3D Objekte teilweise durchdringen und Schatten von oder auf HTML Elementen werden automatisch korrekt dargestellt.

Ausserdem lassen sich HTML Elemente auf 3D Objekte abblilden z.B. auf die Seiten eines Würfels oder auch auf eine Kugel.

Mit taccgl® können klassische Webdesigner einfache WebGL™ Animationen schon mit sehr wenigen Zeilen javaScript sowie HTML und CSS erstellen durch

die Animation CSS formatierter HTML Elemente,
die Abbildung von HTML Elementen auf 3D Objecte,
die Darstellung von 3D Objekten, die mit WYSIWYG Modelierungsprogrammen (z.B. Blender) erstellt wurden und die Ausrichtung an den HTML und CSS Elementen und
das "fluent interface" von taccgl® mit dem sich Mengen von Objekten/Elementen gleichzeitig manipulieren lassen.

HTML5 mit dem neuen Canvas Element insbesondere in der 3D Fassung bietet fantastische neue Grafikmöglichkeiten wie z.B.

und außerdem spezielle 3D Features wie

Canvas 3D(WebGL™) ermöglicht lediglich die Darstellung programmierter Inhalte. Die taccgl® Bibliothek setzt darauf auf und erlaubt es CSS formatierte HTML Elemente zusammen mit 3D Modellen, die mit 3D Modellierungsprogrammen erstellt wurden anzuzeigen, zu manipulieren und zu animieren.

Mit der Maus über verschiedenen grünen Links dieser Seite öffnen sich Textboxen mit weiteren Erklärungen.

Diese Textboxen werden mit taccgl® und WebGL™ angezeigt, hauptsächlich wegen des Schattenwurfs: Die angezeigten Schatten sind mitunter recht kompliziert, da der Hintergrund nicht flach sondern ein 3D-Modell mit roten Würfeln und einem gebogenen blauen Hintergrund ist.

Ebenso sind die Animationen zum Öffnen und Schließen mit taccgl® erstellt. Die öffnende Animation wird zufällig aus mehreren ausgewählt z.B. morphing von einem Kreis in ein Rechteck.

taccgl® Features

  • JavaScript Bibliothek für 2D and 3D Grafik- und Textanimationen mit WebGL™ zum Webdesign klassischer HTML Web Seiten.
  • Automatische Erkennung inkompatibler Browser und Geräte ohne WebGL™ und stille Deaktivierung den Grafikfunktionen bzw. automatische und halb-automatische Anzeige von Alternativen (z.B. Canvas 2D)
  • Animation von CSS formatierten HTML elementen, von Canvas 2D Abbildungen, von eventuell verformten Teilen davon und von 3D Objekten aus Modelldateien.
  • Transitionen für lineare und konstant beschleunigte Bewegung, für Rotationen, Farbe, Beschneiden, Wachsen und Schrumpfen, Bewegung von Texturen, Verformungen, Morphen, etc
  • Konsistente Behandlung verdeckter Flächen, Beleuchtung und Schatten für alle animierten HTML Elemente and 3D Objekte.
  • Ausführung meherer tausend paralleler Transitionen mittels GPU Beschleunigung.
  • Berechnung von Beleuchtung, Farben, Schatten und benutzerdefinierter Funktionen auf Pixelebene.
  • Einfache Programmierung mit HTML, CSS, und javaScript
  • "Fluent interface" für Transitionen auf Mengen selektierter Elemente und Objekte
  • Initiale und permanente Messungen und Abschätzung der Grafikleistung und darauf basierende Fall-Back und Graceful Degradation Mechanismen für Browser und Geräte, die WebGL nicht oder nicht mit der erforderlichen Performance unterstützen, z.B. Abschaltung der Schatten, dynamische Verkleinerung des Canvas, Verwendung von HTML5 Canvas 2D anstelle WebGL™ oder letztendlich die komplette Abschaltung der Animationen (z.B. in IE 8) mit der Möglichkeit stattdessen Bilder o.ä. anzuzeigen.
  • Je nach Gerät und Browser Verwendung von HTML 5 Canvas 3D (WebGL™) oder Canvas 2D.
  • Simulation mancher 3D Funktionen auf Canvas 2D.
  • Animation von 3D Modellen (OBJ und MTL Dateien) mit WebGL™.
  • Automatisch generierte und benutzerdefinierte Shader-Programme.
  • Open source, BSD like license.
 
2D Features Details/Demo 3D Features Details/Demo WebGL™ Features Details/Demo
Lineare Bewegung
Konstant beschleunigte Bewegung
Rotation um Achse und Mittelpunkt
Rotation um Achse und gegebenen Punkt
Animation von HTML Elementen ( Restr.)
Animation von 2D Canvas Abbildungen
HTML Koordinatensystem
Animation der Hintergrundfarbe
Verschiedene Blenden
Beschneiden, vergrößern und verkleinern
3D Objekte mit HTML Elementen als Textur
Bewegte Texturen
Fortsetzung von Transitionen
evtl. mit konstanter Geschwindigkeit
Morphing in Kreise oder Wellen (WebGL Mode)
Beleuchtungseffekte (WebGL Mode)
(im WebGL und im Fallback Modus:)
Lineare und beschleunigte Bewegung in 3D
Rotationen in 3D
Kompatibel mit HTML Koordinatensystem
Boxen
Objecte mit rechtwinklichen Flächen
(im fallback Modus ohne WebGL:)
Parallelprojektion
Eingeschränkte Behandlung von verdesckten Flächen

Operationen auf Mengen
Selektion nach CSS Klasse
Selektion nach HTML Name
Selection nach HTML Tag
Anwendung von Transitionen auf Mengen von Elementen
Schneiden von Elementen in Mengen horizontaler/vertikaler Scheiben
Behandlung von Mengen von Transitionen

(im WebGL™ Modus:)
Bereits erwähnte 2D and 3D Features aber mit
voller perpectivischer Projektion und
kompletter Behandlung verdeckter Flächen
Ausführung der Transitionen in der GPU als Shader Programme
Verformte HTML Elemente
Anzeige von 3D Modellen aus OBJ/MTL Dateien
Selektion von Objekten aus 3D Modellen
Ausrichtung von 3D Modellen und HTML Elementen
Abbildung von HTML Elementen auf 3D Objekte
Ambiente, diffuse, und specular Beleuchtung
Beleuchtungsberechnung pro Vertex oder pro Fragment
Generierung von Shader Programmen
Benutzerdefinierte Shader

2D Features im Detail

Transitionen und Animationen Schritt für Schritt:

Animate CSS formatted HTML Elements

Aktor bewegen, Aktor rotieren, Rotation und Bewegung, ausblenden, Fade In Actor

Einfache Lineare Bewegung

Move around a CSS formatted HTML element, z.B. Bewegung eines Image Elements, Bewegung eines Text Elements, Bewegung eines Bildes von der HTML Position (flyOut), Bewegung eines Texts von der HTML Position, Bewegen eines Bildes zur HTML Position (flyIn), Bewegung eines Texts zur HTML Position,

Show and Hide HTML/CSS element

Bewegung eines Bildes von der HTML Position (flyOut) und verstecken der original Elements, Bewegen eines Bildes zur HTML Position (flyIn)und danach Anzeige des Originalelements, Bewegung eines versteckten Text Elements

Kombination einfacher Animationen

Bewegung eines Elements (hide original HTML element using CSS during move and show afterwards), Bewegung mehrerer Elemente, Bewegung mehrerer Kopien eines Elements

Beschleunigte Bewegung

Beschleunigte Bewegung, Verzögerte Bewegung (negative Beschleunigung), Bewegung entlang eines Weges

Blenden und Farben

Blenden, Einblenden, Überblenden, Überblenden zu Farbe und Farbwechsel

Rotationen

Rotation, Rotation um gegebenen Punkt, Rotation und Bewegung, Teilweise Rotation, Mehrfache Rotation

Animation eines rechtwinkligen Ausschnitts eines Elements

Bewegung der oberen linken Ecke des Bildes, Zerlegung des Bildes in Teile

Größenanimationen

Wachsen von 0, Teilweises Wachsen, groß, Wachsen und Bewegen, Beschneiden von 0, Teilweises Beschneiden

Bewege Element und Textur

Bewege Bild mit abgebildetem Text, Bewege abgebildeten Text

3D Features in Detail

Die meisten 2D Bewegungen arbeiten auch im dreidimensionalen Raum: Bewege zurück (z>0) und vor (z<0), Rotiere um X, Y, und Z Achse, Bewege und Rotiere um X, Y, und Z Achse, Rotiere um XY, YZ, und XZ diagonal.

Normalerweise werden HTML Elemente in der z=0 Ebene abgebildet. Elemente, die mit taccgl® angezeigt werden verwenden die selben x und y Koordinaten (in Pixel mit Ursprung in der oberen linken Ecke des aktuellen Fensters oder Frames) und haben positive z Koordinaten für Elemente hinter und negative z Koordinaten für Elemente vor der z=0 Ebene.

3D Elemente

Anzeigen eines Elements als 3D-Box : Box Test, Logo Würfel, Einige Logo Würfel, Mehr Würfel, 300 Würfel
Abbildung von HTML Elementen auf die Oberflächen: Würfel
3D Objekt mit rechtwinkligen Flächen: Multi Face Object

Mengen

Selektieren mehrerer Elemente: Rotation aller a tags.
Erzeuge 50 Scheiben und Rotation in Folge.
Erzeuge 500 Scheiben und Rotation in Folge.
Erzeuge 5000 Scheiben und Rotation in Folge.

Zeige mehrere Kopien
Bewege mehrere Kopien

WebGL™ Features

Im WebGL™ Modus arbeiten die 2D und 3D Features mit WebGL™ und entsprechender GPU Unterstützung. Darüberhinaus sind folgende zusätzliche Features verfügbar:

Elimination Verdeckter Fächen / Depth Buffering

Korrekte Darstellung verdeckter Oberflächen, selbst bei sich durchdringenden Elementen, siehe auch Würfel

Anzeige von 3D Modellen im OBJ Dateiformat

Anzeige, Selektion von einem oder mehreren Objekten des Modells, Verzerrte Anzeige, Positionierung des Modells auf HTML Elementen, viele Ausrichtungsoptionen 1 2 3 4, Rotation 1 2 3 4, 1 2 3 4,

Mapping of HTML Elements on 3D Objects

HTML Elemente können auf 3D Objekte abgebildet werden entweder vollständig oder mit UV mapping.

Beleuchtung

Beleuchtungsberechnung pro Fragment/Pixel: separat steuerbare ambiente, diffuse, und spiegelnde Beleuchtung Hervorgehobene Ambiente Beleuchtung, Hervorgehobene Diffuse Beleuchtung, Ohne spiegelnde Beleuchtung, Hervorgehobene spiegelnde Beleuchtung, and Hervorgehobene spiegelnde Beleuchtung mit wenig Glanz.

Benutzerspezifische Shader

Erlaubt es programmatisch jeden einzelnen Punkt zu berechnen Kreisblende, Center-Blende, and Rotierende Blende.

Feature Übersicht
2D Features
3D Features
WebGL™ Features
Dokumentation
Create Animations with HTML 5, CSS, and WebGL™
Canvas 2D / WebGL™ provides extraordinary 2D and 3D graphic
taccgl® makes it easy to use
create content with HTML5 and CSS, animate with WebGL™
and add 3D objects designed with a modelling tool
and show them with WebGL™ (currently WebGL™ is not available, so this 3D Objects do not show up).
<div id="el" style="border:3px solid black; ...">
I am an actor
</div>
Animate with simple javascript functions :
e.g. rotate around X axis
taccgl.actor("el").rotateMiddle(1,0,0).duration(4).start()
e.g. perform multiple rotations and motions on multiple copies of an element
e.g. Turn into a box and rotate
taccgl.actor("el",taccgl.dddBox).depth(150).rotateMiddle(.7,.7,0).duration(4).start()
e.g. Map other HTML elements and colors to various faces of the box and continue rotating.
e.g. rotate around Y axis
taccgl.actor("el").rotateMiddle(0,1,0).duration(4).start()
WebGL™ is a trademark of the Khronos Group Inc.

Content in HTML (as usual) and Eye Candy with taccgl®

Canvas (vs. CSS) makes animations faster and more flexible.
Canvas 3D (WebGL™): complex anmiations in full 3D.
Continue