Existe uma razão para o logotipo de Hillary Clinton ter escondido entalhes?


226

Esta questão não é de forma alguma política!

insira a descrição da imagem aqui

Enquanto olhava para a versão SVG do logotipo de Hillary encontrada aqui , notei que havia entalhes nas duas barras verticais do H. A barra da seta cobre os entalhes para que eles não sejam vistos ao visualizar o logotipo. Mas estou muito curioso por que o designer pode ter colocado esses entalhes. Alguém sabe?

insira a descrição da imagem aqui


53
Tecnicamente, este é um esquema de contornar erros. É um pouco surpreendente e perturbador pensar que todas as universidades e fornecedores tradicionais de mecanismos de renderização em 2D cometem o mesmo erro repetidamente, mesmo sabendo a causa, sabemos como corrigi-la e não ser tão prejudicial ao desempenho. em um computador moderno. E nenhuma pessoa com gráficos 3D raramente comete esse erro e o conhece há mais de 30 anos.
joojaa

6
@NickT Não é um problema de luta, é uma questão de misturar opacidade e cobertura, mas o 3D é muito mais do que jogos. Em 3D, utilizamos multisampling por idades para resolver o problema do aa. A amostragem múltipla (geralmente, mesmo que os resultados não sejam tão pronunciados) não calcula a cobertura e, portanto, não comete o erro de pensar que 50% da cobertura é 25% visível através de outra cobertura de 50%. Embora isso possa ser verdade, o answe também pode ser 50% visível ou nenhum visível. Nesse caso, para evitar confusão, os outros 50% são removidos manualmente, podemos corrigir 3 casos, mas não todos. Não deve ser necessário.
joojaa

5
É triste que eu tenha reconhecido claramente como evitar um erro de renderização de bordas sobrepostas. Mas o SVG ainda tem 14 anos, então espero que isso seja corrigido algum dia.
Francisco Presencia 21/06

5
@FranciscoPresencia não é um problema com o SVG, é apenas um problema com a maneira como escolhemos implementar erroneamente as renderizações. Diferentes prestadores SVG têm diferentes gravidade do problema
joojaa

12
@ DA01 não, a correção ingênua é incrivelmente simples, é menos código que o algoritmo atual. Em vez de fazer o cálculo com base na cobertura, apenas renderize como se você não tivesse antialias em uma resolução mais alta e depois filtre a imagem até a resolução real. Isso nunca será derramado de baixo para cima, pois não pode cometer um erro, pois o elemento mais frontal o oculta completamente. As placas gráficas fazem isso o tempo todo em relação às configurações de x4 x8 x16 aa nas configurações da placa gfx.
Joojaa

Respostas:


233

Para evitar possíveis artefatos de renderização.

Sem os entalhes, é provável que você veja as bordas das formas inferiores, onde elas se encontram com as bordas das formas de sobreposição (na tela de qualquer maneira, não é realmente um problema ao imprimir).

Você pode ver exemplos e explicações dos possíveis artefatos aqui:

Raramente existe uma razão para ter arestas perfeitamente alinhadas que causem artefatos como esse; portanto, usar "entalhes" como no logotipo de Hillary é um bom hábito.


6
Na verdade, isso pode ser um grande problema com a impressão. Na impressão digital, pelo menos o svg normalmente é rasterizado antes de ser enviado para a impressora, e os mesmos tipos de artefatos podem aparecer. (último projeto em meu último empregador (impressora comercial grande) envolvido escrevendo software para ajudar a identificar esses tipos de coisas antes do trabalho caro de colocar tinta no papel foi feito.)
Mr.Mindor

11
Já que estamos falando de política dos EUA, você quer dizer "artefatos"?
Andrew Rasmussen

5
De acordo com english.se, quero dizer artefatos, não artefatos. (Mas desde que eu sou britânico, quero dizer artefatos independentemente)
Cai

Raramente existe alguma razão ... apenas curioso: existe alguma razão?
Alois Mahdal

@AloisMahdal Eu duvido muito.
Cai

61

Compreender a rasterização e o algoritmo do pintor pode ajudar.

Uma maneira de renderizar gráficos vetoriais (gráficos definidos por polígonos, em vez de pixels) em pixels é rasterizar os polígonos enquanto executa o algoritmo do pintor.

O algoritmo do pintor é um processo de baixo para cima, em que você coloca o fundo pela primeira vez e depois desenha sobre esse fundo com cada camada de cor até chegar à camada superior.

Ao depositar uma camada, preste atenção à sua cobertura (geralmente armazenada em um canal extra, o canal alfa) e use-a para misturar a cor adicionada com o que já existe.

Se sua nova camada cobrir um pixel em 50% e for azul, você calcula a média da cor atual desse pixel com azul e desenha-a lá.

As coisas ficam um pouco mais complexas se você estiver criando uma imagem com transparência, mas não fundamentalmente.

Rasterização é o processo de transformar um polígono em pixels. Aqui, calculamos quanto o polígono cobre um determinado pixel usando alguma álgebra e calculamos um valor de cobertura.

Se você tem duas arestas de um polígono coincidentes - exatamente uma em cima da outra - mas ambas cobrem metade de um determinado pixel, o que acontece é um problema.

Suponha que o polígono inferior seja vermelho e o topo azul e o fundo seja branco.

Primeiro nós pintamos o vermelho. Isso se mistura com o branco, levando a 50% de branco e 50% de vermelho.

Depois pintamos o azul. Isso se mistura com o 50% branco 50% vermelho e temos 25% branco 25% vermelho 50% azul. O mesmo acontece se vermelho e azul se encontrarem no meio ou se o azul cobrir completamente o vermelho.

