Category: Guides

If you are trying to build seamless loop shader noise, the usual sin(time) trick only gets you so far. It can make something move back and forth, sure, but it rarely gives you the kind of rich, organic, perfectly repeatable motion that looks deliberate rather than obviously synthetic. In this guide, I’ll break down the…

Porting a Shadertoy shader to WebGL or ShaderGif is usually much simpler than it looks. In most cases, you do not need to rewrite the shader logic. You need to wrap mainImage(), provide the uniforms Shadertoy expects, and render a fullscreen pass. This guide shows the exact mapping, a working WebGL setup, the common failure…

If you are moving from WebGL1 shaders to WebGL2, the core job is usually simple: switch from GLSL 1.00 to GLSL 3.00 ES, replace attribute and varying, stop using gl_FragColor, and update old texture function calls. This guide is a practical migration cheat sheet, written from the perspective of fixing real shader compile failures rather…

Moving from WebGL1 to WebGL2 is mostly a shader language upgrade. The rendering pipeline is still familiar, but GLSL ES 3.00 changes enough syntax that old shaders often fail immediately. This guide explains the exact differences, shows side by side examples, and gives you a safe migration checklist for existing shader code. The short answer…

If your preview is just a black rectangle, it usually means the shader didn’t run, it rendered off-screen, or it rendered fully transparent. This guide walks through the most common causes in ShaderGif (GLSL 1.00, GLSL 3.00, and JS/p5.js modes) and shows quick, reliable ways to isolate the problem. Start with the fast checks (2…

Turning a WebGL canvas (including shaders) into a clean, looping GIF is mostly about capturing frames reliably and keeping your animation deterministic. This guide is for anyone building shader sketches, demos, or small WebGL scenes who wants a repeatable export workflow that looks the same on every machine. Why GIF export is “different” from screen…

Procedural shapes (circles, lines, masks, text-like glyphs) often look “jagged” because shader maths produces perfectly sharp transitions, but screens are made of discrete pixels. This guide explains practical, shader-friendly anti-aliasing methods so your edges stay crisp in stills and stable in motion. What “aliasing” looks like in shaders When you draw a shape in a…

Picking colours in a fragment shader can feel deceptively simple – until everything turns muddy, noisy, or visually inconsistent. This guide is for shader learners and creative coders who want practical palette techniques that keep output readable, stylised, and GIF-friendly without relying on trial-and-error. What a “palette” really does in shader art A palette is…

Looping shader animations feel “effortless” when the first and last frame match exactly – not just visually, but mathematically. This guide is for anyone making GLSL/WebGL animations (especially for GIF exports) who wants seamless, repeatable motion without a visible hitch at the loop point. What “perfect loop” actually means A perfect loop happens when your…

A fragment shader is the GPU program that decides the final colour (and often transparency) of each rendered sample on screen. If you are learning GLSL for creative coding, understanding fragment shaders is the fastest way to start drawing shapes, patterns, lighting, and full-screen effects – even without complex 3D geometry. Where fragment shaders sit…