Dlaczego dwa idealnie sąsiadujące prostokąty tworzą czarne lub białe linie pomiędzy nimi, jakby się nakładały lub nie były dokładnie sąsiadujące?

53

Mam płaską konstrukcję (tak powinno być), ale te czarno-białe linie między kształtami są tak denerwujące ... [bez pociągnięcia] spójrz:

Problem

Widzisz te linie między dwoma nakładającymi się prostokątami? Jak mogę to naprawić? (Stworzyłem to w Photoshopie, ale ten sam problem występuje przy użyciu Paint.net i Adobe Illustrator) Czy to coś z kolorem? A może widzę za dużo? : P

candh
źródło
Myślę, że kluczem tutaj decydującym o tym, czy jest to zespół Macha, czy coś innego, jest asymetria: „jak widać, prawa strona prostokąta zachodzi na 1 px (jak powiedziałeś), podczas gdy lewa strona nie”. Pasma Macha powinny pojawiać się symetrycznie po obu stronach.
Elmo Allén
1
Powiększałem (do 25600%), więc jest to zdecydowanie efekt subpikseli. Nawiasem mówiąc, widzę artefakty tylko na 1 z 3 monitorów. Pozostałe dwa wyglądają primo sharpo !! To zdecydowanie zależy od budowy monitora w pikselach.
Octopus
1
@Octopus: Jaka marka monitoruje? To mój następny zakup i bardzo chciałbym kupić coś, co jest obiektywnie wyższej jakości.
dotancohen,

Odpowiedzi:

90

Jak słusznie zauważa Elmo Allén, nie jest to ani złudzenie optyczne, ani błąd w edytorze graficznym, ale efekt wywołany przez technologię monitorowania, której używasz.

W szczególności na typowym nowoczesnym ekranie komputera TFT-LCD każdy piksel składa się z trzech oddzielnych subpikseli ułożonych obok siebie, odpowiednio w kolorze reg, zielonym i niebieskim:

Piksele na ekranie TFT

Każdy z tych subpikseli może wytworzyć tylko jeden z podstawowych kolorów światła, ale ponieważ są one bardzo blisko siebie, ich kolory mieszają się, gdy na nie patrzysz, tworząc iluzję jednolitego koloru.

W przypadku białego (lub szarego) piksela wszystkie subpiksele są jednakowo podświetlone. Dostosowując intensywność różnych subpikseli względem siebie, można wytwarzać różne kolory. W skrajnym przypadku dla czystego czerwonego, zielonego lub niebieskiego piksela włączane są tylko subpiksele wytwarzające ten kolor. W ten sposób Twój czerwono-zielono-czerwony pasek na poziomie subpikseli zostanie renderowany w następujący sposób:

Czerwono-zielono-czerwony pasek na ekranie TFT

Tutaj możesz zacząć widzieć, co się dzieje: zwykle między dwoma oświetlonymi odstępami są dwa ciemne subpiksele, ale na granicach między kolorami odstęp ten wynosi trzy subpiksele (tworzenie ciemnego pasma) lub tylko jeden (tworzenie jasny).

Oczywiście efekt jest bardziej oczywisty, gdy kolory pobliskich subpikseli zmieszane są ze sobą, co zwykle dzieje się, gdy patrzysz na ekran:

Czerwono-zielono-czerwony pasek na ekranie TFT, rozmazany

Tutaj zastosowałem tylko umiarkowane rozmycie, symulując to, co możesz zobaczyć, jeśli np. Spojrzysz na ekran przez szkło powiększające. (Spróbuj!) Ciemny pasek na lewym brzegu jest tutaj oczywisty; jasne pasmo po prawej stronie nie pokazuje się tak wyraźnie, ale stałoby się bardziej zauważalne, gdyby obraz był dalej rozmazany.

Oczywiście nie musisz ufać tym symulowanym obrazom. Zamiast tego pozwólcie, że dołączę kilka zbliżeń, które zrobiłem na ekranie laptopa, pokazując obraz w pytaniu, za pomocą taniego aparatu cyfrowego:

Zdjęcie ekranu laptopa pokazujące granicę koloru czerwonego / zielonego
Zdjęcie ekranu laptopa pokazujące granicę koloru zielonego / czerwonego

Podobnie jak na obrazie symulowanym ciemna linia jest bardzo oczywista; jasna linia jest mniej widoczna, być może dlatego, że między podświetlonymi jest jeszcze jeden ciemny subpiksel, więc nie ma tak wyraźnego pojedynczego piku intensywności.

Co możesz zrobić, aby to naprawić?

Zasadniczo ten efekt jest czymś, co monitor może automatycznie zrekompensować, np. Wykrywając takie problematyczne przejścia i pozwalając, aby kolory lekko się rozjaśniały, aby złagodzić przejście. Zwiększyłoby to jednak złożoność i koszty, dlatego większość producentów monitorów nie zawraca sobie głowy.

Możesz jednak osiągnąć ten sam efekt, dodając wąski pasek koloru pośredniego (np. Żółty, czerwony i zielony) między tak bardzo kontrastującymi polami kolorów. Kolor tego paska powinien w przybliżeniu odpowiadać średniej luminancji otaczających kolorów, biorąc pod uwagę gamma wyświetlacza .

Ilmari Karonen
źródło
2
Nie sądzę, że rekompensata naprawdę wpłynęłaby tak bardzo na koszty (~ 1 euro za blaty paneli). Biorąc pod uwagę dawne czasy Amigi, zrobili coś podobnego. Bardziej przypomina to, że problem jest dość rzadki i nie chcesz problemów z regulacją wyostrzania / adaptacji dla prawie żadnego zysku. Przypominamy, że technologia jest pełna kompromisów i musisz być świadomy niektórych z nich. +1 Hyvät kuvat kuitenki.
joojaa,
2
Czy dodawanie kolorów pośrednich jest w rzeczywistości wykonywane?
Lilienthal,
1
@Lilienthal: Nigdy tego nie widziałem; z drugiej strony chodzi o to, że nie powinniście tego widzieć. Przypuszczam, że jednym z powodów, dla których rzadko pojawia się taka potrzeba w praktyce, jest to, że większość projektantów i tak ma tendencję do unikania stawiania obok siebie tak silnie kontrastujących czystych kolorów.
Ilmari Karonen,
35

Trudno jest zrobić dokładnie to, co wszyscy tutaj widzą, ponieważ każdy ma własny wyświetlacz, aby zobaczyć obraz. Na moim monitorze, gdy zmrużyłem oczy, zobaczyłem bardzo cienką czarną linię między lewym czerwonym prostokątem a zielonym środkowym prostokątem. I przeciwnie, pomiędzy prawą czerwoną a środkową, widzę bardzo cienką białą linię. Zasadniczo rozumiem, że oryginalny plakat oznacza, że ​​widzą to (przesadzone):

Opis problemu: czarna lub biała linia między sąsiadującymi prostokątami, przesadzona.

To nie są pasma Macha , jak sugerowano w komentarzach do pytania. Pasma Macha nie rodzą się w różnych kolorach chromowanych, lecz między różnymi kolorami oświetlenia (np. Między dwoma odcieniami szarości). Bardzo słaby pasmo Macha powstaje po prawej stronie czerwonego prostokąta, ponieważ pełna czerwień (RGB 255-0-0) jest nieco mniej jasna niż pełna zieleń (RGB 0-255-0) na moim monitorze (i na wszystkich monitorach sRGB jako dobrze). (Mimo że kolory oryginalnego obrazu nie są czysto czerwone lub zielone, różnica w ich postrzeganej jasności jest w przybliżeniu taka sama.) Zasadniczo prążki Macha pokazują to tak (ponownie, bardzo przesadzone):

Ilustracja zespołów Macha, przesadzona.

Ale zespoły Macha nie mogą tworzyć białych ani czarnych cienkich linii. Tworzą jedynie niewielką różnicę w obserwowanej jasności na dużym obszarze. A pasma Macha są zawsze symetryczne: czerwony do zielonego jest taki sam jak zielony do czerwonego. Jest to jednak asymetryczne: druga granica jest czarna, a druga biała.

Zamiast tego, ten artefakt wizualny, który tutaj widzimy, jest spowodowany rozmieszczeniem subpikseli LCD . Najczęściej stosowanym układem jest czerwono-zielono-niebieski od lewej do prawej. Tak więc między każdym pełnym czerwonym pikselem znajduje się wyłączony zielony subpiksel i wyłączony niebieski subpiksel. Zamiast pełnego czerwonego piksela i pełnego zielonego piksela istnieją trzy wyłączone piksele : zielony, niebieski i czerwony. Tworzy to efekt cienkiej czarnej linii między czerwoną a zieloną. Jak na obrazku poniżej:

Podpikselowa reprezentacja koloru czerwonego w kolorze zielonym.

Teraz po drugiej stronie zielonego prostokąta jest najpierw podświetlony zielony subpiksel, wyłączony niebieski subpiksel, a następnie czerwony. Teraz między podświetlonymi zielonymi i czerwonymi subpikselami jest tylko jeden czarny subpiksel. Tworzy to efekt bardzo cienkiej, jasnej linii biegnącej między zieloną i czerwoną granicą. Jak poniżej:

Podpikselowa reprezentacja koloru zielonego w kolorze czerwonym.

Aby zobaczyć subpiksele na monitorze, prawdopodobnie potrzebujesz szkła powiększającego. Normański wzrok ludzki nie może skupić się na tak bliskiej odległości, w której można zobaczyć oddzielne piksele. Jednak bardzo dobrze wykrywa tę niewielką różnicę jasności.

Teraz, aby udowodnić, że teoria jest poprawna, możesz dodać np. 1-pikselową linię RGB 128-255-0 między lewym czerwonym prostokątem a zielonym prostokątem i sprawdzić, czy czarna linia zanika, ponieważ to dodaje zielone światło subpikseli przed przerwa. Możesz także wypróbować np. RGB o szerokości 1 piksela 85-85-0 między zielonym i prawym czerwonym prostokątem, aby nieco przyciemnić subpiksele. Niestety nie można tego użyć w rzeczywistym projekcie, ponieważ po pierwsze zależy to od układu subpikseli czerwono-zielono-niebieskich i jednocześnie sprawia, że ​​obramowanie kolorów jest nieco rozmazane.

Ponadto istnieje możliwość zastosowania algorytmu wyostrzania ekranu. Zasadniczo wyostrzanie monitora sprawia, że ​​wszystkie krawędzie kolorów są bardziej widoczne, dodając biel do jaśniejszej strony krawędzi i ściemniając do czerni po ciemniejszej stronie. Jest to bardzo podobne do efektu zespołu Macha, ale znacznie węższe i zwykle bardziej widoczne. Można to ustalić, zmieniając ustawienie ostrości wyświetlacza (miejmy nadzieję, że jest to możliwe) i sprawdzając, czy efekt jest zmniejszony.

Elmo Allén
źródło
2
tak, to ma sens, jednak nie uwzględnia wszystkich efektów, ale teraz, kiedy patrzę na 2 różne monitory o znanej innej kolejności, efekt jest w rzeczywistości odwrócony. Jednak nie widzę nierówności kolorów na głównym monitorze, co może wynikać z niesamowicie dobrej jakości elementów obrazu monitorów. Jedyne, co widzę, to zespoły mach. Ps, aby przetestować ten monitor kolei do góry nogami.
joojaa,
ach, a nawet że pędy eloch są stochastycznie mieszane, aby przeciwdziałać temu problemowi
joojaa,
W każdym razie OP @candh mówi o nakładaniu się szerokości 1 piksela. Zespoły Mach nigdy nie powinny być tak wąskie. (W każdym razie nie można ich nawet zdefiniować w znaczeniu piksela, ponieważ tworzą się one w mózgu. Na ekranie tworzą się artefakty subpikseli.) Mimo to, nie mówiąc o szczegółach, co dokładnie widzi, utknęliśmy w znalezieniu właściwego rozwiązania. (Z moją reputacją nie mogę jeszcze skomentować tego pytania.)
Elmo Allén,
2
@ joojaa, oczywiście hałas osłabiłby efekt subpikseli w linii prostej, ale rzuciłby dziecko z kąpielą, ponieważ prosta, ostra linia nie wyglądałaby już tak ostro. Nie sądzę, aby istniał jakiś dobry sposób na walkę z tym, a właściwie z jakiegokolwiek powodu. Na nowoczesnych wyświetlaczach efekt jest już niewielki, a teraz, gdy wyświetlacze HiDPI powoli pojawiają się w głównym nurcie, nawet na komputerach stacjonarnych, ma to jeszcze mniejsze znaczenie. Ponadto bardzo rzadko stosuje się bardzo duże kontrasty barwy, co wcale nie wpływa na kontrast jasności.
Elmo Allén
2
Na moim monitorze R, G, B znacznie zmniejszyłem artefakt wizualny, zwiększając / zmniejszając sumę dwóch pikseli granicznych o 1/6 (łącznie 1/3, uwzględniając przesunięcie o 1/3 z- piksel). Dokładniej: 1 0 0 | 1 0 0 | 1 x 0 | x 1 0 | 0 1 0 | 0 1 0: jeśli ustawisz dwa x składowe na 1/6 zamiast 0, unikniesz efektu czarnego pasma. I w 0 1 0 | 0 1 0 | 0 y 0 | y 0 0 | 1 0 0 | 1 0 0: musisz ustawić y tylko na 5/6, aby uniknąć efektu białego pasma. (Wartości 1/6 i 5/6 powinny być prawdopodobnie udoskonalone, biorąc pod uwagę poziom percepcji oka.)
Armin Rigo,
4

Taka jest natura kolorów, kiedy się łączą. Ludzkie oko dąży do uproszczenia w celu wyjaśnienia rzeczy .. i złudzeń optycznych spowodowanych naszym postrzeganiem kolorów.

zjawisko nazywane „Iluzją Mach Bands” pojawia się w dwóch dowolnych kolorach różniących się wartością. nie w odcieniu ani nasyceniu. a mój załączony schemat pokazuje, że ta sama iluzja występuje w szarych kolorach. jaśniejsza szarość będzie jaśniejsza w porównaniu do ciemniejszej pośrodku, a środkowa szarość wydaje się jaśniejsza obok krawędzi prawej ciemnoszarej po prawej stronie. I tak jeden.

wprowadź opis zdjęcia tutaj

jeśli jest to dla Ciebie ważne, więc masz dwie opcje.

  1. wybranie dwóch kolorów o tym samym współczynniku czerni zapewni to zmniejszenie iluzji
  2. możesz „oszukać oko”, dodając szarą drobną linię pomiędzy dwoma kolorami, które mają średnią szarość dwóch szarości w tych kolorach. zobacz wynik poniżej. możesz rozpoznać, że górny pasek ma mniej iluzji niż dolny.

górny pasek jest mniej złudzeniem

jest to powiększona wersja z małą szarą linią.

hsawires
źródło
11
To jest niepoprawne. Pierwszy schemat (czerwono-zielono-czerwony) nie odpowiada drugiemu (jasnoszary-średni szary-ciemny szary), ponieważ dwie czerwone są tego samego koloru. Gdyby chodziło o jasność, wykres liniowy byłby symetryczny, podobnie jak ten --\|\--/|/--, i zobaczyłbyś albo czarny pasek na obu czerwono-zielonym interfejsie i zielono-czerwony, albo biały pasek na obu.
David Richerby,
5
Naprawdę łatwo to obalić. Jeśli masz laptopa i widzisz czarno-białe linie, odwróć laptopa do góry nogami. Czarną linię znajdziesz po prawej zamiast po lewej.
slebetman
3
@hsawires: Chodzi o to, aby udowodnić coś naukowo. Odwrócenie laptopa do góry nogami i całkowite rozproszenie teorii jest z pewnością uzasadnione. Nie możesz po prostu machać ręką, mówiąc: „nie możesz udowodnić lub obalić złudzeń”; Co za bzdury!
Wyścigi lekkości z Monicą
1
@hsawires: W każdym razie, obracając ekran do góry nogami, gdyby nie fakt, że odwraca to kolejność diod tworzących różne kolory na ekranie, nie zmieniłoby to obrazu jest postrzegany, ponieważ obraz jest symetryczny. W przeciwnym razie, patrząc na efekt pasma Macha, możesz ustalić, czy ekran został obrócony, czy nie, co nie ma żadnego sensu. Fakt, że obraz nie jest postrzegany identycznie, oznacza, że ​​musi się dziać coś innego, co wynika ze struktury subpikseli, którą opisują zarówno Ilmari, jak i Elmo.
HelloGoodbye
1
Aby wesprzeć @HelloGoodbye, nasz zaufany przyjaciel Wikipedia ( en.wikipedia.org/wiki/Mach_bands ) powiedział: „Iluzja jest niezależna od orientacji”.
Nelson Rothermel,
0

Nie jestem pewien, ale jeśli nosisz okulary, to właśnie tam leży problem. Najprawdopodobniej widzisz aberrację chromatyczną , w której czerwieni i zieleni oddzielają się.

Im grubsze okulary, tym wyraźniejszy będzie efekt. Spróbuj odwrócić głowę i obserwuj ruch kolorowych klocków - gdy przesuniesz się w kierunku krawędzi okularów, będą one grubsze, a przez to większe rozdzielenie.

