Blog
-
Common Uniforms & Patterns
If you write fragment shaders often, you’ll notice the same handful of inputs (time, resolution, mouse, frame count) come up again and again. This page is a practical reference for ShaderGif-style workflows, with reusable patterns you can copy into new sketches and adapt when porting code from other shader playgrounds. What “uniforms” are (and why…
-
Shader Basics
Shaders are tiny programs that run on the GPU to turn inputs (like UV coordinates, time, and resolution) into pixels. This page is a practical, beginner-friendly reference for anyone using ShaderGif (or learning GLSL generally) who wants to understand what a shader is doing and how to build one step by step. What a shader…
-
Troubleshooting a Black Canvas in ShaderGif
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…
-
Exporting a WebGL Animation to a GIF
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…
-
Anti-Aliasing Basics for Procedural Shapes
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…
-
Colour Palettes in Shaders
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…
-
How to Make a Perfect Loop
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…
-
What Is a Fragment Shader?
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…
-
Mandelbrot Matrix
317 views 0 likes Raw gif (gif) – Video (mp4) – Video (ogv) – Preview (png)language: javascript Fluid gif
-
Even More Integer Math Complexity
I mapped the screen to the int variables x and y and played with various operations, as can be seen in my previous gifs. At this gif’s core lies the following line: ((y * x) / (x ^ y)) == int(time * 30.0) ^ is the XOR operator. Raw gif (gif) – Video (mp4) – Video (ogv) – Preview (png)