Czy istnieje powód, dla którego logo Hillary Clinton ma ukryte wycięcia?


226

To pytanie w ogóle nie jest polityczne!

wprowadź opis zdjęcia tutaj

Przeglądając znalezioną tutaj wersję logo Hillary SVG , zauważyłem, że na dwóch pionowych słupkach H. były wycięcia. Strzałka poprzeczna zakrywa wycięcia, aby nie były widoczne podczas oglądania logo. Ale jestem bardzo ciekawy, dlaczego projektant mógł wprowadzić takie wycięcia. Czy ktoś wie?

wprowadź opis zdjęcia tutaj


53
Technicznie jest to schemat omijania błędów. Trochę zaskakujące i niepokojące jest myślenie, że wszystkie uniwersytety i główni dostawcy silników do renderowania 2D wciąż popełniają ten sam błąd, mimo że znamy przyczynę, wiemy, jak to naprawić i nie jest to tak duży hit wydajności na nowoczesnym komputerze. I żadna grafika 3D rzadko popełnia ten błąd i wie o tym od ponad 30 lat.
joojaa,

6
@NickT To nie jest walka z az, to problem mieszania krycia i zasięgu, ale 3D to znacznie więcej niż gry. W 3D od wieków używamy multisamplingu do rozwiązania problemu aa. Multisampling (zwykle nawet jeśli wyniki nie byłyby tak wyraźne) nie oblicza zasięgu, a zatem nie popełnia błędu, sądząc, że 50% zasięgu jest widoczne w 25% przez kolejne 50% zasięgu. Chociaż może to być prawda, odpowiedź może być również w 50% widoczna lub żadna nie jest widoczna. W tym przypadku, aby uniknąć pomyłek, pozostałe 50% jest usuwane ręcznie, możemy naprawić 3 przypadki, ale nie wszystkie. Nie powinno być potrzebne.
joojaa,

5
To smutne, że wyraźnie to rozpoznałem, aby uniknąć błędu renderowania nakładających się granic. Ale SVG nadal ma 14 lat, więc mam nadzieję, że pewnego dnia zostanie to naprawione.
Francisco Presencia

5
@FranciscoPresencia to nie problem z SVG, to tylko problem ze sposobem, w jaki wybraliśmy błędne wdrożenie renderowania. Różne
moduły

12
@ DA01 no naiwna poprawka jest niewiarygodnie prosta, ma mniej kodu niż obecny algorytm. Zamiast wykonywać obliczenia oparte na pokryciu, po prostu renderuj tak, jakby w ogóle nie używałeś antyaliasów w wyższej rozdzielczości, a następnie przefiltruj obraz do rzeczywistej rozdzielczości. To nigdy nie rozleje się od dołu do góry, ponieważ nie może popełnić błędu, że najbardziej przedni element całkowicie go zasłania. Karty graficzne robią to cały czas, o co chodzi w ustawieniach karty x4 x8 x16 aa w ustawieniach karty gfx.
joojaa

Odpowiedzi:


233

Aby zapobiec możliwym renderowaniu artefaktów.

Bez wycięć prawdopodobnie zobaczysz krawędzie dolnych kształtów w miejscach, gdzie spotykają się z krawędziami nakładających się kształtów (na ekranie i tak nie jest to tak naprawdę problemem podczas drukowania).

Tutaj możesz zobaczyć przykłady i wyjaśnienia możliwych artefaktów:

Rzadko istnieje powód, aby mieć idealnie wyrównane krawędzie, które powodowałyby takie artefakty, więc używanie „wycięć” jak w logo Hillary jest dobrym nawykiem.


6
Może to być tak samo duży problem z drukowaniem. W druku cyfrowym przynajmniej svg będzie zwykle rasteryzowany przed wysłaniem do drukarki i mogą pojawić się te same typy artefaktów. (ostatni projekt u mojego ostatniego pracodawcy (duża drukarka komercyjna) obejmował pisanie oprogramowania, które pomaga zidentyfikować tego rodzaju rzeczy, zanim skończy się kosztowna praca nakładania atramentu na papier.)
Mr.Mindor

1
Skoro mówimy o polityce USA, masz na myśli „artefakty”?
Andrew Rasmussen

5
Według english.se mam na myśli artefakty, a nie artefakty. (Ale ponieważ jestem Brytyjczykiem, mam na myśli artefakty, niezależnie od tego)
Cai

Rzadko jest jakiś powód ... po prostu ciekawy: czy kiedykolwiek jest jakiś powód?
Alois Mahdal

@AloisMahdal Bardzo w to wątpię.
Cai

61

Zrozumienie rasteryzacji i algorytmu malarza może pomóc.

Jednym ze sposobów renderowania grafiki wektorowej (grafiki zdefiniowanej przez wielokąty zamiast pikseli) na piksele jest rasteryzacja wielokątów podczas działania algorytmu malarza.

Algorytm malarza jest procesem oddolnym, w którym najpierw odkładasz tło, a następnie rysujesz na nim każdą warstwą koloru, aż dojdziesz do górnej warstwy.

Składając warstwę, zwracasz uwagę na jej pokrycie (zwykle przechowywane w dodatkowym kanale, kanale alfa) i używasz jej do mieszania dodanego koloru z tym, co już jest.

Jeśli twoja nowa warstwa obejmuje piksel o 50%, a jest niebieski, uśredniasz bieżący kolor tego piksela za pomocą niebieskiego i rysujesz go tam.

Sprawy stają się nieco bardziej skomplikowane, jeśli tworzysz obraz z przezroczystością, ale nie zasadniczo.

Rasteryzacja to proces przekształcania wielokąta w piksele. W tym miejscu ustalamy, ile wielokąta pokrywa dany piksel za pomocą algebry, a następnie obliczamy wielkość pokrycia.

Jeśli masz dwie krawędzie wielokąta, które są zbieżne - dokładnie jedna nad drugą - ale obie pokrywają dany piksel w połowie, problem może się zdarzyć.

Załóżmy, że dolny wielokąt jest czerwony, a górny niebieski, a tło białe.

Najpierw malujemy na czerwono. To miesza się z białym, co prowadzi do 50% białego 50% czerwonego.

Następnie malujemy niebieski. To miesza się z 50% białym 50% czerwonym i otrzymujemy 25% białego 25% czerwonego 50% niebieskiego. To samo dzieje się, gdy czerwony i niebieski spotykają się na środku lub jeśli niebieski całkowicie pokrywa czerwony.

Ale „w rzeczywistości” niebieski wielokąt całkowicie przykrył czerwony, więc dlaczego go widzimy? Ponieważ algorytm zapomina o szczegółach pozycjonowania subpikseli.

Tak długo, jak istnieje 100% pokrycia jednego wielokąta, nie stanowi to problemu.

Ten problem nie jest fundamentalny. Możesz wykonywać renderowanie wielokątów z podejściem podobnym do śledzenia promieni (w przypadku nadmiaru renderowania o współczynnik N ^ 2 w punktach) lub nawet podejściem czystym wektorem (w którym odejmujesz kształty blokujące od geometrii kształtów pod je, odcinając je). W żadnym przypadku „ukryte” kolory nie przedostają się do obrazu wyjściowego.

Algorytm malarza to nie jedyny przypadek, przez który może przeciec „ukryta” geometria. Jeśli drukujesz na nieprzezroczystych mediach, czasami warstwy kolorów nie są idealnie wyrównane. Tak więc dolne warstwy przeciekają, gdy górna warstwa powinna całkowicie je przykryć.

Ponieważ nie wiesz, jak zostanie wyprowadzony obraz wektorowy, takie wycięcia pozwalają tworzyć obrazy, które są bardziej odporne na niedoskonałe techniki drukowania / wyświetlania.


1
Twój opis dotyczy grafiki zawierającej kanały alfa lub rysowania subpikseli przy wygładzaniu krawędzi. Przykład PO pokazuje artefakty wycięcia dla mieszanych warstw niezgodnie z przeznaczeniem. Sugeruję, że problem jest bardziej związany z błędami rejestracji podczas drukowania.
Pekka,

2
@pekka tak, ale większość renderowania ma dziś anty-aliasing.
Yakk,

Jeśli górna warstwa ma jakąkolwiek przezroczystość, wycięcie spowoduje stopniowe cofanie dolnej warstwy od krawędzi, wpływając zarówno na wygładzanie krawędzi, jak i na kolor najwyższego poziomu. Bardziej odpowiednią odpowiedzią byłoby posiadanie prostokątnej przylgi (o wielkości trudnej do oszacowania) w obszarze, w którym mieszanie nie jest pożądane. Jak to określić ilościowo?
Pekka,

