1. Defina tamanhos de textura adequados para equilibrar desempenho e qualidade ⚙️

A escolha do tamanho da textura tem impacto direto em consumo de memória e velocidade de renderização. O construtor da classe TG.Texture, localizado em src/TexGen.js, inicializa um buffer com as dimensões fornecidas:

TG.Texture = function (width, height) {
  this.buffer = new TG.Buffer(width, height);
  this.bufferCopy = new TG.Buffer(width, height);
};

Recomendação prática: Para fundos web ou elementos não críticos em resolução, use tamanhos como 512×512 ou 1024×1024. Em cenários 3D, 2048×2048 pode ser viável, mas avalie cuidadosamente o impacto no desempenho durante a execução.

2. Selecione o modo operacional corretamente para resultados esperados 🔄

O sistema utiliza diferentes modos de operação — como SET, ADD, SUB e MUL — definidos no objeto TG.OP:

TG.OP = {
  SET: function (x, y) { return y; },
  ADD: function (x, y) { return x + y; },
  SUB: function (x, y) { return x - y; },
  MUL: function (x, y) { return x * y; }
};

Erro comum: Usar ADD sem limitar valores pode causar saturação de cores (valores acima de 1).
Solução: Combine operações com filtros de normalização para manter os níveis de intensidade dentro dos limites aceitáveis:

texture.add(noiseGenerator).normalize();

3. Combine filtros internos para criar efeitos sofisticados ✨

Filtros como SineDistort, Twirl, Pixelate e GradientMap permitem transformações visuais complexas sem codificação adicional. Um exemplo eficaz é a combinação de ruído fractal com mapeamento de gradientes para simular paisagens naturais:

var resultTexture = new TG.Texture(512, 512);
resultTexture.set(new TG.FractalNoise()
  .octaves(4)
  .amplitude(0.7)
  .baseFrequency(0.03125))
.set(new TG.GradientMap()
  .point(0, [0, 0, 0.5])
  .point(1, [1, 1, 1]));

4. Ajuste parâmetros de ruído com parcimônia para evitar sobrecarga 🌊

Funcionalidades como FractalNoise e CellularNoise oferecem múltiplas opções ajustáveis. Parâmetros como frequência base, amplitude e número de octavas enfluenciam diretamente a complexidade computacional.

Evite: Aumentar excessivamente o número de octavas (acima de 4-5) ou a frequência, pois isso gera padrões muito detalhados e lentos de processar.

// Configuração recomendada
new TG.FractalNoise()
  .octaves(3)
  .baseFrequency(0.03125)
  .amplitude(0.5)
  .persistence(0.7);

5. Otimização do ciclo de renderização para maior eficiência 🚀

No arquivo editor/main.js, observa-se o uso de requestAnimationFrame para atualização contínua da cena:

function renderLoop() {
  requestAnimationFrame(renderLoop);
  renderer.render(scene, camera);
}
renderLoop();

Dicas de desempenho:

• Não crie novos objetos dentro do loop principal.
• Cache texturas estáticas após geração.
• Use Web Workers para processos intensivos, mantendo a interface responsiva.

6. Domine o sistema de coordenadas para posicionamento preciso 🧭

O texgen.js usa um sistema 2D com origem no canto superior esquerdo. Formas como Circle e Rect dependem de coordenadas exatas que podem facilmente levar a erros se mal calculadas.

Erro frequente: Posicionar formas fora dos limites da textura por usar valores absolutos.
Boa prática: Use coordenadas relativas ao tamanho da textura:

new TG.Circle()
  .position(texture.width * 0.5, texture.height * 0.5)
  .radius(texture.width * 0.3);

7. Exporte texturas com atenção à compatibilidade 💾

Os métodos toCanvas() e toImageData() são essenciais para integrar texturas em outras partes da aplicação:

var canvasOutput = texture.toCanvas();
document.body.appendChild(canvasOutput);

var ctx = canvasOutput.getContext('2d');
var imageData = texture.toImageData(ctx);

Recomendações:

• Verifique dimensões e formato antes da exportação.
• Para texturas grandes, divida em blocos para evitar estouros de memória.
• Ofereça suporte a múltiplos formatos (PNG, JPEG) conforme necessário.

Aplicar estas práticas permite explorar todo o potencial do texgen.js com segurança e eficiência. Desde texturas para jogos até visualizações de dados, a chave está em equilibrar configuração, desempenho e criatividade.