gre / gl-transition-libs

libraries to run GL Transitions and source code of

This repository hosts multiple packages for gl-transitions.

• gl-transition: a light function to render a GL Transition frame with a WebGLRenderingContext.
• regl-transition: a function to render a GL Transition with a regl context.
• react-gl-transition: a React component to render a GL Transition in gl-react v3.
• website: gl-transitions.com source code. it automatically gets redeployed from master branch.
• regl-transition-example: example for regl-transition.

Other Links

• GLTransitions website, gallery and editor. ( alternative hosting: https://gl-transitions.surge.sh/ )
• gl-transitions repository, collection of gl transitions.

Kudos

Libraries

• React
• create-react-app
• headless-gl and bunch of other libs around stackgl.
• gl-react

Services

• Travis for automated tests and deployment to NPM.
• Netlify for hosting the website.
• Github itself, for being a platform for hosting gl-transitions

Others

• ffmpeg
• xvfb
• unsplash.com for the images

gl-transition-libs's Issues

Create a thin library on top of gl-shader and reuse code with the gl-react impl (and maybe the CLI too)

just need to release a thin lib for web (that don't need gl-react)

fails on ie11 (surface 2)

Somehow not even the drop down is properly initialized. Running the test on RT desktop ie11 gives two javascript errors:

File test: Object doesn't support property or method 'setup'

Not sure about this. Mocha.setup should be there if mocha works in general. Sadly console mocha returns the div id="mocha"... but actually just saw mocha gives a 404?

File bundle.j's, 9608: 'describe' is undefined, may be result of first error though...

Transitions between different image sizes

If you load two images with different dimmensions, transitions is pretty weird.

Is there any thing I am missing?

Move to simpler animation paradigm than Promise

glsl-transition-core

should split into glsl-transition and glsl-transition-core.

glsl-transition-core is the underlying library which eases the work of using GLSL Transitions.

• it does everything except performing the transition animation.
• it have a "setProgress" method but no animation function.
• depends on gl-shader-core, glsl-exports

glsl-transition uses glsl-transition-core to create a transition.

• it adds the Transition animation function.
• depends on glsl-transition-core, performance-now, raf, q

GLSL.io could directly use glsl-transition-core for some use-cases.
glsl-transition-validator could just depends on glsl-transition-core.

Fade transition error

Just ran the tests and got this error:

fade transition
should correctly fade ‣
Error: Uncaught AssertionError: ending 'to' image (http://greweb.me/glsl-transition/test/bundle.js:7325)
at global.onerror (http://greweb.me/glsl-transition/test/mocha/mocha.js:5513:10)

Chrome Version 32.0.1700.102 on OS X Mavericks

GLSL.io released! – an "Open Collection of GLSL Transitions" platform

Today has been released http://GLSL.io/, which is an open bank of GLSL Transition (released with free software license)

Imagine how awesome the future would be if all Video Editor Software would be compatible with the "GLSL Transition" concept for their video transition effects?

At least, I hope this initiative will generate a lot of GLSL Transitions that we all can use with "glsl-transition".

You can find more information on http://GLSL.io/ .

Cheers to all 292 github followers of glsl-transition !

Add a LICENSE file

Is there a license for this library? Would be convenient if it was included in the root directory to make it more clear.

Sorry if I missed this somewhere else, thanks!

integrate some ideas from glslEditor

https://github.com/patriciogonzalezvivo/glslEditor

• profiling glsl instructions to identify bottleneck is neat. we could just weight each glsl line running IN transition() function (i'm thinking a relative number from 1 to inf might be better than a % of the total? or maybe the value of total% * nbOfLine). i think it works by replacing a placeholder value to each line and doing bunch of rendering to evaluate.

Pure HTML example

Hi, can a simple index.html example be made to show how this can be used for a web page please? Maybe a jsfiddle or codepen? I and I'm sure others (starting out with shaders) would love to know how this can be made into an image slideshow, for example. Looking through the code of the examples, it doesn't seem accessible.

Thanks for this wonderful resource. I can't wait to start using it :)

Render transitions as AVI?

Hi everyone,

is it possible to render a slideshow made with glsl-transitions as AVI or any other video format? I would like to render the slideshow server-side not with canvas.toDataUrl() in a browser.

Cheers
Malte

Pass a WebGL context instead of a Canvas

A better practice would be to let the user handle the context.

• Remove unused code like getContext, webgl supported. (other micro libraries can be used but users)
• Preserve the context lost handling ?
• Change the API and make that a major version

gl-transitions with C++ and OpenGLES2

This is an attempt to use OpenGLES2 in native C++ code using nengl, and apply transitions.

https://medium.com/@prabindh/using-gl-transitions-for-effects-9e73abfc8fd5

In particular, complete example is at - prabindh/nengl@4e8ac14

minimize the GLSL code?

we should also export to NPM glsl minified version of the code that we would use for "prod", it needs to be tested the same way it is with the non minified and it also needs to be used by everything (except the gl-transitions editor).

I think it will just be another entry point with a .min suffix in the filename.

gl-transitions.min.json, gl-transitions.min.js,...
but also the lib index.js probably should be the min by default and there are non min versions?

invalid transition, it must: render getFromColor(uv) when progress=0.0

while I ported following shader to new engine I am getting following error while output looks ok.

https://gist.github.com/rakeshcjadav/b1ed2b9c435ed6d4b18c8b9fda6e4352

invalid transition, it must: render getFromColor(uv) when progress=0.0

Thank you.

take the first Author, not the last

https://gl-transitions.com/editor/luminance_melt example, author here not inferred correctly, take first as priority

How to use gl-transition js

After including the gl-transition js file in script tag of html, how to use it to include images and create a slideshow with effect names .Thank You.Simplify with an example.

Example

Hi guys, I know this is not the place to ask, but this is not a subject really talked in stackoverflow . . . so please let me ask here . . . I'm trying to create a really simple example . . . like this

const from = 'https://i.imgur.com/wxqlQkh.jpg';
const to = 'https://i.imgur.com/iPKTONG.jpg';
const transition = GLTransitions[0];
const progress = 0.5;

<GLTransition
    from={from}
    to={to}
    progress={progress}
    transition={transition}
/>

I know the Transition is not properly set, but I can't find the way to set it properly and I'm probably doing 100 more things wrong . . .

website errors reported

Hi, and thanks for the great stuff! I am having problems with the site though, on Chrome Version 60.0.3112.101 (Official Build) (64-bit) on linux I am getting a lot of warnings and errors and no images are loaded in the gallery except for the first one.
Errors and warnings are as follows:

Node.js:964 Node#1() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#3 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
2Node.js:964 Node#1() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught (in promise) TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
Node.js:964 Node#6() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
7Node.js:964 Node#6() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#7() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#6 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#7 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#8 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#9 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#10 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#11 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#12 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#13 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#14 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#15 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#16 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
16Node.js:964 Node#7() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#19() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
416Node.js:964 Node#19() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#20() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#19 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#20 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#21 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#22 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#23 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#24 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#25 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#26 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#27 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#28 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#29 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
10Node.js:964 Node#20() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#32() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
Node.js:964 Node#32() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#33() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#33 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
Node.js:964 Node#33() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught (in promise) TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
Node.js:964 Node#36() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#35 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#36 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#37 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#38 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#39 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#40 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#41 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#42 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#43 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#44 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#45 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
207Node.js:964 Node#36() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#48() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
115Node.js:964 Node#48() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
Node.js:964 Node#49() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
createSurface.js:197 Surface#48 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#49 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#50 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#51 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#52 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#53 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#54 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#55 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#56 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#57 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
createSurface.js:197 Surface#58 children does not contain any discoverable Node
r._handleLoad @ createSurface.js:197
Vignette.js:87 Uncaught TypeError: Cannot read property 'setProgress' of undefined
at o.onRef (Vignette.js:87)
at r (ReactRef.js:20)
at Object.i.attachRefs (ReactRef.js:42)
at d.r (ReactReconciler.js:23)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
at r.closeAll (Transaction.js:209)
at r.perform (Transaction.js:156)
at a.perform (Transaction.js:143)
at a.perform (ReactUpdates.js:89)
29Node.js:964 Node#49() uniform 'ratio' is not declared, nor used, in your shader code
W @ Node.js:964
5Node.js:964 Node#49() uniform 'ratio' is not declared, nor used, in your shader code

bot: mention people that contributed to a file when someone send a patch

add a check that detect the unused uniforms that are declared

move this repository to glslio organization

multi-pass effects

Are there any examples of multi-pass effects (2 pass pingpong blur for instance), or this not currently possible in this implementation?

It looks like there are some attempts at blur effects in the gallery, but nothing that really does a nice soft gaussian blur transition.

No output in Chrome v32.0.17

Error from developer tools console:

Uncaught Error: WebGL context is null.

website: mobile support

• bezier-easing-editor to implement touch events support
• Vignette touch events

Travis tests should also test the code against the existing gl-transitions see there is no regression

search by name

test doesn't run

Chrome 31.0.1650.63 m; Windows 8

GET http://greweb.me/glsl-transition/node_modules/mocha/mocha.css 404 (Not Found) @ greweb.me/:6
GET http://greweb.me/glsl-transition/node_modules/mocha/mocha.js 404 (Not Found) @ greweb.me/:11
Uncaught TypeError: Object #<HTMLDivElement> has no method 'setup' @ (index):13
Uncaught ReferenceError: describe is not defined @ index.js:82

Firefox 26; Windows 8

TypeError: mocha.setup is not a function @ test:13
SyntaxError: Using //@ to indicate source map URL pragmas is deprecated. Use //# instead @ bundle.js:9999
ReferenceError: describe is not defined @ bundle.js:9608

When generating the video, there is a black screen in the middle and the lower part

like this：

!!!!!!!!!!!!!!!!
! ！
! ！
!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!

How to access getComponent().setProgress() in react-gl-transition

The docs say the method should exists on the ref but I cannot find any such method. I'm using the useRef hook in a functional component.

gltransition not working properly for 480p

hai,
actually am using gltransition through ffmpeg all transition are working properly for 1080p and 720p but at the same time 420p resolution fails for square videos too, is there any particular reason for that please reply ASAP

Above screenshot at transition between slide at duration of 1 second

website general todos

• encourage more people to use ratio. we need to show what the transition do with a diff ratio.
  • it's especially important to show diff ratio in the editor because sometimes you are stuck with the validation because of that.
• editor: a button to reset the defaults & also visually see if you have diverged from the default.
• should prevent nav everytime we "lose" content like when editing an existing shader (if !=). for the creation it's probably ok to leave because a "back" would restore the state.
• FAQ each error should be documented somewhere so we can link them in a FAQ kind of doc.
• expandable EditorStatusBar
• customize gallery/editor imgs? old idea: https://github.com/gre/transitions.glsl.io/issues/585
• webgl error resilience
  • better handling of losing context. it shouldn't error like currently but just have a gray placeholder
  • nicely degrade screens when WebGL is not supported.
• loading perf
  • all css / async loads need to be killed.. they create kinda ugly glitch. they also wouldn't be good for server side rendering.
  • add a global loader because the site is weird if images aren't loaded. actually => gre/gl-react#115
• profile performance.

investigate why bot have issues ATM

ZEIT now broken links

The website used to support linking ala https://gl-transitions.com/editor/circleopen, but it appears this was broken in a recent release.

I'm linking to these transitions from ffmpeg-concat and had a user point this out to me.

Should be a pretty quick fix -- I ran into this previously on a different project, and I think you can change the deployment template in settings on ZEIT now.

thanks!

build should be minified

Is there any example with React?

Anyone have any code example using react-gl-transition ?

I've been tried to make it works but as I'm new in React I'm having difficulties to have a simple example to work.

Null

update dependencies

tests only pass on fast devices

need to ease a bit the test so they don't only pass on fast computers..

i have nothing in the transition dropdown list.. any ideas ?

Bug

in Chrome not working. Ubuntu 12.10

Creating a new transition during another transition animation occurs it to stop

also in the console:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : 
glDrawArrays: attempt to access out of range vertices in attribute 0 

Need to fix that and provide tests.