WebView capabilities review

[Felix Bembrick]

Hi Richard,

The impact.js sample is here: http://bartaz.github.io/impress.js

When I run your HelloAnimatedRectangle as is it looks pretty smooth but
when I reduced the durations of the transitions so that everything moves
quicker it does have obvious jitter.

I have attached the pulse logger output.  I don't see anything obvious in
there (not that I understand it a great deal) so could it be that jitter is
not something that can be measured using the pulse logger?

Felix


On 26 July 2013 03:13, Richard Bair <richard.bair at oracle.com> wrote:

> Try this:
>
> public class HelloAnimatedRectangle extends Application {
>     @Override public void start(Stage stage) throws Exception {
>         final double sceneWidth = 1024;
>         final double sceneHeight = 768;
>         final double squareSize = 200;
>         final double halfStroke = 0;
>
>         Rectangle rect = new Rectangle(squareSize, squareSize,
> Color.ORANGE);
>         rect.setStroke(Color.WHITE);
>         rect.setStrokeWidth(halfStroke * 2);
>
>         Group root = new Group(rect);
>         Scene scene = new Scene(root, sceneWidth, sceneHeight);
>         scene.setFill(Color.BLACK);
>         stage.setScene(scene);
>         stage.setTitle("Animated Rectangle");
>         stage.show();
>
>         TranslateTransition translation = new
> TranslateTransition(Duration.seconds(20), rect);
>         translation.setFromX(halfStroke);
>         translation.setFromY(halfStroke);
>         translation.setToX((sceneWidth - squareSize) / 2);
>         translation.setToY((sceneHeight - squareSize) / 2);
>
>         RotateTransition rotation = new
> RotateTransition(Duration.seconds(10), rect);
>         rotation.setAutoReverse(true);
>         rotation.setCycleCount(2);
>         rotation.setToAngle(720);
>
>         TranslateTransition translation2 = new
> TranslateTransition(Duration.seconds(20), rect);
>         translation2.setFromX((sceneWidth - squareSize) / 2);
>         translation2.setFromY((sceneHeight - squareSize) / 2);
>         translation2.setToX(sceneWidth - squareSize - halfStroke);
>         translation2.setToY(sceneHeight - squareSize - halfStroke);
>
>         SequentialTransition tx = new SequentialTransition(translation,
> rotation, translation2);
>         tx.play();
>     }
>
>     public static void main(String[] args) {
>         launch(args);
>     }
> }
>
> You can mess with the "halfStroke" variable to stroke it white to get
> greater contrast between the background and the shape. The translations
> looks smooth to me, I don't see any dropped frames. The rotation looks
> alternately smooth and chunky depending on the position of the rotation. I
> believe this is due to anti-aliasing and pixel refresh speeds (as opposed
> to an actual performance problem or timing problem).
>
> What do you see?
>
> Richard
>
> On Jul 25, 2013, at 9:49 AM, Richard Bair <richard.bair at oracle.com> wrote:
>
> > I just ran Ensemble on mac with the latest, with pulse logger turned on.
> Ran the SequentialTransition demo and I agree it didn't look smooth, even
> though the pulse logger reports that of over 3,000 pulses, not a single one
> crossed the 16ms threshold. Is the grid background causing an optical
> illusion? (as the shape passes a boundary it may temporarily looked wider
> and then shorter making it look like it is changing size / speed??)
> >
> > Richard
> >
> > On Jul 25, 2013, at 9:28 AM, Richard Bair <richard.bair at oracle.com>
> wrote:
> >
> >> I don't see his link to impact.js, can you send it again?
> >>
> >> Usually the stutters that we see are the result of threading problems
> between Glass & Prism rather than a performance (fps) problem. You probably
> saw the issue come by yesterday that smoothed this out on the mac. In order
> to get rid of these, what we need to do is have a way to measure when they
> happen, and have a reproducible example. I've seen them forever on the mac
> (but now that *should* be fixed), but on windows I've never seen them
> (windows was always exceptionally smooth for me), and that has been the
> primary challenge in nailing it down.
> >>
> >> It may be related to drift -- 1/60th of a second is 16.666666… ms long,
> and the timer used to get pulses may be running at 16ms for example, in
> which case there is drift where eventually it takes 2 frames worth of time
> to draw a single frame because we're waiting on the card.
> >>
> >> I'm not sure how WebView's interaction with prism would be avoiding
> this, but that's what it sounds like.
> >>
> >> We also recently changed the way the FX thread and render thread
> interact so as not to drop frames. I would expect that to have an impact in
> smoothing things out as well.
> >>
> >> Are you building locally or are you using one of the promoted builds?
> Do you see the hiccups right now in Ensemble?
> >>
> >> Richard
> >>
> >> On Jul 25, 2013, at 3:21 AM, Felix Bembrick <felix.bembrick at gmail.com>
> wrote:
> >>
> >>> I have noticed something curious.
> >>>
> >>> When I run the impact.js demo that Klaus posted a link to I see a very
> smooth animation.  The curious part is that on this same machine I see
> noticeable flicker and jittering when I run even the most simple JavaFX
> animation and have never seen one that performs as smoothly as the
> impact.js demo within WebView.  Also, the impact.js demo runs very smoothly
> even when I run the WebView maximised.
> >>>
> >>> OK, so now I know that it can't be the actual graphics hardware or
> driver that cause JavaFX animations to flicker and clearly JavaFX *can*
> render animated content without jittering so why then do simple animations
> (such as those from Ensemble) perform so poorly?
> >>>
> >>>
> >>> On 25 July 2013 02:02, Artem Ananiev <artem.ananiev at oracle.com> wrote:
> >>>
> >>> On 7/24/2013 2:55 AM, Felix Bembrick wrote:
> >>> Windows 7 64-bit here.
> >>>
> >>> On this platform, JavaFX web component is compiled without JIT support
> for JavaScript:
> >>>
> >>> https://javafx-jira.kenai.com/browse/RT-24998
> >>>
> >>> It explains why it is slow, but it doesn't explain rendering artifacts.
> >>>
> >>> Thanks,
> >>>
> >>> Artem
> >>>
> >>>
> >>> On 24 July 2013 08:53, Richard Bair <richard.bair at oracle.com> wrote:
> >>>
> >>> I've filed https://javafx-jira.kenai.com/browse/RT-31885, lets see how
> >>> that turns out.
> >>>
> >>> Richard
> >>>
> >>> On Jul 23, 2013, at 3:49 PM, Richard Bair <richard.bair at oracle.com>
> wrote:
> >>>
> >>> Doh, that's just what you said :-)
> >>>
> >>> On Jul 23, 2013, at 3:49 PM, Richard Bair <richard.bair at oracle.com>
> >>> wrote:
> >>>
> >>> I'm not seeing anything at all, beyond a fuzzy background image
> >>> (similar app to yours):
> >>>
> >>> import javafx.application.Application;
> >>> import javafx.scene.Scene;
> >>> import javafx.scene.web.WebView;
> >>> import javafx.stage.Stage;
> >>>
> >>> public class HelloWebView extends Application {
> >>>  @Override public void start(Stage stage) throws Exception {
> >>>      WebView web = new WebView();
> >>>      web.getEngine().load("http://famo.us/");
> >>>      Scene scene = new Scene(web);
> >>>      stage.setScene(scene);
> >>>      stage.setTitle("HelloWebView");
> >>>      stage.show();
> >>>  }
> >>>
> >>>  public static void main(String[] args) {
> >>>      launch(args);
> >>>  }
> >>> }
> >>>
> >>> I'm on Mac. What OS are you running on?
> >>>
> >>>
> >>>
> >>>
> >>
> >
>
>