Hillary Clinton의 로고에 숨겨진 노치가있는 이유가 있습니까?


226

이 질문은 최소한 정치적이 아닙니다!

여기에 이미지 설명을 입력하십시오

여기 에있는 Hillary 로고의 SVG 버전을 보면서 H의 두 세로 막대에 노치가있는 것을 발견했습니다. 화살표 크로스바는 노치를 가리므로 로고를 볼 때 보이지 않습니다. 그러나 나는 왜 디자이너가 이러한 노치를 넣었을 지 궁금하다. 아무도 아는가?

여기에 이미지 설명을 입력하십시오


53
기술적으로 이것은 버그 우회 체계입니다. 2D 렌더링 엔진의 모든 대학과 주류 공급 업체가 반복해서 같은 실수를 반복한다고 생각하는 것은 다소 놀랍고 불안합니다. 현대 컴퓨터에서. 3D 그래픽 사용자는이 실수를 거의하지 않으며 30 년 이상 그 사실을 알고 있지 않습니다.
joojaa 2016 년

6
@NickT az fight 문제는 ​​불투명도와 적용 범위를 혼합하는 문제이지만 3D는 게임 이상입니다. 3D에서는 오랜 세월 동안 멀티 샘플링을 사용하여 문제를 해결했습니다. 멀티 샘플링 (보통 결과가 그렇게 발음되지 않더라도)은 적용 범위를 계산하지 않으므로 50 % 적용 범위가 다른 50 % 적용 범위를 통해 25 % 표시된다고 잘못 생각하지 않습니다. 이것이 사실 일 수도 있지만 answe는 50 %이거나 보이지 않습니다. 이 경우 혼동을 피하기 위해 다른 50 %를 수동으로 제거하지만 3 건을 모두 고칠 수는 없습니다. 필요하지 않아야합니다.
joojaa 2016 년

5
테두리가 겹치는 렌더링 버그를 피하는 것으로 분명히 인식 한 것은 슬픈 일입니다. 그러나 SVG는 여전히 14 세이므로 언젠가 수정되기를 바랍니다.
Francisco Presencia 2016 년

5
@FranciscoPresencia는 SVG의 문제가 아니며 렌더를 잘못 구현하도록 선택한 방식의 문제 일뿐입니다. 다른 SVG 렌더러는이 문제의 심각도가 다릅니다
joojaa

12
@ DA01 순진한 수정은 놀랍도록 간단하지 않으며 현재 알고리즘보다 코드가 적습니다. 적용 범위 기반 계산을 수행하는 대신 앤티 앨리어싱을 전혀 사용하지 않은 것처럼 렌더링 한 다음 이미지를 실제 해상도로 필터링하십시오. 가장 앞면 요소가 완전히 가리는 실수를 할 수 없기 때문에 아래에서 위로 쏟아지지 않습니다. 그래픽 카드는 gfx 카드 설정에서 x4 x8 x16 aa 설정에 관한 모든 것을 수행합니다.
joojaa 2016 년

답변:


233

렌더링 아티팩트를 방지합니다.

노치가 없으면 아래쪽 셰이프의 가장자리가 오버레이 셰이프의 가장자리와 만나는 위치를 볼 수 있습니다 (어쨌든 화면에서는 인쇄시 실제로 문제가되지 않습니다).

가능한 인공물에 대한 예와 설명은 여기에서 볼 수 있습니다.

힐러리의 로고처럼 "노치"를 사용하는 것이 좋은 습관이 될 정도로 가장자리를 완벽하게 정렬해야 할 이유가 거의 없습니다.


6
이것은 실제로 인쇄에 큰 문제가 될 수 있습니다. 디지털 인쇄에서 적어도 svg는 일반적으로 프린터로 전송되기 전에 래스터 화되며 동일한 유형의 아티팩트가 나타날 수 있습니다. (내 마지막 고용주 (대형 상업용 프린터)의 마지막 프로젝트는 종이에 잉크를 넣기 위해 값 비싼 작업을하기 전에 이러한 종류의 물건을 식별하는 데 도움이되는 소프트웨어 작성과 관련이있었습니다.)
Mr.Mindor

1
우리는 미국 정치에 대해 이야기하고 있기 때문에 "유물"을 의미합니까?
Andrew Rasmussen

5
english.se에 따르면 나는 인공물이 아닌 인공물을 의미합니다. (그러나 나는 영국인이기 때문에 인공물을 의미합니다)
Cai

