gre/article.md

## article.md

      
    Raw
  

              article.md
            
          
    What is GL-Transitions?

The GL-Transitions.com initiative aims to build an Open Collection of GLSL Transitions.
It aims to be highly community-driven and free-software.

No data are kept on our servers, data is all stored in Github Gists.
The project is yours, up to you to deploy your own platform instance if you like to.
The official platform will be hosted on GL-Transitions.com. Source code is available on GitHub, contribution is welcomed.

What is a "GLSL Transition"?

A GLSL Transition is a Transition performed using OpenGL Shading Language (GLSL).
A Transition is an Animation Effect moving from one image to another.
Why GLSL?

GLSL is efficient because it compiles to the graphic card and is very powerful, not limited to simple transformations, but with unlimited possible draw (in a functional way).
Also, GLSL is available not only for the Web in recent browsers but also in native environnement via OpenGL.
For which use case?

You may need GLSL Transitions for making web image animations (e.g. a slideshow)
or for transitions in a Video Editing Software.

We wish to interoperate with existing Video Editing Software soon. If you want to contribute or if you have another use-case idea, feel free to contact us.

How to use a GLSL Transition?


For the web, you can use the JavaScript GLSL Transition Library available on GitHub and on NPM.

Example:
var createTransition = GlslTransition(canvas);
var glslCode = "#ifdef GL_ES\nprecision highp float;\n#endif\n \n// General parameters\nuniform sampler2D from;\nuniform sampler2D to;\nuniform float progress;\nuniform vec2 resolution;\n \nuniform float smoothness;\nuniform bool opening;\n \nconst vec2 center = vec2(0.5, 0.5);\nconst float SQRT_2 = 1.414213562373;\n \nvoid main() {\n  vec2 p = gl_FragCoord.xy / resolution.xy;\n  float x = opening ? progress : 1.-progress;\n  float m = smoothstep(-smoothness, 0.0, SQRT_2*distance(center, p) - x*(1.+smoothness));\n  gl_FragColor = mix(texture2D(from, p), texture2D(to, p), opening ? 1.-m : m);\n}";
var transition = createTransition(glslCode);
function animate() {
  var uniforms = { smoothness: 0.3, opening: true };
  var easing = function (x) { return x; } // linear
  var duration = 1000; // 1 second
  return transition(uniforms, duration, easing);
}
animate()
  .then(...) // it's a promise :-)
Slideshow example in glsl-transition example.
What technically is a GLSL Transition?

A GLSL Transition is a GLSL Fragment Shader that must have these uniforms:

two sampler2D, from and to which are the 2 images (or videos) that the transition has to move from one to the other.
a vec2 resolution which is the resolution of the canvas.
a float progress which moves from 0.0 to 1.0 during the transition.


A GLSL Transition can also have custom user parameters
by defining extra uniforms (which can be float, int, bool, vectors, matrix).
It allows to make a transition much more customisable and to generate an infinite number of variants of a same transition.

How to create Transitions?

The editor is a playground for you to experiment with GLSL shaders.
You can also study existing transitions from the gallery.
For creating content, you must login with a Github account.
When you Create a new GLSL Transition from the editor, it creates a new Github Gist with your account.
You can Save your Transition as much as you like, it will patch the original gist (so you have a trace of the history).
When you are done, you can Publish your Transition to be visible in the gallery.

NB. A GLSL Transition entry is technically created by forking a "root" Gist. We can easily list all GLSL Transitions by listing forks of this root Gist.

GLSL Transition Terms

Here are the main rules of a GLSL Transition:

It MUST be a transition: the "from" image is displayed when progress=0.0, the animation should smoothly move to the final state which is the "to" image, displayed when progress=1.0.
It MUST remain free software (MIT License attached with the Gist).
It SHOULD be original and unique. Identical or very similar should not already exists.
It SHOULD be yours. Fork or code inspiration are however allowed if it doesn't invalidate rule 3. and if the changes as sufficiently important.

Please make your transitions comply with these rules to stay in the Open Collection.
What is the future for GL-Transitions.com?

GL-Transitions.com will stay free and open-source as all the GLSL Transitions available on GL-Transitions.com.
There is tons of ideas and features that we want to add to this initial version.
We are focusing on stabilisation but we are going to work by sprint to provide frequent new releases.
We are going to clarify the roadmap and features in the next days.
For more information, refer to the Github project issues and feel free to contribute to the project.
We are eager to work with existing Video Editor Software to make them compatible with these GLSL Transitions (e.g. via plugins). For instance, having a ffmpeg filter would be awesome.
Contact us


on Twitter

Found a typo in this article? React on https://gist.github.com/gre/600d8a793ca7901a25f2!