Car Image API

Clients · Ateliers de covering, teinte de vitres et PPF

Comment prévisualiser un covering, une teinte de vitres ou un film de protection (PPF) sur la voiture exacte du client

Comment les ateliers de covering, de vitres teintées et de protection de carrosserie utilisent des rendus de base blancs, des peintures au code hex exact et des modèles 3D pour montrer le résultat sur la voiture même du client avant de commencer les travaux.

Le problème : le client veut le voir sur sa propre voiture

Un atelier de covering, un spécialiste des vitres teintées ou un poseur de film de protection de carrosserie vend quelque chose que le client ne peut pas voir avant que le travail soit terminé. Le portfolio montre les voitures des autres. Le nuancier du fabricant montre le matériau sur une carte plate. Ce qui conclut la vente, c’est la propre M4 2021 du client, dans le gris satiné exact qui le fait hésiter, et aucune photo de cela n’existe, puisque le travail n’a pas encore été réalisé.

Le même manque apparaît plus loin dans la chaîne. Un découpeur de film veut un contour net du pare-chocs avant pour un millésime que la bibliothèque de gabarits ne couvre pas encore. Un configurateur veut une vue à 360° de la voiture dans une couleur de base que le designer pourra repeindre. Tous trois ont besoin de la même chose : une image studio d’une marque, d’un modèle et d’une année précis, dans la peinture de leur choix, sans rien derrière.

Trois façons dont les ateliers utilisent les rendus

Les intégrations de covering, de teinte de vitres et de film de protection qui utilisent l’API aujourd’hui font trois choses, parfois les trois à la fois :

  • Une base blanche, puis la matière par-dessus. Générez le rendu de l'année-modèle du client en color=white sur un PNG transparent et superposez le covering, la teinte de vitres ou le motif imprimé dans le navigateur. Le canal alpha du PNG correspond à la silhouette de la voiture.
  • Une peinture par code hexadécimal. Pour un covering uni ou une remise en peinture, inutile de superposer des calques : color=686c70 renvoie la voiture déjà dans cette peinture, vitrage et jantes intacts, pour le même crédit unique qu’un préréglage.
  • Un modèle 3D pour le plateau tournant. POST /api/v1/3d construit un GLB, un USDZ et un FBX texturés du véhicule dans la couleur choisie, une fois par véhicule et par couleur. Un modèle publié est fourni avec un code d’intégration de deux lignes pour la page de devis et un USDZ que le client peut ouvrir en réalité augmentée sur iPhone.

Un atelier traite ses lots via le connecteur ChatGPT plutôt que par du code, ce qui constitue un quatrième schéma, qui mérite sa propre section ci-dessous.

Un rendu de base blanc, et le matériau par-dessus

Un covering remplace la peinture : partez donc d’aussi peu de peinture que possible. color=white donne la carrosserie neutre la plus claire avec l’ombrage studio intact ; la vue de profil side montre le plus de flanc et le moins de déformation de perspective, ce dont un aperçu de matière a besoin. Demandez du png (ou du webp) pour conserver le canal alpha, et la plus grande taille, 1024, pour pouvoir zoomer sur l’aperçu.

Le rendu de base, et la même voiture dans une peinture 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

Pour une matière texturée, la composition tient en quelques lignes de canvas : le rendu est dessiné une première fois comme masque, la matière n'est peinte que là où se trouve la voiture, puis le rendu est redessiné en mode produit (multiply) pour que ses ombres et ses reflets réapparaissent à travers la matière.

Appliquer une matière sur la base, dans le navigateur
// 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.

Associer une peinture ou une couleur de covering par sa valeur hex

Depuis que les peintures sont devenues une recoloration d'un seul rendu neutre, color accepte n'importe quel code hexadécimal à six chiffres en plus des 15 noms de préréglages : color=686c70 tel quel dans une URL, "color": "#686c70" en JSON. Retrouvez l'échantillon du constructeur, ou le code peinture d'usine du client, et transmettez-le. La recoloration ne s'applique qu'à la peinture : vitres, feux, garnitures et jantes restent tels quels, et c'est précisément ce qui distingue un aperçu de covering d'une photo teintée. Chaque code hexa correspond à une variante supplémentaire mise en cache et à un crédit : une palette de vingt teintes candidates pour une voiture coûte donc vingt crédits, une seule fois.

Un modèle 3D pour le plateau tournant et la réalité augmentée

Quand la page de devis doit faire tourner la voiture, commandez un modèle. POST /api/v1/3d prend l’identifiant du véhicule et une couleur, facture 100 crédits et génère un GLB texturé, une version de celui-ci pour le navigateur, un USDZ et un FBX, ainsi qu’une miniature. Le premier modèle d’un véhicule prend 10–20 minutes ; chaque couleur supplémentaire de ce véhicule retexture le même maillage en 1–2 minutes. Commander un véhicule et une couleur que vous possédez déjà est gratuit (billing.already_owned: true) : un atelier peut donc fonder son configurateur sur la même base blanche pour chaque chantier.

