Archives: Shader GIFs
-
Perfect Loops Beyond sin(time): Looping Noise, Phase Offsets, and Tileable Motion
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…
-
Export WebGL to GIF in 2026: CCapture.js vs gif.js vs Frame Dumps
Trying to export canvas to GIF still sounds simpler than it is. In 2026, the tooling is better understood, browsers are more capable, and WebGL workflows are more ambitious – but the underlying problem has not changed. A fast real-time canvas is not automatically a good export pipeline. In this guide, I’ll compare CCapture.js, gif.js,…
-
Shadertoy Uniforms Explained: iChannel0..3, iDate, iFrame, and Common Patterns
Shadertoy uniforms are the built-in inputs your shader receives from the renderer. If you understand what each uniform represents, especially iChannel0..3, iDate, and iFrame, you can read existing shaders faster, port them with fewer bugs, and avoid the timing mistakes that break animations, feedback buffers, and texture-driven effects. This guide explains the Shadertoy uniforms that…
-
Shadertoy to ShaderGif: Porting mainImage() and iTime/iResolution/iMouse
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…
-
GLSL 1.00 → 3.00 Migration Cheat Sheet: attribute/varying to in/out
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…
-
WebGL2 vs WebGL1 for Shaders: What Changes in GLSL 3.00 (with examples)
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…
-
GLSL Tips and Snippets
If you write a lot of fragment shaders, you end up reusing the same small building blocks: coordinate setup, rotations, smooth edges, palette helpers, and looping time tricks. This page collects practical GLSL snippets you can copy, adapt, and combine in ShaderGif (or any WebGL-style shader environment) to move faster and avoid common gotchas. Quick…
-
cURL (curl) – HTTP requests from the command line
cURL (often written as curl) is a command-line tool for making HTTP requests. It’s commonly used to test URLs, inspect headers, follow redirects, and debug APIs — all things you’ll regularly need when working with ShaderGif. This page covers the curl commands you’ll actually use when testing ShaderGif pages and endpoints. What curl is used…
-
Licensing & Attribution
ShaderGif is built for sharing shader experiments and short generative animations in a way that’s easy to study, remix, and learn from. This page explains how licensing works across (1) the ShaderGif platform itself and (2) the code and media that users publish through the editor and gallery. Two different things are being licensed When…
-
Performance
ShaderGif is designed to make “code → looping GIF” feel immediate, but real-time rendering is still limited by GPU/CPU budget, browser overhead, and the cost of exporting frames. This page explains the most common performance bottlenecks and practical ways to keep previews smooth and exports reliable on a wide range of devices. How performance breaks…