🧊Gerador de Mapa Normal a partir de Heightmap (PNG)
Envie um heightmap em escala de cinza e receba um mapa normal (normal map) pronto para textura 3D, com a força do relevo ajustável de 0,1 a 8. O processamento é 100% local: a imagem é lida no navegador e nada sai do seu aparelho.
Pré-visualização com um heightmap radial de exemplo, gerado no seu navegador. Envie a sua imagem para substituir.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Convenção de espaço tangent (OpenGL) e operador Sobel 3×3 — notas técnicas padrão — método usual de conversão de heightmap para normal map; cálculo integralmente local no navegador · Última verificação em 07/10/2026
O gerador de mapa normal converte um heightmap em mapa normal 3D pelo operador Sobel 3×3: o gradiente da altura de cada pixel vira um vetor normal, codificado em vermelho, verde e azul no espaço tangent. Áreas planas ficam azul claro (#8080ff). Tudo roda no navegador, sem enviar a imagem.
Como usar o gerador de mapa normal
- Envie o heightmapEscolha uma imagem de relevo em escala de cinza: branco marca o ponto mais alto e preto o mais baixo. Sem arquivo, a ferramenta já abre com um relevo radial de exemplo para você testar os ajustes.
- Ajuste a força do relevoO controle deslizante vai de 0,1 a 8. Valores baixos deixam a superfície quase lisa, úteis para relevo sutil em terrenos; valores altos exageram o gradiente e marcam muito as bordas. A prévia é recalculada a cada movimento, sem esperar nada carregar.
- Baixe o mapa normalA saída mantém o tamanho da imagem de origem e o azul #8080ff nas áreas planas. O botão de download grava o PNG direto no seu dispositivo: a leitura e o cálculo acontecem no navegador e nada é enviado a servidores.
Como funciona: do heightmap ao mapa normal
Um heightmap é uma imagem cinza em que a luminosidade representa altura: pixel claro é alto, pixel escuro é baixo. Para virar um mapa normal, a ferramenta calcula a inclinação do relevo em cada ponto. Para isso, ela olha os oito vizinhos de cada pixel e aplica o operador Sobel 3×3: duas máscaras com pesos 1-2-1 medem a variação da altura na horizontal (gx) e na vertical (gy).
Com gx e gy em mãos, monta-se o vetor normal (−gx·s, −gy·s, 1), em que s é a força escolhida pelo usuário, e normaliza-se para comprimento 1. Os três componentes viram pixels: R mede a inclinação no eixo X, G no eixo Y e B a inclinação para fora da superfície. Por isso uma superfície perfeitamente plana produz exatamente 128, 128, 255 — o azul #8080ff que identifica um canal normal neutro. A convenção usada aqui é a do espaço tangent no formato OpenGL, com o verde apontando para cima na textura; engines no formato DirectX esperam o verde invertido, e essa inversão é fácil de aplicar depois em qualquer software de 3D.
gy = (inf_esq + 2·inf + inf_dir) − (sup_esq + 2·sup + sup_dir)
normal = normalizar(−gx·s; −gy·s; 1) → R,G,B = (n × 0,5 + 0,5) × 255
Exemplo resolvido
Imagine uma faixa do heightmap em que a altura à esquerda vale 0,4 e à direita vale 0,6 (cinza 102 e 153), com as linhas acima e abaixo iguais à do centro. O Sobel dá gx = (0,6 + 1,2 + 0,6) − (0,4 + 0,8 + 0,4) = 0,8 e gy = 0. Com a força em 2,0, o vetor fica (−1,6; 0; 1), de comprimento 1,887. Normalizando: −1,6 ÷ 1,887 = −0,848, e o componente azul é 1 ÷ 1,887 = 0,530.
Convertendo para cores: vermelho = (−0,848 × 0,5 + 0,5) × 255 = 19, verde = (0 + 0,5) × 255 = 128 e azul = (0,530 × 0,5 + 0,5) × 255 = 195. O pixel de saída é RGB(19, 128, 195): um azul-esverdeado indicando uma inclinação para a esquerda. Já uma região sem variação nenhuma devolve RGB(128, 128, 255) e uma quina forte, com gx maior, empurra o vermelho para 0 ou 255 rapidamente. Dobrar a força de 2,0 para 4,0 apenas aproxima o vetor da superfície, aumentando o contraste do relevo até o limite da normalização.
Suposições e limitações
- Imagens coloridas são convertidas para luminância (0,299R + 0,587G + 0,114B) antes do cálculo; um arquivo já colorido funciona, mas um heightmap cinza dá resultado mais previsível
- A força vai de 0,1 a 8 e é aplicada ao gradiente: acima de certa inclinação o vetor satura e o relevo para de crescer visualmente
- O operador Sobel lê a luminância dos vizinhos, não a geometria real: é a aproximação usual para texturas de terreno, mas não substitui um bake a partir de um modelo 3D
- A convenção de canal verde segue o padrão OpenGL; para DirectX ou engines que esperam verde invertido, é preciso inverter o canal G em um editor
- A saída é um PNG de 8 bits por canal no tamanho da origem; imagens muito grandes são reduzidas para 768 px de lado no cálculo para manter a prévia fluida
- O processamento é 100% local: a imagem nunca sai do navegador e nenhum dado é enviado a servidores
Dicas para tirar o melhor proveito
Comece com a força em 2,0 e ajuste a partir daí: é um ponto de equilíbrio em que quinas continuam nítidas sem saturar o canal. Se o relevo ficar granulado, reduza a força antes de culpar a imagem — o Sobel amplifica também o ruído de compressão. Nesse caso, aplique um leve desfoque no heightmap original em qualquer editor e gere de novo.
Para texturas de terreno, prefira imagens sem texto ou marca d'água: qualquer detalhe escuro vira acidente de relevo no mapa normal. Depois de baixar, confira o PNG: se parecer lavado, a força estava baixa demais; se aparecerem halos pretos e brancos em volta dos objetos, estava alta demais. Como tudo roda localmente, você pode testar várias forças em segundos, sem tempo de espera nem limite de arquivos.
Erros comuns a evitar
O erro mais comum é subir uma foto normal em vez de um heightmap. Em uma foto, o Sobel interpreta cabelos, textos e sombras como relevo, e o resultado fica com acidentes que não existem na superfície. Use imagens de terreno em cinza, mapas de deslocamento ou máscaras de ruído feitas para isso.
Outro erro é exigir força máxima logo de cara: com valores altos, quase toda a imagem satura e o mapa vira um bloco de vermelho e verde sem nuance. Também é frequente esquecer a inversão do canal verde ao exportar para DirectX, deixando a iluminação parecer invertida no motor. Por fim, evite gerar o mapa normal a partir de um arquivo já redimensionado várias vezes: cada compressão degrada o gradiente e o relevo perde nitidez.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Editor de filtros de imagem, Seletor de cor de imagem (conta-gotas), Pixelar imagem, Gerador de Imagem Placeholder (Largura × Altura em PNG).
Ferramentas relacionadas
🎛️Editor de filtros de imagem
Ajuste brilho, contraste, saturação e mais, com prévia em tempo real.
Abrir ferramenta →🎨Seletor de cor de imagem (conta-gotas)
Clique em uma imagem para ler a cor em HEX, RGB e HSL e extraia a paleta.
Abrir ferramenta →🔲Pixelar imagem
Aplique efeito de mosaico na imagem inteira ou em uma região para ocultar dados.
Abrir ferramenta →🖼️Gerador de Imagem Placeholder (Largura × Altura em PNG)
Imagem de encher buraco com as medidas exatas, texto centralizado e baixável.
Abrir ferramenta →Perguntas frequentes
O que é um mapa normal?
É uma imagem que guarda a direção da superfície de cada pixel em vez de cor. O motor de 3D lê os canais vermelho, verde e azul como inclinação e calcula a luz, criando relevo sem aumentar a quantidade de polígonos.
O que é um heightmap?
Uma imagem em que a luminosidade representa altura: branco é o ponto mais alto e preto o mais baixo. É o formato de entrada deste gerador, muito usado em terrenos de jogos e em texturas de deslocamento.
A força do relevo muda o quê no resultado?
Ela multiplica o gradiente medido pelo Sobel. Valores baixos geram relevo quase imperceptível; valores altos exageram bordas e quinas até a saturação. O intervalo de 0,1 a 8 cobre desde superfícies lisas até texturas muito esculpidas.
Por que a imagem de saída fica azulada?
Porque em uma superfície plana a normal aponta para fora e vira RGB(128, 128, 255), o azul #8080ff padrão de canais normais. O vermelho e o verde só se deslocam quando existe inclinação.
Minha imagem é enviada para algum servidor?
Não. A leitura do arquivo, o cálculo do Sobel e a geração do PNG acontecem inteiramente no navegador. A imagem não é enviada a servidores nem fica salva em lugar algum.
Serve para iluminação em jogos e renders?
Sim, para texturas e terrenos. O formato gerado segue o espaço tangent OpenGL, usado por engines 2D e 3D; para DirectX, basta inverter o canal verde em um editor antes de importar.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.