Animationen laufen aus Geschwindigkeitsgründen auf Ihrem Browser/Gerät nur auf einem kleinen Teil des Bildschirms.

HTML5 2D and 3D Canvas
Animation Library taccGL

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.

Beispiele

Mouseover mit WebGL™
Your browser or GPU does not seem to support WebGL and so examples marked with 3D do not show.
Kugeln 3D
Multi-Fly-In
Rotation Demo
Solid Rotation 3D
Externe 3D-Modelle:

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

 

Features

HTML element mapped on Cube

3D

2D / HTML / CSS

HTML Element Animated with taccGL and WebGL

Integration of HTML/CSS with 3D

  • "über" der Website schwebende 3D Objekte mit Schattenwurf
  • Postitionierung von 3D Objekten relativ zu HTML Elementen (davor, dahinter, darauauf, darunter, rechts, links, in best. Abstand etc.)
  • Schattenwurf von 3D Objekten auf HTML Elemente und umgekehrt

Entwicklung

  • Einfache Entwicklung mit HTML, CSS, and javaScript
  • Fluent interface für Operationen auf mehreren selektierten Objekten oder Elementen

3D Erweiterungen und Kompatibilität

  • WebGL™ auch auf sehr langen HTML Seiten mit Scrolling (durch Simulation eines Vollseiten-HTML-Canvas Elements)
  • Verwendung von WebGL™ soweit auf dem Endgerät möglich, ansonsten Funktionen zum Anzeigen von alternativen Inhalten z.B. mit 2D Canvas
  • Anzeige mehrerer oder sogar vieler 3D Objekte auf einem Canvas (um die in den Browsern limitierte Anzahl von Canvas Elementen zu umgehen und) um Ganzseitenanimationen der Objekte zu ermöglichen.
  • Automatische Performancemessungen und Deaktivierung aufwändiger Funktionen auf langsamen Endgeräten. z.B. Schatten, per Fragment Shading, Canvas Größe etc.

Weiterführende Links

 

Parallax Scroll mit 3D Hardware Beschleunigung und WebGL™

Der 3D Effekt des Parallax Scrolling wird meistens mit javascript und CSS implemetiert, obwohl inzwischen die meisten Computer mit 3D-graphikbeschleunigten GPUs ausgestattet sind. Der (englischsprachige) Artikel beschreibt und demonstriert, wie Parallax Scrolling mit voller 3D Hardwarebeschleunigung und realistischeren 3D Effekten und unter Verwendung von WebGL™ realisiert werden kann. zum Artikel

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

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.

 

Beta Version 0.62 freigegeben

HTML5 Canvas 3D Animation

Beta Version 0.62 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.

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.

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

 

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 im Einzelnen

  • 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 der 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
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)
3D Features
(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

webGL Features
(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, Bewegung eines Texts von der HTML Position, Bewegen eines Bildes zur HTML Position, Bewegung eines Texts zur HTML Position,

Show and Hide HTML/CSS element

Bewegung eines Bildes von der HTML Position und verstecken der original Elements, Bewegen eines Bildes zur HTML Position (from)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, Rotate Actor with increasing speed, Rotate Actor with decreasing speed, Smooth Rotate and Move.

Blenden und Farben

Fade In, Fade Out, 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. Rotate with acceleration X, Y, und Z Achse, .

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 : Small Box Test, Big Box Test, Logo Würfel, Einige Logo Würfel, Mehr Würfel, 300 Würfel
Abbildung von HTML Elementen auf die Oberflächen: Text Mapped Cube
3D Objekt mit rechtwinkligen Flächen: Multi Face Object

Mengen

Selektieren mehrerer Elemente: Rotation aller a tags.
Create 3 slices und Rotation in Folge.
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 Mapped Cube

Anzeige von 3D Modellen im OBJ Dateiformat

Anzeige, Selektion von einem oder mehreren Objekten des Modells, Stretch Display, 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.