{"id":4273,"date":"2016-02-28T13:44:06","date_gmt":"2016-02-28T19:44:06","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=4273"},"modified":"2016-03-04T18:22:48","modified_gmt":"2016-03-05T00:22:48","slug":"one-more-variable","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/one-more-variable\/","title":{"rendered":"One more variable&#8230;"},"content":{"rendered":"<p>Michael Cohen was looking at <a href=\"http:\/\/filmicgames.com\/archives\/327\">John Hable&#8217;s useful test image<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/SmallLines-WithNumbers.png\" alt=\"\" width=\"440\" height=\"300\" \/><\/p>\n<p>He noticed an odd thing. Looking at the image on his monitor (&#8220;an oldish Dell&#8221;) from across the room, it looked fine, the 187 area matched the side areas:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4274\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/ok.jpg\" alt=\"ok\" width=\"500\" height=\"329\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/ok.jpg 500w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/ok-300x197.jpg 300w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/ok-456x300.jpg 456w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>(yes, ignore the moires and all the rest &#8211; honestly, the 187 matches the side bars.)<\/p>\n<p>However, sitting at his computer, the 128 square then matched the side bars:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4275\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/bad.jpg\" alt=\"bad\" width=\"500\" height=\"310\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/bad.jpg 500w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/bad-300x186.jpg 300w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/bad-484x300.jpg 484w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Pretty surprising! We finally figured it out, that it&#8217;s the view angle: going off-axis resulted in a considerably different gray appearance. Moving your head left and right didn&#8217;t have much effect on the grays, but up and down had a dramatic effect.<\/p>\n<p>Even knowing this, I can&#8217;t say I fully understand it. I get the idea that off-axis viewing can affect the brightness, but I would have thought this change would be consistent: grays would be dimmed down the same factor as whites. That last image shows this isn&#8217;t the case: the grays may indeed be dimmed down, but the alternating white lines are clearly getting dimmed down more than twice as much, such that they then match the 128 gray level. It&#8217;s like there&#8217;s a different gamma level when moving off-axis. Anyone know the answer?<\/p>\n<p>Addendum: and if you view the first image on the iPhone, you get this sort of thing, depending on your zoom level. Here&#8217;s a typical screen shot &#8211; I&#8217;ve trimmed off the right so that the blog will show one pixel for pixel (on desktop computers &#8211; for mobile devices you&#8217;re on your own). This darkening is from bad filtering, see <a href=\"http:\/\/www.realtimerendering.com\/blog\/png-srgb-cutoutdecal-aa-problematic\/\">the end of this article<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4278\" src=\"http:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/iphone.png\" alt=\"iphone\" width=\"500\" height=\"424\" srcset=\"https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/iphone.png 500w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/iphone-300x254.png 300w, https:\/\/www.realtimerendering.com\/blog\/wp-content\/uploads\/2016\/02\/iphone-354x300.png 354w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Follow-up: one person commented that it&#8217;s probably a <a href=\"http:\/\/www.tnpanel.com\/\">TN panel<\/a>. Indeed, there&#8217;s <a href=\"https:\/\/www.youtube.com\/watch?v=Kqw_BeFa-hk\">a video<\/a> showing the tremendous shift that occurs. The <a href=\"https:\/\/youtu.be\/Kqw_BeFa-hk?t=87\">blue turning to brown<\/a> is particularly impressive. I haven&#8217;t yet found a good explanation of what mechanism causes this shift to occur (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Thin-film-transistor_liquid-crystal_display\">Wikipedia<\/a> notes other monitors having a gamma shift, so maybe it is something about gamma varying for some reason). There&#8217;s a nice color shift test <a href=\"http:\/\/www.lagom.nl\/lcd-test\/all_tests.php#viewing_angle\">here<\/a>, along with <a href=\"http:\/\/www.lagom.nl\/lcd-test\/all_tests.php\">other interesting tests<\/a>.<\/p>\n<p>Even better: check out <a href=\"https:\/\/www.youtube.com\/watch?v=1Oszb7AhKGA\">this amazing video<\/a> from Microsoft Research. (<em>thanks to\u00a0Marcel Lancelle for pointing it out<\/em>)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Michael Cohen was looking at John Hable&#8217;s useful test image: He noticed an odd thing. Looking at the image on his monitor (&#8220;an oldish Dell&#8221;) from across the room, it looked fine, the 187 area matched the side areas: (yes, ignore the moires and all the rest &#8211; honestly, the 187 matches the side bars.) [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[256,570],"class_list":["post-4273","post","type-post","status-publish","format-standard","hentry","category-misc","tag-gamma","tag-monitor"],"_links":{"self":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/4273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/comments?post=4273"}],"version-history":[{"count":9,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/4273\/revisions"}],"predecessor-version":[{"id":4288,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/4273\/revisions\/4288"}],"wp:attachment":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/media?parent=4273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/categories?post=4273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/tags?post=4273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}