Page 1 of 3

Graphics - Dithering, Anti-Aliasing, up-scaling, shaders!

Posted: Tue Apr 29, 2014 9:32 am
by bluezeak
This thread has been created because of the pastes (recently and over the past many months) requesting / talking about dithering. Let's talk about dithering, anti-aliasing, up-scaling, and in general better graphics!

I made this thread because I don't think people don't know what they mean when they're asking for dithering ... or, I don't understand it, and want to understand it better.

This is current as of FPse 11.113. I'll try to update these initial posts as I get more info. I'm breaking this up into a couple posts because it's too long.

Wikipedia - Image Scaling, Dithering, Aliasing, Anti-Aliasing
Nvidia - Anti-Aliasing
filtypants - dithering and shaders (more about shaders than dithering, but gives examples.
You Tube - Pixel art - Dithering and Anti-Aliasing
OS Dev - - Dithering
"Note that Dithering and Anti-aliasing are opposite functions. Dithering uses spatial resolution to make up for a lack of colours [makes it appears as if there are colors there that don't exit]. Anti-aliasing uses colours to make up for a lack of spatial resolution [smooths out jagged lines by combining pixel colors around sharp lines, replacing some pixels with pixels of new colors)." (from OSDev. with [my comments] in brackets)

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 9:48 am
by bluezeak
My understanding is:
Up-scaling - INCREASEs resolution. Original PSX resolultion (usually)- 240x320. My phone is 540x960 - many devices are even more. Basic method is simple stretching, and leads to very poor graphics.

- first, aliasing is an effect that causes different images to become indistinguishable / blurred / distorted. Anti-aliasing is the act of making that distortion not as bad / fixed.
- Anti-aliasing actually recreates the image (or parts of it) when it does it's calculation (interpolates). It can use additional (new) colors that were not in the original to smooth out the image (the wiki example shows 4 (or 8?) new colors).
- 'Full Screen' AA can be used as a type of upscaling, supersampling
I believe it is used for 2 things:
    1) Used to smooth out blocky/jagged images by changing pixel colors along edges of lines (combining colors, chaning some pixels to new half-tone colors).
    2) Also to remove 'distortions', specifically (see 'moire' 'aliasing' link).

- "Dithering, as it applies to pixel art, is a pattern made up of two or more colors of pixels arranged in a pattern (usually a checkerboard or dotted line) that, when viewed on a CRT television, will blend together, resulting in an average of the adjacent colors". (filthypants)
- Dithering is used into create the illusion of color depth [more colors] in images when there is a limited number of colors to create them.
- Better dithering = better transition from one part of image to another.
- Dithering will ONLY use exiting colors, combing them together in a pattern of alternating pixels of the colors, to make a transition between parts of an image (ultimately the entire image) look smooth.
Useful in two primary situations as I see it:
    1) Downscaling to display with fewer colors: If the original image has more colors than your display can show, dithering will be used to place pixels of fewer colors in a configuration that emulates the colors of the original image, making it look more auhentic / less blocky (color banding) / smoother.
    2) To even out color when there are multiple layers of colors side-by-side.

- I'm using the term 'shader' here to mean "an effect applied to an image after it's been rendered". Meaning, after FPse and the video plugin create an image, a final step is done to modify that image before it is finally displayed.
- with this definition, upscaling could be considered a shader, anti-aliasing is a shader, and dithering effects could be considered shaders.
- schtruck's new 'shaders' include upscaling effects, anti-aliasing, scanlines, and a 'sharp' effect
- shaders could also be called filters

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 9:58 am
by bluezeak
Thoughts on use in FPse:
- can be used all the time, potentially for great effect. I don't think Schtruck uses any scaling algorythms, until he added the 'shaders' very recently..
- there are MANY algorythms. in my testing with ePSXe on the PC using the PeOPs sofware plugin ... thy give very little benefit in the testing I did. Others testing my vary dramatically!
- FPse support: 2 of the new 'shaders' are actually upscalers (HQ3x, Spline36)
- FPse does 'screenfiltering', commonly assciated with upscaling. I think this is 'bilinear interpoloation[' aka 'bilinear filtering'.
- I'm REALLY disappointed with this. In my tests with ePSXe on my pc, it made very little difference. There are many posts online about how these tools work GREAT ... but I've not seen it. I think part of the problem may be the PeOPs software video plugin. I suspect it may just not play well with these fliters / shaders.

- probably best be used to get a pseudo increase in resolution. Anti-Aliasing will use more colors to make lines seem crisper / less blocky (smoother).
- could be used for for distortions, specifically 'moire effect', when a game has improperly rendered an image. FFXIV 'mist' (seen ini PeOPs software video plugin) might be a good example. However, I think only 'full screen' Anti-Aliasing can fix this, which is very slow / expensive.
- FPse support: one of the new "shaders' looks like it's actually anti-aliasing. FXAA
- FPse's FXAA has, for me, just made things look grainier and a bit blury. I'll have to test more.

- best used on: big bands of color - if you have fairly blocky bands of color (sunset, skyline, any situation with large bands of similar color), dithering can smooth them together so they don't look quite so blocky, but rather that they flow from one color to the next much smoother.
- the original PeOPs software plugin contained dithering, which I didn't realize. So does the PeOPs OpenGL plugin. I'm not sure why FPse doesn't. PeOPs OpenGL plugin (on PC) has dithering - I couldn't get it to work on my PC, but it wasn't needed in my test.
- I don't see why dithering should be needed - unless it's to help with problems from upscaling. Modern devices should be able to dispaly all needed / desired colors. There shouldn't be any need to recreate colors (i.e. from a PSX image that has more colors than the device running FPse), because modern devices can accurately display all colors from the original.
- I've read that the RF, composite, and even S-video cables created some bluring of the analog image, and that bluring allowed the dithering in the image to actually blend together. If we remove that bluring, the image may now be too distinct. Combine an over-distinct image with upscaling and maybe there's a need for more dithering. However - how do you dither an image if you already have all the required colors?
- I guess dithering may be desired in situations where there is color banding (strips / columns of colors right next to each other) and you want to even them out.

- aside from upscalers and anti-aliasing, shaders can be used to create some effects:
- dithering that we would use would be a type of shader. we don't need to create new colors that don't exist. We need to smooth out colors when there is banding.
- screenfiltering - schtruck's screenfiltering is a 'shader'. 'bilinear interpoloation[' aka 'bilinear filtering'.
- post processing improvements: This filtypants page shows many post processing techniques that could be used

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:02 am
by mckimiaklopa
Dithering was already used on a real psx console so it must be implemented.
Read this thread for some interesting info

go here for some pics of the original graphics produced by the psx with dithering

Some comparison pics of psx games with and without dithering(sadly,the inferior pics are from FPSE

FFIX without dithering

FFIX with Dithering

FFVII without dithering

FFVII with dithering

FFVIII with dithering

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:14 am
by mckimiaklopa
1st of all,the colors that are displayed on any emulator will not use the full color capacity of the mcahine where the emulator is being run.It will only run the color palette of the machine that is being emulated

so for example,let's say we have a game console named "YYY" wihich can only display 16-bit colors and we have a galaxy s344 that can display 32-bit color,running a "YYY" emulator on the galaxy s344 will only display 16-bit color(there are exceptions and that's only when we use special settings)

2nd. Even if we upscale it ,the colors will just be bland and a bit weird because of the lack of dithering(except of course if you use the 32 bit color setting on the openGL plugin)

3rd:Dithering will not just remove color banding,it will also make colors and many graphical effects look much more vibrant,realistic(to some extent at least),beautiful and visible(go fight diablos on FF8 on Fpse using software mode and you will know what I am talking about)

Proper dithering on FF7 will make the battle backgrounds appear much brighter and vibrant

4th:I am requesting dithering for SOFTWARE MODE or BLITTING MODE not for opengl because opengl already has 32 bit color mode


Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:31 am
by bluezeak
The images below are from my laptop running ePSXe, using PeOPs Software plugin

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:32 am
by bluezeak
PeOPs OpenGL on ePSXe on my PC

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:37 am
by mckimiaklopa
i think it is either your opengl screenshot has 32 bit color mode on

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 10:42 am
by mckimiaklopa
Without tinkering,opengl on my part still has color banding

and yes,the dithering on PEOPS is really inaccurate(by inaccurate i mean it doesn not dither everything that must be dithered)

Re: Graphics - Dithering, Anti-Aliasing, up-scaling, shaders

Posted: Tue Apr 29, 2014 11:15 am
by bluezeak
From my examples above - upscaling is horrible. That is, it didn't make a significant increase in quality. I didn't show any text - if memory serves, text came across much better. Other graphics / games may come through better as well.

FF 9 mist - as far as I can tell, that is a 'Moire' pattern issue. It's probably caused because the software mode can't render the mist properly. Full-Screen anit-aliasing may fix it. Or - a different video plugin that gets the data differently may fix it. Dithering does ultimately go away, and does so pretty well, I was impressed. I guess it shows how powerful dithering CAN be.

@mckimiaklopa - PSX and dithering - I didn't know the PSX dithered things on purpose. That doesn't make a lot of sense. But, I guess it was 'cheaper' for it to apply a dithering effect than it was to render the 'full' image. That's very interesting info. However ... ... if it truly was part of the PSX, then it's something that should be done in the basic emulator .... or at least in the basic part of the video plugin. Just like 'alpha multipass' or 'offscreen drawing'. It shoulnd't be an EXTRA option. Dithering IS part of the PeOPs software plugin, but it's offered like an add-on / extra option. I don't know if Schtruck used the PeOPs software plugin (I thought he did) or if he used his own. If he used PeOPs it seems like it should be easy for him to include it.

"If you do implement dithering,do not imitate the dithering in epsxe since it is highly inaccurate.Go for the dithering used in PCSX and psxfin". I suspect the dithering is video plugin dependant. If schtruck's software plugin is the PeOPs video plugin, it would likely work the same / similar to the one seen in my screenshot (i.e. ePSXe with PeOPs software mode).

"If you do not want dithering,than go for 32-bit color(it will be like dithering but without the dots/diamond-like patterns which is totally better)" - OpenGL has a 32 bit mode. I haven't seen it do anything significant for me though, either on PC or phone. Others have said it fixed some major flaws in the past, but nothing like dithering. I suspect it may always be on.

Anyway, after doing all this research and checking comparisons, I agree, we should have dithering.

That said, I suspect Anti-Aliasing may be better. But, it's probably too expensive / difficult. What we really want is to smooth out the colors so that trahnsitions are smoother between sections of color. We want some type of pixel interpolation to do that. Dithering will work - full screen dithering is pretty good. I'd like to see anti-aliasing though, but again, it's probably too expensive.