어떤 이유로 ... 거의 없다 거기 : 그냥 궁금는 이제까지 어떤 이유는?
Alois Mahdal 2016 년

@AloisMahdal 정말 의심합니다.
카이

61

래스터 화와 화가 알고리즘을 이해하면 도움이 될 수 있습니다.

벡터 그래픽 (픽셀 대신 다각형으로 정의 된 그래픽)을 픽셀로 렌더링하는 한 가지 방법은 화가 알고리즘을 실행하는 동안 다각형을 래스터 화하는 것입니다.

페인터의 알고리즘은 상향식 프로세스로, 먼저 배경을 내려 놓은 다음 상단 레이어에 도달 할 때까지 각 색상 레이어로 해당 배경 위에 그립니다.

레이어를 증착 할 때 커버리지 (보통 추가 채널 인 알파 채널에 저장 됨)에주의를 기울이고 추가 된 색상을 기존 색상과 혼합하는 데 사용합니다.

새 레이어가 픽셀을 50 % 덮고 파란색 인 경우 해당 픽셀의 현재 색상을 파란색으로 평균화하고 대신 그 색상을 그립니다.

기본적으로는 아니지만 투명도로 이미지를 만드는 경우 상황이 조금 더 복잡해집니다.

래스터 화는 다각형을 픽셀로 변환하는 프로세스입니다. 여기서는 대수를 사용하여 다각형이 주어진 픽셀을 얼마나 덮고 있는지 알아 낸 다음 적용 범위를 계산합니다.

정확히 일치하는 다각형의 두 가장자리가 있지만 주어진 픽셀의 절반을 덮으면 문제가 발생합니다.

아래쪽 다각형이 빨간색이고 위쪽 파란색과 배경이 흰색이라고 가정합니다.

먼저 빨간색을 칠합니다. 이것은 흰색과 혼합되어 50 % 흰색 50 % 빨간색으로 이어집니다.

그런 다음 파란색을 칠합니다. 이것은 50 % 흰색 50 % 빨간색과 혼합되며 25 % 흰색 25 % 빨간색 50 % 파란색이됩니다. 빨간색과 파란색이 중간에 만나거나 파란색이 빨간색을 완전히 덮는 경우에도 마찬가지입니다.

그러나 "실제로"파란색 다각형이 빨간색을 완전히 덮었으므로 왜 볼 수 있습니까? 알고리즘 서브 픽셀 위치 세부 사항을 잊어 버리기 때문 입니다.

하나의 폴리곤이 100 % 적용되는 한, 이것은 문제가되지 않습니다.

이제이 문제는 근본적인 것이 아닙니다. 광선 추적과 같은 접근 방식 (점에서 N ^ 2 인수로 오버 렌더링) 또는 순수한 벡터와 같은 접근 방식 (아래에서 도형의 형상에서 차단 모양을 뺀 위치)을 사용하여 다각형 렌더링을 수행 할 수 있습니다. 그들을 잘라). 두 경우 모두 "숨겨진"색상이 출력 이미지로 누출되지 않습니다.

"숨겨진"지오메트리가 누출 될 수있는 유일한 경우는 화가의 알고리즘이 아닙니다. 불투명 용지로 인쇄하는 경우 색상 레이어가 완벽하게 정렬되지 않는 경우가 있습니다. 따라서 상층이 완전히 덮을 때 하층이 누출됩니다.

벡터 이미지가 어떻게 출력되는지 알지 못하므로, 불완전한 인쇄 / 디스플레이 기술에 비해 더 강력한 이미지를 만들 수 있습니다.


1
알파 채널이 포함 된 그래픽 또는 앤티 앨리어싱시 하위 픽셀 그리기의 경우 설명이 적용됩니다. OPs 예제는 의도 한 것과는 반대로 블렌드 레이어의 노치 아티팩트를 보여줍니다. 문제가 인쇄의 등록 오류와 더 관련이 있다고 제안합니다.
Pekka

2
@pekka 예. 그러나 오늘날 대부분의 렌더링은 앤티 앨리어싱을 수행합니다.
Yakk

상단 레이어에 투명도가 있으면 노치가 앤티 앨리어싱과 최상위 색상 모두에 영향을 미치는 가장자리에서 하위 레이어를 점진적으로 다시 그려냅니다. 보다 적절한 반응은 혼합이 바람직하지 않은 영역에서 (추정하기 어려운 크기의) 직사각형 리베이트를 갖는 것이다. 이것을 어떻게 정량화합니까?
Pekka

@pekka 상단 레이어의 투명도가 중간 정도이면이 문제는 훨씬 덜 문제가됩니다 (어쨌든 파란색 아래에서 빨간색을 볼 수 있음). 상단의 투명도가 불투명에 가까워지면 위의 솔루션에 접근하십시오. 불투명도가 떨어지면 미리 합성에 접근하십시오. 일반적인 문제는 등록 오류, 빌드 업 문제 (너무 많은 레이어!), 앤티 앨리어싱 및 기타 모든 점을 고려하면 까다 롭습니다. 노치가 해결하는 문제의 정확한 기술적 원인에 답하려고했습니다.
Yakk

1
@Pekka 직사각형은 그리기가 더 어려우며 배경이 여물통을 나타내는 동일한 문제의 반대 문제로 끝납니다. 노치는 여러 다른 버그에 대한 하나의 버그 사이의 일종의 타협입니다 (노치는 사각형 캐비티가없는 화면 렌더링에 대한 것이므로 최소한의 오류로 필요한 경우 중복 인쇄 판을 만들 수 있습니다). 그러나이 작업을 수행해야 할 이유는 없습니다. 렌더러가 제대로 작동하지 않는다는 것만으로는 충분합니다. 래스터 화 방식을 전환하여 3 가지 문제를 쉽게 해결할 수 있습니다.
joojaa

48

Cai가 맞습니다. 시각적 인 답변도 추가 할 것이라고 생각했습니다.

이것이 발생하는 이유는 SVG이기 때문입니다. 렌더링 된 각 픽셀을 제어하는 ​​래스터 이미지와 달리 SVG의 래스터 화는 브라우저에서 발생하므로 브라우저가 이러한 결정을 내립니다.

브라우저가 내려야 할 결정 중 하나는 앤티 앨리어싱을 수행하는 시점입니다. 일반적으로 선을 따르는 점이 픽셀에 떨어질 때이 작업을 수행합니다. 그런 다음 해당 픽셀의 앨리어싱을 방지합니다. SVG의 모든 레이어를 렌더링하므로 각 레이어 마다이 작업을 수행하므로 가장자리 아티팩트를 시작할 수 있습니다. SVG의 확대 / 축소를 사용하여 재생하면 다른 화면 픽셀과 겹치게됩니다.

다음은 Chrome에서 빨간색 상자와 겹치는 녹색 상자의 스크린 샷입니다. 상단은 100 % 페이지 확대, 하단은 확대됩니다. 해당 가장자리 렌더링의 차이점을 확인하십시오.

여기에 이미지 설명을 입력하십시오

스크린 샷을 찍고 확대하여 래스터 화를 표시하면 진행 상황을보다 명확하게 파악할 수 있습니다.

여기에 이미지 설명을 입력하십시오

여기서 이상적인 수정은 브라우저의 SVG 래스터 라이저가 더 똑똑하고 쌓인 것을 렌더링하지 않는 것이지만 SVG 요소는 외부에서 조작하고 (XML 파일 일 뿐이므로) 실시간으로 처리 할 수 ​​있다는 점에서 실용적인 해결책은 아닙니다. 브라우저를 위해.

대신, 디자이너는 보이는 노치를 사용하여 결정을 내립니다.

그런데 이것은 개념적으로 트래핑을 사용하여 인쇄 등록처리 하는 방법과 유사 합니다.


16

여러 색상으로 인쇄하려면보기 흉한 간격을 피하기 위해 정확한 등록이 필요하며 아티팩트가 여러 소스로 구성된 경우 문제가됩니다. 제한된 정밀 산술로 ​​인해 반드시 오류가 발생하는 디지털 제품에서도 비슷한 문제가 발생할 수 있습니다.

피해야 할 문제는 역 트래핑 중 하나입니다 . 의도 된 그래픽과의 편차로 인해 수직 일치 모서리 왼쪽에 배경색이 얇게 나타날 수 있습니다. 색상의 대비가 높아짐에 따라 그 영향이 눈에 띄게됩니다 (파손 선을 세로 왼쪽으로 1 픽셀 더 이동해보십시오.

이 접근법은 잉크 혼합에 영향을 미치지 않습니다. 화면의 일관된 좌표는 문제를 방지하는 반면 하프 톤은 색상을 관리하는 데 사용됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.