t3n News Entwicklung

CSS Shaders – 3D-Rendering von HTML-Elementen

CSS Shaders – 3D-Rendering von HTML-Elementen

Am 30.09.2011 reichten drei Ingenieure von , und einen Vorschlag bei der W3C ein, den sie Shaders nennen. Auf der Adobe Max wurde der Vorschlag näher erläutert. Grob gesagt geht es darum, grafische Effekte, wie sie mit Direct3D oder OpenGL nativ bereits möglich sind, per CSS auf HTML-Elemente anzuwenden. Beeindruckende Ergebnisse lassen sich so erzielen.

CSS Shaders – 3D-Rendering von HTML-Elementen

CSS Shaders - Begriffsklärung

Ich bitte die absoluten Experten zu diesem Thema bereits jetzt um Verzeihung, denn ich werde in den kommenden Absätzen extrem stark vereinfachen, damit überhaupt eine Chance besteht, dass Otto Normalleser versteht, worum es geht. Ich beginne mit einer kurzen Erläuterung, was Shader überhaupt sind.

Shader in Softwareform, und nur darum soll es hier gehen, sind Softwaremodule, eigentlich Befehlssätze, die 3D-Rendereffekte kalkulieren und anwenden. Hierzu wird in der Regel die GPU des hostenden Rechners verwendet. Shader gibt es für die unterschiedlichsten Darstellungszwecke. Generell lässt sich sagen, je mehr verschiedene Shader zum Einsatz kommen, desto realistischer sieht das gerenderte Bild oder Video am Ende aus.

Spiele weisen häufig in ihren Systemvoraussetzung darauf hin, dass die GPU des Rechners bestimmte Shader unterstützen muss. Eltern neigen dazu, das zu ignorieren. Viele Tränen sind aus diesem Grunde schon in Deutschlands Kinderzimmern geflossen.

Der Begriff Shader tauchte übrigens zuerst 1989 auf, als Steve Jobs Firma Pixar die Software RenderMan zur Berechnung komplexer 3D-Computerfilme an den Start brachte. Dies nur am Rande, da der damalige Eigner der Pixar-Studios vor einigen Tagen leider verschieden ist. Man sieht, sogar hier war er maßgeblich beteiligt.

CSS Shaders - Grundlegende Shadertechnologie auf HTML angewendet

Im W3C-Vorschlag zu CSS Shaders spielen nur die beiden ältesten verfügbaren Shader, nämlich der Vertex- und der Fragmentshader, wobei letzterer auch unter dem Namen Pixelshader bekannt ist, eine Rolle.

Vertexshader - Das Drahtmodell einer 3D-Animation

Vertex-Shader kommen zum Einsatz, um geometrische Formen zu definieren. Sie legen den Vertex, die Basisform für 3D-grafische Gebilde, fest und bestehen in der Regel aus Dreiecken. Vereinfacht ausgedrückt ist ein Vertex demnach eine Festlegung einer dreieckigen Linienform durch die Definition derer Eckpunkte. Mittels des Vertex-Shaders wird weiterhin die Farbe und die Textur des Vertex vergeben. Schlussendlich manipulieren Vertex-Shader die Position des Vertex im Raum und können den Effekt etwa eines aufgeblätterten Buches erzeugen, indem sie eine eigentlich flache Form über die Verlagerung der Eckpunkte aller Vertikel räumlich manipulieren.

Fragment-Shader (Pixel-Shader) erzeugen Realitätsnähe

Nachdem die darzustellende Form mit Vertex-Shadern erzeugt ist, werden Fragment-Shader eingesetzt, um die Eigenschaften der einzelnen Pixel (daher der Begriff Pixel-Shader) zu definieren. So kann man Licht- und Schatteneffekte oder andere Arten der Farbmanipulation auf die darzustellende Form anwenden.

Im Beispiel der Darstellung eines aufgeblätterten Buches durch Vertex-Shader aus einer flachen Form ist es immerhin zur realitätsnahen Optik erforderlich, die Beleuchtungsverhältnisse anzupassen. Ich zeige zur Verdeutlichung mal ein Vorher-Nachher-Bild:

CSS Shaders: Hier sind sie noch nicht zum Einsatz gekommen
CSS Shaders: Nachher...

CSS Shaders - Wohin die Reise geht...

Die eben gezeigten Screenshots sind dem W3C-Vorschlag zu CSS Shaders entnommen. Ihr seht also, was Adobe, Apple und Opera hier vorhaben, ist ein großer Schritt für das Webdesign zukünftiger Jahre.

CSS Shader sollen die eben benannten Shader auf HTML-Elemente und SVG-Grafiken anwenden können. Dabei ist eine freie Definitionsmöglichkeit der Fragment-Shader durch den Webentwickler vorgesehen. Vertex-Shader kommen zum Einsatz, um HTML-Elemente zu verformen.

Zu diesem Zweck wird ein Vertex-Grid über das gelegt. Je engmaschiger das ist, desto stärker kann das darunter liegende Element verformt werden. Das Grid kann beispielweise so aussehen:

CSS Shaders: Das Vertex-Grid liegt auf dem Element

Die Anwendung erfolgt mittels eines Filters, der über einen url() Aufruf den Shader anspricht und anwendet. CSS Shaders liefert ein vordefiniertes Shader-Set mit. Der oben gezeigte Bucheffekt ist dabei. Ansonsten müssen eigene Shader geschrieben werden. Das passiert naheliegenderweise in der OpenGL ES Shading Language, die auch in WebGL Verwendung findet. Die Verwendung anderer Sprachen, etwa Adobes PixelBender Language ist ebenso möglich.

Der Vorschlag der drei Einreicher sieht weiterhin vor, dass CSS Transitions und CSS Animations auf CSS Shader anwendbar sein sollen.

Im Ergebnis lässt sich festhalten, dass der Vorschlag mit dem unscheinbaren Namen CSS Shaders einen gravierenden und dabei deutlich sichtbaren Effekt auf das Webdesign der Zukunft haben kann. Federführend bei der W3C ist die FX Taskforce, deren Mitglieder allesamt einen ausgezeichneten Expertenruf aufweisen können.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass
Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass

Marksheet ist eine kostenlose Tutorialsammlung zu den Themen HTML, CSS und Sass, mit einem kleinen Abstecher zu grundlegenden Webtechnologien wie HTTP. MarkSheet ist gestalterisch auf der Höhe der … » weiterlesen

Opera veröffentlicht kostenlose VPN-App für iOS
Opera veröffentlicht kostenlose VPN-App für iOS

Nachdem der Opera-Browser kürzlich um eine kostenlose VPN-Funktion erweitert wurde, bietet das Unternehmen jetzt auch eine VPN-App für alle iOS-Nutzer an. Wir verraten euch, was euch die App bringt. » weiterlesen

Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit
Browser-Test: Edge schlägt Chrome, Firefox und Opera bei der Akkulaufzeit

Microsoft will über einen Test nachgewiesen haben, dass sein Edge-Browser eine deutlich längere Akkulaufzeit am Laptop ermöglicht als die Konkurrenz. Besonders eklatant ist demnach der Unterschied … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?