Car Image API

Klienci · Warsztaty oklejania, przyciemniania szyb i folii PPF

Jak pokazać podgląd oklejenia, przyciemnienia szyb lub folii PPF na dokładnie takim samochodzie, jaki ma klient

Jak warsztaty oklejania, przyciemniania szyb i montażu folii ochronnych lakieru wykorzystują białe rendery bazowe, dokładne kolory lakieru w formacie hex i modele 3D, aby pokazać efekt na samochodzie klienta przed rozpoczęciem prac.

Problem: klient chce zobaczyć efekt na swoim aucie

Warsztat oklejania, przyciemniania szyb czy montażu folii ochronnej sprzedaje coś, czego klient nie zobaczy, dopóki praca nie zostanie wykonana. Portfolio pokazuje cudze samochody. Próbnik producenta pokazuje materiał na płaskiej karcie. Sprzedaż zamyka dopiero widok własnego M4 klienta z 2021 roku w dokładnie tym satynowym szarym kolorze, nad którym się waha — a takie zdjęcie nie istnieje, bo zlecenie jeszcze nie zostało wykonane.

Ta sama luka pojawia się dalej w łańcuchu. Specjalista od docinania folii potrzebuje czystego obrysu przedniego zderzaka dla rocznika, którego biblioteka wykrojów jeszcze nie obejmuje. Konfigurator potrzebuje obrotowej prezentacji samochodu w kolorze bazowym, który projektant może przemalować. Wszyscy trzej potrzebują tego samego: studyjnego zdjęcia konkretnej marki, modelu i rocznika, w wybranym lakierze, bez żadnego tła.

Trzy sposoby wykorzystania renderów przez warsztaty

Dzisiejsze integracje z API w branży oklejania, przyciemniania szyb i folii ochronnych robią trzy rzeczy, czasem wszystkie trzy jednocześnie:

  • Biała baza, a na niej materiał. Należy wyrenderować rocznik modelu klienta w color=white na przezroczystym PNG i nałożyć na niego w przeglądarce folię, przyciemnienie szyb lub nadruk. Kanał alfa PNG to obrys samochodu.
  • Lakier według kodu hex. W przypadku jednolitej folii lub przelakierowania można pominąć komponowanie: color=686c70 zwraca samochód od razu w tym lakierze, z nietkniętymi szybami i kołami, jako jeden obraz pojazdu — tak samo jak w przypadku gotowego koloru.
  • Model 3D do obrotowej prezentacji. POST /api/v1/3d tworzy teksturowany model pojazdu w formatach GLB, USDZ i FBX w wybranym kolorze, raz dla każdej kombinacji pojazdu i koloru. Opublikowany model zawiera dwuwierszowy kod osadzenia na stronę wyceny oraz plik USDZ, który klient może otworzyć w AR na iPhonie.

Jeden z warsztatów uruchamia swoje partie przez konektor ChatGPT zamiast przez kod — to czwarty wzorzec, który opisujemy w osobnej sekcji poniżej.

Biały render bazowy z materiałem na wierzchu

Oklejenie zastępuje lakier, więc najlepiej zacząć od jak najmniejszej ilości lakieru. color=white daje najjaśniejszą, neutralną karoserię z zachowanym studyjnym cieniowaniem; prosty widok side pokazuje największą część boku przy najmniejszym skrócie perspektywicznym, a tego właśnie potrzebuje podgląd materiału. Warto zamówić png (lub webp), aby zachować kanał alfa, oraz największy rozmiar, 1024, aby podgląd można było powiększać.

Bazowy render i ten sam samochód w lakierze 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

W przypadku materiału z teksturą kompozycja to kilka linii kodu canvas: render jest rysowany raz jako maska, materiał jest nakładany tylko tam, gdzie jest samochód, a render jest rysowany ponownie w trybie multiply, dzięki czemu jego cieniowanie i odbicia przebijają przez materiał.

Nakładanie materiału na bazę w przeglądarce
// 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.

Dopasowanie koloru lakieru lub folii według kodu hex

Odkąd lakiery są przebarwieniem jednego neutralnego renderu, color przyjmuje dowolny sześciocyfrowy kod hex obok nazw predefiniowanych kolorów (15): color=686c70 bezpośrednio w URL, "color": "#686c70" w JSON. Wystarczy znaleźć próbkę producenta lub fabryczny kod lakieru klienta i go przekazać. Przebarwienie dotyczy wyłącznie lakieru, więc szyby, światła, listwy i felgi pozostają bez zmian — i właśnie to odróżnia podgląd oklejenia od podbarwionego zdjęcia. Każdy hex to kolejny wariant w pamięci podręcznej i jeden obraz pojazdu w miesiącu, więc paleta dwudziestu propozycji dla jednego auta w jednym widoku to dwadzieścia obrazów pojazdów.

Model 3D do prezentacji obrotowej i AR

Gdy strona wyceny wymaga obracanego samochodu, warto zamówić model. POST /api/v1/3d przyjmuje identyfikator pojazdu i kolor, pobiera 100 kredytów i tworzy teksturowany plik GLB, jego wersję dla przeglądarki, USDZ i FBX oraz miniaturę. Pierwszy model pojazdu powstaje w 10–20 minutes; każdy kolejny kolor tego pojazdu to nowa tekstura na tej samej siatce w 1–2 minutes. Zamówienie pojazdu i koloru, które już Państwo posiadają, jest bezpłatne (billing.already_owned: true), więc warsztat może oprzeć swój konfigurator na tej samej białej bazie dla każdego zlecenia.

