WebView capabilities review

[Richard Bair]

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