[{"data":1,"prerenderedAt":169},["ShallowReactive",2],{"blog-de-webgl-shader-basics":3},{"id":4,"title":5,"body":6,"cover":154,"date":155,"description":156,"draft":157,"extension":158,"locale":159,"meta":160,"navigation":88,"path":161,"seo":162,"stem":163,"tags":164,"__hash__":168},"blog\u002Fblog\u002Fde\u002Fwebgl-shader-basics.md","Shader verstehen: GLSL für Gestalter",{"type":7,"value":8,"toc":149},"minimark",[9,13,18,30,33,44,48,60,120,127,131,134,145],[10,11,12],"p",{},"Als ich das erste Mal einen Shader geschrieben habe, fühlte sich das an wie Malen mit\nMathematik. Kein Layer, kein Pinsel — nur eine kleine Funktion, die für jeden einzelnen\nPixel entscheidet, welche Farbe er bekommt. Für mich als Gestalter war das ein\nAugenöffner, und genau deshalb möchte ich dir die Angst davor nehmen.",[14,15,17],"h2",{"id":16},"vertex-und-fragment-zwei-schritte-eine-bühne","Vertex und Fragment: zwei Schritte, eine Bühne",[10,19,20,21,25,26,29],{},"Ein Shader-Programm läuft in zwei Etappen. Der ",[22,23,24],"strong",{},"Vertex-Shader"," kümmert sich um\nPositionen — er verschiebt die Eckpunkte deiner Geometrie im Raum. Der ",[22,27,28],{},"Fragment-Shader","\nläuft danach und entscheidet für jedes Pixel auf der Oberfläche, welche Farbe es trägt.",[10,31,32],{},"Für visuelle Effekte ist meistens der Fragment-Shader der spannende Teil. Stell ihn dir\nals eine Funktion vor, die millionenfach parallel auf der Grafikkarte ausgeführt wird —\neinmal pro Pixel, alle gleichzeitig. Diese Parallelität ist der Grund, warum Shader so\nflüssig laufen.",[34,35,36],"blockquote",{},[10,37,38,39,43],{},"Ein Shader denkt nicht in Formen, sondern in Koordinaten. Du beschreibst nicht ",[40,41,42],"em",{},"was","\ngezeichnet wird, sondern wie sich Farbe über die Fläche verteilt.",[14,45,47],{"id":46},"uniforms-der-draht-zwischen-welt-und-gpu","Uniforms: der Draht zwischen Welt und GPU",[10,49,50,51,54,55,59],{},"Shader leben isoliert auf der GPU. Damit sie von außen etwas mitbekommen, gibt es\n",[22,52,53],{},"Uniforms"," — Werte, die du aus deinem JavaScript hineinreichst und die für alle Pixel\ngleich sind. Klassiker sind ",[56,57,58],"code",{},"time"," für Animationen, die Mauskoordinaten oder die Auflösung\ndes Canvas.",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-glsl shiki shiki-themes github-light github-dark","uniform float time;\nuniform vec2 resolution;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy \u002F resolution;\n  float wave = sin(uv.x * 10.0 + time);\n  gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);\n}\n","glsl","",[56,68,69,77,83,90,96,102,108,114],{"__ignoreMap":66},[70,71,74],"span",{"class":72,"line":73},"line",1,[70,75,76],{},"uniform float time;\n",[70,78,80],{"class":72,"line":79},2,[70,81,82],{},"uniform vec2 resolution;\n",[70,84,86],{"class":72,"line":85},3,[70,87,89],{"emptyLinePlaceholder":88},true,"\n",[70,91,93],{"class":72,"line":92},4,[70,94,95],{},"void main() {\n",[70,97,99],{"class":72,"line":98},5,[70,100,101],{},"  vec2 uv = gl_FragCoord.xy \u002F resolution;\n",[70,103,105],{"class":72,"line":104},6,[70,106,107],{},"  float wave = sin(uv.x * 10.0 + time);\n",[70,109,111],{"class":72,"line":110},7,[70,112,113],{},"  gl_FragColor = vec4(uv.x, uv.y, wave, 1.0);\n",[70,115,117],{"class":72,"line":116},8,[70,118,119],{},"}\n",[10,121,122,123,126],{},"Diese paar Zeilen erzeugen bereits einen lebendigen Farbverlauf, der sich über die Zeit\nbewegt. ",[56,124,125],{},"uv"," normalisiert die Pixelposition auf einen Bereich von 0 bis 1 — dein\nKoordinatensystem, in dem du denkst.",[14,128,130],{"id":129},"warum-sich-der-aufwand-lohnt","Warum sich der Aufwand lohnt",[10,132,133],{},"Mit CSS und SVG kommst du weit, aber irgendwann stößt du an eine Wand: organische\nVerläufe, flüssige Verzerrungen, generative Muster, die in keiner Bilddatei stecken.\nShader laufen direkt auf der Grafikkarte und rechnen Effekte in Echtzeit, die als Video\noder GIF zu schwer und zu starr wären.",[10,135,136,137,140,141,144],{},"Für mich sind Shader das Werkzeug, mit dem eine Website nicht mehr nur ",[40,138,139],{},"aussieht",", sondern\n",[40,142,143],{},"atmet",". Du musst kein Mathematiker sein, um anzufangen — ein bisschen Trigonometrie, viel\nAusprobieren und die Bereitschaft, in Koordinaten statt in Ebenen zu denken. Fang klein an,\nverändere eine Zahl, beobachte was passiert. Genau dieses Spiel ist der Kern der Sache.",[146,147,148],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":66,"searchDepth":79,"depth":79,"links":150},[151,152,153],{"id":16,"depth":79,"text":17},{"id":46,"depth":79,"text":47},{"id":129,"depth":79,"text":130},null,"2020-03-10","Eine sanfte Einführung in GLSL-Fragment-Shader für Gestalter — was Vertex und Fragment unterscheidet und warum Shader einzigartige Visuals ermöglichen.",false,"md","de",{},"\u002Fblog\u002Fde\u002Fwebgl-shader-basics",{"title":5,"description":156},"blog\u002Fde\u002Fwebgl-shader-basics",[165,166,167],"Three.js","WebGL","Shader","q3mln_zjwzs5gNNq6oUdoi0RLsuTTVa2KapbgAK5Ung",1781691287551]