Estúdio de esfera de vidro líquido

Crie uma esfera de vidro animada e exporte como PNG transparente, WebM em loop ou HTML independente.

Escolha uma predefinição, ajuste a esfera e os reflexos e exporte PNG transparente, loop de seis segundos ou renderizador HTML independente.

Prévia ao vivo

Renderizador de shader WebGL2

Nenhum dado ou configuração é enviado. A renderização ocorre neste navegador.

Preparando a prévia…

A transparência do WebM varia conforme o codec do navegador; confira no editor.

Plano de fundo
Shader de fragmento
Como usar

Crie uma esfera de vidro para um projeto web

Crie uma esfera de vidro animada e exporte como PNG transparente, WebM em loop ou HTML independente.

Passo a passo

  1. Forneça a origem usando: Predefinições.
  2. Ajuste: Tonalidade do vidro / Tamanho da esfera / Refração / Brilho / Velocidade de rotação / Transparente / Cor do plano de fundo / Tamanho PNG. Use a referência abaixo para escolher as opções adequadas à tarefa.
  3. Execute: Baixar PNG / Gravar WebM de 6 segundos / Baixar HTML independente. Confira o resultado antes de copiar, baixar ou usar em outro lugar.
  4. Escolha uma predefinição, ajuste a esfera e os reflexos e exporte PNG transparente, loop de seis segundos ou renderizador HTML independente.

Como escolher as configurações

OpçãoO que muda
Tamanho PNG / TransparentePNG salva imagem estática; WebM grava 6 segundos de animação; HTML independente mantém o renderizador e precisa de WebGL. PNG serve para elementos estáticos transparentes. Teste a transparência WebM no navegador ou editor de destino.

Exemplo e resultado esperado

Exemplo: escolha Aurora e mantenha a transparência. A exportação de 1024 px gera um PNG de 1024 × 640 com espaço transparente ao redor. O canal alfa do WebM depende do codec e do editor.

Se não funcionar

  • Se o renderizador não iniciar, confira o suporte a WebGL. Se o codec não for aceito ou outro aplicativo perder a transparência, use PNG para a imagem estática ou teste o WebM no destino antes.