O que é WebGL?

O WebGL é um padrão de rede aberta para renderizar gráficos em qualquer navegador compatível, sem a necessidade de plug-ins adicionais. O WebGL é integrado completamente em todos os padrões da Web do navegado, permitindo o uso acelerado de processamento de imagens e efeitos do GPU como parte da tela da página da web. Os elementos do WebGL podem ser incorporados a outros elementos HTML e compostos com outras partes da página.

Apesar de a maioria dos navegadores atuais suportarem o WebGL, acesse este link para saber mais detalhes sobre as outras versões que são suportadas.

Alguns navegadores não têm WebGL ativado por padrão. Para ativar o WebGL em seu navegador, consulte este artigo.

Observação:

Certifique-se de ativar WebGL em seu navegador, pois alguns navegadores desativam WebGL por padrão.

Uso do tipo de documento WebGL-glTF (Beta)

O Animate CC agora tem dois tipos de documento WebGL-glTF. Você pode usar o tipo de documento WebGL-glTF Standard para habilitar a integração com qualquer um dos pacotes de WebGL-glTF Standard. Ele tem total conformidade com os padrões.

  1. Para criar um documento baseado em WebGL-glTF, selecione WebGL-glTF Standard ou WebGL-glTF Extended no propósito Avançado na tela Inicial. 

    Tipo de documento WebGL-glTF
    Tipo de documento WebGL-glTF
  2. Especifique a Largura, Altura e as Unidades de acordo com suas necessidades e clique em Criar.

Publicação de um arquivo WebGL-glTF

  1. Clique em Configurações de publicação no Inspetor de propriedades.

    Publicar arquivo WebGL-glTF
    Publicar arquivo WebGL-glTF
  2. Digite um nome na caixa de texto Nome da saída.

    Caixa de diálogo Configurações de publicação do tipo de documento WebGL-glTF Standard
    Caixa de diálogo Configurações de publicação do tipo de documento WebGL-glTF Standard
  3. Selecione GLB ou GLTF na opção Formato.

  4. Especifique um número decimal com intervalo 1-3 na caixa de texto Resolução da imagem.

  5. Marque a opção Remover espaços em branco no arquivo JSON para reduzir o tamanho do arquivo.

  6. Por padrão, as opções padrão Repetir linha de tempo e Incluir camadas ocultas são marcadas. Você pode desmarcá-las para localizar pequenos erros.

  7. Clique no botão Publicar para publicar o arquivo.

Um tutorial em vídeo sobre a exportação de WebGL-glTF (Standard e Extended)

Um tutorial em vídeo sobre a exportação de WebGL-glTF (Standard e Extended)
Vídeo de demonstração de como usar a exportação de WebGL-glTF (Standard e Extended)

Animate CC 18.0 e versões anteriores

Consulte o seguinte conteúdo se você estiver usando o Animate CC 18.0 ou uma versão anterior.

O tipo de documento WebGL

O Animate CC permite que você crie e publique conteúdos interativos ricos no formato Web Graphics Library (WebGL). Por ser totalmente integrado aos navegadores, o WebGL permite que o Animate utilize o uso acelerado do GPU de processamento e renderização de gráficos, como parte da tela da página da Web.

Esse novo tipo de documento permite que você crie conteúdo e publique rapidamente em uma saída WebGL. Você pode utilizar ferramentas eficientes no Animate para criar conteúdos ricos, exceto renderizar a saída WebGL que pode ser executada em qualquer navegador compatível. Isso significa que você pode usar a linha do tempo, a área de trabalho e as ferramentas de desenho tradicionais do Animate para criar e produzir nativamente conteúdo WebGL. Os navegadores mais usados suportam WebGL, desta forma permitindo que o Animate renderize o conteúdo na maioria das plataformas da Web.

Observação:

O suporte para WebGL só está disponível como visualização. Esta atualização do Animate inclui suporte para animações básicas com som e scripts, além de um grande conjunto de recursos de interatividade. Com os lançamentos futuros do Animate, você verá mais recursos sendo ativados para o tipo de documento WebGL. Para obter a lista completa com os recursos do Animate compatíveis com WebGL, consulte este artigo da KB.

Criação de um documento WebGL

No Animate CC, o documento WebGL permite que você crie e publique rapidamente conteúdo para o formato WebGL. Para criar um documento WebGL:

  1. Inicialização do Animate CC.
  2. Na tela de boas vindas, clique na opção WebGL(Pré-visualização). Como alternativa, selecione a opção no menu Arquivo > Novopara exibir a caixa de diálogo Novo documento. Clique na opção WebGL(Pré-visualização)

Visualização de conteúdo WebGL em navegadores

Você pode usar o recurso Testar filme no Animate para visualizar o resto de seu conteúdo. Para visualizar, faça o seguinte:

  1. No Animate CC, pressione Ctrl+Enter no Windows e CMD+ Enter em MAC. Isso inicia seu navegador padrão e renderiza o conteúdo WebGL.
O Animate CC requer um servidor da Web que execute o conteúdo WebGL. O Animate CC tem um servidor da Web incorporado que está configurado para executar conteúdo WebGL na Porta nº 8090. Se um servidor já estiver usando esta porta, o Animate automaticamente detecta e resolve o conflito.

Publicação de conteúdo no formato WebGL

O Animate permite que você crie e publique conteúdo WebGL nativamente de dentro do sistema.

Para publicar seu documento WebGL, faça o seguinte:

  1. Selecione Arquivo > Configurações de publicação para exibir a caixa de diálogo de Configurações de publicação. Como alternativa, selecione Arquivo > Publicar. se você já especificou as Configurações de publicação para WebGL.
  2. Na caixa de diálogo Configurações de publicação, especifique os valores de:

Arquivo de saída

Forneça um nome significativo para a saída. Além disso, navegue até ou insira o local em que você deseja publicar a saída WebGL.

Substituir HTML

Permite que você especifique se deve substituir o HTML Wrapper todas as vezes que publicar seu projeto WebGL.Você pode desmarcar esta opção caso tenha feito alterações externas ao seu arquivo HTML publicado e deseja retê-lo enquanto atualiza todas as alterações feitas à animação ou aos recursos no Animate CC.

Incluir camadas ocultas

Inclui todas as camadas ocultas na saída WebGL. Desmarcar Incluir camadas ocultas impede que todas as camadas (inclusive as aninhadas em clipes de filmes) marcadas como ocultas sejam exportadas para o WebGL resultante. Isso permite que você teste facilmente diferentes versões de documentos WebGL tornando as camadas invisíveis.

Repetir linha do tempo

Repete o conteúdo ao atingir o último quadro. Desmarque esta opção de forma a parar o conteúdo quando o último quadro for atingido.

webGL_publishSettings
  1. Clique em Publicar para publicar seu conteúdo WebGL no local especificado.

Observação:

60FPS é o maior QPS que pode ser especificado para um conteúdo WebGl compatível com os navegadores.

Como entender a saída WebGL

A saída WebGL publicada contém os seguintes arquivos:

Arquivo de invólucro HTML

Inclui o runtime, chamadas de ativos e também inicializa o renderizador de WebGL. O nome do arquivo é <FLA_name>.html por padrão. Você pode fornecer um nome diferente ao arquivo HTML na caixa de diálogo Configurações de publicação (Arquivo > Configurações de publicação).

O arquivo HTML é colocado no mesmo diretório que o FLA por padrão. Você pode fornecer um local diferente na caixa de diálogo Configurações de publicação.

Arquivo JavaScript (WebGL Runtime)

Renderiza o conteúdo publicado em WebGL. É publicado na biblioteca/pasta do documento WebGL. O nome do arquivo é: flwebgl-<version>.min.js

O invólucro HTML utiliza este arquivo JS para renderizar o conteúdo WebGL.

Atlas de textura

Armazena todo o valor de cor ( de formas ), incluindo as ocorrências de bitmap no palco.

Adição de áudio a seu documento WebGL

Você pode importar e embutir áudios no documento WebGL, controlar a reprodução usando as configurações de sincronização (evento, iniciar e pausar) e reproduzir áudio da linha do tempo de execução. O WebGL atualmente só é compatível com os formatos .wav e .mp3.

Para obter mais informações sobre como trabalhar com áudio, consulte Uso de sons no Animate.

Migração de conteúdo existente para um documento WebGL

Você pode migrar conteúdos existentes no Animate para um documento WebGL. Até o fim, o Animate permite que você migre copiando ou importando o conteúdo manualmente. Além disso, ao trabalhar com vários documentos no Animate, é uma prática comum copiar o conteúdo em documentos como Camadas ou ativos na Biblioteca. Apesar de a maioria dos recursos do Animate serem compatíveis, alguns tipos de conteúdo são modificados para acomodar melhor o formato WebGL.

O Animate contém vários recursos poderosos que ajudam a produzir conteúdos visualmente ricos. Contudo, considerando que alguns desses recursos são nativos do Animate, eles não serão suportados em um documento WebGL. O Animate foi projetado para modificar esse conteúdo para um formato suportado e indicar visualmente quando uma ferramenta ou um recurso não for suportado.

Copiar

conteúdo (camadas ou símbolos da biblioteca) de um tipo de documento do Animate tradicional (como ActionScript 3.0, AIR para Android, AIR para desktop, e assim por diante) em um documento WebGL. Neste caso, um tipo de conteúdo não suportado é removido ou convertido para padrões suportados.

Por exemplo, copiar animação 3D removerá todas as transformações 3D aplicadas a objetos no palco.

Importar

um arquivo PSD ou AI que contenha conteúdo não suportado. Neste caso, o conteúdo é removido ou convertido para padrões suportados.

Por exemplo, importe um arquivo PSD com efeitos de desfoque aplicados. O Animate remove o efeito.

Ao trabalhar

com vários tipos de documento (por exemplo, ActionScript 3.0 e WebGL) simultaneamente, você alterna documentos com uma ferramenta ou opção não suportada selecionada. Neste caso, o Animate CC indica visualmente que o recurso não é compatível.

Por exemplo, você criou uma linha pontilhada em um documento ActionScript 3.0 e alterna para WebGL com a ferramenta Linha ainda selecionada. Observe o ponteiro e o Inspetor de propriedades, pois eles indicam visualmente que a linha pontilhada não é suportada dentro da WebGL.

Scripts

Você pode escrever um código Javascript no painel de Ações, o qual será executado depois que os participantes entrarem no quadro. A variável "this" no contexto dos scripts de quadro refere-se à instância do MovieClip à qual ela pertence. Além disso, scripts de quadro podem acessar as funções do Javascript e as variáveis declaradas no arquivo recipiente HTML. Ao copiar um quadro ou camada de um documento ActionScript e colá-lo em um documento WebGL, os scripts, caso haja algum, receberão comentários.

Alterações aplicadas ao conteúdo depois de migrar

Estes são os tipos de alterações que são aplicadas quando você migra conteúdo legado a um documento WebGL.

O conteúdo é removido

Os tipos de conteúdo que não são suportados em HTML5 Canvas são removidos. Por exemplo:

Filtros

não são suportados. O efeito será removido e a forma passará a ter um preenchimento sólido.

Filters
O efeito de filtro de Desfoque é removido e é substituído pelo Preenchimento sólido.

O conteúdo é modificado para um valor padrão

O tipo de conteúdo ou recurso é suportado, mas uma propriedade do recurso, não. Por exemplo:

 

O Gradiente radial

é modificado para ter preenchimento sólido usando a cor principal.

Radial Gradient
O Gradiente radial é modificado para ter preenchimento sólido usando a cor principal.

Para obter a lista completa de recursos que não são suportados e seus valores de emergência durante a migração, consulte este artigo.

Aprimoramento no desempenho de renderização com cache de bitmap

O cache de bitmap em tempo de execução permite otimizar o desempenho da interpretação, especificando se o clipe do filme estático (por exemplo, uma imagem de plano de fundo) ou símbolo de botão deve ser armazenado em cache como um bitmap em tempo de execução. Por padrão, itens de vetor são redesenhados em cada quadro. Armazenar em cache um clipe de filme ou um símbolo de botão como um bitmap impede que o navegador precise redesenhar o item continuamente, pois a imagem será um bitmap e sua posição não mudará. Isso oferece uma melhora significativa no desempenho da interpretação do conteúdo WebGL.

Por exemplo, quando você criar uma animação com um fundo complexo, crie um clipe filme que contenha todos os itens que fazem parte do fundo. Então, selecione “Cache como bitmap” para o clipe de filme de fundo no Inspetor de propriedades. Durante a reprodução, o plano de fundo é renderizado como um bitmap armazenado na profundidade de tela atual. O navegador desenha o bitmap no Palco rapidamente e somente uma vez, permitindo que a animação seja reproduzida com maior velocidade e com mais fluidez.

O cache de bitmap permite utilizar um clipe de filme e congelar automaticamente em um certo local. Se uma região for alterada, o cache do bitmap será atualizado vetorialmente. Este processo minimiza o número de desenhos que o navegador precisa fazer várias fazer e oferece um desempenho de interpretação mais rápido e sem problemas.

Para habilitar Cache como Bitmap da forma adequada, selecione a instância do clipe de filme e selecione Cache como Bitmap da lista suspensa Interpretação no Inspetor de propriedades (Janela > Propriedades).

CacheAsBitmap

Considerações ao usar Cache como bitmap

Ao usar a propriedade Cache como Bitmap no conteúdo WebGL, leve em consideração:

  • O tamanho máximo do símbolo do clipe de filme é limitado a 2048x2048. Observe que os limites reais da instância do clipe de filme que podem ser armazenados são menores do que 2048x2048, o WebGL utiliza alguns pixels.
  • Se existir mais espaço do que uma instância no mesmo clipe de vídeo, o Animate gera o cache com o tamanho da primeira instância encontrada. No entanto, o cache não é gerado novamente e a propriedade Cache como Bitmap não é ignorada, mesmo que a transformação do clipe de filme mude para uma extensão maior. E, consequentemente, se um símbolo do clipe de filme é escalado durante o curso da animação, ela poderá ficar granulada.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online