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:
- Drag a clip on a track to partially overlap the clip immediately to its left to create a transition.
- (Optionally) right click on the transition area and select "properties" to choose the type of transition and modify its parameters.
- Select the shaded area that is the transition.
- In the
Filterssection select the video filter calledOverlay HTML. - Click on the box indicating you will be using the WebVfx javascript framework.
- You will then have to confirm that you are an "Advanced User".
- 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:
| gl-transition-objects.js Version | Date | File | Description |
|---|---|---|---|
| v1.0 | 2019-01-30 | Initial release. |
| gl-transitions.js Version | Date | File | Description |
|---|---|---|---|
| v1.0 | 2019-01-30 | Initial release. |
| shaderkit.js Version | Date | File | Description |
|---|---|---|---|
| v1.0 | 2019-01-30 | Initial release. |
Instructions for Generating the Filter
- 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.
- If you are on the gallery page, choose a transition and click on it to take you to the transition editor.
- If there are parameters that you want to change, try them out in the editor and make a note of each of their values.
- Return to this web page and click the button or the name of the gl-transition you have chosen.
- Change the values of any parameters that you changed while in the transition editor.
- 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.
- Click the
CREATE FILTERbutton and copy the filter code, then, using your favourite editor, paste it in your HTML file (e.g. swirl.html).
The Transition Filters
| gl-transition | gl-transition | gl-transition | gl-transition | gl-transition |
|---|---|---|---|---|
The Parameters for Transition
| Parameter | Type | Change any default value(s) below to those noted from the Transition Editor |
|---|
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)
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
- You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
- No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.