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

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 9:32 am

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.

Definitions:
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 - osdev.org - 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)
FPSE OpenGL info - click here

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 9:48 am

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.

Anti-Aliasing
- 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
- "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.

Shader
- 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
FPSE OpenGL info - click here

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 9:58 am

Thoughts on use in FPse:
Up-Scaling:
- 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.

Anti-Aliasing
- 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.

Dithering
- 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.

Shaders
- 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
FPSE OpenGL info - click here

mckimiaklopa
Junior Member
Posts: 34
Joined: Sun Dec 02, 2012 7:20 am
Primary Device: samsung Galaxy Y
Operating System: android 2.3.6
ROM: stock DXLF2

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

Postby mckimiaklopa » Tue Apr 29, 2014 10:02 am

Dithering was already used on a real psx console so it must be implemented.
Read this thread for some interesting info
http://www.sega-16.com/forum/showthread.php?15003-Full-Screen-Dithering-on-the-PSX

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

http://www.gamepilgrimage.com/content/tomb-raider-2


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

FFIX without dithering
Image

FFIX with Dithering
Image

FFVII without dithering
Image

FFVII with dithering
Image

FFVIII with dithering
Image

mckimiaklopa
Junior Member
Posts: 34
Joined: Sun Dec 02, 2012 7:20 am
Primary Device: samsung Galaxy Y
Operating System: android 2.3.6
ROM: stock DXLF2

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

Postby mckimiaklopa » Tue Apr 29, 2014 10:14 am

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

5th: THE DITHERING USED IN EPSXE IS VERY LACKING AND IS NOT CLOSE TO THE DITHERING OF A REAL PSX(that is true at least on the default psx plugin)

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 10:31 am

The images below are from my laptop running ePSXe, using PeOPs Software plugin
Attachments
soft_6-scale3x_unstretched-dither_max.png
FF 9 with HQ3x with full dithering
soft_6-scale3x_unstretched-dither_max.png (549.77 KiB) Viewed 29903 times
soft_5-_scale3x_unstretched-dither_minor.png
FF 9 with HQ3X with minor dithoring
soft_5-_scale3x_unstretched-dither_minor.png (445.18 KiB) Viewed 29903 times
soft_4-HQ3x_unstretched.png
FF 9 with 'HQ3X'
soft_4-HQ3x_unstretched.png (324.38 KiB) Viewed 29903 times
soft_3-SuperSai2x_stretched-3x.png
FF 9 with 'Super Sai x2' scaler (image is 1.5x on top of Sai's 2x increase - total is 3x size)
soft_3-SuperSai2x_stretched-3x.png (115.24 KiB) Viewed 29903 times
soft_2-scale3x_unstretched.png
FF 9 with 'scale3x' upscaler
soft_2-scale3x_unstretched.png (142.5 KiB) Viewed 29903 times
soft_1-stretched_3x.png
FF 9 wth basic (nearest neighbor) upscaler (3x size)
soft_1-stretched_3x.png (52.45 KiB) Viewed 29903 times
FPSE OpenGL info - click here

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 10:32 am

PeOPs OpenGL on ePSXe on my PC
Attachments
opengl_minimum-options.png
FF9 with OpenGL
opengl_minimum-options.png (372.2 KiB) Viewed 29903 times
FPSE OpenGL info - click here

mckimiaklopa
Junior Member
Posts: 34
Joined: Sun Dec 02, 2012 7:20 am
Primary Device: samsung Galaxy Y
Operating System: android 2.3.6
ROM: stock DXLF2

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

Postby mckimiaklopa » Tue Apr 29, 2014 10:37 am

i think it is either your opengl screenshot has 32 bit color mode on

mckimiaklopa
Junior Member
Posts: 34
Joined: Sun Dec 02, 2012 7:20 am
Primary Device: samsung Galaxy Y
Operating System: android 2.3.6
ROM: stock DXLF2

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

Postby mckimiaklopa » Tue Apr 29, 2014 10:42 am

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)

User avatar
bluezeak
Guru
Posts: 600
Joined: Fri Feb 03, 2012 10:04 am
Primary Device: motorola bionic
Operating System: Android 2.3.4
ROM: stock

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

Postby bluezeak » Tue Apr 29, 2014 11:15 am

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.
FPSE OpenGL info - click here


Return to “General Discussion”

Who is online

Users browsing this forum: No registered users and 86 guests