Transition effects

[fernandojsg]

I've been thinking on how to manage transitions like for example crossfade or so on in frame.js, I think it's an enough cool feature to be easy to use instead of ending using a lot of flash everywhere to change between scenes :)

As frame.js is timeline based instead of node based, the "graphical view" of the solution could be something like:

var effects = [
    {"name": "FX1", "start": 0, "end": 1000, "layer": 0, "id": 0 },
    {"name": "FX2", "start": 750, "end": 2000, "layer": 1, "id": 1 },
    {"name": "FXTransition", "start": 750, "end": 1000, "layer": 2, "id": 2 },
];

So the transition effect will affect during 250ms.
The transition effect should have two parameters: List of effects from the beginning of the transition, and list of effect at the end of the transition.
Right now for this example one will be the FX1, and the other one the FX2.

In summary what it will do is to create one FBO for each effect, and when it appears in action (.start()) it will disable the render to screen on both attached effects, and it will start using their FBO to do the transition using some shadermaterial or whatever you want to implement.

I've a proof of concept but before going further I wanted to check what you think about it.
I've made basically:

• Include id parameter for each module instance, as we could link between effects, not just for this kind of effects but for many other kind.
• Include a getModuleInstanceById or so function in frame.js
• Create a TransitionModule with basic mix shader between the two fbo.
• Include a input parameter on each effect in the transition similar to: parameters.input.renderToTexture=false. This parameter will be changed by the transition effect. And a parameter.output.fbo
• Modify the doFrame in both effects to render to screen or to fbo according to the .renderToTexture parameter

So this is what I was doing yesterday and I got it working. Of course the part of including the extra input/output parameters and the doFrame switching between fbo or screen should be done in a cool fancy way so you could include each effect in a transition without need to modify it code.

Let me know what you think

[fernandojsg]

I did a little experiment showing more or less what I mean http://kile.stravaganza.org/lab/js/crossfade/
The transition effect should be something like that, so it will get a list of effects, and it will use their FBOs to create the transition using some shader or effect with those textures

[mrdoob]

Hmmm, for the time being I think it would be better if it was a implemented in a single module. Like SceneCrossfadeModule which loads 2 scenes and a bitmap...

[fernandojsg]

Yep, I'm implementing it that way

[mrdoob]

Closing this because since 6449949 the code base is now different. Open a new PR is needed.