# Analisador de imagem VP8 Analisa imagens WebP/VP8 com Sharp, gera um displacement map em escala de cinza e renderiza relevo 3D com Three.js > Página canônica: https://elysiatools.com/pt/tools/vp8-image-analyzer - **Categoria:** Design - **Palavras-chave:** vp8, webp, imagem, sharp, three.js, displacement map, 3d ## Visão geral Envie uma imagem WebP ou raster. Sharp cria o mapa de altura e Three.js aplica como displacementMap em PlaneGeometry. ## Entradas - **Arquivo de imagem** (file): Upload a WebP/VP8 image - **Escala de deslocamento** (range) - **Segmentos do plano** (range) - **Tamanho maximo da textura** (select) - **Rotacao automatica** (checkbox) - **Sobreposicao wireframe** (checkbox) ## Quando usar - Quando precisar inspecionar a profundidade e o relevo de texturas WebP ou VP8 para projetos de modelagem 3D. - Para validar mapas de altura (height maps) gerados a partir de imagens raster antes de aplicá-los em motores de jogos. - Quando desejar criar apresentações visuais interativas de superfícies baseadas na luminosidade de uma imagem 2D. ## Como funciona - Faça o upload de uma imagem nos formatos suportados (WebP, JPEG, PNG ou AVIF). - O backend utiliza a biblioteca Sharp para processar a imagem e convertê-la em um mapa de deslocamento em escala de cinza. - Configure parâmetros visuais como escala de deslocamento, densidade de segmentos da malha e tamanho máximo da textura. - O frontend renderiza a imagem em um ambiente 3D interativo usando Three.js, aplicando o mapa de altura a uma geometria plana. ## Casos de uso - Análise de texturas PBR (Physically Based Rendering) para verificar o comportamento de mapas de deslocamento. - Visualização de dados topográficos ou mapas de elevação exportados como imagens raster. - Criação de efeitos artísticos de extrusão 3D a partir de logotipos ou ilustrações 2D. ## Perguntas frequentes ### Quais formatos de imagem são suportados? A ferramenta suporta imagens nos formatos WebP (incluindo VP8), JPEG, PNG e AVIF, com tamanho máximo de 20 MB. ### O que é a escala de deslocamento (displacement scale)? É um multiplicador que define a intensidade do relevo 3D. Valores maiores criam picos mais altos e vales mais profundos na malha. ### Para que serve a opção de segmentos do plano? Ela define a resolução da malha 3D. Mais segmentos (até 320) resultam em um relevo mais detalhado, mas exigem mais processamento gráfico. ### Posso ver a estrutura da malha 3D? Sim, basta ativar a opção 'Sobreposição wireframe' para visualizar as linhas que compõem a geometria do plano. ### Como o mapa de altura é calculado? A ferramenta converte a imagem original para escala de cinza, onde pixels mais claros representam áreas mais altas e pixels escuros representam áreas mais baixas no modelo 3D. ## Ferramentas relacionadas - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Construtor de art direction responsiva Picture / srcset](https://elysiatools.com/pt/tools/responsive-picture-srcset-art-direction-builder): Gera marcação completa com recortes de art direction: elementos por breakpoint, candidatas 1x/2x ou descritores de largura por modelo {w}, camadas AVIF/WebP opcionais, tratamento de sizes, width/height anti-CLS e sabores HTML e JSX com notas de lint baseadas na especificação. - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Prévia de zona segura para redes sociais](https://elysiatools.com/pt/tools/social-media-caption-crop-preview): Carregue uma imagem e pré-visualize como ela aparece no Instagram Feed/Story/Reels, TikTok, YouTube, X e LinkedIn — com overlays de zona segura mostrando exatamente quais pixels são cortados ou cobertos pela UI antes de publicar. - [Compositor de grade de templates para redes sociais](https://elysiatools.com/pt/tools/social-media-template-resize-grid): Envie uma imagem mestra e receba o kit completo: Instagram (1:1 / 4:5 / 3:4 para o grid / Story / Reel), X (cabeçalho 1500×500 / feed), LinkedIn (banner pessoal / capa de empresa / imagem de post), YouTube (miniatura / banner do canal) e link do Facebook. Cada corte é pré-visualizado com sua máscara de zona segura verificada 2025-2026 (margens de Story, círculo de avatar do X, zona de avatar do LinkedIn, badge de duração do YouTube) e tudo sai em ZIP. - [Extraidor de Metadados de Imagem](https://elysiatools.com/pt/tools/image-metadata): Extrai metadados completos de imagens, incluindo EXIF, IPTC, XMP e informações técnicas - [Marca d’água discreta adaptativa de 12 pontos](https://elysiatools.com/pt/tools/adaptive-12-point-hidden-watermark): Adiciona uma marca d’água textual sutil a uma imagem ou a cada imagem compatível de um ZIP, em todas, algumas aleatórias ou posições escolhidas do perímetro, com contraste claro/escuro automático conforme o fundo local. - [Marca d'Água de Imagens em Lote](https://elysiatools.com/pt/tools/batch-watermark): Adicionar marcas d'água a múltiplas imagens com controle de posição ## Exemplos - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato