JavaFX graphics performance and suitability for advanced animations

Fri May 31 07:41:41 PDT 2013

Perhaps it is a windows issue. Does seem like a few of the people reporting problems in this thread are on windows, and without those lovely high-res Mac displays that make everything look so pretty. On my machine there is no way you could say the jfx one is on par with the jscript one. I'd have a hard time convincing anyone to use jfx over even lowly jscript using that incredibly basic showdown I put together.   

How often do you personally run something like ensemble on windows? It could be that we're seeing big issues and you're seeing minor ones, hence out angst at how casually these issues are treated (two bugs I spent hours narrowing down and reproducing got closed in around 10 minutes - was the code run on the environment it was reported to be found on in this time?). Might be worth you having an eyeball just to see.

Regarding the Text vs Label thing, I'm not sure I get what that's about. My primary use with animations is to do ipad like transitions of rich widgets containing labels, buttons, tables, etc. So a panel of buttons might slide in left, a document might get folded up and put in a rubbish bin, or a dialog might grow out of a button that was clicked. Are you saying smooth animations are not intended to be used on complex node graphs like this?

> JS is driving tis animation and not CSS?

Is this a question about the HTML I put up? If so then the answer is jquery is used to animate between a start css style and an end css style (just view source on the HTML, it's about 10 lines of code). How it does this you would have to look at jquery's animate method. I know as much about it's internals as I do about JFX's. 

On 01/06/2013, at 12:11 AM, Richard Bair <richard.bair at oracle.com> wrote:

> 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
>>>> 
>>>> 
>>> 
>>> 
>>> 
>> 
>> 
> 