@pekka Jeśli górna warstwa ma średnią przezroczystość, problem ten jest znacznie mniej problematyczny (jak widać czerwony pod niebieskim i tak). Ponieważ przezroczystość góry zbliża się do krycia, podejdź do powyższego rozwiązania. Gdy odchodzi od krycia, podejdź do kompozytu. Ogólny problem jest trudny, biorąc pod uwagę błędy rejestracji, problemy z gromadzeniem się (zbyt wiele warstw!), Wygładzanie krawędzi i wszystko inne: w pewnym momencie chcesz napisać własne wektory dla każdego formatu wyjściowego lub w jakiś sposób wyciszać wektory. Po prostu próbowałem odpowiedzieć na dokładną techniczną przyczynę problemu, który rozwiązuje wycięcie.
Yakk,

1
@Pekka prostokąt jest trudniejszy do narysowania, a następnie kończy się odwrotnym problemem tego samego problemu, ponieważ tło pokazuje rynnę. Wycięcie jest rodzajem kompromisu między jednym błędem a wieloma innymi (wycięcie służy do renderowania na ekranie nieposiadającego kwadratowej wnęki, dzięki czemu można w razie potrzeby wykonać płytki z nadrukiem przy minimalnych błędach). Ale tak naprawdę nie ma powodu, aby to robić, wystarczy, że nasi rendererzy pracują źle, to wszystko. Możemy łatwo rozwiązać wszystkie 3 problemy, zmieniając sposób rasteryzacji.
joojaa

48

Cai ma rację. Pomyślałem też, że dodam wizualną odpowiedź.

Dzieje się tak dlatego, że jest to plik SVG. W przeciwieństwie do obrazu rastrowego, w którym kontrolujesz każdy renderowany piksel, rasteryzacja SVG odbywa się w przeglądarce ... więc przeglądarka podejmuje te decyzje.

Jedną z decyzji, które musi podjąć przeglądarka, jest, kiedy zastosować wygładzanie. Zazwyczaj robi to, gdy punkt wzdłuż linii spada na piksel. Będzie wtedy anty alias tego piksela. Ponieważ wyrenderuje wszystkie warstwy SVG, zrobi to na każdej warstwie i od tego momentu możesz zacząć tworzyć artefakty krawędzi. Jest to szczególnie prawdziwe, gdy grasz z powiększeniem SVG, ponieważ spowoduje to nakładanie się różnych pikseli ekranu.

Oto zrzut ekranu zielonego pola nakładającego się na czerwone pole w Chrome. Góra jest powiększona o 100%, dolna jest powiększona. Zwróć uwagę na różnicę w renderowaniu tej krawędzi:

wprowadź opis zdjęcia tutaj

Jeśli wykonam zrzut ekranu i powiększę, aby pokazać rasteryzację, możesz uzyskać wyraźniejszy obraz tego, co się dzieje:

wprowadź opis zdjęcia tutaj

Idealną poprawką byłoby, gdyby rasterizer SVG w przeglądarce był „bardziej inteligentny” i nie renderował rzeczy, które są ułożone w stos, ale biorąc pod uwagę, że elementami SVG można manipulować zewnętrznie i na żywo (ponieważ jest to tylko plik XML), nie jest to praktyczne rozwiązanie dla przeglądarki.

Zamiast tego projektant podejmuje tę decyzję, korzystając z widocznych wycięć.

Nawiasem mówiąc, ma to podobną koncepcję, jak radzić sobie z rejestracją w druku za pomocą pułapki .


16

Drukowanie w wielu kolorach wymaga dokładnej rejestracji, aby uniknąć nieestetycznych luk i stanowi problem, gdy artefakty składają się z wielu źródeł. Podobne obawy mogą wystąpić nawet w produktach cyfrowych, w których arytmetyka o ograniczonej precyzji z konieczności wprowadza błąd.

Problemem, którego można uniknąć, jest odwrotne zalewkowanie - odchylenie od zamierzonej grafiki może skutkować cienką linią koloru tła pokazaną po lewej stronie pionowych zbieżnych krawędzi. Ponieważ kolory są bardzo kontrastowe, uderzenie będzie zauważalne (spróbuj przesunąć przerywaną linię nawet o 1 piksel w lewo od pionu.

Podejście to nie ma na celu wpływu na mieszanie farb. Spójne współrzędne na ekranie pozwalają uniknąć problemu, a półtonowanie służy do zarządzania kolorem.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.