Modo
Tema
Idioma
PTEN
← LabExperimento 1 de 4

Lab

Esfera Cromada

Um objeto que se transforma no scroll

Intenção
Estudo de interação e motion em WebGL
Ferramentas
Three.jsGLSLGSAPLenis
Ver ao vivo ↗
Esfera Cromada

Um único objeto no centro da tela que, conforme a rolagem, muda de natureza — de cromo líquido a wireframe, a nuvem de partículas, a vidro — e de forma, de quase-esfera a blob orgânico. Tudo dirigido pelo scroll, compartilhando a mesma deformação.

O que explora

  • Deformação de malha por ruído simplex no vertex shader, com a normal recalculada para o reflexo acompanhar a superfície.
  • Transição de estado (cromo → linhas → pontos → vidro) por cross-fade dirigido pelo scroll.
  • Reflexo grafite a partir de um environment escuro montado à mão; bloom só nos brilhos.
  • Scroll amanteigado com Lenis, pós-processamento (bloom) e refração de vidro sobre o texto.

Estados

Cromo
Reflexo grafite e deformação líquida sutil
Linhas
Wireframe do blob orgânico
Partículas
A estrutura explode e se remonta
Vidro
Refrata o texto por trás
voltar para o lab
Estudo de interação e motion em WebGL

Esfera Cromada: Um objeto que se transforma no scroll

Three.jsGLSLGSAPLenis
Esfera Cromada

Um único objeto no centro da tela que, conforme a rolagem, muda de natureza — de cromo líquido a wireframe, a nuvem de partículas, a vidro — e de forma, de quase-esfera a blob orgânico. Tudo dirigido pelo scroll, compartilhando a mesma deformação.

O que explora

  • Deformação de malha por ruído simplex no vertex shader, com a normal recalculada para o reflexo acompanhar a superfície.
  • Transição de estado (cromo → linhas → pontos → vidro) por cross-fade dirigido pelo scroll.
  • Reflexo grafite a partir de um environment escuro montado à mão; bloom só nos brilhos.
  • Scroll amanteigado com Lenis, pós-processamento (bloom) e refração de vidro sobre o texto.

Estados

Cromo Reflexo grafite e deformação líquida sutil
Linhas Wireframe do blob orgânico
Partículas A estrutura explode e se remonta
Vidro Refrata o texto por trás
abrir experimento →

Feito por uma líder de design que ainda gosta de pôr a mão no código.

mais sobre mim →