Hi all

In my post-processing pixel shader (HLSL, SM5) I am facing heavy banding issues as to be seen in the attached image.

It doesn't matter what type of effect I am implementing (fake volumetric light in this case), it always happens when I am applying some color blending, e.g. fading out.

Could this be a precision issue (I'm working with float numbers), or where do I have to start looking?

Any hints will be appreciated!

Floats are fine. This is a common problem with standard displays which only have 8 bits precision per channel (sometimes even less). You need to dither. This is a good presentation about:

Banding in Games

Also search these forums, the topic returns regularily.

Thanks, gentlemen.

7 hours ago, unbird said:

This is a common problem with standard displays which only have 8 bits precision per channel (sometimes even less). You need to dither.

Honestly I am not so sure about that. The rest of the rendered graphics (which does not come from my feather) does not show any banding nor visible dithering. Same with photos being viewed on my monitor, e.g. gradual colors / brightness level in the sky. I can see some banding going on when I zoom in very closely, but none in full screen mode. The banding that I encounter is much stronger and obviously visible, as you can see in the attached screen. There must be another source for this.

6 hours ago, Hodgman said:

You've got to convert to another format at some point for display. Can you describe your full image pipeline, which bits are float, which bits are not, and where gamma correction happens and how?

Also, post a close up of some of the banding problems in PNG format -- the JPEG compression has mooshed it.

Convert to what format? Unfortunately it's not my own engine, it's a proprietary game engine (X-Ray), and I only got access to some of its HLSL shaders, so I can't say how the pipeline exactly works. For what I know the gamma is done inside the engine (ie. in the host application) as there is nothing gamma related in the shaders. But I do not know the specifics.

I've attached a BMP, will this also help (instead of PNG)?

XR_3DA_2017-07-10_20-40-44-01.bmp

Fire up an image editor and use the dropper tool.  Most of the banding I'm seeing is single color level changes (e.g. #373737 -> #383838) without enough texturing to obscure the effect - one band per drop.  I think I found *one* drop out of 10+ where it was 2 instead.  You *are* hitting the precision limits of what 8-bit buffers and monitors can give you.

Much of the scene obscures the banding effect from textured backgrounds which have a much greater range and effectively drown out the banding with texture.  The places where this doesn't happen are where you have your single, solid, untextured light as the dominant or only contribution to the color channel.  Aside from having the background contribute more (that concrete wall has easily +/-32 levels of color difference just pixels apart, easily drowning out the effects of banding), you could also try texturing your volumetric lighting - think dust particles catching the light etc.  And as Unbird mentions, dithering would help as well (at least if you've got e.g. HDR render buffers that you can get more than 8 bits of precision out of in the first place to dither *from*.

Many Thanks MaulingMonkey for checking and commenting on my screenshot. Your explanation helped me much understanding what happens and what the others said here before!

Actually I was thinking about adding dust particles and/or jittering anyway

Also I've quickly tried one dithering algorithm and it does help, however fine tuning it to prevent too much rendering artifacts seems to be tricky.

So for now this is ok for me. Once again I've learned a lot

Thanks again to everybody!