JavaFX graphics performance and suitability for advanced animations

[Richard Bair]

That JS example looks worse in Safari and Chrome than JavaFX on my system (looks like pixel snapping is going on -- the border doesn't look fuzzy but the animation is rough). You now know the parameters (you can either pixel snap, or not). The question is how to determine that an animation is happening in the SG if we want to handle that automatically? And what is the right answer (because one person will say fuzzy, and another person will say rough).

One thing we've talked about is the introduction of some new API that says "I'm animating" and the transitions could set that automatically and clear it at the end (as appropriate) so that you don't have to do anything special for animated text.

JS is driving tis animation and not CSS?

Some systems will use sub-pixel positioning of glyphs so that the kerning doesn't change as the x/y of the text changes. We want to do the same thing with animating text.

Richard

On May 30, 2013, at 9:55 PM, Daniel Zwolenski <zonski at gmail.com> wrote:

> Here is pretty much the same animation in JavaScript of the animated box: http://www.zenjava.com/demo/animate1.html
> 
> While it's not perfect, on my system (Google Chrome, Windows 7, Dell Latitude E6520) the visual appearance is noticeably better than the JavaFX one. For example there is no shimmering of the borders (there's an ever so slight jitter but it's far less noticeable than the JFX 'shimmer'). The text also seems more crisp in the JavaScript one in my system (without setting any magic caching settings). 
> 
> I don't know if its pixel snapping or crack jamming, or whatever else the options are, but it does look noticeably better in my web browser than my native desktop app. I'm hoping JavaScript level performance (or whatever you want to call it) is a pretty low bar to be aiming for?  
> 
> The drop shadow is not great in either system. It looks slightly better on the JScript one but that may be because it is darker and bigger in this sample. 
> 
> 
> 
> 
> On Fri, May 31, 2013 at 2:36 PM, Richard Bair <richard.bair at oracle.com> wrote:
> Thanks for the issues! As mentioned in RT-30830 and RT-30827, the jittery text and fuzzy lines are two manifestations of the same thing. When animating, you have two choices. Do you draw everything on pixel boundaries, or do you draw "in the cracks" between the pixels? Of course the only way to draw between pixels is to draw antialiased on the pixels on both sides of the "crack", leaving things blurry.
> 
> By default all Text is drawn pixel aligned in order to be crisp (more or less -- Windows & Mac may have different answers on this point). So when it is animated, it looks like it is jiggling (it is) because each glyph is figuring out whether it ought to go left or right. Text nodes are supposed to allow you to break out of this behavior for the sake of animation (there are a few issues related: RT-23580, RT-6475), but it looks like the way I would have tried (cache=true, cacheHint=SPEED) doesn't draw anything in this case, and we need to figure out why.
> 
> However expect that you will need to do *something* to Text to tell it whether you care about animation smoothness or static crispness with the text, so that we can be sure to layout the glyphs optimally for your use case.
> 
> The fuzzy lines on the other hand are perfectly normal and expected. You could of course write your app to pixel-snap the animated rectangles, and then see if it looks jittery or not (likely, yes). 
> 
> The Canvas bug is very interesting, and we'll get to the bottom of it.
> 
> Thanks
> Richard
> 
> On May 30, 2013, at 8:09 PM, Daniel Zwolenski <zonski at gmail.com> wrote:
> 
>> A little bit more esoteric, but some "not very nice looking" rendering when animating a very lightly styled Node: https://javafx-jira.kenai.com/browse/RT-30830
>> 
>> 
>> On Fri, May 31, 2013 at 12:07 PM, Daniel Zwolenski <zonski at gmail.com> wrote:
>> Jittery text when scaling in an animation: https://javafx-jira.kenai.com/browse/RT-30827
>> 
>> 
>> On Fri, May 31, 2013 at 12:01 PM, Richard Bair <richard.bair at oracle.com> wrote:
>> Wow. Thanks!
>> 
>> On May 30, 2013, at 6:48 PM, Daniel Zwolenski <zonski at gmail.com> wrote:
>> 
>>> I have replicated the z-order problem with the Tower Defender game and the Canvas: https://javafx-jira.kenai.com/browse/RT-30826
>>> 
>>> 
>>> On Fri, May 31, 2013 at 1:26 AM, Richard Bair <richard.bair at oracle.com> wrote:
>>> Note this is only for Mac.
>>> 
>>> On May 30, 2013, at 7:54 AM, Richard Bair <richard.bair at oracle.com> wrote:
>>> 
>>> > Anybody interested in jitter ought to look at https://javafx-jira.kenai.com/browse/RT-26702
>>> >
>>> > Richard
>>> 
>>> 
>> 
>> 
>> 
> 
>