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?

• Somewhere around 2015, I started playing around with shaders in a native C++ app while trying OpenGL development.
• I quickly realised that I could spend 95% of my time happily coding shaders, I wanted to share gifs on tumblr (@dontcode).
• In the beginning, ShaderGif was just a static html tool built to create gifs from shaders (for at least 1 year).
• Then, in November 2017, I started a rails application to create a front page, comments, drafts, etc.
• As of October 2018, there are 2 posting users (Including me: @antoineMoPa, @Iona) 11 non-posting users or hacker bots.

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:

• Keep frame count low (around 10 frames). Sometimes you can use a bit more frames for simple gifs with few colors.
• Avoid gradients when possible, because the number of different colors that have to be encoded becomes huge.
• Simple black and white gifs can be surprisingly tiny.