• Stars
    star
    525
  • Rank 84,404 (Top 2 %)
  • Language
    C
  • Created about 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

FFmpeg filter for applying GLSL transitions between video streams.

ffmpeg-gl-transition

FFmpeg filter for applying GLSL transitions between video streams (gl-transitions).

(example crosswarp transition)

Note

If you want an easier solution, I recommend checking out ffmpeg-concat, an npm module and CLI that allows you to concat a list of videos together using a standard build of ffmpeg along with the same sexy OpenGL transitions.

Intro

FFmpeg is the defacto standard in command-line video editing, but it is really difficult to concatenate videos together using non-trivial transitions. Here are some convoluted examples of a simple cross-fade between two videos. FFmpeg filter graphs are extremely powerful, but for implementing transitions, they are just too complicated and error-prone.

GL Transitions, on the other hand, is a great open source initiative spearheaded by Gaëtan Renaudeau that is aimed at using GLSL to establish a universal collection of transitions. Its extremely simple spec makes it really easy to customize existing transitions or write your own as opposed to struggling with complex ffmpeg filter graphs.

This library is an ffmpeg extension that makes it easy to use gl-transitions in ffmpeg filter graphs.

Building

Since this library exports a native ffmpeg filter, you are required to build ffmpeg from source. Don't worry, though -- it's surprisingly straightforward.

Dependencies

First, you need to install a few dependencies. Mac OS is very straightforward. On Linux and Windows, there are two options, either using EGL or not using EGL. The main advantage of using EGL is that it is easier to run in headless environments.

Mac OS

GLEW + glfw3

brew install glew glfw

Mac OS users should follow instructions for not using EGL.

Linux with EGL

We default to EGL rather than GLX on Linux to make it easier to run headless, so xvfb is no longer needed.

glvnd1.0 building from source

mesaGL>=1.7 mesaGLU>=1.7

yum install mesa-libGLU mesa-libGLU-devel

GLEW >=2.0 building from source

Linux without EGL

If you don't want to use EGL, just comment out this line in vf_gltransition.c

#ifndef __APPLE__
# define GL_TRANSITION_USING_EGL // remove this line if you don't want to use EGL
#endif

GLEW

yum install glew glew-devel

glfw building from source

On headless environments without EGL, you'll also need to install xvfb.

pkg install xorg-vfbserver (FreeBSD)
apt install xvfb (Ubuntu)

Xvfb :1 -screen 0 1280x1024x16
export DISPLAY=:99

Building ffmpeg

git clone http://source.ffmpeg.org/git/ffmpeg.git ffmpeg
cd ffmpeg

cp ~/ffmpeg-gl-transition/vf_gltransition.c libavfilter/
git apply ~/ffmpeg-gl-transition/ffmpeg.diff

Non-EGL:

./configure --enable-libx264 --enable-gpl --enable-opengl \
            --enable-filter=gltransition --extra-libs='-lGLEW -lglfw'
make

EGL:

./configure ... --extra-libs='-lGLEW -lEGL'
make

Notes:

  • See the official ffmpeg compilation guide for help building ffmpeg on your platform. I've thoroughly tested this filter on macOS Sierra (macOS compilation guide).
  • Depending on your platform, there may be slight variations in how GLEW and glfw are named (with regard to --extra-libs, above), e.g. -lglew or -lglfw3 - check pkg-config.
  • The above example builds a minimal ffmpeg binary with libx264, but there's nothing codec-specific about the filter itself, so feel free to add or remove any of ffmpeg's bells and whistles.

Here's an example of a more full-featured build configuration:

./configure --prefix=/usr/local --enable-gpl --enable-nonfree --enable-libass \
  --enable-libfdk-aac --enable-libfreetype --enable-libmp3lame --enable-libtheora \
  --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 \
  --enable-libopus --enable-libxvid \
  --enable-opengl --enable-filter=gltransition --extra-libs='-lGLEW -lglfw'

You can verify that the gltransition filter is available via:

./ffmpeg -v 0 -filters | grep gltransition

Usage

Default Options:

./ffmpeg -i media/0.mp4 -i media/1.mp4 -filter_complex gltransition -y out.mp4

Custom Options:

./ffmpeg -i media/0.mp4 -i media/1.mp4 -filter_complex "gltransition=duration=4:offset=1.5:source=crosswarp.glsl" -y out.mp4

