Ask HN: Why does this image look 3D?
The image: https://twitter.com/mrbiffo/status/1516862012915167236
Mirror: https://i.imgur.com/3TU00N4.jpg
On my Mac's Dell LCD monitor, this image has a surprisingly intense 3D effect. The colored blocks appear to be floating in front of the blue and black background.
On my iPhone, the effect doesn't work at all, and it appears completely flat.
This is not simply a parallax or contextual effect - it feels as if I am looking at one of those lenticular 3D postcards.
What's going on?
Red and blue are the extremes of colours we can see, and because of the change in wave length they focus at different lengths in our eye. So to focus on either colour your eye has to adjust its focal length, which gives the 3d effect. The perspective probably adds to it.
It's called chromostereopsis - http://en.wikipedia.org/wiki/Chromostereopsis
The strongest example I've found of Chromostereopsis that I've found:
https://pbs.twimg.com/media/CeaBIWdWEAAmm4_.jpg
I have another example in my design inspiration notes that is based on a live action image: https://i.imgur.com/Tau4fHc.jpg
Came here to say this, and also that I like this other page with a good explanation of the phenomenon.
http://www.ritsumei.ac.jp/~akitaoka/scolor-e.html
Akiyoshi Kitaoka is and has been the king of optical illusions for as long as I can remember. My undergraduate thesis in 2005 was based on his work [0], and even at that time he had a huge body of work.
[0] I demonstrated exploiting various optical illusions to create depth and animation effects. I thought I was going to revolutionize game graphics on mobile devices! And then mobile devices got GPUs shortly thereafter.
That first image is incredible. The effect is so strong.
I'm jelous :[ Being stereoblind none of the examples work for me.
The effect is still visible when viewing them with one eye.
Why doesn’t it work as well on a mobile phone though? Especially since an iPhone has better color reproduction than most desktop monitors.
I think it may also depend on the subpixel geometry[0][1] (and pixel density) of the screen. There are a lot of ways to arrange subpixels.
[0] https://en.wikipedia.org/wiki/Pixel_geometry
[1] https://en.wikipedia.org/wiki/PenTile_matrix_family
Here's the iPhone 13: https://www.displaymate.com/Diamond_69M.html
This hurt my eyes more than any image I've ever looked at -- desktop monitor. Ow.
Is it because you're viewing it at a different distance (phone usually closer than monitor) and therefore the focusing variation is different?
Worked for me on my iPhone 6s+, though not as strong as OP described. Maybe LCD vs OLED?
In other words. The brain has a bug on the chromatic aberration part of the image processing pipeline.
Who wear glasses, either in the face or in a camera, may have noticed, a red or blue contour on some occasions. This also happens with our eyes, but it seems the brain use this to infer depth.
Does this happen with other images? Do you wear glasses?
I do, and moving that image around my field of view gives a mild 3D effect. I've always suspected that my poly carbonate lenses have strong chromatic aberration[0], with reds being separated outwards (blues inwards) when viewed towards the edge of my lenses.[1] When moving that image around, the red areas move more than the blues, so yeah, that's a fake 3D effect.
[0] https://en.wikipedia.org/wiki/Chromatic_aberration
[1] this is especially noticeable when I look at Microsoft's logo with the colored squares. I know that they are supposed to be equally spaced out, but they almost never look that way to me, especially when viewed in thumbnail form.
This has annoyed me for years with my polycarbonate (or some other plastic) lenses. I do a lot of work plotting data, and people like to use vibrant colors with pure red, green, blue. Well I turn my head slightly and the lines shift, or they split into two different colored lines.
With a prescription around -6 I'm not sure what the best alternative is, I was looking into glass lenses again.
You for sure don't want glass lenses. Your biggest issue isn't poly, it's your lens thickness. Best way to get the thinnest lenses possible is to use round frames. Perfect circles would be ideal, rectanglish in any way is going to thicken them significantly. Mention those issues to your eye doctor too, they'll know how to reduce abberation with different lens designs if that's something that bothers you.
It's not the lens thickness, it's the optical density (Abbe number). Different lens materials have different Abbe numbers.
(I first learned of this here on HN: https://news.ycombinator.com/item?id=19315650)
I know, I work in the optical industry. Abbe value is one part of it, but thickness is the multiplier. For most prescriptions, you'll never notice. But with a high negative, you have thicker lenses. If you use something with a lower index, they get even thicker. So what you do is use high index material to thin it as much as possible, then use round frames to prevent the lenses from flaring on the sides.
For a given lens strength (prescription), the material with the highest Abbe number will have the fewest chromatic aberrations. Is that not correct, and the whole point of the Abbe number?
Some higher-index materials have noticeably worse Abbe numbers than others, and for my prescription of -9.75/-8.75 I selected a high-index 1.61 lens because it supposedly had an Abbe number of 41 whereas the higher index (and thinner) 1.67 or 1.74 lenses have much worse Abbe numbers of 32 and 33. Sure, the lenses are thick, but that doesn't bother me, and neither do chromatic aberrations much anymore.
Also, smaller lenses may reduce chromatic aberrations, but only because they reduce the field of view. I would rather have clear side vision with some aberrations than have very blurry side vision.
Yes that's the point of an Abbe value but if your lenses are super thin you can't tell. Chromatic abberation becomes more apparent as the lens thickness increases. Glass has the lowest but it's irrelevant if you're making glass an inch thick for example. No matter what you use, you'll have very noticeable abberation. The tradeoff for a thicker lens using 1.53 vs 1.74 will never be worth it as you'll be wearing coke bottles and you'll still see abberation because it's so damn thick.
When you order your lenses, talk to your provider about the Abbe values of different materials.
Polycarbonate lenses are specifically bad at chromatic aberation, but traditional glass and plastic is good (but probably too thick/heavy for your prescription). I'm enjoying trivex, but my prescription isn't much; not sure if it would work for you.
FYI the higher the index, typically the worse the abbe value and hence chromatic abrasion is. I never pay extra for thin & light lenses because of that and always stick to standard CR39 lenses. My myopia is only -3.5 though, so the difference between 1.5 and 1.67 index is negligible as the frames are thicker.
Recently I inquired about glass lenses for that reason after a long time with plastic ones, and was surprised to learn they are mostly phased out due to safety concerns.
I do wear glasses! And I think you're onto something. I just switched to my backup pair and the effect is much less pronounced. So it must be something to do with my glasses.
You are probably seeing the effects of chromatic aberration. Bluer colors get refracted more strongly than redder color. The thing that makes it look 3d is that this effect is more pronounced the further from the center of the lens you are looking. So in your left eye for example the yellow boxes are closer to the center of the lens than in your right eye, the chromatic aberration will shift those yellow boxes more in your right eye relative to how the blue background gets shifted, and that results in what your brain perceived as parallax which makes you think the image is 3D.
I think this is it.
My glasses have a noticeable aberration when I look at the edges of the lenses. This image gives me a slight parallax when I look around with my glasses on, but if I take them off, it doesn't happen at all.
After complaining to an optometrist about this, they suggested the Trivex lens material as having less chromatic aberration.
I've been pretty happy with those glasses, though I am reluctant to declare the material a silver bullet. I'm at the age where presbyopia changes each year and so it is not feasible to really compare the affect of the material alone.
I think you're on to something, while I can still "force" a 3D effect on the image without my glasses by unfocusing a bit and moving the screen, it's much stronger with glasses on.
Edit: nearsighted, I don't remember the glasses prescription but contacts are -3.25
> I do, and moving that image around my field of view gives a mild 3D effect.
Same for me. I tried with two different pairs of glasses (both from Zenni).
Without glasses there's no such effect.
I’m just speculating so someone else might know better. What I think is going on is that if your monitor shows especially short-wavelength blues, since this image uses pure #0000FF blue, it’s possible that the blue is so pure and short-wavelength that the lens of your eye doesn’t focus those pixels quite right, and it ends up at a different focal plane than the other colors, especially the pure red which is very long-wavelength.
The iPhone might use less extreme wavelengths for the colors, or use LEDs that are less spectrally-pure.
Edit: like the user named Someone commented below, it looks like this phenomenon has a name - chromostereopsis.
I dont think the blue wavelength is it, but a cool fact: humans can only see blue in true focus when under water! This is why you dont want blue text for signage. Backgrounds on traffic signs are ok if the text on it has high contrast and its a reflective material.
Refraction for blue from lens to air is not aligned like red and green are.
Possibly https://en.wikipedia.org/wiki/Chromostereopsis
Not getting the effect, personally.
Viewing on a 2017 5K iMac here; don't wear glasses (as others have mentioned eyewear impacting their perception)
Me neither, with glasses. There is the "3D" effect from the perspective of a known silhouette when looking down a street at night, but this is more due to the association of the central perspective with 3D depth instead of some weird effect.
It looks completely uninteresting to me.
I think is only noticeable on mobile phones.
OP said it's not noticeable on their phone but it is on their Dell monitor.
I'm not sure about the floating blocks but I feel I should let you know: the background is white and gold.
I bet you wear glasses with polycarbonate lenses.
I dunno how people stand optics with such high CA. CR-39 is much better optically and also a lot less expensive-- vendors shovel people into polycarbonate because they can charge more for it.
E.g. from zenni CR-39 lenses are 'free'! but you have to click a bunch of extra times to choose them.
Not op, but.
Interesting you mention that because I’m wearing Zenni glasses and went and checked on my orders page that they’re not polycarbonate. I got the “free” lenses with oleophobic coating. This image doesn’t look 3D at all to me. I was very confused about this post.
There are a lot of answers here that suggest the colors have something to do with it. I think that is true, but no one has suggested what I think it is overall: the Gestalt Principles[0] in action.
The Gestalt Principles are from cognitive psychology, the part of psychology that deals, in part, with how we sense (eyes) and perceive (brain / mind) visual stimuli. Those principles are used a lot in interaction design, UX design, human-computer interaction, etc.
The specific Gestalt principle at work here is likely the "Figure / Ground" principle, also known as "background-foreground". Our brains are somewhat pre-wired to see things as either being in front or back of other things. There are some optical illusions that mess with our perception of foreground, e.g. Rubin's Vase[1].
The picture in question has the buildings in black, indicating they're silhouettes because the light source isn't hitting the walls directly. The blue of the background suggests some light coming from the night sky, illuminating things from the back. The brightly colored signs would provide their own light in the real-world context, and they have a high luminance value[2], i.e. high perceived value of lightness, as if giving off their own light.
To sum it up, it looks 3d because our brains have evolved in a three-dimensional world and have built-in functionality that helps us "fill in the blanks" in situations with incomplete information.
References:
[0]: https://www.interaction-design.org/literature/topics/gestalt...
[1]: https://en.wikipedia.org/wiki/Rubin_vase
[2]: https://vanseodesign.com/web-design/color-luminance/
This might help, but I'm confident this is not the primary cause, here. The effect I can see is not that of the buildings receding, but of the colored blocks floating off the surface of my monitor. They even seem to exhibit a small amount of parallax if I move my head.
Honestly, that sounds like it's still the Gestalt principles at work. Did you read the link I posted about luminance?
The person who made that art seems to have a keen eye for color design. The colors are chosen in such a way that the signs "pop", making them look like they're well away from the wall despite being a grid of colors on a 2d plane. That red especially looks bright relative to the rest of the image.
There's no way they could be hiding anything special in a static image to give it a parallax. Your brain is doing all the hard work for the artist.
The mystery was solved in another comment, it's "Chromostereopsis":
http://www.ritsumei.ac.jp/~akitaoka/scolor-e.html
https://en.wikipedia.org/wiki/Chromostereopsis
Blue recedes, red brings objects forward. It's taken to the extreme with the high chroma of the chosen colors, giving a 3d effect.
My brother and I once had an idea for a 4D game, where you could be chased by NPCs that could move in 4 spatial dimensions. As well as perspectively increasing in size as they came closer to you in 3 dimensions, they would red and blue shift to indicate the 4th dimension.
Probably because one of those two facts:
1. The blue light is physically behind the others wavelength;
2. The blue is (much) more intense than other wavelengths.
Some background.
The LCD panel is a RGB filter in front of a white light.
White light is usually* made with a blue diode with some phosphor on top. The phosphor converts some (but not much) of the blue light into the rest of visible spectrum. Most of emitted light is the original blue from the diode.
Fun fact: The sun is also mostly blue. And there are white lights that are pretty much only blue, but we perceive as white (usually sold for vegetative growth of plants).
* In the past we used fluorescent tube. Quantum dot film are becoming common now (they have been used for a while, but are mainstream now because Rec. 2020). There are white diodes, but I haven't heard about them being used as backlight -- their CRI are pretty terrible, and they are expensive.
> Quantum dot film are becoming common now (they have been used for a while, but are mainstream now because Rec. 2020)
not really, there are essentially zero quantum dot based white light products commercially available right now, apart from some very niche offerings that are expensive and unreliable like osram/plt leds. and what does 'because Rec. 2020' even mean as a justification?
I'm talking about QD films, not diodes.
Since early 2010s Vizio, HiSense and TCL made TV with 3M's QDEF [1].
This year, a few brands made TVs with perovskite quantum dot film. They are being branded as QLED.
The widespread adoption of Rec. 2020 creates a demand for displays capable of displaying larger color volume. Phosphor LEDs TVs have around 60% coverage of Rec. 2020. The best OLED TV has 73% coverage. QDEF TVs has up to 81% coverage. The perovskite quantum are capable of achieving more than 90% (but the commercially available TVs are not there yet).
[1] https://multimedia.3m.com/mws/media/985375O/3mtm-quantum-dot...
ok, so in TVs? makes more sense, thanks! also i learned about https://en.wikipedia.org/wiki/Rec._2020 today...
> ok, so in TVs
No idea why there isn't any computer display with QDEF. It is probably easy to convert them using a filter from a old TV. However, But, this is probably not a good idea, those old quantum dots were toxic.
I think QLED will be everywhere.
Appears flat here as well, however, some of the dell monitors have this weird checkerboard-like pattern in their backlight distribution, so large surfaces are not plain to look at, you see "through" the plane and onto the background pattern of the screen itself, which is physically located behind the LCD. I've noticed a 3D-like effect from boxes of bright singular colors many time on my dell monitor at work, especially when they're smallish boxes on dark background, the boxes look like they have depth.
I speculate this happens because my eye is focusing on the checkerboard pattern on the back of the monitor itself, which is behind the lcd, and probably far enough behind it (several millimeters) that depth perception kicks in.
Also good one http://www.psy.ritsumei.ac.jp/~akitaoka/kakengakaken01blur.j... From: http://www.psy.ritsumei.ac.jp/~akitaoka/motion34e.html
the effect can be much stronger, try this one
https://imgur.com/0htzt9Y
I'm going a bit off topic here but this two bars technique is the most powerful 3D-without-3D-hardware effect I've seen, short of Magic-Eye.
https://imgur.com/gallery/HQGog
There are some depth cues in it:
- object overlap: overlapping object is assumed to be in front of occluded object
- color: dark background is distant, back in space
- water-surface-like pattern at the bottom, with stripes getting smaller and closer together toward the top.
- some scale variance in some of the rectangular patterns: they are vaguely similar to each other, at different scales: the smaller scales look distant.
Another take: OP has an oled screen, and the effect is produced by the dark-on-black ghosting. This is happens with dark scrolling objects on black background on my samsung phone, and creates a fluid 3d effect for this particular picture.
I cannot stand that purple smear effect. For a long time I thought I was just getting really unlucky with bad display panels in my devices. And then I finally found it was standard.
How is that a thing? It's unbearable.
It's not OLED. My iPhone is, and it doesn't work there.
I wear glasses and still don't get the effect from my main display. I only realized it can be seen as 3D after seeing two street lights in different sizes. To me it looks more like two tall buildings with multiple bridges.
Seeing it on an old iPhone.
Very vivid.
The reason is the blue/red wavelength thing discussed herein. Pretty standard optical illusion. But the RGB values and shapes are configured to create a better demonstration of this than I have ever seen!
For me it's 3D if I wear glasses and flat if I remove them. Curious!
Do your glasses produce any level of chromatic abberation? If so, that would explain it.
For my glasses, blue tends to get pushed slightly to the outside of the center of my vision and red gets pushed towards the center. At the center of my vision, I don't notice it, but if I look towards the edge of my lenses, it's pretty apparent.
This abberation will cause a significant shift when looking at pure reds and blues, creating the 3D effect.
Yeah, I looked at it closely and there is a thin black line on the edge between red and blue that is getting wider as I look at it through thicker parts of the lenses. Basically, I move my head and see "another side" of the box that doesn't exist
OP, I think we figured this out
It doesn't. to me.
Sorry but does it the so called 3D images? I can't "see" them when I was child, but several days ago, I tried and succeed, and this is that?
My old Samsung S9 made this colour of blue on black look 3D and I have no idea why. Links on a black page popped out. On iPhone it doesn’t. Do you have another device to test on?
Not seeing it brah
This reminds me of an old game I used to play on my Amstrad CPC, called Saboteur (II, to be precise)
It's an optical illusion. Your brain knows how 3d a alley should look like.
it doesn't?
Because it's using black to convey perspective of an alleyway.
Reminder to turn off your blue light filter before testing it.
iPhone 13 pro max here, see it as 3D. Pretty trippy!
(Also yes, glasses)
Are you high?
no, I'm not
Because its ascii art inspired from cyberpunk 2077 xD