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

Extending Transitions #143

Closed munwaikong closed 5 years ago

munwaikong commented 5 years ago

Hey,

This issue is more for discussion rather than an issue. The currently defined transition Definitions.HORIZONTAL_WIPE is programmed to wipe left to right. If we wanted to extend this functionality to support other directions (right-to-left, top-to-bottom, bottom-to-top) I can think of doing so 2 ways:

  1. Duplicating the shaders and definitions and have Definitions.HORIZONTAL_WIPE_LTR and _RTL, _TTB, *_BTT
  2. Extending the properties of the shader and incorporate a 'mode' where mode=0 is LTR and mode=1 is RTL etc.

Thoughts on the above, or any other suggestions on ways to extend the transitions?

Thanks,

Mun

munwaikong commented 5 years ago

@PTaylour - can you update this with a label of "question"?

munwaikong commented 5 years ago

Another thing I'm implementing support for in transitions are single-sided transitions vs. double-sided transitions. Related to the same problem as direction, if every direction and single/double is a new shader, we'd end up with:

VideoContext.DEFINITIONS.WIPE_LEFTTORIGHT_SINGLESIDED
VideoContext.DEFINITIONS.WIPE_LEFTTORIGHT_DOUBLESIDED
VideoContext.DEFINITIONS.WIPE_RIGHTTOLEFT_SINGLESIDED
VideoContext.DEFINITIONS.WIPE_RIGHTTOLEFT_DOUBLESIDED
VideoContext.DEFINITIONS.WIPE_TOPTOBOTTOM_SINGLESIDED
VideoContext.DEFINITIONS.WIPE_TOPTOBOTTOM_DOUBLESIDED
...

Personally, I think it would be better if instead of the above, the direction and single/double mode is part of a single shader, and configured on the fly i.e.

transition = vc.transition(VideoContext.DEFINITIONS.SLIDE);
transition.direction = "left-to-right";
transition.singleSided = true;

Where transition.singleSided = true; is possible in GLSL, transition.direction = "left-to-right"; is not seeing as GLSL doesn't support char or string. therefore we'll have to resort to:

transition.direction = 0 // 0=left-to-right
// transition.direction = 1 // 1=right-to-left
...

Thoughts?

PTaylour commented 5 years ago

all sounding reasonable to me

PTaylour commented 5 years ago

@munwaikong did you end up adding a direction param for this example?