Grades e ladrilhos
Repita uma célula pela superfície com fract e numere cada cópia com floor.
Cards
Um exemplo ao vivo para ajustar, aprender e copiar.
Como funciona
Quase todo padrão repetido começa do mesmo jeito: amplie a UVUma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela. Coordenadas UV Uma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela.uv = gl_FragCoord.xy / resolutionfloor da
coordenada ampliada diz em qual célula o pixel está, e o fract diz onde ele fica dentro dela. Desenhe algo com a
parte fracionária e ele se repete em todas as células; use o número da célula para diferenciar as cópias, alternando
duas cores, deslocando uma fileira sim, outra não, ou dando a cada célula um tom aleatório.
Pisos, paredes, tecidos, fundos de interface e as texturas quadriculadas que artistas usam para achar UV esticada são todos grades. A técnica é barata, um punhado de contas por pixel e nenhuma textura, então funciona em qualquer resolução e continua nítida de perto.
De longe é outra história. Quando a célula fica menor que um pixel, uma grade de bordas duras se desfaz em cintilação
e curvas falsas, um tipo de aliasingO padrão falso que surge quando um sinal muda mais rápido do que é amostrado. Num shader, detalhes menores que um pixel viram bordas serrilhadas, cintilação e moiré, porque cada pixel tira uma única amostra do seu centro. Aliasing O padrão falso que surge quando um sinal muda mais rápido do que é amostrado. Num shader, detalhes menores que um pixel viram bordas serrilhadas, cintilação e moiré, porque cada pixel tira uma única amostra do seu centro.
Leitura complementar
- fract (abre em uma nova aba)Referência
- mod (abre em uma nova aba)Referência
- Patterns (abre em uma nova aba)Livro
- gl_FragCoord (abre em uma nova aba)Referência
- Uniforms (abre em uma nova aba)Livro
- UV mapping (abre em uma nova aba)Referência
- floor (abre em uma nova aba)Referência
- Filterable procedurals (abre em uma nova aba)Artigo
- Aliasing (abre em uma nova aba)Referência
- CanvasItem shaders (abre em uma nova aba)Documentação