Car Image API

Clientes · Lojas de envelopamento, película e PPF

Como visualizar um envelopamento, película ou PPF no carro exato do cliente

Como lojas de envelopamento, insulfilm e proteção de pintura usam renderizações base brancas, cores de pintura hex exatas e modelos 3D para mostrar o serviço no próprio carro do cliente antes de o trabalho começar.

O problema: o cliente quer ver o resultado no próprio carro

Uma loja de envelopamento, de insulfilm ou um instalador de película de proteção de pintura vende algo que o cliente não consegue ver até o serviço ficar pronto. O portfólio mostra carros de outras pessoas. A amostra do fabricante mostra o material em um cartão plano. O que fecha a venda é o próprio M4 2021 do cliente exatamente no cinza acetinado que o deixa em dúvida, e não existe nenhuma foto disso, porque o serviço ainda não foi feito.

A mesma lacuna aparece mais adiante na cadeia. Quem corta película quer um contorno limpo do para-choque dianteiro de um ano-modelo que a biblioteca de moldes ainda não cobre. Um configurador quer uma vista giratória do carro em uma cor base sobre a qual o designer possa pintar. Os três precisam da mesma coisa: uma imagem de estúdio de uma marca, modelo e ano específicos, na pintura que escolherem, sem nada ao fundo.

Três maneiras de as oficinas usarem as renderizações

As integrações de envelopamento, insulfilm e película de proteção que usam a API hoje fazem três coisas, às vezes as três ao mesmo tempo:

  • Uma base branca, e o material por cima. Renderize o ano-modelo do cliente em color=white em um PNG transparente e sobreponha o envelopamento, o insulfilm ou o design impresso no navegador. O canal alfa do PNG é o contorno do carro.
  • Uma pintura por hex. Para um envelopamento de cor sólida ou uma repintura, dispense a composição: color=686c70 retorna o carro já nessa pintura, com vidros e rodas intactos, pelo mesmo único crédito de uma cor predefinida.
  • Um modelo 3D para a vista giratória. POST /api/v1/3d gera um GLB, USDZ e FBX texturizados do veículo na cor escolhida, uma vez por veículo e cor. Um modelo publicado vem com um embed de duas linhas para a página de orçamento e um USDZ que o cliente pode abrir em realidade aumentada no iPhone.

Uma loja executa seus lotes pelo conector do ChatGPT em vez de por código, o que é um quarto padrão que merece uma seção própria abaixo.

Uma renderização base branca e o material por cima

Um envelopamento substitui a pintura, então comece com o mínimo de pintura possível. color=white oferece a carroceria neutra mais clara, com o sombreamento de estúdio intacto; a vista side reta mostra a maior parte da lateral e o menor escorço, que é o que uma prévia de material precisa. Peça png (ou webp) para que o canal alfa seja preservado, e o maior tamanho, 1024, para que a prévia possa ser ampliada.

A renderização base e o mesmo carro em uma pintura hex
# the customer's exact model year, in white: the base every material goes on top of
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_0ta0ejj0qad2w&view=side&color=white&w=1024&format=png" \
  -o m4-side-white.png

# a solid-color wrap or a factory paint, by hex: the API recolors the paint and leaves glass, trim and wheels alone
curl --fail-with-body -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  "https://carimage.dev/api/v1/images/car?vehicle=veh_0ta0ejj0qad2w&view=side&color=686c70&w=1024&format=png" \
  -o m4-side-nardo.png

Para um material com textura, a composição leva poucas linhas de canvas: a renderização é desenhada uma vez como máscara, o material é pintado só onde está o carro, e a renderização é desenhada de novo em multiply para que o sombreamento e os reflexos dela voltem a aparecer através do material.

Aplicando um material sobre a base, no navegador
// A textured material (carbon, chrome, a printed design) goes on in the browser.
// The white render is the mask: paint the material only where the car is, then let
// the render's own shading through.
const car = await loadImage(whiteBaseUrl); // transparent PNG from the API
const ctx = canvas.getContext("2d");
canvas.width = car.width;
canvas.height = car.height;

ctx.drawImage(car, 0, 0);
ctx.globalCompositeOperation = "source-atop"; // keep the car's alpha
ctx.fillStyle = ctx.createPattern(materialSwatch, "repeat");
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "multiply"; // shading, reflections and panel lines come back
ctx.drawImage(car, 0, 0);
// The whole silhouette is covered, glass and wheels included: the API ships the car's
// alpha, not per-panel masks. Good enough for a quote; a solid color should use color=<hex> instead.

Como combinar uma cor de pintura ou de envelopamento pelo hex

Como as pinturas passaram a ser uma recoloração de uma única renderização neutra, color aceita qualquer hex de seis dígitos além dos 15 nomes predefinidos: color=686c70 sem prefixo em uma URL, "color": "#686c70" em JSON. Consulte a amostra da montadora, ou o código de pintura de fábrica do cliente, e passe-o. A recoloração é aplicada só à pintura, então vidros, faróis, acabamentos e rodas ficam como estão, que é exatamente a diferença entre uma prévia de envelopamento e uma foto tingida. Cada hex é mais uma variante em cache e um crédito, então uma paleta de vinte opções para um carro custa vinte créditos, uma única vez.

Um modelo 3D para a visualização 360° e a realidade aumentada

Quando a página de orçamento precisar que o carro gire, encomende um modelo. POST /api/v1/3d recebe o id do veículo e uma cor, cobra 100 créditos e gera um GLB texturizado, uma versão dele para navegador, um USDZ e um FBX, além de uma miniatura. O primeiro modelo de um veículo leva 10–20 minutes; cada cor adicional desse veículo retexturiza a mesma malha em 1–2 minutes. Encomendar um veículo e uma cor que você já possui é gratuito (billing.already_owned: true), então uma oficina pode basear o configurador na mesma base branca para todos os trabalhos.

Encomende em branco e publique imediatamente
curl -X POST https://carimage.dev/api/v1/3d \
  -H "Authorization: Bearer $CAR_IMAGE_API_KEY" \
  -H "Content-Type: application/json" \
  -H "Idempotency-Key: wrap-quote-4471" \
  -d '{"vehicle": "veh_0ta0ejj0qad2w", "color": "white", "publish": true}'
202 Accepted (resumido)
{
  "data": {
    "id": "8c1d6b8e-2b4a-4f6e-9a2e-1f3c5d7e9b01",
    "object": "3d_model",
    "status": "queued",
    "progress": 0,
    "vehicle": {
      "id": "veh_0ta0ejj0qad2w",
      "make": "bmw",
      "model": "m4",
      "year": 2021
    },
    "color": "white",
    "files": null,
    "public": {
      "id": "m3d_…",
      "url": "https://carimage.dev/api/v1/3d/public/m3d_…",
      "files": null,
      "embed": {
        "script": "https://carimage.dev/embed/3d.js",
        "html": "<script src=\"https://carimage.dev/embed/3d.js\" async></script>\n<car-3d model=\"m3d_…\"></car-3d>"
      }
    }
  },
  "billing": {
    "charged_on": "creation",
    "credits_charged": 100,
    "credits_remaining": 24900,
    "already_owned": false
  },
  "request_id": "req_01j9y…"
}

publish: true dá ao modelo URLs sem chave na nossa CDN e um embed antes mesmo de ele ficar pronto; o elemento mostra o progresso até os arquivos chegarem. Defina view como qualquer um dos oito ângulos de câmera para a tomada inicial, spin para uma plataforma giratória, backdrop para o piso de estúdio e ar para oferecer o USDZ a iPhones e o GLB a Android pelo próprio visualizador de AR do navegador. O FBX é para o designer: abra-o no Blender ou em uma ferramenta de design de envelopamento, pinte a arte sobre os UVs, e o cliente vê o próprio design no próprio carro.

O embed na página de orçamento
<script src="https://carimage.dev/embed/3d.js" async></script>
<car-3d model="m3d_…" view="front-3-4" spin backdrop="studio" ar alt="2021 BMW M4 in white"></car-3d>

Executando um lote a partir do ChatGPT ou do Claude

Nem toda oficina tem um desenvolvedor, e uma das integrações mais movimentadas da API é um operador pedindo renderizações a um assistente. Adicione https://carimage.dev/api/mcp como conector (ChatGPT e Claude fazem login via OAuth; a pessoa aprova os escopos na tela) e o assistente recebe as mesmas ferramentas que um programa teria: resolve_vehicle para transformar "Audi S3 cabriolet 2014, cinza, lateral" em parâmetros exatos, get_car_image para uma renderização, create_car_image_urls para até cinquenta URLs assinadas em uma única chamada e create_3d_model para a vista giratória 360°.

Duas coisas fazem um lote enviado por um assistente dar certo:

  • Passe uma idempotency_key por lote. Assistentes repetem tentativas. Com uma chave, uma nova tentativa de create_car_image_urls reproduz o primeiro resultado (idempotent_replayed: true) e não cobra nada.
  • Conte com o orçamento de renderização, não só com o limite de taxa. Renderizações de variantes que ninguém pediu antes consomem a cota diária da conta na capacidade de geração (10% no Pro). Uma leva de algumas centenas de carros novos em três vistas pode atingi-la; a ferramenta então responde com um tempo para nova tentativa e reset_at, nada é cobrado e as imagens em cache continuam sendo entregues. Distribua a leva ao longo de uma ou duas noites, ou mude para o Business para ter uma cota maior.

A configuração para cada cliente e a lista completa de ferramentas estão na página do MCP.

CLI, SDK e MCP

npx @meterapp/car-image
# the white base and a hex paint, straight to files
npx @meterapp/car-image get --vehicle veh_0ta0ejj0qad2w --view side --color white --width 1024 --out m4-side-white.png
npx @meterapp/car-image get --vehicle veh_0ta0ejj0qad2w --view side --color 686c70 --width 1024 --out m4-side-nardo.png

# the 3D model: published at once, polled until ready, every file downloaded
npx @meterapp/car-image 3d create --vehicle veh_0ta0ejj0qad2w --color white --publish --wait --out ./models
Com o SDK para TypeScript
import { CarImageClient } from "@meterapp/car-image-sdk";

const client = new CarImageClient({ apiKey: process.env.CAR_IMAGE_API_KEY });

// 100 credits the first time. Ordering the same vehicle in the same color again
// answers billing.already_owned: true and charges nothing.
const { data: model } = await client.create3dModel({ vehicle: "veh_0ta0ejj0qad2w" }, { color: "white", publish: true });
const ready = await client.wait3dModel(model.id, { onProgress: (m) => console.log(m.stage, m.progress) });

// FBX for the designer's tool of choice, USDZ for the customer's iPhone, glb_web for the page.
const fbx = await client.download3dModel(ready.id, "fbx");
const embedHtml = ready.public?.embed.html;
  • MCP: get_car_image e create_car_image_urls no conjunto de ferramentas principal; create_3d_model, get_3d_model e publish_3d_model com ?toolset=all. Toda ferramenta de imagem recebe vehicle e uma color em hexadecimal.
  • A documentação de 3D aborda webhooks (um POST assinado quando um modelo fica pronto), tamanhos de arquivo e todos os atributos de incorporação; a seção Cores, na página Imagens, aborda as regras de pintura.

Perguntas frequentes

Uma cor hex personalizada custa mais do que uma predefinida?
Não. Cada cor é uma recoloração de um único render neutro daquele veículo e vista, então um preset, um código de fábrica que você pesquisou e uma amostra de um fabricante de envelopamento custam, todos, um crédito. Um hex igual à amostra de um preset equivale a esse preset.
O render é preciso o bastante para servir de base ao corte de película?
Não. As renderizações são imagens de estúdio da marca, modelo e ano, não dados CAD nem fotografia da montadora: o catálogo não diferencia versões, e as linhas dos painéis podem variar entre duas vistas do mesmo carro. Use-as para mostrar ao cliente o carro dele e para orçar o serviço; corte os moldes a partir de um gabarito ou do próprio veículo.
Podemos obter o carro sem pintura, ou só os vidros?
O mais próximo de uma base em branco é color=white em um PNG transparente, e o alfa do PNG é a silhueta do carro. A API não fornece máscaras por painel nem de vidros. Para um envelopamento de cor sólida, deixe color=<hex> fazer o trabalho: ele recolore a pintura e mantém vidros, acabamentos e rodas como estão.
Quais vistas um orçamento de insulfilm ou PPF deve usar?
As vistas retas: side (ou side-right) para os vidros das portas e as laterais, front para a faixa do para-brisa, o capô e o para-choque, rear para o vidro traseiro. As vistas três-quartos são as que mais agradam aos clientes, então use front-3-4 como destaque e as vistas retas ao lado dos itens do orçamento.
O modelo 3D é nosso?
O modelo é licenciado, como as renderizações: pago uma vez por veículo e cor por conta, sem custo para pedir de novo, seu para usar dentro do seu produto e manter em seus servidores, inclusive depois que o plano terminar. Cada cor adicional de um veículo que você já tem retexturiza a mesma malha, e a publicação dá ao modelo URLs sem chave e um embed sem custo.