Params:

  • duration (optional float; default=1) length in seconds for the transition to last. Any frames outputted after this point will pass through the second video stream untouched.
  • offset (optional float; default=0) length in seconds to wait before beginning the transition. Any frames outputted before this point will pass through the first video stream untouched.
  • source (optional string; defaults to a basic crossfade transition) path to the gl-transition source file. This text file must be a valid gl-transition filter, exposing a transition function. See here for a list of glsl source transitions or the gallery for a visual list of examples.

Note that both duration and offset are relative to the start of this filter invocation, not global time values.

Examples

See concat.sh for a more complex example of concatenating three mp4s together with unique transitions between them.

For any non-trivial concatenation, you'll likely want to make a filter chain comprised of split, trim + setpts, and concat (with the v for video option) filters in addition to the gltransition filter itself. If you want to concat audio streams in the same pass, you'll need to additionally make use of the asplit, atrim + asetpts, and concat (with the a for audio option) filters.

There is no limit to the number of video streams you can concat together in one filter graph, but beyond a couple of streams, you'll likely want to write a wrapper script as the required stream preprocessing gets unwieldly very fast. See here for a more understandable example of concatenating two, 5-second videos together with a 1s fade inbetween. See here for a more complex example including audio stream concatenation.

Todo

  • simplify filter graph required to achieve multi-file concat in concat.sh
  • support default values for gl-transition uniforms
    • this is the reason a lot of gl-transitions currently appear to not function properly
  • remove restriction that both inputs be the same size
  • support general gl-transition uniforms
  • add gl-transition logic for aspect ratios and resize mode
  • transpile webgl glsl to opengl glsl via angle

Related

  • ffmpeg-concat - Concats a list of videos together using ffmpeg with sexy OpenGL transitions. This module and CLI are easier to use than the lower-level custom filter provided by this library.
  • Excellent example ffmpeg filter for applying a GLSL shader to each frame of a video stream. Related blog post and follow-up post.
  • gl-transitions and original github issue.
  • Similar project that attempts to use frei0r and MLT instead of extending ffmpeg directly.
  • FFmpeg filter guide.
  • awesome-ffmpeg - A curated list of awesome ffmpeg resources with a focus on JavaScript.

License

MIT © Travis Fischer

Support my open source work by following me on twitter twitter

More Repositories

1

chatgpt-api

Node.js client for the official ChatGPT API. 🔥
TypeScript
12,733
star
2

create-react-library

CLI for creating reusable react libraries.
JavaScript
4,783
star
3

nextjs-notion-starter-kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel.
TypeScript
4,211
star
4

awesome-puppeteer

A curated list of awesome puppeteer resources.
2,073
star
5

react-particle-effect-button

Bursting particle effect buttons for React 🎉
JavaScript
1,463
star
6

awesome-ffmpeg

👻 A curated list of awesome FFmpeg resources.
847
star
7

bing-chat

Node.js client for Bing's new AI-powered search. It's like ChatGPT on steroids 🔥
TypeScript
745
star
8

ffmpeg-concat

Concats a list of videos together using ffmpeg with sexy OpenGL transitions.
JavaScript
721
star
9

chatgpt-twitter-bot

Twitter bot powered by OpenAI's ChatGPT API. It's aliveeeee 🤖
TypeScript
629
star
10

functional-typescript

TypeScript standard for rock solid serverless functions.
TypeScript
628
star
11

chatgpt-plugin-ts

Everything you need to start building ChatGPT Plugins in JS/TS 🔥
TypeScript
546
star
12

OpenOpenAI

Self-hosted version of OpenAI’s new stateful Assistants API
TypeScript
509
star
13

react-static-tweets

Extremely fast static renderer for tweets.
TypeScript
506
star
14

yt-semantic-search

OpenAI-powered semantic search for any YouTube playlist – featuring the All-In Podcast. 💪
TypeScript
423
star
15

twitter-search

Instantly search across your entire Twitter history with a beautiful UI powered by Algolia.
TypeScript
347
star
16

check-links

Robustly checks an array of URLs for liveness. Extremely fast ⚡
JavaScript
324
star
17

react-modern-library-boilerplate

Boilerplate for publishing modern React modules with Rollup
JavaScript
324
star
18

puppeteer-lottie

Renders Lottie animations via Puppeteer to image, GIF, or MP4.
JavaScript
309
star
19

snapchat

NodeJS client for the unofficial Snapchat API
JavaScript
265
star
20

lqip-modern

Modern approach to Low Quality Image Placeholders (LQIP) using webp and sharp.
JavaScript
221
star
21

sms-number-verifier

Allows you to spoof SMS number verification.
JavaScript
173
star
22

puppeteer-email

Email automation driven by headless chrome.
JavaScript
149
star
23

ffmpeg-generate-video-preview

Generates an attractive image strip or GIF preview from a video.
JavaScript
138
star
24

random

The most random module on npm
TypeScript
128
star
25

scikit-learn-ts

Powerful machine learning library for Node.js – uses Python's scikit-learn under the hood.
TypeScript
125
star
26

react-background-slideshow

Sexy tiled background slideshow for React 🔥
JavaScript
111
star
27

captcha-solver

Library and CLI for automating captcha verification across multiple providers.
JavaScript
107
star
28

chatgpt-well-known-plugin-finder

Checks Alexa's top 1M websites for the presence of OpenAI's new .well-known/ai-plugin.json files
TypeScript
106
star
29

puppeteer-lottie-cli

CLI for rendering Lottie animations via Puppeteer to image, GIF, or MP4.
JavaScript
106
star
30

react-suspense-polyfill

Polyfill for the React Suspense API 😮
JavaScript
100
star
31

puppeteer-instagram

Instagram automation driven by headless chrome.
JavaScript
100
star
32

chatgpt-hackers

Join thousands of other developers, researchers, and AI enthusiasts who are building at the cutting edge of AI ✨
TypeScript
97
star
33

react-starfield-animation

✨ Canvas-based starfield animation for React.
JavaScript
96
star
34

react-mp3-recorder

Microphone recorder for React that captures mp3 audio 🎵
JavaScript
84
star
35

react-particle-animation

✨Canvas-based particle animation for React.
JavaScript
81
star
36

react-fluid-gallery

Fluid media gallery for React powered by WebGL.
JavaScript
75
star
37

primitive

Reproduce images from geometric primitives.
JavaScript
74
star
38

npm-es-modules

Breakdown of 7 different ways to use ES modules with npm today.
JavaScript
69
star
39

react-fluid-animation

Fluid media animation for React powered by WebGL.
JavaScript
68
star
40

react-before-after-slider

A sexy image comparison slider for React.
JavaScript
62
star
41

ffmpeg-extract-frames

Extracts frames from a video using ffmpeg.
JavaScript
60
star
42

puppeteer-render-text

Robust text renderer using headless chrome.
JavaScript
59
star
43

text-summarization

Automagically generates summaries from html or text.
JavaScript
54
star
44

kwote

Create beautiful quotes that capture your attention.
TypeScript
49
star
45

next-movie

Pick your next movie using Next.js 13
TypeScript
45
star
46

bens-bites-ai-search

AI search for all the best resources in AI – powered by Ben's Bites 💯
TypeScript
45
star
47

ffmpeg-cli-flags

A comprehensive list of all ffmpeg commandline flags.
44
star
48

twitter-feed-algorithm

TypeScript code exploring what an open source version of Twitter's algorithmic feed might look like.
TypeScript
42
star
49

scrape-github-trending

Tutorial for web scraping / crawling with Node.js.
JavaScript
42
star
50

clubhouse

Clubhouse API client and social graph crawler for TypeScript.
TypeScript
41
star
51

populate-movies

Populates a high quality database of movies from TMDB, IMDB, and Rotten Tomatoes.
TypeScript
36
star
52

react-fake-tweet

React renderer for tweets.
JavaScript
33
star
53

ip-set

Efficient mutable set data structure optimized for use with IPv4 and IPv6 addresses. The primary use case is for working with potentially large IP blacklists.
JavaScript
33
star
54

cf-image-proxy

Image proxy and CDN for CF workers. Simple, extremely fast, and free.
JavaScript
31
star
55

node-compat-require

Easily allow your Node program to run in a target node version range to maximize compatibility.
JavaScript
22
star
56

avp

Audio Visual Playground, or Alien vs Predator? You decide...
TypeScript
22
star
57

p-cache

Decorator to memoize the results of async functions via lru-cache.
JavaScript
22
star
58

parse-otp-message

Parses OTP messages for a verification code and service provider.
JavaScript
21
star
59

spotify-to-twitter

