Peças gráficas
Design de shader de folha metálica holográfica
Uma superfície procedural de folha metálica multicolorida muda com o tempo e com a posição do ponteiro sob um título fixo de duas linhas, pequenos rótulos de prévia e uma dica de inclinação.
Usos para shaders de folha metálica
- Experimentos de seções de abertura em WebGLExplore superfícies guiadas por shader atrás de tipografia editorial de destaque.
- Direção de arte interativaEstude como o movimento do ponteiro pode influenciar uma composição visual.
- Estudos de programação criativaAnalise um exemplo compacto de textura animada renderizada localmente.
Destaques da Superfície Holográfica
- Campo de folha metálica amassadaContornos irregulares criam um fundo tátil e em mudança contínua.
- Tipografia superdimensionadaHOLOGRAPHIC FOIL ancora a composição em duas linhas.
- Inclinação pelo ponteiroA instrução liga o movimento do cursor à mudança de posição das cores.
- Prévia de GPUUm pequeno rótulo de status apresenta o trabalho como uma prévia WebGL.
Três estados da seção de abertura com folha metálica
1 / 3
Uma superfície de folha metálica sem texturas de imagem
O design de shader de folha metálica holográfica é um exemplo oficial do OpenDesign construído em torno de uma composição WebGL que ocupa toda a área visível. A superfície visível combina regiões magenta, verde-azuladas, verdes, violeta e amarelas com realces finos semelhantes a curvas de nível, produzindo a aparência de folha metálica amassada em vez de um campo de cor chapado.
A composição é apresentada explicitamente como “Thin-film interference over a crushed-foil surface”, enquanto a paleta muda com o ângulo de visão. Essa redação descreve o modelo visual pretendido; as capturas verificam a aparência renderizada e a instrução de interação que a acompanha, não a precisão óptica nem o desempenho da GPU.
Onde este design se encaixa
O artefato é mais útil como referência visual para seções de abertura interativas de landing pages, estudos de arte generativa e demonstrações de programação criativa. Sua principal lição é de composição: um fundo ricamente animado pode dar atmosfera enquanto uma sobreposição contida oferece orientação.
O rótulo visível “OPENDESIGN · WEBGL PREVIEW” identifica o contexto do exemplo, e “REAL-TIME · GPU” indica a abordagem de renderização pretendida. Esses rótulos ajudam a contextualizar o trabalho para quem o vê, mas não devem ser lidos como benchmark nem como evidência de implantação em produção.
Seção de abertura editorial
Use um campo de shader responsivo atrás de um título curto quando o próprio visual deve apresentar a página.
Demonstração de programação criativa
Mostre como a posição local do ponteiro pode influenciar uma superfície renderizada continuamente.
Estudo de direção visual
Compare movimento de cor, densidade de textura e posição da tipografia entre os estados capturados.
Como a composição se move
A ordem de leitura permanece consistente nos três estados fornecidos: o pequeno rótulo de prévia do OpenDesign fica no canto superior esquerdo, o status da GPU no superior direito, o grande título “HOLOGRAPHIC FOIL” ocupa a área inferior esquerda e “TILT THE FILM ↗” aparece perto do canto inferior direito. Essa sobreposição estável permite que o fundo mude sem que a interface pareça outra tela.
O título usa uma primeira linha em maiúsculas com peso forte e uma segunda linha mais leve. Esse contraste dá peso imediato a “HOLOGRAPHIC” e deixa “FOIL” visualmente arejada contra a superfície em movimento. Em contrapartida, o fundo pode competir com as letras mais finas, então contraste e posição do texto precisam ser verificados sempre que a paleta do shader mudar.
O shader constrói um campo de espessura distorcido a partir de seis camadas de ruído, estima seu gradiente e mapeia uma fase de espessura e inclinação em uma paleta de cores baseada em cossenos. Termos separados de crista e brilho adicionam reflexos semelhantes aos de uma folha metálica. A posição do ponteiro nos dois eixos fornece o substituto da inclinação, enquanto o tempo decorrido altera o campo. Esses cálculos criam as ilhas de cor semelhantes a curvas de nível sem textura de imagem nem malha de cena; são uma aproximação visual de material, não óptica de filme fino medida.
Sobreposição estável
Rótulos e título fixos preservam a orientação enquanto o campo animado muda por baixo.
Ênfase em duas linhas
Uma primeira linha em negrito e uma segunda mais leve separam o material em destaque de sua descrição.
Contraste em movimento
A mudança na posição das cores pode melhorar ou reduzir a legibilidade, tornando o contraste parte da composição.
Limites de capacidade
O código-fonte cria um canvas WebGL2 local e escuta o movimento do ponteiro, suavizando as duas coordenadas em direção aos alvos a cada quadro. Ele usa essas coordenadas como substituto do ângulo de visão, não como orientação física do dispositivo nem como controle de câmera 3D. “TILT THE FILM” é uma instrução estática, não um botão. As capturas mostram estados temporais de uma única seção de abertura e não estabelecem serviços conectados, dados armazenados, precisão óptica, desempenho medido nem um processo histórico de geração.
Como criar um design de shader de folha metálica holográfica no OpenDesign
Monte a composição em toda a área visível
Comece com um canvas WebGL que ocupe toda a área visível e reserve regiões de sobreposição estáveis para o rótulo de prévia no canto superior esquerdo, o rótulo de GPU no canto superior direito, o título de duas linhas e a instrução de inclinação no canto inferior direito.
Modele a superfície da folha metálica
Crie um campo animado com variações irregulares semelhantes a curvas de nível e uma paleta em mudança que inclua verde-azulado, verde, violeta, magenta e amarelo. Verifique o título em várias posições de cor, em vez de confiar em um único quadro estático.
Prompt sugeridoCrie uma seção de abertura em WebGL2 que ocupe toda a área visível, chamada HOLOGRAPHIC FOIL. Use uma aparência procedural de folha metálica amassada, com regiões em mudança de verde-azulado, verde, violeta, magenta e amarelo. Construa a variação de cor a partir de um campo de ruído distorcido e de uma paleta baseada em cossenos, com realces em forma de cristas. Mantenha fixos os rótulos de prévia do OpenDesign, a primeira linha do título em peso forte, a segunda linha leve e a instrução de inclinação no canto inferior direito. Use as duas coordenadas do ponteiro, suavizadas, como um substituto visual da inclinação, enquanto o tempo altera a superfície. Não adicione um botão de inclinação clicável, alegações de orientação do dispositivo, serviços conectados, dados armazenados, óptica validada fisicamente nem garantias de desempenho.
Verifique movimento e legibilidade
Compare o campo da folha metálica ao longo do tempo e com o movimento do ponteiro nos dois eixos, mantendo a ordem das sobreposições fixa. Verifique a linha mais leve FOIL contra regiões claras e escuras. O código-fonte implementa o tratamento local do ponteiro; verifique esse comportamento na adaptação sem afirmar precisão óptica nem desempenho garantido.
Exportar e obter um link de compartilhamento
Exporte seu design finalizado e, em seguida, use Compartilhar no OpenDesign para obter um link de compartilhamento. Abra o link em uma janela separada do navegador e verifique se a versão desejada e seus assets estão disponíveis antes de enviá-lo.
Design de Pôster Editorial de Fluxo de Trabalho com IA
O design de pôster editorial de fluxo de trabalho com IA apresenta seis propostas em capítulos numerados, com exemplos concretos de prompts, fundo creme e acentos tipográficos em ferrugem.
Peças gráficas
Design de Carrossel Social sobre Fluxo de Trabalho com IA
Sete cards verticais usam títulos chineses superdimensionados, hábitos numerados, campos de cor variáveis e uma declaração final para explicar fluxos de trabalho de edição com IA.
Peças gráficas
Design de Shader Aurora Field
Um campo de ruído azul-esverdeado animado automaticamente dá atmosfera a um hero em WebGL, enquanto um título fixo e um pequeno indicador local de taxa de quadros ancoram a cena.
Peças gráficas
Design de Shader Aurora Veil
Aurora Veil é uma composição interativa de shader que transforma luz em camadas, estrelas e movimento do cursor em um hero atmosférico em WebGL.
Peças gráficas