bbc / VideoContext

An experimental HTML5 & WebGL video composition and rendering API.
http://bbc.github.io/VideoContext/
Apache License 2.0
1.33k stars 157 forks source link

Dark colouring when using alpha transparency #125

Closed Sacharified closed 5 years ago

Sacharified commented 5 years ago

I have noticed some strange behaviour when using shaders with opacity and layering.

In the below example, I create 2 nodes using the same video, have them play at the same time, then apply an opacity shader to the "top" video. The outcome is that the video with opacity appears to be "blended" with black rather than transparency. This is especially apparent when using a transition node with a transparency effect like cross dissolve. I have just used an opacity shader here for the example.

const video1 = `video1.mp4`;
const vc = new VideoContext(canvas);

const nodeA = vc.video(video1);
const nodeB = vc.video(video1);

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

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

const compositorA = vc.compositor(VideoContext.DEFINITIONS.COMBINE);
const compositorB = vc.compositor(VideoContext.DEFINITIONS.COMBINE);

compositorA.connect(vc.destination);
compositorB.connect(vc.destination);

// makes the issue more easily visible, can be omitted
VideoContext.DEFINITIONS.OPACITY.properties.opacity.value = 0.75;
VideoContext.DEFINITIONS.AAF_VIDEO_SCALE.properties.scaleX.value = 0.5;
VideoContext.DEFINITIONS.AAF_VIDEO_SCALE.properties.scaleY.value = 0.5;
const scaleEffect = vc.effect(VideoContext.DEFINITIONS.AAF_VIDEO_SCALE);
scaleEffect.connect(compositorB);

const opacityEffect = vc.effect(VideoContext.DEFINITIONS.OPACITY);
opacityEffect.connect(scaleEffect);

nodeA.connect(opacityEffect);
nodeB.connect(compositorA);

This results in the following output: badblend

As you can see, the small video with opacity appears very dark.

Now if you switch those last 2 lines around:

nodeB.connect(compositorA);
nodeA.connect(opacityEffect);

correctblend

This is still a bit "off" but is much closer to the desired effect.

So there are 2 issues here:

  1. The order in which these nodes are connected should not impact the output of the opacity shader.
  2. The output of shaders with alpha transparency is weird, regardless of the order of node connection.