Zamówienie modelu w kolorze białym i natychmiastowa publikacja
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 (fragment)
{
  "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 zapewnia modelowi adresy URL w naszym CDN niewymagające klucza oraz kod do osadzenia, zanim model będzie gotowy; element pokazuje postęp, dopóki pliki nie zostaną dostarczone. Parametr view można ustawić na dowolne z dziewięciu ujęć kamery jako ujęcie początkowe, spin włącza obrót jak na obrotnicy, backdrop dodaje podłogę studia, a ar udostępnia plik USDZ na iPhone’ach i GLB na Androidzie przez wbudowany w przeglądarkę podgląd AR. Plik FBX jest dla projektanta: wystarczy otworzyć go w Blenderze lub narzędziu do projektowania oklein, nanieść grafikę na mapę UV, a klient zobaczy własny projekt na własnym aucie.

Kod osadzenia na stronie wyceny
<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>

Przetwarzanie wsadowe z poziomu ChatGPT lub Claude

Nie każdy warsztat ma programistę, a jedną z najczęściej używanych integracji z API jest operator proszący asystenta o rendery. Wystarczy dodać https://carimage.dev/api/mcp jako konektor (ChatGPT i Claude logują się przez OAuth; użytkownik zatwierdza uprawnienia na ekranie), a asystent otrzyma te same narzędzia co program: resolve_vehicle do zamiany „Audi S3 kabriolet 2014, szary, bok” na dokładne parametry, get_car_image do pojedynczego renderu, create_car_image_urls do maksymalnie pięćdziesięciu podpisanych URL-i w jednym wywołaniu oraz create_3d_model do obrotowego podglądu 3D.

O powodzeniu partii zleconej asystentowi decydują dwie rzeczy:

  • Klucz idempotency_key dla każdej partii. Asystenci ponawiają wywołania. Z kluczem ponowione wywołanie create_car_image_urls odtwarza pierwszy wynik (idempotent_replayed: true) i niczego nie nalicza.
  • Należy liczyć się z budżetem renderowania, nie tylko z limitem żądań. Widoki pojazdów, o które nikt wcześniej nie prosił, trzeba najpierw przygotować, a to zużywa dzienny udział konta w mocy przygotowawczej (10% w planie Pro). Seria kilkuset nowych samochodów w trzech widokach może go wyczerpać; narzędzie odpowiada wtedy czasem ponowienia i reset_at, nic nie jest naliczane, a obrazy z pamięci podręcznej są nadal serwowane. Warto rozłożyć serię na wieczór lub dwa albo przejść na Business, aby uzyskać większy udział.

Konfiguracja dla każdego klienta oraz pełna lista narzędzi znajdują się na stronie MCP.

CLI, SDK i 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
Z użyciem TypeScript SDK
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 i create_car_image_urls w podstawowym zestawie narzędzi, create_3d_model, get_3d_model i publish_3d_model z ?toolset=all; każde narzędzie do obrazów przyjmuje vehicle i color w formacie hex.
  • Dokumentacja 3D opisuje webhooki (jeden podpisany POST, gdy model jest gotowy), rozmiary plików i wszystkie atrybuty osadzania; sekcja Kolory na stronie Images opisuje zasady dotyczące lakieru.

Najczęściej zadawane pytania

Czy niestandardowy kolor hex kosztuje więcej niż predefiniowany?
Nie. Każdy kolor to przemalowanie jednego przygotowanego widoku danego pojazdu, więc gotowy kolor, wyszukany kod fabryczny i próbka producenta folii liczą się każdy jako jeden obraz pojazdu. Kolor hex równy próbce gotowego koloru jest po prostu tym gotowym kolorem.
Czy render jest na tyle dokładny, by na jego podstawie docinać folię?
Nie. Rendery to studyjne wizualizacje marki, modelu i rocznika, a nie dane CAD ani zdjęcia producenta: katalog nie rozróżnia wersji wyposażenia, a linie paneli mogą się różnić między dwoma widokami tego samego samochodu. Służą do pokazania klientowi jego samochodu i wyceny usługi; wykroje należy przygotowywać na podstawie szablonu lub samego pojazdu.
Czy można otrzymać samochód bez lakieru albo same szyby?
Najbliższym odpowiednikiem pustego szablonu jest color=white na przezroczystym PNG, a kanał alfa PNG to sylwetka samochodu. API nie udostępnia masek poszczególnych paneli ani szyb. Przy oklejeniu jednolitym kolorem warto wykorzystać color=<hex>: zmienia kolor lakieru, a szyby, listwy i koła pozostawia bez zmian.
Których widoków użyć w wycenie przyciemniania szyb lub folii PPF?
Widoki na wprost: side (lub side-right) dla szyb w drzwiach i boków, front dla pasa na przedniej szybie, maski i zderzaka, rear dla tylnej szyby. To na widoki trzy czwarte klienci reagują najlepiej, dlatego warto użyć front-3-4 jako głównego obrazu, a widoków na wprost obok pozycji wyceny.
Czy model 3D należy do nas?
Jest licencjonowany, tak jak rendery: płatny raz za pojazd i kolor na konto, ponowne zamówienie jest bezpłatne, a można go używać we własnym produkcie i przechowywać na własnych serwerach, także po zakończeniu planu. Każdy kolejny kolor pojazdu, który już Państwo posiadają, to nowa tekstura na tej samej siatce, a publikacja bezpłatnie zapewnia modelowi adresy URL bez klucza i kod do osadzenia.