Help me test! Flash VSync and Screen Tearing.

So, here’s a post where I am asking you, the Flash community, for a hand. Any of it is truly appreciated and will hopefully get some attention and maybe even a solution to a problem which has been in around in Flash since as long as I can remember; screen tearing.

First, what does tearing mean in this context ? Read this wikipedia article. In this case, it’s a visual split along a vertical line in a Flash movie. It’s been a known issue with Flash since quite some time (always as far as I know), with improvements over several Flash player versions, but I haven’t had to deal with it much lately….until now. I’m in a project where this visual artefact is a major distraction from the content and the experience.

All in all, this seems to be the cause (at least, my analysis of it) of tearing in this case; Flash internally rasterizes a screen, and pushes it to the screen buffer. Internally, this should be synced to your display refresh (60hz or 72hz, for instance), so that the buffer doesn’t get updated halfway through the videocard building up the frame. But on some browsers and platforms it does update during the video card frame refresh, resulting in two rendered frames being displayed at once (or better; 1 frame being updated to the next while drawing to screen), with an optically visible vertical split visible between the two frames. This problem has been around for a long time. It’s more prone to show up in content with “tall” items in it, fast frame rates with large portions of the screen moving, and during horizontal scrolling of displayobjects.

The picture above shows the problem in action. It’s a picture taken using a regular camera pointed at the screen, as this problem doesn’t show up in screencapture software. It shows two different frames of the testing movie; both a black and white square, updated halfway through the screen. While the position of where the slicing happens changes, in many single frames, 2 frames will be displayed at the same time.

I’m seeing problems with the latest 10 Player on Windows XP (Firefox), Mac OS X (Firefox, safari doesn’t but “stutters), and Windows 7. All in all, this is a graphical issue which has been around for a long time and should be solved. It’s definitely a Flash Player bug and with FlashPlayer 10.1 around the corner, I would really love to see this fixed. As well as being hopeful for finding a solution for current player/browser configurations. But testing results are varying and that’s where I am asking you for help, by running 2 flash movies and posting the results to my comments.

Over the last days I’ve been frantically testing several configurations and options, I would hope force vsync with the flash screen buffer, amongst which the following :

Adding a video at 30fps to the stage (no result)

Adding system text to the display list (seems to work on windows xp)

Several configurations of stage.invalidate() and Event.RENDER (no result)

Different drawing / caching methods.

Wmode=”direct” for flash player embed options. (result across the board!)

The last option is the only thing which seems to work on all testing configurations, but comes at a cost. Switching to wmode=”direct” seems to force vsyncing and this would adhere to what has been said about direct wmode:

“This mode tries to use the fastest path to screen, or direct path if you will. In most cases it will ignore whatever the browser would want to do to have things like overlapping HTML menus or such work. A typical use case for this mode is video playback. On Windows this mode is using DirectDraw or Direct3D on Vista, on OSX and Linux we are using OpenGL. Fidelity should not be affected when you use this mode.” [Link to Tinics blog]

As opposed to the wmode=”gpu” flag, which moves rasterization to the videocard (at a hight cost in most content cases, also altering the appearance of your content depending on the videocard), this option still uses the Flash Software Rasterizer to build up content for the screen. But on both my Mac and PC testing this comes at a performance cost of several frames per second, up to about 15fps on larger screens (1280×768). Also, I’m not sure about the results of this on machines with no gpu. (mostly, cheap on board graphic chipsets, which share system memory). While most of the time, your content type might vary in terms of results with either GPU enabled wmodes, in this test that shouldn’t be an issue.

Obviously, abusing wmode=”direct” to force vsyncing on the Flash Player isn’t ideal, but it seems to work. In an effort to survey the results of this, I’ve built a very simple test swf. What I’d like you to do is run both swfs and copy the text field of both and paste them in my comments. Although I’m already in contact with Tinic about this, there’s currently no JIRA bug describing the problem. With the results you have, I’d like to put up an official bug there, and use your results to describe what systems are impacted.

Firefox seems to be the main culprit. Since FF 3 there have been a number of big issues with Flash and Firefox; for instance, in some cases a right click on the flash player will cause the updated areas in the Flash movie to render as an opaque rectangle with the background color. In another case, Flash doesn’t respond to rollover events and doesn’t even render without a mouse click occuring.

Please help me and hopefully Adobe identify and fix this problem, by running these tests. Here’s what you should do :

Run both movies

Look for tearing. Typically, in these test, instead of steady flickering, you’ll see a moving vertical tear between the black and white area. It is essentiall you identify tearing correctly, so make sure you know what it looks like (picture above is a still). The effect of tearing shows even better on my mac, when you move the firefox window so that the flash movie intersects your screenborder, halfway splitting vertically through the flash movie).

Copy and paste the textfield contents when the test is done, on both tests to my comments. Fill in the required 2 fields, and if you can, what type of graphics hardware your machine has.

Send this link to other people who are willing to test (and be part of the solution, making Flash a better place!).

Wmode : Opaque
FPS : 57.3
Rendered Frames : 574
Flash Player :MAC 10,0,32,18
Debug :false
OS : Mac OS 10.6.2
It did show tearing : yes
My browser : Firefox/3.5.5
Note: The tearing effect was like a horizontal bar moving from the top to the bottom of the screen, not a split up like in the sample image.

I have been fighting tearing for a long time with no clear solution. I’m more than happy to help.

I’ve long noticed Compiz (GPU-enabled desktop) has an effect on the speed of Flash. It’s worth noting that turning off Compiz boosted the Firefox/Opaque results to 60fps (all other results were the same). For the three results at 60fps the animation also seemed much faster, almost blurring into a single color at times, while other times showing multiple tears.

Please note, however, that wmode:direct DID “tear” as soon as the Flash Player lost focus, *or* the rightclick (context) menu was shown!
(The performance -FPS- counter given is without any intervention)

It’s a shame that a so-called OS does not provide any Vertical Retrace clues if it can’t handle the subject by itself… Blame this with a pie on Mr. Ballmer, not Adobe! I use to develop traditional 2D “GDI” applications as well, and I didn’t find a means of avoiding this artefact except switching to DirectDraw…

some other notes: I tested your tests with the stable 10.0 flash on google chrome 64bit (linux) and got HORRIBLE tearing, but with Flash 10.1 RC4 on Firefox 32bit, the tearing was nonexistant except for a few frames on the final test.

Some notes: Screen tears with compositing On & Off. still tearing with nvidia vsync and kde vsync on. noticibly worse with vsync turned off in either of them, or with compositing off. (Kde 4.4.3 Gentoo x86_64 nvidia 8600GT)

Vsync is a huge issue for Linux right now. the only way to get flash to vsync is if it uses direct OpenGL I believe, because general vsync for 2D or composited stuff just isn’t possible. “Making this work requires changes to Xorg, mesa, every graphics driver, and every compositor.” <- quoted by an Ubuntu developer.