Mas "na realidade" o polígono azul cobriu completamente o vermelho, então por que o estamos vendo? Porque o algoritmo esquece detalhes de posicionamento de sub-pixel.

Contanto que haja 100% de cobertura de um polígono, isso não é um problema.

Agora, esse problema não é fundamental. Você pode fazer a renderização de polígono com uma abordagem do tipo traçado de raio (onde você renderiza demais por um fator de N ^ 2 em pontos) ou mesmo uma abordagem de vetor puro (onde você subtrai formas de bloqueio da geometria das formas em cortando-os). Em nenhum dos casos, as cores "ocultas" vazam para a imagem de saída.

O algoritmo do pintor não é o único caso em que a geometria "oculta" pode vazar. Se você estiver imprimindo com mídia opaca, às vezes as camadas de cores não estão perfeitamente alinhadas. Portanto, as subcamadas vazam quando a camada superior deve cobri-la completamente.

Como você não sabe como sua imagem vetorial será impressa, entalhes como esse permitem criar imagens mais robustas contra técnicas imperfeitas de impressão / exibição.


11
Sua descrição se aplica no caso de gráficos que contenham canais alfa ou no desenho de subpixel quando for anti-aliasing. O exemplo de OPs mostrará os artefatos de entalhe para camadas mescladas ao contrário do que se pretende. Sugiro que o problema esteja mais relacionado a erros de registro na impressão.
Pekka

2
@pekka sim, mas a maioria das renderizações atualmente não tem serrilhado.
Yakk

Se a camada superior tiver alguma transparência, o entalhe resultará em um retrocesso gradual da camada inferior da borda, impactando na cor do anti-serrilhado e da camada superior. Uma resposta mais apropriada seria ter um desconto retangular (de tamanho difícil de estimar) na área onde a mistura não é desejada. Como você quantifica isso?
Pekka

@pekka Se a camada superior tiver quantidades médias de transparência, esse problema será bem menos problemático (como você pode ver de qualquer maneira o vermelho sob o azul). À medida que a transparência do topo se aproxima da opacidade, aproxime-se da solução acima. À medida que se afasta da opacidade, aborde a pré-composição. O problema geral é complicado, devido a erros de registro, problemas de construção (muitas camadas!), Anti-aliasing e tudo mais: em algum momento, você deseja escrever vetores personalizados para cada formato de saída ou mover os vetores de alguma forma. Eu simplesmente tentei responder a causa técnica exata do problema que o entalhe resolve.
Yakk

11
@Pekka é um retângulo mais difícil de desenhar e, em seguida, você termina com o problema oposto do mesmo problema, em que o plano de fundo mostra a calha. O entalhe é uma espécie de compromisso entre um erro e vários outros (o entalhe é para renderização na tela, embora não tenha uma cavidade quadrada é para que a sobreimpressão de chapas possa ser feita, se necessário, com o mínimo de erros). Mas realmente não há razão para que haja uma necessidade de fazer isso, é só que nossos renderizadores funcionam errado, é tudo o que existe. Poderíamos resolver todos os três problemas facilmente, alterando a maneira como rasterizamos.
Joojaa

48

Cai está correto. Eu pensei em adicionar uma resposta visual também.

A razão pela qual isso acontece é que é um SVG. Ao contrário de uma imagem rasterizada em que você controla cada pixel renderizado, a rasterização do SVG acontece no navegador ... para que o navegador tome essas decisões.

Uma das decisões que o navegador precisa tomar é quando executar a suavização de serrilhado. Isso normalmente ocorre quando um ponto ao longo de uma linha cai em um pixel. Ele então fará um anti-alias desse pixel. Como ele renderizará todas as camadas do SVG, isso será feito em cada camada e é aí que você poderá começar a obter os artefatos de borda. Isso é especialmente verdade quando você brinca com o zoom do SVG, pois isso fará com que ele se sobreponha a diferentes pixels da tela.

Aqui está uma captura de tela de uma caixa verde sobreposta a uma caixa vermelha no Chrome. A parte superior está com 100% de zoom da página e a parte inferior é ampliada. Observe a diferença na renderização dessa borda:

insira a descrição da imagem aqui

Se eu capturar essa imagem e aumentar o zoom para mostrar a rasterização, você poderá ter uma imagem mais clara do que está acontecendo:

insira a descrição da imagem aqui

A solução ideal aqui seria que o rasterizador SVG no navegador fosse 'mais inteligente' e não renderizasse coisas empilhadas, mas, como os elementos SVG podem ser manipulados externamente e ao vivo (como é apenas um arquivo XML), não é uma solução prática para o navegador.

Portanto, o designer toma essa decisão usando os entalhes que você vê.

A propósito, isso é semelhante em conceito a como lidar com o registro na impressão usando trapping .


16

A impressão em várias cores requer um registro preciso para evitar lacunas desagradáveis ​​e é uma preocupação quando os artefatos são compostos de várias fontes. Preocupações semelhantes podem ocorrer mesmo em produtos digitais, onde a aritmética de precisão limitada necessariamente introduz erros.

O problema a ser evitado é o trapping inverso - onde o desvio do gráfico pretendido pode resultar em uma linha fina da cor de fundo exibida à esquerda das bordas coincidentes verticais. Como as cores são altamente contrastantes, o impacto será perceptível (tente mover a linha quebrada até 1 pixel para a esquerda da vertical.

A abordagem não se destina a impactar a mistura de tintas. As coordenadas consistentes na tela evitam o problema, enquanto o meio-tom é usado para gerenciar as cores.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.