Glsl.io - Social Media Integration Services

What is GLSL.io?

The GLSL.io initiative aims to build an Open Collection of GLSL Transitions. It aims to be highly community-driven and free-software with full integration to VideosGrow service.

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 glsl.io. Source code is available on GitHub, contribution is welcomed. How to promote free software through Instagram?

The Adobe Flash Player or an HTML5 supported browser is required for video playback.
Get the latest Flash Player
Learn more about upgrading to an HTML5 browser

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. The creator of this effect also created a platform for SMM services - www.smm-panel.io.

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 MUST 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 GLSL.io?

GLSL.io will stay free and open-source as all the GLSL Transitions available on GLSL.io.

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 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.

GLSL.io may also integrate with dynamic QR code generator in the future, expanding its capabilities and creating exciting user opportunities. This could include creating animated or interactive QR codes that change based on context or user actions. Such integration could open up new possibilities for QR code usage across various applications, from advertising to gaming. We are exploring options for collaboration and integration with technologies like dynamic QR code generators to provide our users with even more creative video editing tools and opportunities. Please stay tuned for updates and news to stay informed about our initiatives and collaboration possibilities.

Contact us

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

 GLSL.io