[{"data":1,"prerenderedAt":169},["ShallowReactive",2],{"blog-en-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\u002Fen\u002Fwebgl-shader-basics.md","Understanding shaders: GLSL for designers",{"type":7,"value":8,"toc":149},"minimark",[9,13,18,30,33,44,48,60,120,127,131,134,145],[10,11,12],"p",{},"The first time I wrote a shader, it felt like painting with mathematics. No layers, no\nbrush — just a tiny function that decides, for every single pixel, what color it should be.\nAs a designer, that was an eye-opener, and that's exactly why I want to take the fear out\nof it for you.",[14,15,17],"h2",{"id":16},"vertex-and-fragment-two-stages-one-stage","Vertex and fragment: two stages, one stage",[10,19,20,21,25,26,29],{},"A shader program runs in two passes. The ",[22,23,24],"strong",{},"vertex shader"," handles positions — it moves the\ncorner points of your geometry through space. The ",[22,27,28],{},"fragment shader"," runs afterward and\ndecides, for each pixel on the surface, what color it carries.",[10,31,32],{},"For visual effects, the fragment shader is usually the exciting part. Think of it as a\nfunction that runs millions of times in parallel on the graphics card — once per pixel, all\nat the same time. That parallelism is exactly why shaders stay so smooth.",[34,35,36],"blockquote",{},[10,37,38,39,43],{},"A shader doesn't think in shapes, it thinks in coordinates. You don't describe ",[40,41,42],"em",{},"what"," gets\ndrawn, but how color spreads across the surface.",[14,45,47],{"id":46},"uniforms-the-wire-between-world-and-gpu","Uniforms: the wire between world and GPU",[10,49,50,51,54,55,59],{},"Shaders live in isolation on the GPU. To let them know anything from the outside, there are\n",[22,52,53],{},"uniforms"," — values you hand in from your JavaScript that stay the same for every pixel.\nClassics are ",[56,57,58],"code",{},"time"," for animation, the mouse coordinates, or the resolution of the 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],{},"Those few lines already produce a living gradient that moves over time. ",[56,124,125],{},"uv"," normalizes the\npixel position into a range from 0 to 1 — the coordinate system you actually think in.",[14,128,130],{"id":129},"why-its-worth-the-effort","Why it's worth the effort",[10,132,133],{},"CSS and SVG carry you a long way, but eventually you hit a wall: organic gradients, fluid\ndistortions, generative patterns that don't fit into any image file. Shaders run directly on\nthe graphics card and compute effects in real time that would be too heavy and too rigid as\na video or GIF.",[10,135,136,137,140,141,144],{},"For me, shaders are the tool that makes a website stop merely ",[40,138,139],{},"looking"," like something and\nstart to ",[40,142,143],{},"breathe",". You don't need to be a mathematician to begin — a little trigonometry, a\nlot of experimentation, and the willingness to think in coordinates instead of layers. Start\nsmall, change one number, watch what happens. That game is the whole point.",[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","A gentle introduction to GLSL fragment shaders for designers — what separates vertex from fragment, and why shaders unlock visuals nothing else can.",false,"md","en",{},"\u002Fblog\u002Fen\u002Fwebgl-shader-basics",{"title":5,"description":156},"blog\u002Fen\u002Fwebgl-shader-basics",[165,166,167],"Three.js","WebGL","Shaders","E0LOHb-xUCTQ2Yj4VeJdOiA2w1hDIY0UyCIqVdRCv9w",1781691288513]