What is a GLSL shader?

A shader is a tiny piece of code that runs in your GPU to generate all the epic visuals you see in today's games, movies, etc.

A shader is a tiny piece of code that runs in your GPU to generate all the epic visuals you see in today's games, movies, etc.

GLSL (Open GL Shading Language) is a shading language that looks like C code.

Shaders are very exiting to code, look at ShaderGif's examples, in the GLSL section, and try adding your artistic touch to these!

What is Javascript?

Javascript is a very popular programming language. It powers most of the websites you use everyday. You can use it to make gifs with ShaderGif, without any CSS or HTML knowledge.

We suggest you try the examples in ShaderGif and search the web for <canvas> javascript to discover all the methods that you can use!

What is p5.js?

p5.js is a Javascript library created by Lauren McCarthy inspired by the processing language.
You can find more information about it here. Come back with code samples and try them in ShaderGif!

Why play gifs on the feed instead of running the code?

  1. You don't have to maintain the code ever.
  2. Browsers don't need to compute your gif again.

Instead of trying to support all graphics cards, CPU, browser, etc. ShaderGif works with gifs and preview videos. Gifs just work. They work everywhere. Also, gifs can be shared easily on the internet, which makes them an awesome medium. Of course, gifs have some problems (artifacts, big size), but the big size is compensated by the generation of video previews and the artifacts actually give gifs their beauty.

For the details, we actually play video versions of the gifs to reduce size.

The following image is an example of a video version of a gif(0.5MB). Here is the original gif link : gif (2.12MB). If you compare, you will see that the video saves a lot of network and is quite similar visually.

LocalStorage Backup

When you hit CTRL+R in the editor (/editor/ or /shader-editor/), you don't lose the code,
unless you where browsing an URL like /editor/316/edit.
Be careful in this case because the original shader will be loaded.
This means you can leave your work in progress in the editor and it should be there when you come back,
but when you try another shader's code, it gets overridden.
To back up your shaders a bit more safely, use the "draft" saving feature.

What is the history of ShaderGif?

For current stats, look bellow.

What are some considerations when making gifs?

The ShaderGif editor shows the size of your gifs in kilobytes.
Making small gifs is an art. To save bandwidth, upload time and encoding time:

If you need hundreds of frames of a shader you just coded (because you want to share it outside of ShaderGif), it is better to download the zip and make a video with an external software.