Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improvements for blending functions such that bleeding with background clearColor is avoided #134

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from

Conversation

munwaikong
Copy link
Contributor

No description provided.

Copy link
Contributor

@PTaylour PTaylour left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome,

Do you have a an example pipeline so I can make a regression test for this one?

@PTaylour
Copy link
Contributor

@munwaikong any update on this? Not essential, but I'd like to try and get tests in place for visible changes

@munwaikong
Copy link
Contributor Author

Hi yes - apologies for the delay.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Video Context Playground</title>
</head>
<body>
    <h4>EffectNode Test</h4>
    <canvas id="canvas" width="640" height="360"></canvas>
    <h4>CompositionNode Test</h4>
    <canvas id="canvas2" width="640" height="360"></canvas>
    <h4>Alpha Control</h4>
    <input id="timecontrol" type="range" min=0 max=100 />
    <section id="controls">
        <button type="button" id="play">Play</button>
        <button type="button" id="pause">Pause</button>
    </section>

    <script src="http://bbc.github.io/VideoContext/dist/videocontext.js"></script>
    <!-- <script src="../dist/videocontext.js"></script> -->
    <script>
        const canvas = document.getElementById(`canvas`);
        const timecontrol = document.getElementById(`timecontrol`);
        const playBtn = document.getElementById(`play`);
        const pauseBtn = document.getElementById(`pause`);

        const video1 = `http://bbc.github.io/VideoContext/assets/introductions-rant.mp4`;

        <!-- EffectNode Test -->
        const vc = new VideoContext(canvas);

        const nodeA = vc.video(video1, 12);
        const nodeB = vc.video(video1, 14);

        nodeA.start(0);
        nodeA.stop(10);

        nodeB.start(0);
        nodeB.stop(10);

        const opacityEffectB = vc.effect(VideoContext.DEFINITIONS.OPACITY);
        opacityEffectB.opacity = 0.5;

        nodeB.connect(opacityEffectB);
        nodeA.connect(vc.destination);
        opacityEffectB.connect(vc.destination);

        <!-- CompositorNode Test -->

        const vc2 = new VideoContext(canvas2);

        const node2A = vc2.video(video1, 12);
        const node2B = vc2.video(video1, 14);

        node2A.start(0);
        node2A.stop(10);

        node2B.start(0);
        node2B.stop(10);

        const opacityEffect2B = vc2.effect(VideoContext.DEFINITIONS.OPACITY);
        opacityEffect2B.opacity = 0.5;

        node2B.connect(opacityEffect2B);

        const compositor2A = vc2.compositor(VideoContext.DEFINITIONS.COMBINE);

        node2A.connect(vc2.destination);
        opacityEffect2B.connect(compositor2A);

        compositor2A.connect(vc2.destination);

        // --

        playBtn.addEventListener(`click`, () => {vc.play();vc2.play();});
        pauseBtn.addEventListener(`click`, () => {vc.pause();vc2.play();});

        timecontrol.addEventListener(`input`, evt => {
            const val = evt.target.value;
            opacityEffectB.opacity = val / 100;
            opacityEffectB._render();
            opacityEffect2B.opacity = val / 100;
            opacityEffect2B._render();
        });
    </script>
</body>
</html>

Using that test page you can play with the slider to adjust the Opacity (EffectNode) from opacity 0->1. Notice that dip to dark when you change opacity which is not expected - this occurs however due to the opacity blending with the clearColor (rbga(0,0,0,0))

@munwaikong
Copy link
Contributor Author

@PTaylour did you manage to replicate and see the differences?

@PTaylour
Copy link
Contributor

PTaylour commented Feb 4, 2019

Apologies for the delay, I'm have a regression testing session right now. Shall check!

@PTaylour PTaylour self-assigned this Feb 4, 2019
@PTaylour
Copy link
Contributor

New and improved regression testing now merged. I'll have a go at writing a test for your case :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants