Shotcut GL-Transition Overlay HTML Generator

This generator creates an Overlay HTML filter that can be used in the Shotcut video editor to transform transitions between clips. The animation is done in the computer's GPU (Graphical Processing Unit) using the web graphics library (WebGL) to render the graphics. The animation is performed basically by manipulating pixels in the composite rendering of the transition. The various Overlay HTML filters are produced using the code from the website: gl-transitions.com. Since this code was designed to work on two separate clips, some of it does not work well (or at all) with the single image frame that is available to the Overlay HTML filter (it is not possible to access two frames, one from each of the clips that are in the Shotcut transition). Those Overlay HTML filters that do work to varying degrees are indicated in the table below by the symbol . Some of the filters work better with other types of transition than the default cross-fade, try experimenting with different ones and different properties.

A Shotcut Overlay HTML Filter is simply an HTML webpage and its associated javascript and CSS code. A transition is a technique used in video editing by which scenes or clips are combined. To apply an Overlay HTML filter to a transition in Shotcut perform the following actions:

  1. Drag a clip on a track to partially overlap the clip immediately to its left to create a transition.
  2. (Optionally) right click on the transition area and select "properties" to choose the type of transition and modify its parameters.
  3. Select the shaded area that is the transition.
  4. In the Filters section select the video filter called Overlay HTML.
  5. Click on the box indicating you will be using the WebVfx javascript framework.
  6. You will then have to confirm that you are an "Advanced User".
  7. Click on the "Open" button and select your Overlay HTML filter (e.g. swirl_filter.html).

Necessary Javascript Files

Shotcut GL-Transition Overlay HTML filters need two javascript files to run, gl-transitions.js and shaderkit.js. These can be downloaded here:

Downloads - click on the relevant Javascript file symbol
()
gl-transition-objects.js
Version
DateFileDescription
v1.02019-01-30 Initial release.
gl-transitions.js
Version
DateFileDescription
v1.02019-01-30 Initial release.
shaderkit.js
Version
DateFileDescription
v1.02019-01-30 Initial release.

Instructions for Generating the Filter

  1. Click on the following link to open a new window showing the gl-transitions.com gallery, or if you know which transition you want to use click on its eye symbol in the table below to take you straight to its transition editor.
  2. If you are on the gallery page, choose a transition and click on it to take you to the transition editor.
  3. If there are parameters that you want to change, try them out in the editor and make a note of each of their values.
  4. Return to this web page and click the button or the name of the gl-transition you have chosen.
  5. Change the values of any parameters that you changed while in the transition editor.
  6. Be very careful to get the changes right. The filter uses the GPU, which is not very good at recovering from bad coding and it is possible to crash/hang Shotcut if bad values are entered for the parameters. Before applying one of these Overlay HTML filters it is a good idea to save your project, just in case.
  7. Click the CREATE FILTER button and copy the filter code, then, using your favourite editor, paste it in your HTML file (e.g. swirl.html).

The Transition Filters

gl-transitiongl-transitiongl-transitiongl-transitiongl-transition

The Parameters for Transition

ParameterTypeChange any default value(s) below to those noted from the Transition Editor
click the button to obtain the corresponding Overlay HTML Filter below.

Copy-paste the following as the HTML code for your GL-Transition Overlay HTML filter

		
		
	

Disclaimer & License (CC BY-SA 4.0)

Version 1.0 Copyright © 2019 - Elusien Entertainment (www.elusien.co.uk)

Creative Commons Licence This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

The following is a summary of the license. For the actual wording of the license see: https://creativecommons.org/licenses/by-sa/4.0/legalcode

Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.

ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.

No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

Notices