About ShaderGif

ShaderGif is a free and open source home for GLSL shader development.

Why is ShaderGif better than ShaderToy

First let me clarify that ShaderToy is an awesome community and I highly respect the skills of the creators and site owners. I owe a lot the the things I learned to @iq (like raymarching).

However ShaderToy has some deep problems. It renders shaders directly in the visitor's GPU. Old laptop users and phones users have trouble browsing the site. In fact, any visitor who does not purchase an expensive graphics card is likely to experience bugs, black screens, or something else than what the shader coder was seeing when coding.

Many developers would like to help ShaderToy, but it is closed source. Promised features take years to happen.

ShaderGif is young and some features like VR and Soundcloud do not exist yet, but at least anybody who can code and read stackoverflow can potentially add these features if they deeply want it.

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.

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

Why Gifs?

Instead of trying to support all graphics cards, like some other sites do (ShaderToy), ShaderGif renders gifs and preview videos. 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.

How to use the editor?

The editor contains a preview at the left and the code at the right.
The various panels at the left can be collapsed by clicking on the blue title bar.
To create gifs, there is a "+ Create gif" button. Be patient, since this process takes some times.

I frequently start from the "circle.glsl" example and build up from there:

Start with sample code

What are some of your nice features?

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.

How to upload a gif?

First you need to register. Then, in the shader editor, click the "Create gif" button. The encoding will take a few seconds. Once it's ready, the gif will appear at the bottom of the page. If you wish, you can add a title and post it. It will be shown on the front page. The uploading will take a few seconds, it's normal. The server is rendering a video preview of the gif for the homepage, which saves bandwidth and allows me to use a $5/month linode server (I'm just a student with some paid internships and cellphone bills).

What is the history of ShaderGif?

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.

Contributing and sending feedback

To create github issues github.com/antoineMoPa/shadergif/issues

To contribute to the code and documentation: github.com/antoineMoPa/shadergif

Start Coding

If you have never used shaders before, you will get more pointers in the documentation (doc.shadergif.com)

Or just try it:

Start with sample code


Don't have an account yet?

With an account, you can post public gifs and save drafts.


Sign up!