Design de Shader com Escultura por Raymarching

Um hero construído com pixels

O Design de Shader com Escultura por Raymarching apresenta uma grande forma procedural verde sobre um campo azul-marinho profundo. O título visível, “3D that lives in a fragment shader.”, enquadra a imagem como um estudo de renderização, e não como um asset 3D convencional. Essa combinação permite que o visitante entenda a premissa técnica antes de inspecionar a superfície da escultura.

O fragment shader faz sphere tracing da união suave de cinco campos de distância de esferas, cujos centros orbitam ao longo do tempo. Um segundo traçado, mais curto, estima sombras suaves; normais por diferenças finitas sustentam os realces e um contorno no estilo Fresnel. Uma órbita lenta e automática da câmera muda o ponto de vista. As formas verdes parecem esculturais, mas não há malha de escultura, textura de imagem nem simulação de fluidos.

O design mantém a explicação técnica abaixo do título em escala exagerada: “No meshes” introduz o método de renderização e, em seguida, o movimento orbital declarado. Essa ordem torna a ideia visual legível de relance; em contrapartida, o vocabulário do shader pressupõe alguma familiaridade com programação gráfica.

Onde a composição se encaixa

Este design é adequado a um hero de primeira tela, onde atmosfera e identidade técnica importam mais do que uma navegação densa. A escultura ocupa a maior parte do campo visual, enquanto o rótulo e o parágrafo no canto inferior esquerdo oferecem um ponto de entrada para quem quer saber o que está vendo.

Os três estados fornecidos mostram o mesmo sistema textual enquanto as formas renderizadas mudam de arranjo. Um estado centraliza uma grande forma arredondada, outro introduz formas sobrepostas e um terceiro empurra uma forma de borda brilhante pelo campo superior. A repetição do texto faz do movimento o tema, sem exigir controles nem uma galeria de cenas separadas.

Como ler o selo de estado

O selo no canto superior direito mantém os rótulos GPU e Raymarch e acrescenta uma estimativa de FPS calculada localmente. As três capturas mostram 2FPS neste ambiente, enquanto o texto explicativo diz 60fps. Essas informações não são evidências equivalentes: o contador descreve a cadência de redesenho da sessão de captura, e o texto-fonte não estabelece uma garantia de desempenho válida em diferentes dispositivos.

Composição por luz e escala

A escultura é deliberadamente exagerada em escala. Na primeira captura, seu corpo arredondado entra pelas bordas superior e direita, deixando espaço negativo azul-marinho em torno da tipografia; estados posteriores aproximam várias formas. Cortar as formas no limite da viewport faz o objeto parecer maior que a página, mas também reduz a quantidade de contorno que o leitor pode inspecionar.

O sombreamento do verde ao quase preto fornece a principal pista de profundidade. Pontos brilhantes ficam perto das bordas superior esquerda ou superior direita das formas, enquanto um contorno claro acompanha certos perfis. Isso dá ao olhar um percurso pelas formas, de resto escuras. O custo é o contraste: o verde neon é visualmente forte, então o parágrafo técnico discreto precisa continuar curto e bem posicionado.

A camada editorial usa um pequeno rótulo em caixa alta “RAYMARCHED HERO”, um título muito grande em duas linhas e um parágrafo explicativo compacto. O rótulo estabelece a categoria, o título enuncia a ideia e o parágrafo nomeia a técnica. Essa sequência de três níveis é específica deste artefato, pois cada camada de texto se refere diretamente à escultura por raymarching, e não a um hero genérico.

1. Comece pelo campo

   Estabeleça o canvas azul-marinho escuro e uma única forma verde em escala exagerada, para que o modelo de iluminação possa ser lido antes que outras formas disputem a atenção.

2. Adicione pistas de volume

   Use sombras suaves, realces concentrados e uma borda fresnel contida para descrever a forma de campo de distância com sinal, sem introduzir detalhes específicos de malha.

3. Posicione a explicação

   Mantenha o rótulo de categoria, a frase principal e a frase técnica nessa ordem, para que o experimento visual continue compreensível quando o movimento estiver pausado.

Limite de capacidade

Este exemplo oficial do OpenDesign contém uma implementação local real em WebGL2, e não apenas um rótulo de renderização simulada. Um triângulo em tela cheia executa, por pixel, um sphere trace de no máximo 90 passos, que termina em um limiar de distância de 0.001 ou em um alcance acima de oito, e usa até 24 passos para sombras suaves. Esses são fatos do código-fonte, não prova de prontidão para produção nem de um serviço conectado.

A cena e a câmera são animadas automaticamente. O redimensionamento é o único evento de entrada, e o DPR de renderização é limitado a 1.5 para restringir o trabalho por pixel. Não há controles de ponteiro, teclado, direção da câmera, edição de material nem parâmetros. A estimativa local de FPS é atualizada em janelas de cerca de meio segundo; nem ela nem o texto de 60fps da fonte estabelecem um benchmark entre dispositivos.