mrdoob/frame.js

JavaScript Sequence Editor

frame.js's Issues

Transition effects

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

#timeline .block in dark.css

I am having trouble assigning different background-colors to the #timeline .block. Which are the module blocks that appear in the timeline. They have text that says either ColorModule or ImageModule, etc on them. By default they are all purplish, but I would like to divide them into several groups so that Type1Module is Blue, Type2Module is Green, and Type3Module is Orange.

How would I do this?

It appears that in Timeline.Module.js the dom.className is set to 'block' on line 27.

Documentation - How to

Is there any type of documentation on this library. I have seen the online presentations using it and the obsidian demo but I would really like to understand the json input file and how to design using it.
This library would solve a lot of my issues.

Parameters description

I was thinking what could be the first feature I'll add to the sequencer, and I think could be the parameters tweaking. It will help just having a simple effect to play with it and see something more than just a player of a jsoned demo.
Thinking in what I had in my editor, I'll propose something like:

{
    "amount": {
        "shortname": "Amount",
        "desc": "Amount of sprites",
        "type": "i",
        "default": 20,
        "min": 1,
        "max": 50
    }
    "size": {
        "shortname": "Size",
        "desc": "Size of the sprite",
        "type": "f",
        "default": 3.5,
        "min": 1.0,
        "max": null
    }
}

So you could create controls for each kind of parameter.
The basic kind of parameters that will be necessary could be:

• integer
• float
• color
• boolean
• combo/list
• texture

And of course after that you could also integrate types of the three.js like vector2, vector3 or so. But at least to start with something to create custom controls for the editor.

Block constraints

I was about to do the block constraints while moving the block after adding the .end property #8 but I got into a question. Right now you can move a block over other, but I think It shouldn't be possible right?
It guess the following constraints should be done:

• 0 < .left < .right - 2*sizeResizeDiv
• .left+ 2*sizeResizeDiv < .right < Timelinelength
• .left < .right of the closer block (left) in the same layer
• .right < .left of the closer block (right) in the same layer

Frame.js name conflict

Hey MrDoob!

I am a longtime user of THREE and am excited to see this new library evolve.

Fyi, I have published this library for over a year, and plan to continue its development.

1. Perhaps my library can provide some inspiration for this project
2. Can you recommend a way to sort out the names of the two libraries, or at least provide some differentiation in their descriptions.

In appreciation,
BishopZ

https://github.com/bishopZ/Frame.js
http://framejs.tumblr.com/

Frame.js versus Timeliner integration

I am looking to develop 3D enabled technical documentation/presentations, whereby there is an initial scripted animation followed by the user being able to explore and learn within the 3D environment. The scripted animation would have a voice over and hence need the ability to sync an audio track.

I noticed another three.js project implementing the Timeliner library and wondered which of Frame.js or Timeliner would be most appropriate for me to focus on?

Element.duration vs element.end

I've been having problems with the .duration attribute in the timeline/effect element.
I think it could be more useful to use a element.start / element.end values instead of .start / .duration.
For example right now while dragging right or left you have to care and do tricks in cases like for example you go left under 0, or you move start over the end (it keeps moving the block) and things like that.
With start/end you just move one and the other keeps on its place, and just when you move the complete slide just increment both the same amount.
And in anycase in update you could always calculate .duration using both

Cannot run the obsidian demo -- missing js module

I cannot run the obsidian dem because the FadeInModule.js is missing in the /examples/obsidian/js/modules/ directory.

127.0.0.1 - - [07/Jul/2016 10:57:30] code 404, message File not found
127.0.0.1 - - [07/Jul/2016 10:57:30] "GET /examples/obsidian/js/modules/FadeInModule.js HTTP/1.1" 404 -

Resource Manager

I'm thinking about the need of some resource loader/manager to let you do some important things I miss on frame.js/three.js: share resources between different effects, create a loading bar to let the user see how many resources needs to be loaded in order to run the demo and also prevent to run the demo without all the needed resources.

This could be the basic definition for this THREE.ResourceManager class:

loadResources: function ( resourcesList, onLoadCallback, onLoadingStepCallback );
addResource: function ( resourceId, resourceData, resourceType );
get: function ( resourceId );

Also this resources could be part of the script definition object with something like:

var json={"metadata":{"version":1}, "resources":[....], "timeline":[....] ....

In that way it should be necessary to use the resourceId parameter on the modules instances instead of using the file definition.

The frame.js loader will look first for the resource list, load all of them and after that it will call init() for each effect.

Implement Search in Editor

This would be a great feature to have in the Frame.js Editor: https://codemirror.net/doc/manual.html#addon_search

Reuse Modules

Is it possible to reuse modules as if they were "classes"?

Example:
Say I have created BlockModule.js, which is simply a square I can attach certain parameters to. I cannot seem to reuse this module in the timeline without the last added "block" instance (to the json var) controlling (or usurping) all of the other "block" instances.

Does this make sense? I would be grateful for any insight.

Thanks,
Ken

Timeline .load() .init()

I've checked the code in frame.js and I've just noticed that you don't use the .load function from the modules just the .init.

I'll use .load before .init to load all the resources and after all call .init to initialize everything related to the module.

I think it shouldn't be called any .init code if the rest of the .load effects are still peding because maybe a module could depends on another one.

The .load callback should be automated by the FRAME function instead of leaving it to the user, and include a load funciont on Timeline with a callback that could be used as global status of the loading (creating a progress bar and so on).

I've modified something similar to the following:

Timeline: function ()
{
  load: function (callback) {
    this.elementsToLoad=elements.length;
    for ( var i = 0, l = elements.length; i < l; i ++ ) {
        element[ i ].load(loadedCallback);
    }

  loadedCallBack: function (element) {
     this.elementsToLoad--;
     userLoadedElementCallback(element);
     if (this.elementsToLoad==0)
        this.init();
  }
}

What do you think?

Como importar e exportar arquivos de vídeo (mp4) do sistema

Por gentileza, alguém poderia me dizer como importar arquivos de vídeo para o sistema e Como exportar arquivos MP4 do sistema.

Replace CodeMirror with Microsoft Monaco

Please delete.

additional parameters for textblock

When adding additional parameters to e.g. the text block (e.g. font size or font type) the output won't be refreshed on chaning these parameters.
` return new FRAME.Module( {

        parameters: {

            text:          new FRAME.Parameter.String( 'Text', 'text' ),
            startPosition: new FRAME.Parameter.Vector3( 'Camera Start', [ 0, 0, 20 ] ),
            endPosition:   new FRAME.Parameter.Vector3( 'Camera End', [ 0, 0, 40 ] ),
            fontsize:      new FRAME.Parameter.Integer( 'Font Size', 2, 0 , 24 )

        },

        init: function () {

            var string = this.parameters.text.value;
            var fsize  = this.parameters.fontsize.value;

            if ( texts[ string ] === undefined ) {

                var shapes = THREE.FontUtils.generateShapes( string, {
                    font: "helvetiker",
                    size: fsize
                } );

`
Only changing the text itself will render with the new fontsize.