Car Image API

Clienti · Officine di wrapping, oscuramento vetri e PPF

Come visualizzare in anteprima un wrapping, l'oscuramento dei vetri o una PPF sull'auto esatta del cliente

Come le officine di wrapping, oscuramento vetri e pellicole protettive usano render con base bianca, vernici con codice hex esatto e modelli 3D per mostrare il lavoro sull'auto del cliente prima di iniziare.

Il problema: il cliente vuole vederlo sulla propria auto

Un'officina di car wrapping, un centro di oscuramento vetri o un installatore di pellicole protettive vendono qualcosa che il cliente non può vedere finché il lavoro non è finito. Il portfolio mostra le auto di altri. Il campione del produttore mostra il materiale su un cartoncino piatto. Ciò che chiude la vendita è proprio la M4 del 2021 del cliente nell'esatto grigio satinato su cui sta esitando, e di questa non esiste alcuna foto, perché il lavoro non è ancora stato fatto.

La stessa lacuna si presenta più avanti nella filiera. Chi taglia le pellicole vuole un contorno pulito del paraurti anteriore per un anno modello che la libreria di dime non copre ancora. Un configuratore vuole una vista a 360° dell'auto in un colore base su cui il designer possa dipingere. Tutti e tre hanno bisogno della stessa cosa: un'immagine da studio di una specifica marca, modello e anno, nella vernice che scelgono, senza niente dietro.

Tre modi in cui le officine usano i render

Oggi le integrazioni per wrapping, oscuramento vetri e pellicole protettive basate sull'API fanno tre cose, a volte tutte e tre insieme:

  • Una base bianca, poi il materiale sopra. Esegua il render dell'anno modello del cliente in color=white su un PNG trasparente e sovrapponga nel browser la pellicola, l'oscuramento dei vetri o il design stampato. Il canale alfa del PNG è il contorno dell'auto.
  • Una vernice da codice hex. Per una pellicola in tinta unita o una riverniciatura, salti il compositing: color=686c70 restituisce l'auto già in quella vernice, con vetri e cerchi intatti, come un'unica immagine di veicolo, esattamente come un preset.
  • Un modello 3D per la vista a 360°. POST /api/v1/3d genera un GLB, un USDZ e un FBX con texture del veicolo nel colore scelto, una sola volta per ogni veicolo e colore. Un modello pubblicato include un embed di due righe per la pagina del preventivo e un USDZ che il cliente può aprire in AR su un iPhone.

Un'officina esegue i propri batch tramite il connettore ChatGPT anziché tramite codice: un quarto schema che merita una sezione a sé più avanti.

Un render base bianco con il materiale applicato sopra

Un wrapping sostituisce la vernice, quindi conviene partire da meno vernice possibile. color=white offre la carrozzeria neutra più luminosa con l'ombreggiatura da studio intatta; la vista side perfettamente laterale mostra la maggior parte della fiancata e il minimo scorcio, ed è ciò che serve per un'anteprima del materiale. Richieda png (o webp) per conservare il canale alfa, e la dimensione massima, 1024, per poter ingrandire l'anteprima.

Il render base e la stessa auto con una vernice 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

Per un materiale con texture, la composizione richiede poche righe di canvas: il render viene disegnato una prima volta come maschera, il materiale viene dipinto solo dove c’è l’auto e il render viene disegnato di nuovo in modalità multiply, così ombreggiature e riflessi riaffiorano attraverso il materiale.

Applicare un materiale sulla base, nel browser
// 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.

Abbinare il colore di una vernice o di una pellicola tramite codice hex

Da quando le vernici sono diventate una ricolorazione di un unico render neutro, color accetta qualsiasi hex a sei cifre oltre ai nomi dei preset 15: color=686c70 senza prefisso in un URL, "color": "#686c70" in JSON. Cerchi il campione del costruttore, o il codice vernice di fabbrica del cliente, e lo passi. La ricolorazione viene applicata solo alla vernice, quindi vetri, luci, finiture e cerchi restano invariati: è esattamente la differenza tra l’anteprima di un wrap e una foto colorata. Ogni hex è una variante in cache in più e un’immagine di veicolo del mese, quindi una palette di venti candidati per un’auto in una vista equivale a venti immagini di veicoli.

Un modello 3D per la vista girevole e l’AR

Quando la pagina del preventivo deve far ruotare l'auto, ordini un modello. POST /api/v1/3d accetta l'id del veicolo e un colore, addebita 100 crediti e genera un GLB con texture, una sua versione per browser, un USDZ e un FBX, più una miniatura. Il primo modello di un veicolo richiede 10–20 minutes; ogni ulteriore colore dello stesso veicolo riapplica le texture alla stessa mesh in 1–2 minutes. Ordinare un veicolo e un colore già in Suo possesso è gratuito (billing.already_owned: true), quindi un'officina può basare il proprio configuratore sulla stessa base bianca per ogni lavoro.

Ordinarlo in bianco e pubblicarlo subito
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 (estratto)
{
  "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 fornisce al modello URL senza chiave sulla nostra CDN e un embed ancora prima che sia pronto; l’elemento mostra l’avanzamento finché i file non sono disponibili. Imposti view su una qualsiasi delle nove angolazioni per l’inquadratura iniziale, spin per una piattaforma rotante, backdrop per il pavimento dello studio e ar per offrire l’USDZ agli iPhone e il GLB ad Android tramite il visualizzatore AR integrato nel browser. L’FBX è per il designer: lo apre in Blender o in uno strumento di progettazione di wrapping, applica la grafica sulle UV e il cliente vede il proprio design sulla propria auto.

L'embed nella pagina del preventivo
<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>

Eseguire un batch da ChatGPT o Claude

Non tutte le attività hanno uno sviluppatore, e una delle integrazioni più attive sull’API è un operatore che chiede render a un assistente. Aggiunga https://carimage.dev/api/mcp come connettore (ChatGPT e Claude accedono tramite OAuth; la persona approva gli scope sullo schermo) e l’assistente ottiene gli stessi strumenti di un programma: resolve_vehicle per trasformare "2014 Audi S3 cabriolet, grey, side" in parametri esatti, get_car_image per un singolo render, create_car_image_urls per un massimo di cinquanta URL firmati in una sola chiamata, create_3d_model per la vista rotante a 360°.

Due accorgimenti fanno riuscire bene un batch avviato da un assistente:

  • Passi un idempotency_key per ogni batch. Gli assistenti ripetono le richieste. Con una chiave, un create_car_image_urls ripetuto restituisce il primo risultato (idempotent_replayed: true) e non addebita nulla.
  • Tenga conto del budget di rendering, non solo del limite di richieste. Le viste di veicoli che nessuno ha mai richiesto devono prima essere preparate, e la preparazione attinge alla quota giornaliera di capacità di preparazione dell’account (10% su Pro). Una serie di qualche centinaio di auto nuove in tre viste può esaurirla; lo strumento risponde allora con un tempo di nuovo tentativo e reset_at, non viene addebitato nulla e le immagini in cache continuano a essere servite. Distribuisca la serie su una o due serate, oppure passi a Business per una quota maggiore.

La configurazione per ciascun client e l'elenco completo degli strumenti sono nella pagina 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
Con l’SDK 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 nel set di strumenti principale, create_3d_model, get_3d_model e publish_3d_model con ?toolset=all; ogni strumento per le immagini accetta vehicle e un color esadecimale.
  • La documentazione 3D tratta i webhook (una POST firmata quando un modello è pronto), le dimensioni dei file e ogni attributo di embed; la sezione Colori della pagina Immagini tratta le regole sulle vernici.

Domande frequenti

Un colore esadecimale personalizzato costa più di uno predefinito?
No. Ogni colore è una ricolorazione di un'unica vista preparata di quel veicolo, quindi un colore predefinito, un codice colore di fabbrica che ha cercato e un campione di un produttore di pellicole wrap contano ciascuno come un'unica immagine di veicolo. Un hex identico al campione di un colore predefinito equivale a quel colore predefinito.
Il render è abbastanza preciso per tagliare la pellicola?
No. I render sono immagini da studio di marca, modello e anno, non dati CAD né fotografie OEM: il catalogo non distingue gli allestimenti e le linee dei pannelli possono differire tra due viste della stessa auto. Li usi per mostrare al cliente la sua auto e per preventivare il lavoro; ricavi le sagome di taglio da una dima o dal veicolo stesso.
Possiamo avere l'auto senza vernice, o solo i finestrini?
La cosa più vicina a una base neutra è color=white su un PNG trasparente, e il canale alfa del PNG corrisponde alla sagoma dell'auto. L'API non fornisce maschere per singolo pannello o per i vetri. Per un wrapping in tinta unita lasci fare a color=<hex>: ricolora la vernice e lascia invariati vetri, finiture e cerchi.
Quali viste usare per un preventivo di oscuramento vetri o PPF?
Le viste dritte: side (o side-right) per i vetri delle portiere e le fiancate, front per la fascia del parabrezza, il cofano e il paraurti, rear per il lunotto. Le viste di tre quarti sono quelle a cui i clienti reagiscono di più, quindi usi front-3-4 per l'immagine principale e le viste dritte accanto alle voci del preventivo.
Il modello 3D è di nostra proprietà?
È concesso in licenza, come i render: si paga una volta per veicolo e colore per account, si può riordinare gratuitamente e può usarlo all'interno del Suo prodotto e conservarlo sui Suoi server, anche dopo la fine del piano. Ogni ulteriore colore di un veicolo che possiede già riapplica le texture alla stessa mesh, e la pubblicazione fornisce al modello URL senza chiave e un embed senza costi aggiuntivi.