Fast Moving Display Objects Ghosting?

[megmut]

Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it.

But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. 

Any reasons why or how I could fix this?

Thanks, Nick

[Jammy]

Is that not just your monitor? What FPS is the code running at and how fast is the object moving. Is there a demo anywhere to look at. If your sprite is on a floating point it may also look blurry, renderer.roundPixels = true; may fix the issue if that's it.

[megmut]

Pretty sure it's not the monitor. I'm using a 13.3 mac book pro and I've tested on other screens. 

60 FPS and no frame drops, it doesn't budge from it. Thanks for suggestion rendering round pixels, however that didn't fix the issue. 

 Literally all I'm doing is adding a sprite to the stage and rendering it. 

I've tried legacy rendering, forcing canvas / webgl, rounding the pixel values myself, removing all scaling, all anchoring. I swapped the sprite for a graphics texture and that didn't help. It's the same on my mobile phone too. I've also tried playing with the FPS, speed and other properties on the Ticker class. To that end, I'm running out of options. Most other PIXI games aren't giving me this issue, but for some reason, mine is I'll put together a demo for you guys to test.

I'm not using any current timeStamp method, just using the deltaTime passed by the ticker on the ticker update.

[Jammy]

25 minutes ago, megmut said:

Pretty sure it's not the monitor. I'm using a 13.3 mac book pro and I've tested on other screens. 

60 FPS and no frame drops, it doesn't budge from it. Thanks for suggestion rendering round pixels, however that didn't fix the issue. 

 Literally all I'm doing is adding a sprite to the stage and rendering it. 

I've tried legacy rendering, forcing canvas / webgl, rounding the pixel values myself, removing all scaling, all anchoring. I swapped the sprite for a graphics texture and that didn't help. It's the same on my mobile phone too. I've also tried playing with the FPS, speed and other properties on the Ticker class. To that end, I'm running out of options. Most other PIXI games aren't giving me this issue, but for some reason, mine is I'll put together a demo for you guys to test.

I'm not using any current timeStamp method, just using the deltaTime passed by the ticker on the ticker update.

Hm sounds like you're looking at the same places I would. Just one more suggestion on the rounded pixels, when you update your sprites x,y can you try using Math.round(x) etc, it'll atleast just rule out any issues with rounded pixels

I wonder as well; could it be a width or height issue, if you resize a sprite in Pixi by say just its width, it can look quite blurry on the left and right edge.

[megmut]

I've already tried manually using Math.round(x). Didn't help. I've also just tried swapping the render order, so it renders a frame behind, but this didn't work either. 

I've removed all resizing, as well as any stage / renderer resize. In addition, I've removed the device pixel ratio from the render options, so everything is basically back to basics. 

[megmut]

Here is a jsfiddle I made showing the blur. At least, it is on my screen anyway.

https://jsfiddle.net/gLnzk8zb/

[Jammy]

12 minutes ago, megmut said:

Here is a jsfiddle I made showing the blur. At least, it is on my screen anyway.

https://jsfiddle.net/gLnzk8zb/

thats moving far too fast for me to discern anything about its edges, i'm on a 2k rez 144hz i see all sorts of artefacts of the monitor and the eye at this speed can you reduce the example down to something viewable by the average human eye? lmao, from my perspective i can see 1-4 version of the image when it hits an edge and unless i follow it (with eye strain) it has a motion blur effect (either caused by the monitor or my biology)

overall from what i can see, i don't see an issue with the sample provided. and when i focus, i can see pixelated edges that don't appear blurry

[megmut]

You can change the initial velocity in the fiddle on line 8.

I've noticed that most html5 games do this now I've started looking, but there hasn't been a resolution or even any good explanation as to why, even if it's not fixable, I'd like to know why this is an issue.

[Jammy]

19 minutes ago, megmut said:

Here is a jsfiddle I made showing the blur. At least, it is on my screen anyway.

https://jsfiddle.net/gLnzk8zb/

i reduced the velocity to 1 and cant see the artefact of blurring or motion blur but start to see "doubling" around 5, almost as if in 2 frames the circle is drawn twice, at its original position and the next

[megmut]

yes, I thought this might be the case. I'm not sure if the browser is doing it's own interpolation or something. Any suggestions?

[Jammy]

1 minute ago, megmut said:

yes, I thought this might be the case. I'm not sure if the browser is doing it's own interpolation or something. Any suggestions?

I've just had a thought, looks similar to vsync issues, googled it and low and behold this issue appears to be discussed more here:

 

[megmut]

Thanks for the link, was a good read, though nobody seemed to have a solid answer except for hardware and browser differences.

Will look deeper into this. Thanks!!

[ivan.popelyshev]

G-SYNC. Two: do you make screenshot with a tool , or are you trying "canvas.getImageData"

[megmut]

I have used the builtin tool to screen grab with osx (cmd + shift + 3), however it's actually perfectly crisp.. 

[TeKett]

(sorry for the necro but more people might stumble upon this thread via google and a answer seams to be necessary)

Motion blur is a well known issue with LCDs. It arises because the liquid crystal, which is the active element within an LCD, is unable to change its orientation and transmission rapidly enough when the picture changes from one frame to the next. Since the standard video rate is 60 frames per second, a pixel is expected to be able to fully update its light transmission opacity within 16.7 milli-seconds (a 60th of a second). If it takes any longer than that then the image will show some degree of lag, which appears as a trailing smear or blur whenever there is motion. It also affects the visibility of the leading portions of moving objects.

http://www.displaymate.com/LCD_Response_Time_ShootOut.htm