Commandez-le en blanc et publiez-le aussitôt
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 (tronqué)
{
  "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 fournit au modèle des URL sans clé sur notre CDN et un code d'intégration avant même qu'il soit prêt ; l'élément affiche la progression jusqu'à l'arrivée des fichiers. Réglez view sur l'un des huit angles de vue pour le plan d'ouverture, spin pour un plateau tournant, backdrop pour le sol du studio, et ar pour proposer l'USDZ aux iPhone et le GLB à Android via la visionneuse AR intégrée au navigateur. Le FBX est destiné au designer : ouvrez-le dans Blender ou un outil de conception de covering, appliquez le visuel sur les UV, et le client voit son propre design sur sa propre voiture.

L'intégration sur la page de devis
<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>

Lancer un lot depuis ChatGPT ou Claude

Tous les ateliers n'ont pas de développeur, et l'une des intégrations les plus actives de l'API est celle d'un opérateur qui demande des rendus à un assistant. Ajoutez https://carimage.dev/api/mcp comme connecteur (ChatGPT et Claude se connectent via OAuth ; l'utilisateur approuve les autorisations à l'écran) et l'assistant dispose des mêmes outils qu'un programme : resolve_vehicle pour transformer « Audi S3 cabriolet 2014, grise, profil » en paramètres exacts, get_car_image pour un rendu, create_car_image_urls pour jusqu'à cinquante URL signées en un seul appel, create_3d_model pour la vue à 360°.

Deux choses font qu'un lot lancé depuis un assistant se passe bien :

  • Passez une idempotency_key par lot. Les assistants relancent leurs requêtes. Avec une clé, un appel create_car_image_urls relancé rejoue le premier résultat (idempotent_replayed: true) et rien n'est facturé.
  • Prévoyez le budget de rendu, pas seulement la limite de débit. Les rendus de variantes que personne n’a encore demandées puisent dans la part quotidienne de capacité de génération du compte (10 % sur Pro). Une série de quelques centaines de nouvelles voitures sous trois vues peut l’atteindre ; l’outil répond alors avec un délai avant nouvelle tentative et reset_at, rien n’est facturé et les images en cache continuent d’être servies. Étalez la série sur une soirée ou deux, ou passez à Business pour disposer d’une part plus importante.

La configuration pour chaque client et la liste complète des outils se trouvent sur la page MCP.

CLI, SDK et 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
Avec le 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 et create_car_image_urls dans l'ensemble d'outils de base, create_3d_model, get_3d_model et publish_3d_model avec ?toolset=all ; chaque outil d'image accepte vehicle et une color hexadécimale.
  • La documentation 3D couvre les webhooks (un POST signé quand un modèle est finalisé), la taille des fichiers et chaque attribut d'intégration ; la section Couleurs de la page Images couvre les règles de peinture.

Questions fréquentes

Une couleur hexadécimale personnalisée coûte-t-elle plus cher qu’une couleur prédéfinie ?
Non. Chaque couleur est une recoloration d’un même rendu neutre de ce véhicule et de cette vue : un préréglage, un code peinture d’usine que vous avez recherché et un échantillon d’un fabricant de films de covering coûtent tous un crédit. Un code hexadécimal identique à la teinte d’un préréglage correspond à ce préréglage.
Le rendu est-il assez précis pour y découper le film ?
Non. Les rendus sont des visuels studio de la marque, du modèle et de l’année, pas des données CAO ni des photos constructeur : le catalogue ne distingue pas les finitions, et les lignes de carrosserie peuvent différer entre deux vues de la même voiture. Utilisez-les pour montrer au client sa voiture et établir le devis ; découpez les films à partir d’un gabarit ou du véhicule lui-même.
Peut-on obtenir la voiture sans peinture, ou seulement les vitres ?
Ce qui se rapproche le plus d’une base vierge est color=white sur un PNG transparent, dont le canal alpha correspond à la silhouette de la voiture. L’API ne fournit pas de masques par panneau ni pour les vitres. Pour un covering de couleur unie, laissez color=<hex> faire le travail : il recolore la peinture et laisse les vitres, les garnitures et les jantes intactes.
Quelles vues utiliser pour un devis de vitres teintées ou de PPF ?
Les vues droites : side (ou side-right) pour les vitres de portière et les flancs, front pour le bandeau de pare-brise, le capot et le pare-chocs, rear pour la lunette arrière. Les vues de trois quarts sont celles auxquelles les clients réagissent : utilisez donc front-3-4 pour l'image principale et les vues droites à côté des lignes du devis.
Sommes-nous propriétaires du modèle 3D ?
Il est sous licence, comme les rendus : payé une fois par véhicule et par couleur pour chaque compte, recommandable gratuitement, et vous pouvez l’utiliser dans votre produit et le conserver sur vos serveurs, y compris après la fin de votre forfait. Chaque couleur supplémentaire d’un véhicule que vous possédez déjà retexture le même maillage, et la publication offre gratuitement au modèle des URL sans clé et un code d’intégration.