examples/transition-demo3d.qml

This is an example MLT transition implemented in QML with QtQuick3D. It animates the camera along a path from the source video texture to the target video texture. It also textures a string title parameter onto a surface in the model. The rendered video can be viewed here demo/mlt/mlt_transition_demo3d_qml

import Qt 4.7
import Qt3D 1.0
import org.webvfx.WebVfx 1.0


Rectangle {
    // If Viewport has a parent, it relies on the parent to paint the background
    color: "black"

    Component.onCompleted: {
        webvfx.imageTypeMap = {
            "sourceImage": webvfx.SourceImageType,
            "targetImage": webvfx.TargetImageType
        };
        webvfx.readyRender(true);
    }

    TextTexture {
        id: textTexture
        text: webvfx.getStringParameter("title")
        color: "white"
        font.pixelSize: height / 2
        // Adjust by quad aspect ratio
        width: viewport.width
        height: width * 0.75
    }

    Viewport {
        id: viewport
        anchors.fill: parent

        BlenderItem3D {
            mesh: Mesh {
                source: "logo-transition.obj"
            }
            cullFaces: "CullBackFaces"

            Item3D {
                meshNode: "SourceCube"
                effect: Effect {
                    id: sourceImage
                }
            }
            Item3D {
                meshNode: "TargetCube"
                effect: Effect {
                    id: targetImage
                }
            }
            Item3D {
                meshNode: "TextQuad"
                effect: Effect {
                    // Texture the quad with the image rendered by the TextTexture
                    textureImage: textTexture.textureImage
                }
            }
        }

        Connections {
            target: webvfx
            onRenderRequested: {
                sourceImage.textureImage = webvfx.getImage("sourceImage");
                targetImage.textureImage = webvfx.getImage("targetImage");
            }
        }

        lightModel: LightModel {
            ambientSceneColor: Qt.rgba(0.8, 0.8, 0.8, 1)
        }
        light: Light {
            position: Qt.vector3d(3.382, -5.423, 8.165)
        }

        camera: AnimatedCamera {
            nearPlane: 0.100000
            farPlane: 100.000000
            animationData: {
                "horizontalFOV": 1.1344645023345947,
                "locationX": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                -0.6695977449417114
                            ],
                            [
                                4.732880592346191,
                                -0.6695977449417114
                            ],
                            [
                                6.267542839050293,
                                -0.6695977449417114
                            ],
                            [
                                9.0,
                                -0.6695977449417114
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                -0.6695977449417114
                            ],
                            [
                                22.66228675842285,
                                -0.6695977449417114
                            ],
                            [
                                37.064186096191406,
                                0.03888458013534546
                            ],
                            [
                                55.0,
                                0.9496996402740479
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                0.9496996402740479
                            ],
                            [
                                64.74772644042969,
                                1.4447078704833984
                            ],
                            [
                                70.35198974609375,
                                1.1325734853744507
                            ],
                            [
                                80.0,
                                2.6087424755096436
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                2.6087424755096436
                            ],
                            [
                                84.24512481689453,
                                3.2582569122314453
                            ],
                            [
                                86.73597717285156,
                                5.244816303253174
                            ],
                            [
                                91.0,
                                5.244816303253174
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                5.244816303253174
                            ],
                            [
                                94.4887466430664,
                                5.244816303253174
                            ],
                            [
                                97.26712036132812,
                                5.244816303253174
                            ],
                            [
                                100.0,
                                5.244816303253174
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ],
                "locationY": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                -1.043081283569336e-07
                            ],
                            [
                                4.732880592346191,
                                -1.043081283569336e-07
                            ],
                            [
                                6.267295837402344,
                                -1.043081283569336e-07
                            ],
                            [
                                9.0,
                                -1.043081283569336e-07
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                -1.043081283569336e-07
                            ],
                            [
                                22.663522720336914,
                                -1.043081283569336e-07
                            ],
                            [
                                37.08250427246094,
                                -1.043081283569336e-07
                            ],
                            [
                                55.0,
                                -1.0438593626022339
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                -1.0438593626022339
                            ],
                            [
                                64.74330139160156,
                                -1.6114966869354248
                            ],
                            [
                                70.27999877929688,
                                -2.993042469024658
                            ],
                            [
                                80.0,
                                -3.878926992416382
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                -3.878926992416382
                            ],
                            [
                                84.27680206298828,
                                -4.268716335296631
                            ],
                            [
                                86.70716094970703,
                                -4.636585235595703
                            ],
                            [
                                91.0,
                                -4.636585235595703
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                -4.636585235595703
                            ],
                            [
                                94.51232147216797,
                                -4.636585235595703
                            ],
                            [
                                97.26712036132812,
                                -3.5114946365356445
                            ],
                            [
                                100.0,
                                -3.5114946365356445
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ],
                "locationZ": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                1.4418106079101562
                            ],
                            [
                                4.727320194244385,
                                1.4418106079101562
                            ],
                            [
                                6.268181800842285,
                                1.8175145387649536
                            ],
                            [
                                9.0,
                                1.8890141248703003
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                1.8890141248703003
                            ],
                            [
                                22.6556396484375,
                                2.2464215755462646
                            ],
                            [
                                37.046722412109375,
                                1.8890141248703003
                            ],
                            [
                                55.0,
                                2.2464215755462646
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                2.2464215755462646
                            ],
                            [
                                64.75822448730469,
                                2.4406847953796387
                            ],
                            [
                                70.3200454711914,
                                3.306630849838257
                            ],
                            [
                                80.0,
                                3.306630849838257
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                3.306630849838257
                            ],
                            [
                                84.2591781616211,
                                3.306630849838257
                            ],
                            [
                                86.753173828125,
                                -3.808846031461144e-06
                            ],
                            [
                                91.0,
                                -3.808846031461144e-06
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                -3.808846031461144e-06
                            ],
                            [
                                94.47467803955078,
                                -3.808846031461144e-06
                            ],
                            [
                                97.26712036132812,
                                -2.954939191113226e-06
                            ],
                            [
                                100.0,
                                -2.954939191113226e-06
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ],
                "range": [
                    2.0,
                    100.0
                ],
                "rotationX": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                0.0
                            ],
                            [
                                4.732880592346191,
                                0.0
                            ],
                            [
                                6.267158508300781,
                                0.0
                            ],
                            [
                                9.0,
                                1.346346430305759e-32
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                1.346346430305759e-32
                            ],
                            [
                                22.664207458496094,
                                8.078078875708142e-32
                            ],
                            [
                                37.04277038574219,
                                0.24600839614868164
                            ],
                            [
                                55.0,
                                0.4932013154029846
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                0.4932013154029846
                            ],
                            [
                                64.75936126708984,
                                0.6275452971458435
                            ],
                            [
                                70.24685668945312,
                                0.5400440692901611
                            ],
                            [
                                80.0,
                                0.9134396910667419
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                0.9134396910667419
                            ],
                            [
                                84.2913818359375,
                                1.0777337551116943
                            ],
                            [
                                86.70738983154297,
                                1.570797085762024
                            ],
                            [
                                91.0,
                                1.570797085762024
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                1.570797085762024
                            ],
                            [
                                94.51213836669922,
                                1.570797085762024
                            ],
                            [
                                97.26712036132812,
                                1.570797085762024
                            ],
                            [
                                100.0,
                                1.570797085762024
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ],
                "rotationY": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                0.0
                            ],
                            [
                                4.732880592346191,
                                0.0
                            ],
                            [
                                6.267126083374023,
                                0.0
                            ],
                            [
                                9.0,
                                0.0
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                0.0
                            ],
                            [
                                22.664369583129883,
                                0.0
                            ],
                            [
                                37.041099548339844,
                                -0.20441915094852448
                            ],
                            [
                                55.0,
                                -0.20441915094852448
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                -0.20441915094852448
                            ],
                            [
                                64.76026916503906,
                                -0.20441915094852448
                            ],
                            [
                                70.23979187011719,
                                -1.3907744005337008e-06
                            ],
                            [
                                80.0,
                                1.0190848485910983e-22
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                1.0190848485910983e-22
                            ],
                            [
                                84.29448699951172,
                                6.119400381976448e-07
                            ],
                            [
                                86.70547485351562,
                                6.119400381976448e-07
                            ],
                            [
                                91.0,
                                6.119400381976448e-07
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                6.119400381976448e-07
                            ],
                            [
                                94.51370239257812,
                                6.119400381976448e-07
                            ],
                            [
                                97.26712036132812,
                                6.119400381976448e-07
                            ],
                            [
                                100.0,
                                6.119400381976448e-07
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ],
                "rotationZ": [
                    {
                        "bezierPoints": [
                            [
                                2.0,
                                -5.470316182254464e-07
                            ],
                            [
                                4.732880592346191,
                                -5.470316182254464e-07
                            ],
                            [
                                6.267121315002441,
                                -5.470316182254464e-07
                            ],
                            [
                                9.0,
                                -5.470316182254464e-07
                            ]
                        ],
                        "range": [
                            2.0,
                            9.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                9.0,
                                -5.470316182254464e-07
                            ],
                            [
                                22.664392471313477,
                                -5.470316182254464e-07
                            ],
                            [
                                37.04107666015625,
                                -0.10868355631828308
                            ],
                            [
                                55.0,
                                -0.10868355631828308
                            ]
                        ],
                        "range": [
                            9.0,
                            55.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                55.0,
                                -0.10868355631828308
                            ],
                            [
                                64.76028442382812,
                                -0.10868355631828308
                            ],
                            [
                                70.23973846435547,
                                -1.1030791711164056e-06
                            ],
                            [
                                80.0,
                                -3.784441844345565e-07
                            ]
                        ],
                        "range": [
                            55.0,
                            80.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                80.0,
                                -3.784441844345565e-07
                            ],
                            [
                                84.29451751708984,
                                -5.9604616353681195e-08
                            ],
                            [
                                86.70547485351562,
                                -5.960463411724959e-08
                            ],
                            [
                                91.0,
                                -5.9604616353681195e-08
                            ]
                        ],
                        "range": [
                            80.0,
                            91.0
                        ]
                    },
                    {
                        "bezierPoints": [
                            [
                                91.0,
                                -5.9604616353681195e-08
                            ],
                            [
                                94.51370239257812,
                                -5.960460214282648e-08
                            ],
                            [
                                97.26712036132812,
                                -5.960460214282648e-08
                            ],
                            [
                                100.0,
                                -5.960460214282648e-08
                            ]
                        ],
                        "range": [
                            91.0,
                            100.0
                        ]
                    }
                ]
            }
        }
    }
}