Example of how to create your own automated Twitter account that tweets tracks from a Spotify playlist.
JavaScript
21
star
60

gif-extract-frames

Extracts frames from a GIF including inter-frame coalescing.
JavaScript
21
star
61

puppeteer-instaquote

Use Puppeteer to create snazzy Instagram-like quote images and memes
JavaScript
20
star
62

async-await-parallel

Node.js module with simple concurrency control for awaiting an array of async results
JavaScript
20
star
63

internet-diet

Chrome extension to remove unhealthy foods from the web.
HTML
18
star
64

react-block-image

React replacement for img with more control + fallback support.
JavaScript
18
star
65

react-docgen-props-table

Beautiful Props Table for React Docgen.
JavaScript
17
star
66

lexica-api

API wrapper around Lexica.art for searching Stable Diffusion images.
TypeScript
16
star
67

puppeteer-github

GitHub automation driven by headless chrome.
JavaScript
16
star
68

google-waitlist

Sign up for Google's latest AI-powered waitlist today!
TypeScript
16
star
69

ffmpeg-extract-frame

Extracts a single frame from a video.
JavaScript
15
star
70

compare-tokenizers

A test suite comparing Node.js BPE tokenizers for use with AI models.
TypeScript
15
star
71

ffmpeg-extract-audio

Extracts an audio stream from a media file.
JavaScript
14
star
72

replicate-api

Node.js wrapper around Replicate's ML API (including dreambooth + stable diffusion).
TypeScript
14
star
73

Gravity-spritekit

iOS n-body simulation visualized with metaballs. Physics and graphics provided by SpriteKit.
Swift
14
star
74

getsmscode

API client for getsmscode.com
JavaScript
13
star
75

nala

In loving memory of Nala Das Kitten; 2010 - 2023. 💕
TypeScript
13
star
76

ffmpeg-probe

Wrapper around ffprobe for getting info about media files.
JavaScript
13
star
77

apple-april-fools-2023

Fake Apple AI product launch for April Fool's Day 2023.
TypeScript
13
star
78

ffmpeg-on-progress

Utility for robustly reporting progress with fluent-ffmpeg.
JavaScript
13
star
79

dissolve-generator

Cool 2D dissolve effect generator
JavaScript
13
star
80

abstract-object-storage

Collection of useful utilities for working with Google Cloud Storage.
JavaScript
12
star
81

Milton

C++ Rendering Framework w/ MLT, bidi path tracing, etc. and OpenGL Previews (undergrad thesis project from Brown '09)
12
star
82

koa2-mongoose-crud

Koa 2 CRUD middleware for Mongoose models.
JavaScript
11
star
83

get-mp3-duration

Computes the duration of an mp3 buffer in node or browser.
JavaScript
11
star
84

github-scraper

Misc scripts for scraping GitHub.
TypeScript
9
star
85

create-vue-library

JavaScript
9
star
86

warm-social-images

Simple CLI to warm the cache of social images in all pages from a sitemap.
JavaScript
9
star
87

primitive-cli

CLI to reproduce images from geometric primitives.
JavaScript
9
star
88

puppeteer-render-text-cli

CLI for rendering text with headless chrome.
JavaScript
9
star
89

github-is-starred-cli

CLI for checking if a user has starred a particular GitHub repo.
JavaScript
9
star
90

open-source

Keeping track of my various open source projects.
8
star
91

id-shortener

Efficient id / url shortener for NodeJS backed by pluggable storage defaulting to redis.
JavaScript
8
star
92

update-markdown-jsdoc

Updates a markdown document section with jsdoc documentation.
JavaScript
7
star
93

commit-emoji

Performs a git commit with a random emoji message. 😂 🤙 🚀
JavaScript
7
star
94

github-is-starred

Checks if a user has starred a particular GitHub repo.
JavaScript
7
star
95

puppeteer-github-cli

CLI for GitHub automation driven by headless chrome.
JavaScript
7
star
96

wahlburger

Get dem burgers
JavaScript
7
star
97

phash-im

Perceptual image hashing provided by imagemagick.
JavaScript
6
star
98

phash-gif

Perceptual GIF hashing for easily finding near-duplicate GIFs.
JavaScript
6
star
99

is-acronym

Determines whether a given string is a common English acronym.
JavaScript
5
star
100

react-springy-scroll

React utility that adds a physical springiness to elements on scroll.
JavaScript
5
star