użytkownik295691
źródło
6
To nie jest aberracja chromatyczna. Żadna para okularów w połowie kompetentnych nie będzie wykazywać aberracji chromatycznej, gdy patrzy się prosto na monitor komputera.
David Richerby,
Jest tu absolutnie aspekt aberracji chromatycznej. Dopasowanie kąta, na który patrzę na monitor, powoduje, że czarno-białe pasy zmieniają rozmiar. I chociaż efekt ten jest wyraźniejszy w przypadku okularów, nadal występuje bez okularów - twoje oczy również mają niedoskonałe soczewki! Zignorowanie tego, że czyste kolory podstawowe będą miały ten efekt, jest częścią historii.
David Sainty,
@Sainty Jak pokazuje odpowiedź Ilmari , chodzi o odstępy między pikselami na monitorze. Jeśli przesuniesz głowę na bok, pozorne odstępy subpikseli zmieniają się, więc zmienia się efekt. A jak aberracja chromatyczna wytworzyłaby czerń? Czy proponujesz, aby aberracja była tak silna, że ​​częstotliwość światła zmienia się, aby znajdować się poza widocznym obszarem widma?
David Richerby
@ Richerby: Na podstawie odpowiedzi Candha i bardziej szczegółowego dochodzenia z mojej strony nie był to efekt, który widział. Aberracja chromatyczna jednak istnieje i tworzy czarne linie - czerwony przesunie się w jedną stronę, a zielony w drugą; pomyśl pryzmaty i jak oddzielają kolory. Pozostała część będzie czarna, choć moim oczom (kiedy nosiłem okulary) wyglądało to bardziej, jakby czerwień „unosiła się” nad ekranem.
user295691,
0

Wątek na forum Adobe ma sporo informacji na temat opcji „Wyrównaj do siatki pikseli”.

Jeśli dobrze pamiętam, można to również włączyć File > Neww całym dokumencie za pomocą okna dialogowego (na samym dole okna).

Albo ci eksperci od twardego monitora mają rację, albo masz rozbieżność utworzoną przez wektor, który nie wyrównuje się poprawnie z pikselami na monitorze. Właśnie dlatego tak wiele osób jest podekscytowanych dodaniem tego małego pola wyboru do programu Illustrator.

AVLien
źródło
3
Wektory są wyrównane poprawnie. Aby sprawdzić, czy będziesz musiał po prostu skopiować i wkleić obraz do Photoshopa lub dowolnego edytora obrazów i powiększyć. Nie ma antyaliasingu między pikselami ani żadnych pikseli w półcieniu.
Elmo Allén
-2

Może to być spowodowane interakcją kolorów. Czerwień i zieleń są kolorami uzupełniającymi się, a umieszczone obok siebie wydają się tworzyć czarną / ciemną linię, która wydaje się nakładać. Możesz przeczytać i zobaczyć więcej przykładów tutaj .

Program Auto Illustrator automatycznie przyciąga kształty na swoje miejsce, więc nie powinno mieć miejsca żadne nakładanie się.

tgr
źródło
2
Gdyby to zjawisko było spowodowane wyłącznie naszymi oczami, zobaczyłbyś to samo na granicy czerwono-zielonej, jak na granicy zielono-czerwonej.
David Richerby
Czerwony i zielony, umieszczone obok siebie i oglądane z wystarczającej odległości (np. Patrząc na małe piksele z odległości kilku stóp), dawałyby żółty, a nie czarny.
Jason C
-2

Jeśli włączysz opcję Wyrównaj nowe obiekty do siatki pikseli w menu opcji okna Przekształć (ten w prawym górnym rogu dowolnego okna opcji), wszelkie nowe obiekty, które rysujesz, mają domyślnie ustawioną właściwość wyrównania do pikseli. W przypadku nowych dokumentów utworzonych przy użyciu profilu dokumentu internetowego ta opcja jest domyślnie włączona. W przypadku istniejących obiektów można wyłączyć wyrównanie siatki pikseli, wybierając opcję Wyrównaj do siatki pikseli w samym oknie Przekształć (pokazane po zaznaczeniu opcji Więcej opcji w menu opcji okna).

Wyraźny wygląd pociągnięć wyrównanych do pikseli jest zachowany na wydruku rastrowym tylko w rozdzielczości 72 ppi. W przypadku innych rozdzielczości istnieje duże prawdopodobieństwo, że takie pociągnięcia dadzą rezultaty antyaliasingu.

Obiekty, które są wyrównane względem pikseli, ale nie mają żadnych prostych pionowych lub poziomych segmentów, nie są modyfikowane w celu wyrównania do siatki pikseli. Na przykład, ponieważ obrócony prostokąt nie ma prostych pionowych lub poziomych segmentów, nie jest przesuwany w celu uzyskania wyraźnych ścieżek, gdy jest dla niego ustawiona właściwość wyrównania do pikseli.

Ta dokumentacja Adobe mówi bardziej ogólnie: http://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html

Rahul Chouhan
źródło
1
która dokładnie opcja?
candh