├── .gitignore
├── .gitmodules
├── LICENSE
├── README.md
├── all.pro
├── common.pri
├── demo
├── examples
│ ├── filter-banner.html
│ ├── filter-demo.html
│ ├── filter-demo.qml
│ ├── filter-plain.html
│ ├── logo-transition.blend
│ ├── logo-transition.mtl
│ ├── logo-transition.obj
│ ├── producer-demo.html
│ ├── transition-demo.html
│ ├── transition-demo3d.qml
│ ├── transition-shader-crosszoom.html
│ ├── transition-shader-glslio.html
│ ├── transition-shader-pagecurl.html
│ └── transitions.json
└── mlt
│ ├── blue.mlt
│ ├── consumer_av
│ ├── consumer_sdl
│ ├── green.mlt
│ ├── mlt_filter_banner_html
│ ├── mlt_filter_demo_html
│ ├── mlt_filter_demo_qml
│ ├── mlt_filter_plain_html
│ ├── mlt_producer_demo_html
│ ├── mlt_producer_plain_html
│ ├── mlt_transition_demo3d_qml
│ ├── mlt_transition_demo_html
│ ├── mlt_transition_shader_crosszoom_html
│ ├── mlt_transition_shader_glslio_html
│ ├── mlt_transition_shader_pagecurl_html
│ └── red.mlt
├── doc
├── Doxyfile
├── effects_3d.dox
├── effects_authoring.dox
├── examples.dox
├── footer.html
├── license.dox
├── logo.png
├── logo.xcf.gz
├── mainpage.dox
└── mlt.dox
├── mlt
├── factory.cpp
├── factory.h
├── mlt.pro
├── panzoom_producer.cpp
├── qmelt
│ ├── qmelt.cpp
│ └── qmelt.pro
├── service_locker.cpp
├── service_locker.h
├── service_manager.cpp
├── service_manager.h
├── webvfx_filter.cpp
├── webvfx_producer.cpp
└── webvfx_transition.cpp
├── tools
├── blender
│ └── addons
│ │ ├── io_anim_webvfx
│ │ ├── __init__.py
│ │ ├── export_webvfx.py
│ │ └── import_webvfx.py
│ │ └── space_view3d_camera_anim_webvfx.py
├── browser
│ ├── browser.cpp
│ ├── browser.h
│ ├── browser.pro
│ ├── browser.ui
│ └── main.cpp
├── js
│ └── webvfx.js
└── render
│ ├── render.cpp
│ └── render.pro
├── viewer
├── image_color.cpp
├── image_color.h
├── main.cpp
├── render_dialog.cpp
├── render_dialog.h
├── render_dialog.ui
├── viewer.cpp
├── viewer.h
├── viewer.pro
└── viewer.ui
└── webvfx
├── content.cpp
├── content.h
├── content_context.cpp
├── content_context.h
├── effects.cpp
├── effects.h
├── effects_impl.cpp
├── effects_impl.h
├── image.cpp
├── image.h
├── logger.cpp
├── logger.h
├── parameters.cpp
├── parameters.h
├── qml_content.cpp
├── qml_content.h
├── render_strategy.cpp
├── render_strategy.h
├── resources
├── org
│ └── webvfx
│ │ └── WebVfx
│ │ ├── AnimatedCamera.qml
│ │ ├── BlenderItem3D.qml
│ │ ├── TextTexture.qml
│ │ └── qmldir
├── resources.qrc
└── webvfx
│ └── scripts
│ ├── animation.js
│ ├── easing.js
│ ├── filterkit.js
│ ├── shaderkit.js
│ ├── threeworld.js
│ └── tracker.js
├── web_content.cpp
├── web_content.h
├── webvfx.cpp
├── webvfx.h
├── webvfx.pro
└── webvfx_mac.mm
/.gitignore:
--------------------------------------------------------------------------------
1 | Makefile
2 | Makefile.*
3 | debug
4 | release
5 | build
6 | doxydoc
7 |
--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "mlt/qmelt/mlt"]
2 | path = mlt/qmelt/mlt
3 | url = ../mlt.git
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2010 Hewlett-Packard Development Company, L.P. All rights reserved.
2 |
3 | Redistribution and use in source and binary forms, with or without
4 | modification, are permitted provided that the following conditions are
5 | met:
6 |
7 | * Redistributions of source code must retain the above copyright
8 | notice, this list of conditions and the following disclaimer.
9 | * Redistributions in binary form must reproduce the above
10 | copyright notice, this list of conditions and the following disclaimer
11 | in the documentation and/or other materials provided with the
12 | distribution.
13 | * Neither the name of Hewlett-Packard nor the names of its
14 | contributors may be used to endorse or promote products derived from
15 | this software without specific prior written permission.
16 |
17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
18 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
19 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
20 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
21 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
22 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
23 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
24 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
25 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # IMPORTANT
2 |
3 | THIS PROJECT IS DEPRECATED BY THE MLT TEAM AND NO LONGER MAINTAINED.
4 |
5 | The QtWebKit library it uses was deprecated by the Qt project since 2015. We are aware of the GitHub project to keep
6 | the library alive. However, we no longer want to maintain this sub-project due to minimal resources and lack of
7 | contribution. Also, the integration of QtWebKit into Qt 6 is uncertain.
8 |
9 | # Overview
10 |
11 | WebVfx is a video effects library that allows effects to be implemented using [WebKit HTML](http://trac.webkit.org/wiki/QtWebKit) or [Qt QML](http://doc.qt.io/qt-5/qmlapplications.html).
12 |
13 | ## Prerequisites
14 |
15 | You will need [Qt](http://qt-project.org/downloads/) installed (5.2 or later recommended). Qt includes QtWebKit and QML, but since v5.6, you need to [build QtWebKit](http://trac.webkit.org/wiki/QtWebKit#BuildInstructions) yourself.
16 | You may also want to build [Qt3D](http://doc.qt.io/qt-5/qt3d-index.html) - 3D extensions to QML. WebVfx includes support for Qt3D, and Qt include Qt3D as of v5.6.
17 |
18 | WebVfx includes an MLT service that exposes producers, filters and transitions implemented in WebVfx. Install [MLT Framework](https://www.mltframework.org/) 0.7.2 or greater to build the plugin.
19 |
20 | ## Building
21 |
22 | In the webvfx directory run `qmake -r PREFIX=/usr/local` and then `make install`. `PREFIX` determines where WebVfx will be installed. If MLT is installed in a non-standard location, you may need to set the `PKG_CONFIG_PATH` environment variable to where its pkgconfig file lives, e.g. `PKG_CONFIG_PATH=/usr/local/lib/pkgconfig`.
23 |
24 | The [MLT melt](https://www.mltframework.org/twiki/bin/view/MLT/MltMelt) command
25 | will not work with WebVfx on Windows or macOS because the Qt event loop must run
26 | on the main thread. If you set `MLT_SOURCE` to the root of your MLT source code
27 | directory, then a `qmelt` executable will be installed which behaves the same as
28 | `melt` but works with WebVfx on Windows or macOS. e.g. `qmake -r
29 | PREFIX=/usr/local MLT_SOURCE=~/Projects/mlt`.
30 | The MLT source is available as a git submodule to make this more convenient. If
31 | you checkout the git submodule, then it is detected and there is no need to set
32 | MLT_SOURCE.
33 |
34 | `make doxydoc` to generate the documentation using Doxygen.
35 | You can also `make uninstall`, `make clean` and `make distclean`.
36 |
37 | ## Demos
38 |
39 | See the [documentation](https://www.mltframework.org/doxygen/webvfx/) for examples.
40 |
41 | ## License
42 |
43 | Copyright (c) 2011 Hewlett-Packard Development Company, L.P. All rights reserved.
44 | Use of this source code is governed by a BSD-style license that can be
45 | found in the LICENSE file.
46 |
--------------------------------------------------------------------------------
/all.pro:
--------------------------------------------------------------------------------
1 | # Copyright (c) 2011 Hewlett-Packard Development Company, L.P. All rights reserved.
2 | # Use of this source code is governed by a BSD-style license that can be
3 | # found in the LICENSE file.
4 |
5 | isEmpty(PREFIX) {
6 | message("Install PREFIX not set, using default.")
7 | }
8 | isEqual(QT_MAJOR_VERSION, 5):cache()
9 | include(common.pri)
10 |
11 | !minQtVersion(5, 2, 0) {
12 | message("Cannot build WebVfx with Qt version $${QT_VERSION}.")
13 | error("Use at least Qt 5.2.0.")
14 | }
15 |
16 | TEMPLATE = subdirs
17 | CONFIG += ordered
18 |
19 | SUBDIRS += webvfx
20 | SUBDIRS += viewer
21 | SUBDIRS += tools/render
22 | SUBDIRS += tools/browser
23 |
24 | system(pkg-config --exists mlt-framework) {
25 | SUBDIRS += mlt
26 | mlt.depends = webvfx
27 | isEmpty(MLT_SOURCE) {
28 | warning("MLT_SOURCE not set, skipping qmelt. Set MLT_SOURCE to the MLT source code directory to build qmelt.")
29 | } else {
30 | SUBDIRS += mlt/qmelt
31 | }
32 | } else {
33 | warning("MLT framework not found, skipping MLT plugin. Need to set PKG_CONFIG_PATH environment variable?")
34 | }
35 |
36 | viewer.depends = webvfx
37 | render.depends = webvfx
38 |
39 | # Documentation
40 | doxydoc.target = doxydoc
41 | doxydoc.commands = echo PROJECT_NUMBER=`git describe --always --dirty` | cat - doc/Doxyfile | doxygen -
42 | doxydoc.depends = FORCE
43 | QMAKE_EXTRA_TARGETS += doxydoc
44 |
--------------------------------------------------------------------------------
/common.pri:
--------------------------------------------------------------------------------
1 | # Copyright (c) 2011 Hewlett-Packard Development Company, L.P. All rights reserved.
2 | # Use of this source code is governed by a BSD-style license that can be
3 | # found in the LICENSE file.
4 |
5 | isEmpty(PREFIX) {
6 | unix:PREFIX = /usr/local
7 | }
8 |
9 | CONFIG += warn_on debug_and_release
10 |
11 | CONFIG(debug, debug|release) {
12 | DESTDIR = $$PWD/build/debug
13 | } else {
14 | DESTDIR = $$PWD/build/release
15 | }
16 |
17 | OBJECTS_DIR = $$DESTDIR/.obj/$$TARGET
18 | MOC_DIR = $$DESTDIR/.moc/$$TARGET
19 | RCC_DIR = $$DESTDIR/.rcc/$$TARGET
20 | UI_DIR = $$DESTDIR/.ui/$$TARGET
21 |
22 | INCLUDEPATH += $$PWD
23 |
24 | exists(mlt/qmelt/mlt/README) {
25 | MLT_SOURCE = mlt
26 | }
27 |
28 | defineTest(minQtVersion) {
29 | maj = $$1
30 | min = $$2
31 | patch = $$3
32 | isEqual(QT_MAJOR_VERSION, $$maj) {
33 | isEqual(QT_MINOR_VERSION, $$min) {
34 | isEqual(QT_PATCH_VERSION, $$patch) {
35 | return(true)
36 | }
37 | greaterThan(QT_PATCH_VERSION, $$patch) {
38 | return(true)
39 | }
40 | }
41 | greaterThan(QT_MINOR_VERSION, $$min) {
42 | return(true)
43 | }
44 | }
45 | greaterThan(QT_MAJOR_VERSION, $$maj) {
46 | return(true)
47 | }
48 | return(false)
49 | }
50 |
--------------------------------------------------------------------------------
/demo/examples/filter-banner.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
34 |
35 |
36 |
37 |
93 |
94 |
95 |
96 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/demo/examples/filter-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/demo/examples/filter-demo.qml:
--------------------------------------------------------------------------------
1 | import QtQuick 2.0
2 |
3 | Rectangle {
4 | width: 576;
5 | height: 432
6 | color: "lightgray"
7 |
8 | Component.onCompleted: {
9 | webvfx.imageTypeMap = { "sourceImage" : webvfx.SourceImageType };
10 | webvfx.readyRender(true);
11 | }
12 |
13 | Image {
14 | id: image
15 | width: parent.width
16 | height: parent.height
17 | clip: true
18 | }
19 | Text {
20 | id: timeText
21 | anchors.verticalCenter: parent.verticalCenter
22 | anchors.horizontalCenter: parent.horizontalCenter
23 | font.pointSize: 24
24 | font.bold: true
25 | }
26 | Connections {
27 | target: webvfx
28 | onRenderRequested: {
29 | image.source = webvfx.getImageUrl("sourceImage");
30 | image.rotation = time * 360;
31 | timeText.text = "rotating " + Math.round(image.rotation);
32 | timeText.rotation = -time * 360;
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/demo/examples/filter-plain.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
21 |
22 |
23 | Plain HTML, does not call webvfx.readyRender
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/demo/examples/logo-transition.blend:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mltframework/webvfx/a61f116b966a43ec7cb28209e84a77a1701e4b47/demo/examples/logo-transition.blend
--------------------------------------------------------------------------------
/demo/examples/logo-transition.mtl:
--------------------------------------------------------------------------------
1 | # Blender MTL File: 'logo-transition.blend'
2 | # Material Count: 2
3 | newmtl Cube
4 | Ns 96.078431
5 | Ka 1.000000 1.000000 1.000000
6 | Kd 0.640000 0.640000 0.640000
7 | Ks 0.500000 0.500000 0.500000
8 | Ni 1.000000
9 | d 1.000000
10 | illum 2
11 |
12 |
13 | newmtl Material
14 | Ns 96.078431
15 | Ka 0.100000 0.100000 0.100000
16 | Kd 0.640000 0.283344 0.091671
17 | Ks 0.500000 0.500000 0.500000
18 | Ni 1.000000
19 | d 1.000000
20 | illum 2
21 |
22 |
23 |
--------------------------------------------------------------------------------
/demo/examples/producer-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
29 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/demo/examples/transition-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
32 |
77 |
78 |
79 |
80 |
81 |
82 | title
83 |
84 |
85 |
--------------------------------------------------------------------------------
/demo/examples/transition-shader-crosszoom.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 |
17 |
18 |
69 |
70 |
71 |
72 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
--------------------------------------------------------------------------------
/demo/examples/transition-shader-glslio.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 |
17 |
18 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/demo/examples/transition-shader-pagecurl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
16 |
17 |
18 |
58 |
59 |
60 |
66 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
--------------------------------------------------------------------------------
/demo/mlt/blue.mlt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | producer
5 | color
6 | blue
7 | 1
8 | #timecode#
9 |
10 | filter
11 | data_show
12 | 1
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/demo/mlt/consumer_av:
--------------------------------------------------------------------------------
1 | -consumer avformat target=\"${VFX_OUTPUT:-melt.mov}\" f=mov vcodec=rawvideo pix_fmt=uyvy422 vtag=yuvs an=1 rescale=lanczos frame_rate_num=30 frame_rate_den=1 width=640 height=360 display_aspect_num=640 display_aspect_den=360 progressive=1 sample_aspect_num=1 sample_aspect_den=1
2 |
--------------------------------------------------------------------------------
/demo/mlt/consumer_sdl:
--------------------------------------------------------------------------------
1 | -consumer sdl audio_off=1 frame_rate_num=30 frame_rate_den=1 width=640 height=360 display_aspect_num=640 display_aspect_den=360 progressive=1 sample_aspect_num=1 sample_aspect_den=1
2 |
--------------------------------------------------------------------------------
/demo/mlt/green.mlt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | producer
5 | color
6 | green
7 | 1
8 | #timecode#
9 |
10 | filter
11 | data_show
12 | 1
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_filter_banner_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=299 \
5 | -filter webvfx:../examples/filter-banner.html out=299 \
6 | Title="${VFX_TITLE:-WebVfx Banner Demo}" \
7 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
8 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_filter_demo_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=299 \
5 | -filter webvfx:../examples/filter-demo.html out=299 \
6 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
7 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_filter_demo_qml:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=299 \
5 | -filter webvfx:../examples/filter-demo.qml out=299 \
6 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
7 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_filter_plain_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=299 \
5 | -filter webvfx:plain:../examples/filter-plain.html out=299 \
6 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
7 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_producer_demo_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose \
5 | -producer webvfx:../examples/producer-demo.html length=199 \
6 | title="${VFX_TITLE:-WebVfx Producer Demo}" \
7 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
8 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_producer_plain_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose \
5 | -producer webvfx:plain:http://bl.ocks.org/mbostock/raw/1353700/ length=199 \
6 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
7 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_transition_demo3d_qml:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=349 \
5 | -track -blank 69 \
6 | "${VFX_TARGET:-blue.mlt}" out=349 \
7 | -transition webvfx:../examples/transition-demo3d.qml in=70 out=349 \
8 | title="${VFX_TITLE:-Hello 3D!}" \
9 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
10 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_transition_demo_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=149 \
5 | -track -blank 59 \
6 | "${VFX_TARGET:-blue.mlt}" out=149 \
7 | -transition webvfx:../examples/transition-demo.html in=60 out=149 \
8 | producer.backgroundImage.resource="${VFX_BACKGROUND:-green.mlt}" \
9 | title="${VFX_TITLE:-Testing WebVfx Transition}" \
10 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
11 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_transition_shader_crosszoom_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=349 \
5 | -track -blank 69 \
6 | "${VFX_TARGET:-blue.mlt}" out=349 \
7 | -transition webvfx:../examples/transition-shader-crosszoom.html in=70 out=349 \
8 | Strength=0.3 \
9 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
10 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_transition_shader_glslio_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-qmelt}" -verbose "${VFX_SOURCE:-red.mlt}" out=349 \
5 | -track -blank 69 \
6 | "${VFX_TARGET:-blue.mlt}" out=349 \
7 | -transition webvfx:../examples/transition-shader-glslio.html in=70 out=349 \
8 | glslio_name=swap \
9 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
10 |
--------------------------------------------------------------------------------
/demo/mlt/mlt_transition_shader_pagecurl_html:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | export DISPLAY=${DISPLAY:-:0}
4 | "${VFX_MELT:-melt}" -verbose "${VFX_SOURCE:-red.mlt}" out=349 \
5 | -track -blank 69 \
6 | "${VFX_TARGET:-blue.mlt}" out=349 \
7 | -transition webvfx:../examples/transition-shader-pagecurl.html in=70 out=349 \
8 | $(eval echo $(< "${VFX_CONSUMER:-consumer_sdl}"))
9 |
--------------------------------------------------------------------------------
/demo/mlt/red.mlt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | producer
5 | color
6 | red
7 | 1
8 | #timecode#
9 |
10 | filter
11 | data_show
12 | 1
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/doc/effects_3d.dox:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2011 Hewlett-Packard Development Company, L.P. All rights reserved.
2 | // Use of this source code is governed by a BSD-style license that can be
3 | // found in the LICENSE file.
4 | /*!
5 | @page effects_3d 3D Effects Authoring
6 |
7 | QML is more interesting as a video effects technology when it
8 | is extended with
9 | QtQuick3D.
10 |
11 | Textured 3D scenes can be modeled in a tool like
12 | Blender.
13 | This can be exported as a Wavefront *.obj file which
14 | the QtQuick3D asset importer can load.
15 | Then frames of video can be applied as textures to named pieces of the model,
16 | while the camera view is animated for the duration of the effect.
17 |
18 | If your QML imports the @c org.webvfx.WebVfx namespace, this will
19 | make available some additional useful QML elements.
20 | @code
21 | import org.webvfx.WebVfx 1.0
22 | @endcode
23 |
24 | @li @c BlenderItem - this is an
25 | @c Item3D
26 | that applies a coordinate system
27 | transformation to convert from Blenders coordinate system to QtQuick3D.
28 | If the mesh was exported from Blender, you should load it inside
29 | a @c BlenderItem instead of an ordinary @c Item3D.
30 | @li @c AnimatedCamera - this is a @c Camera
31 | that supports an additional @c animationData property.
32 | This property should be set to the JSON camera path data exported
33 | by the Blender addon in @c tools/blender/webvfx-camera.py
34 | @li @c TextTexture - this is a @c Text
35 | element that renders itself to an image which can then be used
36 | as a 3D texture. The texture image is accessed using the @c textureImage
37 | property.
38 |
39 | See @ref examples/transition-demo3d.qml "demo/examples/transition-demo3d.qml"
40 | for an example.
41 | */
--------------------------------------------------------------------------------
/doc/effects_authoring.dox:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2011 Hewlett-Packard Development Company, L.P. All rights reserved.
2 | // Use of this source code is governed by a BSD-style license that can be
3 | // found in the LICENSE file.
4 | /*!
5 | @page effects_authoring Effects Authoring
6 |
7 | %WebVfx supports both @ref qml_effects_authoring and
8 | @ref web_effects_authoring for developing video effects.
9 | Both have a lot in common.
10 | %WebVfx loads the effect content (HTML or QML) and exposes a
11 | JavaScript context object named @c webvfx to the effect implementation.
12 |
13 | If the effect will need to access frames of video,
14 | it must set the @c webvfx.imageTypeMap property to a map
15 | describing the names it will use for each video source.
16 |
17 | @anchor image_types
18 | Each name should be mapped to one of the enumerations:
19 |
20 | @li @c webvfx.SourceImageType
21 | Indicates the image name is the source image of a transition
22 | (the image being transitioned from), or the primary image of a filter.
23 | @li @c webvfx.TargetImageType
24 | Indicates the image name is the target image of a transition
25 | (the image being transitioned to).
26 | @li @c webvfx.ExtraImageType
27 | Indicates the image name is an extra asset.
28 | There can be multiple image names with this type.
29 |
30 | For example:
31 | @code
32 | webvfx.imageTypeMap = { "sourceImage" : webvfx.SourceImageType,
33 | "targetImage" : webvfx.TargetImageType }
34 | @endcode
35 |
36 | The effect can request additional named parameters as part of initialization
37 | by calling @c webvfx.getStringParameter(name) or
38 | @c webvfx.getNumberParameter(name)
39 |
40 | The effect must connect the @c webvfx.renderRequested(time) signal.
41 | See @ref qml_effects_authoring or @ref web_effects_authoring for
42 | how to connect to this signal.
43 |
44 | When the effect has fully loaded (including any external resources
45 | being loaded asynchronously), it should call:
46 | @code
47 | webvfx.readyRender(true)
48 | @endcode
49 | If the load failed for any reason, pass @c false instead.
50 |
51 | Now %WebVfx will start rendering frames of video. It will pull the current
52 | frame from each of the video sources specified in @c webvfx.imageTypeMap
53 | then invoke the @c webvfx.renderRequested(time) signal.
54 | The time is a normalized time from 0 to 1.0 indicating the position
55 | in the transition or effect. The effect should then request any images
56 | it specified in @c webvfx.imageTypeMap each time it handles
57 | @c renderRequested. Images can be requested by calling
58 | @c webvfx.getImage(name) where @c name is the string image name specified
59 | in @c imageTypeMap. See @ref qml_effects_authoring or
60 | @ref web_effects_authoring for how to use the returned image object.
61 |
62 | The effect should configure itself using the @c time value and the
63 | images it retrieved before returning from the @c renderRequested slot.
64 |
65 |
66 | @section qml_effects_authoring QML Effects Authoring
67 |
68 | Effects can be authored using Qt Quick
69 | QML,
70 | a declarative UI language.
71 |
72 | The @c webvfx.renderRequested(time) signal can be handled using
73 | the QML
74 | Connections
75 | element with @c webvfx as the target.
76 | The @c time parameter is available to the code, e.g.:
77 | @code
78 | Connections {
79 | target: webvfx
80 | onRenderRequested: {
81 | effect.textureImage = webvfx.getImage("sourceImage");
82 | console.log("render: " + time);
83 | }
84 | }
85 | @endcode
86 |
87 | Video frame images retrieved via @c webvfx.getImage(name) are QImage
88 | objects. These can be assigned directly to some QML properties,
89 | e.g. Effect.textureImage.
90 | Other QML properties require an image URL - this can be retrived via
91 | @c webvfx.getImageUrl(name). It is more efficient to use the image
92 | directly when possible, instead of the URL.
93 |
94 | @sa See the QML demo
95 | @ref examples/filter-demo.qml "demo/examples/filter-demo.qml"
96 |
97 | QML is more interesting as a video effects technology when it
98 | is extended with 3D support - see @ref effects_3d.
99 |
100 | @section web_effects_authoring Web (HTML) Effects Authoring
101 |
102 | Effects can be authored using
103 | Qt WebKit Widgets
104 | HTML.
105 |
106 | The @c webvfx.renderRequested(time) signal can be handled by connecting
107 | it to a JavaScript function that takes a @c time parameter, using
108 | @c webvfx.renderRequested.connect:
109 | @code
110 | function render(time) {
111 | console.log("render: " + time);
112 | }
113 | webvfx.renderRequested.connect(render);
114 | @endcode
115 |
116 | @c webvfx.getImage(name) returns a JavaScript image proxy object
117 | for the current frame of video for the named image.
118 | This must be assigned to a DOM @c Image element so that it can be
119 | used in the HTML.
120 | The Qt WebKit Bridge
121 | provides a method @c assignToHTMLImageElement() to do this.
122 | You can assign to a new @c Image:
123 | @code
124 | var image = new Image()
125 | webvfx.getImage("sourceImage").assignToHTMLImageElement(image);
126 | @endcode
127 | or reference an existing one in the DOM
128 | @code
129 |
130 | [...]
131 | webvfx.getImage("sourceImage").assignToHTMLImageElement(document.getElementById("image"));
132 | @endcode
133 |
134 | @sa See the HTML demos:
135 | @li @ref examples/producer-demo.html "demo/examples/producer-demo.html"
136 | @li @ref examples/filter-demo.html "demo/examples/filter-demo.html"
137 | @li @ref examples/transition-demo.html "demo/examples/transition-demo.html"
138 |
139 |
140 | @subsection web_effects_shader_authoring WebGL GLSL Shader Effects Authoring
141 |
142 | %WebVfx includes a simple framework for implementing 2D GLSL fragment shader
143 | effects. This requires Qt WebKit to be compiled with WebGL enabled.
144 | A recent build should be used so the @c toImageData feature is available.
145 |
146 | The HTML effect should reference the @c shader.js JavaScript resource:
147 | @code
148 |
149 | @endcode
150 | The GLSL code can be placed in a @c script element:
151 | @code
152 |
153 | @endcode
154 |
155 | The GLSL must declare a varying @c texCoord which carries the texture
156 | coordinates from the vertex shader.
157 | @code
158 | varying vec2 texCoord;
159 | @endcode
160 | It should also declare any uniforms it uses.
161 | Uniform values can be set on each render cycle from JavaScript
162 | using @c updateUniform(name,value).
163 | If the uniform is a sampler2D texture, it should use the @c ImageData
164 | returned from the %WebVfx image object:
165 | @code
166 | shader.updateUniform("sourceTex", webvfx.getImage("sourceImage").toImageData());
167 | @endcode
168 |
169 | See the sample CrossZoom and PageCurl shaders for complete examples:
170 | @li @ref examples/transition-shader-crosszoom.html "demo/examples/transition-shader-crosszoom.html"
171 | @li @ref examples/transition-shader-pagecurl.html "demo/examples/transition-shader-pagecurl.html"
172 |
173 |
174 | @section effects_authoring_tools Tools
175 |
176 | A couple of simple tools are provided to help authoring effects.
177 |
178 | @c webvfx_browser (%WebVfx Browser.app on MacOS) is a trivial
179 | wrapper around QtWebKit. This makes it easy to visit any website
180 | and see if the version of QtWebKit you are using supports various
181 | HTML features.
182 |
183 | @c webvfx_viewer (%WebVfx Viewer.app on MacOS) allows you to
184 | load your HTML or QML effects and exposes the @c webvfx context object
185 | to them, and generates images that your effect can request using
186 | @c webvfx.getImage(name).
187 | It has a slider along the bottom that lets you control the rendering time
188 | (0..1.0) and a tab to let you set the rendering size.
189 | */
190 |
--------------------------------------------------------------------------------
/doc/examples.dox:
--------------------------------------------------------------------------------
1 | /*!
2 | @example examples/producer-demo.html
3 | This is an example MLT producer implemented in HTML.
4 | It renders a user settable @em title parameter
5 | with an animated CSS shadow effect.
6 | The rendered video can be viewed here
7 | demo/mlt/mlt_producer_demo_html.
8 |
9 | @example examples/filter-demo.html
10 | This is an example MLT filter implemented in HTML.
11 | It renders the video into an HTML canvas with a circle clip applied.
12 | The rendered video can be viewed here
13 | demo/mlt/mlt_filter_demo_html.
14 |
15 | @example examples/transition-demo.html
16 | This is an example MLT transition implemented in HTML.
17 | It uses all three @ref image_types "image types"
18 | and a string @em title parameter.
19 | The rendered video can be viewed here
20 | demo/mlt/mlt_transition_demo_html
21 |
22 | @example examples/transition-shader-crosszoom.html
23 | This is an example MLT transition implemented in HTML.
24 | It uses the %WebVfx WebGL shader support framework to implement
25 | a 2D transition using GLSL.
26 | The rendered video can be viewed here
27 | demo/mlt/mlt_transition_shader_crosszoom_html
28 |
29 | @example examples/transition-shader-pagecurl.html
30 | This is an example MLT transition implemented in HTML.
31 | It uses the %WebVfx WebGL shader support framework to implement
32 | a 2D page curl transition using GLSL.
33 | The rendered video can be viewed here
34 | demo/mlt/mlt_transition_shader_pagecurl_html
35 |
36 | @example examples/filter-demo.qml
37 | This is an example MLT filter implemented in QML.
38 | It rotates the video in one direction while rotating
39 | some changing text in the other direction.
40 | The rendered video can be viewed here
41 | demo/mlt/mlt_filter_demo_qml
42 |
43 | @example examples/transition-demo3d.qml
44 | This is an example MLT transition implemented in QML with QtQuick3D.
45 | It animates the camera along a path from the source video texture
46 | to the target video texture.
47 | It also textures a string @em title parameter onto a surface in the model.
48 | The rendered video can be viewed here
49 | demo/mlt/mlt_transition_demo3d_qml
50 |
51 | */
52 |
--------------------------------------------------------------------------------
/doc/footer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |