Transition Effect not found in moviemasher@5.1.1

[GREATAJ]

Hello @syntropo I see that there is no transition effect in MovieMasher version 5.1.1, but in MovieMasher version 5.0.6 the transition effect is working. Please tell me how can I add transition effect in version 5.1.1.

[syntropo]

Well, only one transition was supported (crossfade) and it can be achieved now by having a track with tweened opacity above another track. Similarly, you can achieve swipes, etc. by tweening the transformations of the higher track.

The core problem here is that FFmpeg doesn't really support transitions as we're used to thinking of them. The old approach was to add filter chains to all clips, but this created complex interdependencies that were near impossible to debug. Yet another approach may be introduced at some future point, built around the xfade filter and its transition argument. Other planned changes may obviate the need for transitions to be applied at the FFmpeg level though, so not sure if or when this might be implemented.

[GREATAJ]

Hello @syntropo Currently we are looking to add this effect https://www.shadertoy.com/view/WlKXWc (Water Ripple effect) through moviemasher.

Currently we have customised the moviemasher view and successfully able to add Effect-component using json for adding ids and properties and parameters, effect-factory, filter component to design the filter and filterFactory.

We had tried to implement this effect via npm package shadertoy-react (https://www.npmjs.com/package/shadertoy-react) in a separate demo application. Right now we are figuring a way to implement this effect in moviemasher code.

Could you please provide the recommended way asap. Thanks

[syntropo]

Ah, displacement maps... Movie Masher hasn't supported these since the days of Flash, but they should be possible now using SVG's feDisplacementMap element and FFmpeg's displace filter.

The roadmap actually includes reviving displacement maps as a generalized container feature, similar to the way opacity is handled. An attempt was even made, but there were issues with some edge cases that looked hard to resolve so the idea was shelved. It actually goes a bit beyond your requirements though, by supporting any visual input - a ripple effect is easy enough in SVG...

The approach would involve generating a grayscale SVG image for each frame and then referencing from both the element and filter. A ripple effect can be achieved by some combination of circular gradients - each gray value in the image translates into a different amount of displacement. If different images are generated for different frames, then the displacement mapping will animate over time.

This should theoretically be possible as described in #43 but, upon further inspection, the filterDefinitionSvg method is currently only being called for the background color filter. It should instead be called for all effects and return an SvgItems array. Any elements in this array should be placed in a defs element so they can be referenced by the SvgFilters by ID.

To get this rendering in FFmpeg, the various implementations of the visibleCommandFiles method in content subclasses would also need to be updated to return SVG file descriptions for each frame of the animation. These files would then be treated as an SVG sequence and reference from the CommandFilter as normal input. Could get tricky, but certainly possible...

[GREATAJ]

Hello @syntropo We need to add more animation effects. Example - ripple effect(Waterdrop effect) as mentioned in above comments. It is difficult to create each and every effect. So, I explored and found effects which are already made on GLSL language on shadertoy and I am able to include GLSL language through npm package in sample react project which I shared in upper comment. Is there have any procedure to how can I add particular third party libraries and use already created effects(In different language). If yes, please guide me or provide us some documentation. Thanks

[syntropo]

There is no particular mechanism for integrating third party effects like the one you linked to. It utilizes a canvas-based approach but version 5.1 of Movie Masher has abandoned this in favor of SVG composition. Please understand that effects are intended to work both in the browser context but also when rendering video in the context of FFmpeg commands. The system does not screen scrape the editor when rendering, but rather generates an FFmpeg filter chain that produces the same visuals.

There are systems like Remotion that do screen scrape if you need to render actual video. Otherwise, the approach I outlined above would be the best route for a ripple effect. The two changes required in the core library have been added to the TODO list, and certainly the first is much easier and could be implemented on its own.