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]
"Hardware offscreen buffer
Software renderer, perfect fidelity" [link to Jim Corbett's presentation (ppt)]
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 (1280x768). 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!).
Test with wmode opaque
Test with wmode direct
[WARNING : if you are prone to visually induced epileptic fits, this might induce one. Don't run it then]
(don't forget to post to the comments).
Digg, StumbleUpon, Slash and others:
