Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS Shaders – 3D-Rendering von HTML-Elementen

    CSS Shaders - 3D-Rendering von HTML-Elementen

Am 30.09.2011 reichten drei Ingenieure von Adobe, Apple und Opera einen Vorschlag bei der W3C ein, den sie CSS 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 - 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 HTML 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.

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen