editly
editly copied to clipboard
mifi
Simple filtering
- LUT
- Color filter GLSL
- blending layers https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
- reverse clip
- crop
The CLI could give warnings if the input files have different color space.
https://youtu.be/DGY14ygjpLU?t=81
I'm not too experienced with color spaces, but we would need to figure out how to get this data from ffprobe
https://trac.ffmpeg.org/wiki/colorspace https://kdenlive.org/en/project/color-hell-ffmpeg-transcoding-and-preserving-bt-601/
for me colorspace is very low priority. not many consumer-grade cameras record that information. but it is an interesting problem space.
I think more central to editly is the compositing features: https://stackoverflow.com/questions/45869889/ffmpeg-move-overlay-from-point-a-to-b-to-c-to-d
maybe some sort of automatic color enhancement or passing through ffmpeg options for filters would be more beneficial to the average person than LUT conversion
for example, desaturate:
-vf hue=s=0
you can get colorspace like this:
ffprobe -v quiet -print_format json -show_format -show_streams videofile.mp4 | jq .streams[].color_space
I think more central to editly is the compositing features: https://stackoverflow.com/questions/45869889/ffmpeg-move-overlay-from-point-a-to-b-to-c-to-d
I have been experimenting with allowing compositing of arbitrary layers. I made a simple implementation which would allow separately filtering and scaling layers, however rendering became a lot slower than it is now. Will have to research more.
maybe some sort of automatic color enhancement or passing through ffmpeg options for filters would be more beneficial to the average person than LUT conversion
Yea ffmpeg can do a lot, also LUT, but it is quite slow because software rendered. However with WebGL there are possibilities for higher performance LUT conversion and common image operations like brightness/contrast etc.
I think LUTs are getting more and more popular because so many "influencers" are selling their LUT packs and presets on instagram and youtube these days.
WebGL there are possibilities for higher performance LUT conversion and common image operations
this is way cool. I'm all for it because it should mean higher performance of image modification but still have the same quality. I wonder if any of this is relevant:
https://eklitzke.org/rendering-videos-from-opengl (the HTML5 video section)
https://discourse.threejs.org/t/attempting-to-make-universal-rendering-thingy-for-webgl-canvas2d-with-ffmpeg/11126 https://github.com/wonglok/rendering-garden/blob/master/src/encoder/vid.encoder.js https://github.com/wonglok/rendering-garden/blob/master/src/gl-api/graphics.js https://github.com/wonglok/rendering-garden/blob/master/src/gl-api/front-sdk.js https://github.com/wonglok/rendering-garden/blob/master/src/gl-api/adapter-front-end.js https://github.com/wonglok/rendering-garden/blob/master/src/gl-api/adapter-back-end.js
https://stackoverflow.com/questions/31499717/best-way-to-record-a-html-canvas-webgl-animation-server-side-into-a-video https://stackoverflow.com/questions/48011613/rendering-webgl-image-in-headless-chrome-without-a-gpu
I also found some cool things:
- https://gl-react-cookbook.surge.sh/blurvideo
- http://evanw.github.io/glfx.js/demo/
- http://fabricjs.com/image-filters
- https://github.com/couleurs/glsl-sharpen
woah glfx lens blur effect is really good. the perspective filter is really cool too even though the quality isn't very high it renders really quickly
Hi @mifi thanks so much for this awesome peace of art, the framework is really great! One question, I'd like to add vignette effect to a video, what is the best way to go about it? Thank you!
There is no vignette filter in editly, but it could possibly be achieved with an image containing a transparent SVG/PNG that has a vignette
I added an example: https://github.com/mifi/editly/blob/master/examples/vignette.json5