Sunday, 3 August 2014

Timeliner - Part 2

So after playing with doing dx11 track rendering, I was speaking with some friends, and they shown me some screenshots of after effects timeline (I knew a bit how it was looking like but my memory was rusty).

What I actually like in the is the minimalism, you don't really display curves, which is pretty cool, and then all timelines are consistent, it makes it much easier to use several data types (and in my tool i got a lot).

That would also integrate pretty well with my tool, since I can easily push a parameter to the timeline, track count will grow rather steadily.

So I start to work on the design, since I got a Direct2d renderer I might as well reuse is (it's far from perfect, but it's nice enough and I can add improvements on the way, why rewrite something from scratch again anyway).

I decided to take group into account right away, and just draw circles instead of rotated quads (was lazy to build path, and anyway circle look nice).

Instead of directly integrating I just generate a small dataset so I can have a feel,


First iteration is nice, now you of course need a header and a time ruler, plus play/stop/loop buttons.


Next you need to show information about a keyframe, so I built a small tooltip:


Now I wrote track evaluators, to start to attach tracks to parameters, add a register (so if a parameter datatype is not registered I simply can't create a track from it.

Since speaking about evaluation, I looked at 3 techniques:

  • Check in linear way: You have a list of keyframe sorted by time, and search from the beginning. This is obviously the easiest, but the further you are in your timeline the slower it gets. If you don't have many tracks/keyframes it's ok, but it can become inefficient rather fast. This is how it's done in 4v timeline so far.
  • Linear playback optimization: Since you consider that most time you will just play, you store current key frame, and on each time step check if you passed the next. This is how it's done in Duration. This is totally great for pure linear playback, but you need to fall back to the linear version for seeking. If you start to add timeline automation you can have some issues.
  • Tree based structures : You use whatever form of binary tree optimization, so you get faster look up. It costs a bit more on adding/removing keyframe, but you get a decent gain on playback (which is generally desired in case of real time rendering). In my case I use interval tree, which is a technique I used first on databases 10 years ago, and used it to optimize some skinning animations a while back too. It's easy to implement, and you get a balance between linear playback/seek, which fits pretty well my use case. I could also easily fallback to previous technique if I need automation, or even better do a mix of both (use tree as soon as you need a seek, then move back to linear optimized version once you got your keyframe again).


Next, I'm not interested to build groups myself, so they simply are generated per patch, which makes my life much easier, and it's much clearer to see what parameter belongs where:


Next you do all the usual part, standard editor features, probably forgot same that are done, but well as a user you know what's required ;)
  • Load/Save to file (json)
  • Make collapsing work
  • Move key-frames
  • Move global timer
  • Add a node to retrieve timer from timeline
  • Add more datatypes (for now there's bool/float/int/vector2/vector3/quaternion/string)
To integrate in my tool it's also pretty simple, press shortcut on a parameter to create a track, then another shortcut to push value from it at current time, simplicity at it's best.

After one thing , you also want to edit values, so I found that showing editor windows was cumbersome (but needed for some types, so still in the plan).

So for some simple types I added a small shortcut handler, so if a keyframe is selected you can do quick keyboard control (like arrows for value, space switches a bool on/off).

Still some features missing of course (multi select is next but easy as hell, small editor widgets), but even in that state it's already pretty usable, which I find great considering I did not even work more than 2 days on it, really it's impossible to do a timeliner wrong ;)

I specially love how nicely it integrates, push parameter, add key-frames, workflow feels pretty seamless it's great.

Here is a sample of the whole layout in action (visual suck but it's to show the timeline after all)



New milestone reached ;)

1 comment: