Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Three.js

Dica Rápida: Como Renderizar para uma Textura Em Three.js

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Marcos Fuchter Leandro (you can also view the original English article)

Por padrão, tudo que você renderiza em Three.js é enviado para a tela. Afinal, qual é o sentido de renderizar algo se você não puder vê-lo? Acontece que há um ponto muito importante: capturar os dados antes deles serem enviados para a tela (e assim perdidos).

Isso deixa muito mais fácil aplicar efeitos de pós-processamento, como correção de cores, deslocamento de cores, desfocagem, e é útil para efeitos de sombreador, também.

Essa técnica é conhecida como renderizar para uma textura ou renderizar para um buffer de frame, seu resultado final é guardado numa textura. o qual você pode então renderizar na tela. Nessa dica rápida, vou te mostrar como fazer isso, e então te levar por um exemplo prático de renderizar um cubo em movimento nas superfícies de outro cubo em movimento.

Nota: Esse tutorial presume que você tenha familiaridade básica com Three.js. Se não, dê uma olhada em How to Learn Three.js for Game Development.

Implementação Básica

Há muitos exemplos por aí em como fazer isso que tendem a ser embutidos em efeitos mais complicados. Aqui é o mínimo que você precisa para renderizar algo na textura em Three.js:

Primeiro temos a cena básica configurada. Então, criamos outra cena, bufferScene; qualquer objeto que adicionamos na cena serão desenhados ao nosso alvo fora da tela em vez de na tela.

Então criamos bufferTexture, o qual é um WebGLRenderTarget. Isso é o que Three.js usa para nos deixar renderizar em algo diferente da tela.

Finalmente, pedimos ao Three.js que renderize bufferScene:

Isso é bem como renderizar uma cena normal, exceto que especificamos um terceiro argumento: o alvo da renderização.

Então os passos são:

  1. Crie uma cena para segurar seus objetos.
  2. Crie uma textura para guardar o que você renderiza
  3. Renderize sua cena na sua textura

Isso é essencialmente o que precisamos fazer. Não é muito legal, entretanto, já que não podemos ver nada. Mesmo se você adicionasse coisas ao bufferScene, você ainda não verá nada; isso é porque você precisa de alguma forma renderizar a textura que criou na cena principal. O seguinte é um exemplo de como fazer isso.

Exemplo de Uso

Vamos criar um cubo numa cena, desenhá-lo na textura, e então usar isso como uma textura para um novo cubo!

1. Comece Com uma Cena Básica

Aqui está nossa cena básica com um cubo vermelho em rotação e um plano azul atrás dele. Não há nada especial acontecendo aqui, mas você pode checar o código trocando para as abas CSS ou JS na demonstração.

Você pode dar um fork e editar isso no CodePen.

2. Renderize Essa Cena Em Uma Textura

Agora vamos pegar isso e renderizá-lo em uma textura. Tudo que precisamos fazer é criar uma bufferScene assim como na implementação básica acima, e adicionar nossos objetos nisso.

Você pode dar um fork e editar isso no CodePen.

Se feito certo, nós não veremos nada, já que agora nada está sendo renderizado na tela. Em vez disso, nossa cena é renderizada e salva no bufferTexture.

3. Renderize um Cubo Texturizado

bufferTexture não é diferente de nenhuma outra textura. Podemos simplesmente criar um novo objeto e usá-lo como nossa textura:

Você pode dar um fork e editar isso no CodePen.

Você poderia potencialmente desenhar qualquer coisa na primeira textura, e então renderizar isso no que quiser!

Usos Potenciais

O uso mais direto ao ponto é em qualquer tipo de efeito de pós-processamento. Se você quisesse aplicar algum tipo de correção de cor ou deslocamento para sua cena, em vez de aplicar a cada um objeto, você poderia apenas renderizar sua cena inteiro em uma textura, e então aplicar qualquer efeito que quiser para essa textura final antes de renderizá-la na tela.

Qualquer tipo de sombreador que requira múltiplos passos (como o borrão) vai fazer uso dessa técnica. Eu explico como usar buffers de frame para criar um efeito de fumaça nesse tutorial.

Esperançosamente você achou essa pequena dica útil! Se você detectar qualquer erro ou tem qualquer dúvida, por favor me avisa nos comentários!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.