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?
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?
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
andto
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 whenprogress=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!