Jump to content

Fast Moving Display Objects Ghosting?


megmut
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

  • 11 months later...

(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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...