Missing wood for trees. RGB displays are deliberately made to be 'good enough' rather than 'great'. None of them can display whole areas of the visible spectrum [1]. Before taking issue with tiny amounts of visible banding, just maybe it would be better if monitors could actually display a reasonable amount of the visible spectrum...
It's quite obvious that for a gradient from 0x33 to 0x66 (one component), there are simply not enough distinct values to prevent banding. In this case, the range is 51 different values, for a gradient that's maybe spanning 500-1000 pixels. It really looks quite terrible.
I should point out that the area of a region in that diagram does not correspond with the ability to distinguish colors in that region. The diagram is misleading, but your point still stands.
It's overreach to say high DPI displays eliminate the need for anti-aliasing. You will still get shimmering, pixel popping, and temporal aliasing, it will just be harder to notice. If you have thin shapes like hanging cables or chain-link fences being displayed, even at high resolution, you will get pixels coming in and out of existence. Higher sampled AA tends to add spatial "stability" so that slight shifts of viewpoint won't trigger this.
Author here. You're right, high-DPI does not actually eliminate aliasing and I've toned done the wording slightly (added "nearly"). Certainly high-DPI is a huge step in the right direction even if several problems with aliasing remain.
I was simply attempting to say "thank you" to Apple for innovating with high-DPI displays so that I could follow that by saying more or less what you did: many things remain to address image clarity.
I don't think it wouldn't have been so bad if it was slower, like clouds on a not very breezy day. As it is, it felt like it was trying to hypnotize me.
Author here. You're completely right. I did for fun, not because I "should."
I'm not a designer; just someone who enjoyed playing with SVG and SMIL to make a subtle background effect that I liked.
You can turn off the animation with the menu at the bottom right. Apologies to everyone for burning your CPU cycles so needlessly. Just turn it off if you don't like it.
> Academics have told us that human eyes can't distinguish between the 16,777,216 colors provided by 24-bit depth, so we believe that even though it can't be true.
This is a fallacy. That the human eye cannot distinguish N different colours does not imply that a given colour space of >N colours contains every colour that the human eye can distinguish.
To give an equivalent example that is easier to understand, consider a colour space with 16.7 million shades of red. 16.7 million colours is more than the human eye can distinguish, but there are clearly many colours that the human eye can distinguish that are not in that colour space (notably shades of green, shades of blue, and combinations of red, green, and blue).
I agree. Displays in general suck. The display on the RMBP is a step in the right direction, but there's still a lot of work to be done. Anyone who settles for "good enough" may as well live life like it's the 16th century. It was "good enough" then too.
My vision for the future? Specifications that fully exceed the human capacity for discernibility.
2880x1800? Nope, I can still see aliasing (particularly in Terminal when I'm coding).
IPS? Nope. Move your head slightly up and down and -- while the chromaticity stays (roughly) the same -- the luminance does not.
Black levels? I can still distinguish a black screen from the bezel, so it needs some work too.
Color depth? See the provided banding examples. Not to mention that the three primaries in most LCD panels form a very small triangle in the chromaticity diagram.
Refresh rates also stink. It's 2012 -- motion should be so fluid it looks real by now.
Anyway, there's a lot of potential for improvement but I'm afraid if you're not OCD (like me) or a color scientist, most people just don't care too much.
Huh, don't get me started on image quality and such. Look how people watch constantly 4:3 movies horribly stretched on 16:9 screens. Look how bad the animation is on 99% of bluRay films (to the point of being unbearable) -- action scenes are stuttering and jittering except on the most recent hardware.
The number of bytes of memory available on GPUs is hardly the biggest issue when considering rendering at more than 8 bits per channel of color precision. Even producing a 30-bit framebuffer (as has been supported for a while on many desktop GPUs) comes at a performance penalty and is incompatible with many pieces of software and hardware. Modern GPUs actually allow 16 bits per channel of precision when rendering, but it comes at a significant cost - various features no longer function, memory bandwidth is devoured, etc. You can't simply say 'we can spare the bits' and wave away all the technological challenges here, especially when the advantage gained from all those costs is comparatively miniscule.
To be fair, this sort of applies to retina displays as well: The hardware put into some of the Retina macs can barely handle the bandwidth demands of realtime rendering at such high resolutions. Until that problem is addressed, you certainly shouldn't be running around demanding >8bpc color precision.
Dithering for gradients could certainly make a minor difference in rendered quality, but I don't think most browser vendors are interested in making rendering performance slower right now - they're quite busy trying to make it faster. As evidenced by the fact that the OP's site runs like complete garbage in even modern browsers. Even if you spend the cycles and the power to dither, you're basically approximating something like another bit of precision. Is it really worth the cost just for another bit? You could support the argument for dithering by showing a side by side comparison, at least.
You're right. I trivialize the challenges, and I admit that.
However, my point is that it has been some fifteen years since 24-bit "True Color" arrived. Certainly since then we've increased computing performance to the point where we can manage to throw a few more bits around, yes?
Also, you're right that browser vendors are dutifully concerned about performance. In fact, one of the reasons I enjoyed adding a subtly animated background (see previous reply apologizing to those who hate it) was a bit of evidence to back up another point I've made elsewhere: in 2012 our computers that process billions of CPU operations per second paired with high-powered GPUs can still get chunky with relatively trivial 2D animation in a web browser.
Incidentally, on that point, if you happen to have IE 10, check out how well it uses your GPU to do CSS transitions. It doesn't do the SVG/SMIL animation used in the background, but I find it fascinating how effortless it executes the animation it does support: http://tiamat.tsotech.com/ie-10-is-no-joke
I'd really like to see Chrome and Firefox catch up with that degree of GPU acceleration.
But in this particular blog entry, I'm asking that some attention return to rendering quality. I'd love to see color banding in gradients disappear soon.
Actually dithering makes a huge difference. I see zero banding whatsoever in the examples posted in this thread, because my sw/hw config does automatic dithering (Xorg fbdev 0.4.2, AMD Fusion E-350 GPU, Lenovo X120e laptop).
Contrast this with other posters who I presume don't have dithering, and write comments like "this gradient looks ugly"...
Not only that, it's such a processor hog it makes my MacBook Air fans whir at full volume.
I disabled JavaScript on the site, hoping that would make it behave, and got... no blog, only this:
> This blog uses a little JavaScript. Nothing dodgy, though, and nothing hosted at third-party sites. Just some jQuery and animation bits. So please, if you'd be so kind, ask Noscript to call off the hounds.
Congratulations, those “animation bits”, which you won't let me turn off, make your site unbearably annoying to read.
You are not the only one. I couldn't keep my eye focus on the text due to the rotating background, and closed the website after reading the first two paragraphs.
I can't on my MacBook or external screen. I tried on my iPhone—assuming that the screen might be lower quality—sadly the website blew up and there was no gradient to be found.
Safari renders both sides as rgba(72, 72, 72, 1.0). I have no idea why. Perhaps (ironically) a dithering algorithm gone wrong. In chrome the divide is visible.
I see banding in gradients quite often; more often in dynamic scenes in games than in more tightly designed static content online.
Of course much of the media we consume has quantized colour, streamed videos especially don't really stand up to any kind of close examination using today's displays, never mind futuristic ones. Banding from limited gamut is not the big problem here, there are much bigger elephants.
With all due respect, I don't see the gradient break. may be because of that gray animation rotating behind that div?, this posts reminds me of that yesterday's HN parody.
The obvious answer (or strawman) might be aesthetics. Yet two bits is sufficient to create art. Each medium has its limitations. Pen and ink, watercolor, clay - why should a computer screen be seen as inherently different?
We tend to view computer art on our own often miscalibrated displays, under variable lighting conditions, and at a variety of resolutions. Computer art is generally mass produced. Yes, it is behind glass, but not in the manner of the MonaLisa.
I'm not saying that "deep color" isn't worthwhile. Only that a coherent case for its practical advantages wasn't made. The problem wasn't obvious on my screen, and I am biased toward content over form.
I don't see anything wrong with your image. The gradient looks perfect on my monitor.
Edit: it looks perfect because my sw/hw config (driver Xorg fbdev 0.4.2, AMD Fusion E-350, Lenovo X120e laptop) does automatic dithering. I can see a tiny bit of dithering on the white end of the other gradient posted by nhw: http://file.st/KWb7XS7x Other that that, no banding on either images. Dithering invisible on yours. Dithering 24-bit colors really helps.
I'm missing the part about what awesome thing would be possible to do with higher-bit displays. The answer for higher-DPI displays is obvious: everything looks sharper, all the time. While it may be true that 30-bit color would allow the gradient between those two grays to be gradual instead of a single step, when does someone actually want to draw a gradient between such similar shades of gray?
"With high-DPI displays, the aliasing problem caused by insufficient pixels has been extinguished." that's not true. Aliasing is an omnipresent problem in discretized data every rasterized display is based on. Even though a retina display samples at a much higher rate, it needs anti aliasing for optimal results.
I'd like 64bit displays too. The problem is that there's quasi no content and also no content pipeline. Someone has to take the first step here.
And having 2GB of VRAM does not imply that you'll need a 268-million pixel display to use it all. In modern games, the vast majority of that VRAM is used by textures (and we need as much of it as we can get!)
[+] [-] twelvechairs|13 years ago|reply
[1] For a reasonable graphic example http://en.wikipedia.org/wiki/File:CIExy1931_srgb_gamut.png where grey is the entire visible spectrum and the coloured areas are the standard RGB colour space.
[+] [-] 0x0|13 years ago|reply
http://i.imgur.com/9xeDT.png?1
It's quite obvious that for a gradient from 0x33 to 0x66 (one component), there are simply not enough distinct values to prevent banding. In this case, the range is 51 different values, for a gradient that's maybe spanning 500-1000 pixels. It really looks quite terrible.
[+] [-] Xcelerate|13 years ago|reply
[+] [-] cromwellian|13 years ago|reply
[+] [-] bhauer|13 years ago|reply
I was simply attempting to say "thank you" to Apple for innovating with high-DPI displays so that I could follow that by saying more or less what you did: many things remain to address image clarity.
[+] [-] ck2|13 years ago|reply
Just because you can do animation doesn't mean you should.
[+] [-] fuzzix|13 years ago|reply
Also, it slowed site scrolling to a crawl on this reasonably beefy desktop machine.
[+] [-] Flenser|13 years ago|reply
[+] [-] bhauer|13 years ago|reply
I'm not a designer; just someone who enjoyed playing with SVG and SMIL to make a subtle background effect that I liked.
You can turn off the animation with the menu at the bottom right. Apologies to everyone for burning your CPU cycles so needlessly. Just turn it off if you don't like it.
[+] [-] moreati|13 years ago|reply
[+] [-] iMark|13 years ago|reply
[+] [-] 1331|13 years ago|reply
This is a fallacy. That the human eye cannot distinguish N different colours does not imply that a given colour space of >N colours contains every colour that the human eye can distinguish.
To give an equivalent example that is easier to understand, consider a colour space with 16.7 million shades of red. 16.7 million colours is more than the human eye can distinguish, but there are clearly many colours that the human eye can distinguish that are not in that colour space (notably shades of green, shades of blue, and combinations of red, green, and blue).
[+] [-] 4ad|13 years ago|reply
[+] [-] Xcelerate|13 years ago|reply
My vision for the future? Specifications that fully exceed the human capacity for discernibility.
2880x1800? Nope, I can still see aliasing (particularly in Terminal when I'm coding).
IPS? Nope. Move your head slightly up and down and -- while the chromaticity stays (roughly) the same -- the luminance does not.
Black levels? I can still distinguish a black screen from the bezel, so it needs some work too.
Color depth? See the provided banding examples. Not to mention that the three primaries in most LCD panels form a very small triangle in the chromaticity diagram.
Refresh rates also stink. It's 2012 -- motion should be so fluid it looks real by now.
Anyway, there's a lot of potential for improvement but I'm afraid if you're not OCD (like me) or a color scientist, most people just don't care too much.
[+] [-] wazoox|13 years ago|reply
[+] [-] donaldc|13 years ago|reply
[+] [-] kevingadd|13 years ago|reply
To be fair, this sort of applies to retina displays as well: The hardware put into some of the Retina macs can barely handle the bandwidth demands of realtime rendering at such high resolutions. Until that problem is addressed, you certainly shouldn't be running around demanding >8bpc color precision.
Dithering for gradients could certainly make a minor difference in rendered quality, but I don't think most browser vendors are interested in making rendering performance slower right now - they're quite busy trying to make it faster. As evidenced by the fact that the OP's site runs like complete garbage in even modern browsers. Even if you spend the cycles and the power to dither, you're basically approximating something like another bit of precision. Is it really worth the cost just for another bit? You could support the argument for dithering by showing a side by side comparison, at least.
[+] [-] bhauer|13 years ago|reply
However, my point is that it has been some fifteen years since 24-bit "True Color" arrived. Certainly since then we've increased computing performance to the point where we can manage to throw a few more bits around, yes?
Also, you're right that browser vendors are dutifully concerned about performance. In fact, one of the reasons I enjoyed adding a subtly animated background (see previous reply apologizing to those who hate it) was a bit of evidence to back up another point I've made elsewhere: in 2012 our computers that process billions of CPU operations per second paired with high-powered GPUs can still get chunky with relatively trivial 2D animation in a web browser.
Incidentally, on that point, if you happen to have IE 10, check out how well it uses your GPU to do CSS transitions. It doesn't do the SVG/SMIL animation used in the background, but I find it fascinating how effortless it executes the animation it does support: http://tiamat.tsotech.com/ie-10-is-no-joke
I'd really like to see Chrome and Firefox catch up with that degree of GPU acceleration.
But in this particular blog entry, I'm asking that some attention return to rendering quality. I'd love to see color banding in gradients disappear soon.
[+] [-] mrb|13 years ago|reply
Contrast this with other posters who I presume don't have dithering, and write comments like "this gradient looks ugly"...
[+] [-] fusiongyro|13 years ago|reply
[+] [-] graue|13 years ago|reply
I disabled JavaScript on the site, hoping that would make it behave, and got... no blog, only this:
> This blog uses a little JavaScript. Nothing dodgy, though, and nothing hosted at third-party sites. Just some jQuery and animation bits. So please, if you'd be so kind, ask Noscript to call off the hounds.
Congratulations, those “animation bits”, which you won't let me turn off, make your site unbearably annoying to read.
[+] [-] nwh|13 years ago|reply
I hope this developer isn't making content on real websites.
[+] [-] Luyt|13 years ago|reply
[+] [-] comex|13 years ago|reply
[+] [-] haxxorfreak|13 years ago|reply
[+] [-] yen223|13 years ago|reply
[+] [-] nwh|13 years ago|reply
[+] [-] jamesaguilar|13 years ago|reply
[+] [-] jopt|13 years ago|reply
[+] [-] barrkel|13 years ago|reply
Of course much of the media we consume has quantized colour, streamed videos especially don't really stand up to any kind of close examination using today's displays, never mind futuristic ones. Banding from limited gamut is not the big problem here, there are much bigger elephants.
[+] [-] nairteashop|13 years ago|reply
[+] [-] Someone|13 years ago|reply
[+] [-] wildranter|13 years ago|reply
[+] [-] lucian1900|13 years ago|reply
24bit is fine. It's <200dpi that has to die.
[+] [-] devsatish|13 years ago|reply
[+] [-] raverbashing|13 years ago|reply
Several monitors turn your 8-bpp image to a 6-bpp image.
[+] [-] brudgers|13 years ago|reply
The obvious answer (or strawman) might be aesthetics. Yet two bits is sufficient to create art. Each medium has its limitations. Pen and ink, watercolor, clay - why should a computer screen be seen as inherently different?
We tend to view computer art on our own often miscalibrated displays, under variable lighting conditions, and at a variety of resolutions. Computer art is generally mass produced. Yes, it is behind glass, but not in the manner of the MonaLisa.
I'm not saying that "deep color" isn't worthwhile. Only that a coherent case for its practical advantages wasn't made. The problem wasn't obvious on my screen, and I am biased toward content over form.
[+] [-] 4ad|13 years ago|reply
[+] [-] seanalltogether|13 years ago|reply
https://dl.dropbox.com/u/1437645/banding.png
[+] [-] mrb|13 years ago|reply
Edit: it looks perfect because my sw/hw config (driver Xorg fbdev 0.4.2, AMD Fusion E-350, Lenovo X120e laptop) does automatic dithering. I can see a tiny bit of dithering on the white end of the other gradient posted by nhw: http://file.st/KWb7XS7x Other that that, no banding on either images. Dithering invisible on yours. Dithering 24-bit colors really helps.
[+] [-] nwh|13 years ago|reply
[+] [-] berkut|13 years ago|reply
[+] [-] gdg92989|13 years ago|reply
[+] [-] haberman|13 years ago|reply
[+] [-] sukuriant|13 years ago|reply
[+] [-] lflux|13 years ago|reply
[+] [-] georgraphics|13 years ago|reply
I'd like 64bit displays too. The problem is that there's quasi no content and also no content pipeline. Someone has to take the first step here.
[+] [-] achal|13 years ago|reply
[+] [-] Superpig|13 years ago|reply
And having 2GB of VRAM does not imply that you'll need a 268-million pixel display to use it all. In modern games, the vast majority of that VRAM is used by textures (and we need as much of it as we can get!)
[+] [-] verroq|13 years ago|reply