ปัญหา: ลูกค้าอยากเห็นผลลัพธ์บนรถของตัวเอง
ร้านหุ้มฟิล์มสีรถ ร้านติดฟิล์มกรองแสง หรือผู้ติดตั้งฟิล์มปกป้องสีรถ ขายสิ่งที่ลูกค้ามองไม่เห็นจนกว่างานจะเสร็จ ผลงานในพอร์ตโฟลิโอเป็นรถของคนอื่น ตัวอย่างวัสดุจากผู้ผลิตก็แสดงวัสดุบนการ์ดแผ่นเรียบ สิ่งที่ช่วยปิดการขายได้คือ M4 ปี 2021 ของลูกค้าเองในสีเทาซาตินที่เขายังลังเลอยู่ และภาพแบบนั้นยังไม่มีอยู่จริง เพราะงานยังไม่ได้เกิดขึ้น
ช่องว่างแบบเดียวกันยังปรากฏในขั้นตอนถัดไป ช่างตัดฟิล์มต้องการเส้นขอบที่ชัดเจนของกันชนหน้าสำหรับรุ่นปีที่คลังแพตเทิร์นยังไม่ครอบคลุม ระบบปรับแต่งรถต้องการภาพหมุนรอบตัวรถในสีพื้นฐานที่นักออกแบบลงสีทับได้ ทั้งสามกรณีต้องการสิ่งเดียวกัน คือภาพสไตล์สตูดิโอของยี่ห้อ รุ่น และปีที่ระบุ ในสีที่เลือกเอง โดยไม่มีสิ่งใดอยู่ด้านหลัง
สามวิธีที่ร้านนำภาพเรนเดอร์ไปใช้
การผสานรวมสำหรับงานแรปรถ ฟิล์มกรองแสง และฟิล์มกันรอยที่ใช้ API อยู่ในปัจจุบันทำสามอย่าง บางครั้งทำทั้งสามอย่างพร้อมกัน:
- ฐานสีขาว แล้ววางวัสดุทับด้านบน เรนเดอร์รถปีรุ่นของลูกค้าด้วย
color=whiteเป็น PNG พื้นหลังโปร่งใส แล้วซ้อนฟิล์มห่อรถ ฟิล์มกรองแสง หรือลายพิมพ์ทับลงไปในเบราว์เซอร์ ช่องอัลฟาของ PNG คือเส้นขอบของตัวรถ - สีด้วยรหัส hex สำหรับการหุ้มฟิล์มสีเดียวหรือการพ่นสีใหม่ ไม่ต้องซ้อนภาพ:
color=686c70จะคืนภาพรถที่เป็นสีนั้นแล้ว โดยกระจกและล้อไม่เปลี่ยน นับเป็นภาพรถยนต์หนึ่งภาพ เช่นเดียวกับสีสำเร็จรูป - โมเดล 3D สำหรับแท่นหมุน
POST /api/v1/3dสร้างไฟล์ GLB, USDZ และ FBX พร้อมพื้นผิวของรถในสีที่เลือก ครั้งเดียวต่อรถหนึ่งรุ่นและหนึ่งสี โมเดลที่เผยแพร่แล้วจะมาพร้อมโค้ดฝังสองบรรทัดสำหรับหน้าใบเสนอราคา และไฟล์ USDZ ที่ลูกค้าเปิดดูแบบ AR บน iPhone ได้
ร้านหนึ่งรันงานแบบแบตช์ผ่านคอนเนกเตอร์ ChatGPT แทนการเขียนโค้ด ซึ่งเป็นรูปแบบที่สี่ที่ควรมีหัวข้อของตัวเองด้านล่าง
ภาพเรนเดอร์ฐานสีขาวและวัสดุที่ซ้อนทับด้านบน
ฟิล์มห่อรถจะแทนที่สีรถ จึงควรเริ่มจากภาพที่มีสีน้อยที่สุดเท่าที่ทำได้ color=white ให้ตัวรถสีกลางที่สว่างที่สุดโดยยังคงแสงเงาแบบสตูดิโอไว้ครบ มุมมอง side แบบตรงแสดงด้านข้างรถได้มากที่สุดและมีการบิดเบือนจากทัศนมิติน้อยที่สุด ซึ่งเป็นสิ่งที่การพรีวิววัสดุต้องการ ขอไฟล์เป็น png (หรือ webp) เพื่อให้ช่องอัลฟายังคงอยู่ และเลือกขนาดใหญ่ที่สุดคือ 1024 เพื่อให้ซูมดูพรีวิวได้
# 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สำหรับวัสดุที่มีลวดลายพื้นผิว การซ้อนภาพใช้โค้ด canvas เพียงไม่กี่บรรทัด: วาดภาพเรนเดอร์หนึ่งครั้งเป็นมาสก์ ลงสีวัสดุเฉพาะส่วนที่เป็นตัวรถ แล้ววาดภาพเรนเดอร์อีกครั้งในโหมด multiply เพื่อให้แสงเงาและเงาสะท้อนกลับมาปรากฏผ่านวัสดุ
// 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.การจับคู่สีพ่นหรือสีฟิล์มห่อรถด้วยรหัส hex
ตั้งแต่สีรถกลายเป็นการเปลี่ยนสีจากภาพเรนเดอร์สีกลางหนึ่งภาพ color รองรับค่า hex หกหลักใดก็ได้ นอกเหนือจากชื่อสีที่กำหนดไว้ล่วงหน้า 15 ชื่อ: color=686c70 แบบไม่มีเครื่องหมายนำหน้าใน URL และ "color": "#686c70" ใน JSON ค้นหาแถบสีของผู้ผลิต หรือรหัสสีจากโรงงานของลูกค้า แล้วส่งค่านั้นเข้าไป การเปลี่ยนสีจะใช้กับสีตัวรถเท่านั้น กระจก ไฟ ขอบตกแต่ง และล้อจึงคงเดิม ซึ่งเป็นความแตกต่างระหว่างภาพตัวอย่างการหุ้มฟิล์มกับภาพถ่ายที่ปรับโทนสี ค่า hex แต่ละค่าคือรูปแบบที่แคชเพิ่มอีกหนึ่งแบบและนับเป็นภาพรถหนึ่งภาพของเดือน ดังนั้นชุดสีตัวเลือกยี่สิบสีสำหรับรถหนึ่งคันในหนึ่งมุมมองจึงเท่ากับภาพรถยี่สิบภาพ
โมเดล 3D สำหรับแท่นหมุนและ AR
เมื่อหน้าใบเสนอราคาต้องให้รถหมุนได้ ให้สั่งโมเดล POST /api/v1/3d รับรหัสรถ (vehicle id) และสี คิด 100 เครดิต แล้วสร้างไฟล์ GLB พร้อมเท็กซ์เจอร์ เวอร์ชันสำหรับเบราว์เซอร์ ไฟล์ USDZ และ FBX รวมถึงภาพขนาดย่อ โมเดลแรกของรถแต่ละคันใช้เวลา 10–20 minutes ส่วนสีถัดไปของรถคันเดียวกันจะเปลี่ยนเท็กซ์เจอร์บนเมชเดิมภายใน 1–2 minutes การสั่งรถและสีที่คุณมีอยู่แล้วไม่มีค่าใช้จ่าย (billing.already_owned: true) ร้านจึงใช้ฐานสีขาวเดียวกันเป็นตัวตั้งต้นของ configurator ได้กับทุกงาน
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}'{
"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 ทำให้โมเดลได้รับ URL ที่ไม่ต้องใช้คีย์บน CDN ของเรา พร้อมโค้ดสำหรับฝัง (embed) ตั้งแต่ก่อนที่โมเดลจะพร้อมใช้งาน โดยองค์ประกอบจะแสดงความคืบหน้าจนกว่าไฟล์จะพร้อม ตั้งค่า view เป็นมุมกล้องใดก็ได้จากเก้ามุมสำหรับภาพเปิด ตั้งค่า spin เพื่อให้หมุนรอบแบบแท่นหมุน ตั้งค่า backdrop เพื่อแสดงพื้นสตูดิโอ และตั้งค่า ar เพื่อส่งไฟล์ USDZ ให้ iPhone และไฟล์ GLB ให้ Android ผ่านตัวแสดงผล AR ในตัวของเบราว์เซอร์ ส่วนไฟล์ FBX มีไว้สำหรับนักออกแบบ: เปิดไฟล์ใน Blender หรือเครื่องมือออกแบบงานแรป วาดลวดลายลงบน UV แล้วลูกค้าจะได้เห็นดีไซน์ของตนเองบนรถของตนเอง
<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>การรันงานแบบกลุ่มจาก ChatGPT หรือ Claude
ไม่ใช่ทุกร้านจะมีนักพัฒนา และหนึ่งในการผสานระบบที่มีการใช้งานมากที่สุดบน API ก็คือผู้ประกอบการที่ขอภาพเรนเดอร์จากผู้ช่วย AI เพิ่ม https://carimage.dev/api/mcp เป็นตัวเชื่อมต่อ (ChatGPT และ Claude ลงชื่อเข้าใช้ผ่าน OAuth โดยผู้ใช้เป็นผู้อนุมัติขอบเขตสิทธิ์บนหน้าจอ) แล้วผู้ช่วยจะได้รับเครื่องมือชุดเดียวกับที่โปรแกรมได้รับ: resolve_vehicle เพื่อแปลง "2014 Audi S3 cabriolet, grey, side" ให้เป็นพารามิเตอร์ที่แม่นยำ, get_car_image สำหรับภาพเรนเดอร์หนึ่งภาพ, create_car_image_urls สำหรับ signed URL สูงสุดห้าสิบรายการในการเรียกครั้งเดียว และ create_3d_model สำหรับมุมมองหมุนรอบตัวรถ
สองสิ่งที่ช่วยให้การสั่งงานเป็นชุดผ่านผู้ช่วย AI เป็นไปอย่างราบรื่น:
- ส่ง
idempotency_keyหนึ่งค่าต่อหนึ่งชุดคำขอ ผู้ช่วย AI มักลองส่งซ้ำ เมื่อมีคีย์ การเรียกcreate_car_image_urlsซ้ำจะได้ผลลัพธ์แรกกลับมา (idempotent_replayed: true) และไม่มีการเรียกเก็บเงิน - คาดการณ์งบการเรนเดอร์ด้วย ไม่ใช่แค่ขีดจำกัดอัตราการเรียกใช้ มุมมองรถที่ยังไม่เคยมีใครขอมาก่อนต้องได้รับการเตรียมก่อน และการเตรียมจะใช้ส่วนแบ่งความจุในการเตรียมรายวันของบัญชี (10% สำหรับ Pro) การรันรถใหม่หลายร้อยคันในสามมุมมองอาจใช้จนถึงขีดนี้ได้ จากนั้นเครื่องมือจะตอบกลับพร้อมเวลาที่ลองใหม่ได้และ
reset_atโดยไม่มีการเรียกเก็บเงิน และภาพที่แคชไว้ยังคงส่งได้ตามปกติ กระจายการรันออกไปในช่วงเย็นหนึ่งหรือสองวัน หรือเปลี่ยนไปใช้ Business เพื่อรับส่วนแบ่งที่มากขึ้น
วิธีตั้งค่าสำหรับแต่ละไคลเอนต์และรายการเครื่องมือทั้งหมดอยู่ในหน้า MCP
CLI, SDK และ MCP
# 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 ./modelsimport { 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และcreate_car_image_urlsอยู่ในชุดเครื่องมือหลัก ส่วนcreate_3d_model,get_3d_modelและpublish_3d_modelใช้ได้เมื่อระบุ?toolset=allเครื่องมือภาพทุกตัวรับvehicleและcolorแบบ hex - เอกสาร 3D ครอบคลุม webhook (POST ที่ลงนามหนึ่งครั้งเมื่อโมเดลเสร็จสมบูรณ์) ขนาดไฟล์ และแอตทริบิวต์การฝังทุกรายการ ส่วน สี ในหน้า Images อธิบายกฎเกี่ยวกับสีรถ
คำถามที่พบบ่อย
- สีที่กำหนดเองด้วยรหัส hex มีค่าใช้จ่ายสูงกว่าสีสำเร็จรูปหรือไม่
- ไม่ใช่ ทุกสีเป็นการเปลี่ยนสีจากมุมมองที่เตรียมไว้หนึ่งมุมของรถคันนั้น ดังนั้นสีสำเร็จรูป รหัสสีจากโรงงานที่คุณค้นหา และตัวอย่างสีจากผู้ผลิตฟิล์มหุ้มรถ ต่างก็นับเป็นภาพรถหนึ่งภาพ ค่า hex ที่ตรงกับตัวอย่างสีของสีสำเร็จรูปก็ถือเป็นสีสำเร็จรูปนั้น
- ภาพเรนเดอร์แม่นยำพอที่จะใช้ตัดฟิล์มได้หรือไม่
- ไม่ใช่ ภาพเรนเดอร์เป็นภาพสไตล์สตูดิโอของยี่ห้อ รุ่น และปี ไม่ใช่ข้อมูล CAD หรือภาพถ่ายจากผู้ผลิต (OEM) แค็ตตาล็อกไม่ได้แยกรุ่นย่อย และเส้นแบ่งแผงตัวถังอาจต่างกันระหว่างสองมุมมองของรถคันเดียวกัน ใช้ภาพเหล่านี้เพื่อแสดงรถให้ลูกค้าดูและเพื่อเสนอราคางาน ส่วนการตัดแพตเทิร์นให้ใช้เทมเพลตหรือตัวรถจริง
- ขอภาพรถที่ไม่มีสี หรือเฉพาะกระจกหน้าต่างได้หรือไม่
- สิ่งที่ใกล้เคียงกับภาพเปล่ามากที่สุดคือ color=white บน PNG พื้นหลังโปร่งใส และช่องอัลฟาของ PNG ก็คือโครงร่างของรถ API ไม่มีมาสก์แยกตามแผงตัวถังหรือกระจก สำหรับฟิล์มสีพื้นล้วน ให้ใช้ color=<hex> ซึ่งจะเปลี่ยนสีตัวรถโดยคงกระจก ขอบตกแต่ง และล้อไว้ตามเดิม
- ใบเสนอราคาติดฟิล์มกรองแสงหรือ PPF ควรใช้มุมมองใดบ้าง
- มุมมองตรง: side (หรือ side-right) สำหรับกระจกประตูและด้านข้างตัวรถ, front สำหรับแถบบังแดดกระจกหน้า ฝากระโปรง และกันชน, rear สำหรับกระจกหลัง มุมมองสามในสี่คือมุมที่ลูกค้าตอบสนองดีที่สุด ดังนั้นให้ใช้ front-3-4 เป็นภาพหลัก และใช้มุมมองตรงไว้ข้างรายการสินค้าแต่ละรายการ
- เราเป็นเจ้าของโมเดล 3D หรือไม่
- โมเดลนี้เป็นแบบได้รับสิทธิ์การใช้งานเช่นเดียวกับภาพเรนเดอร์ ชำระเงินครั้งเดียวต่อรถหนึ่งรุ่นและหนึ่งสีต่อบัญชี สั่งซ้ำได้ฟรี และคุณสามารถใช้ภายในผลิตภัณฑ์ของคุณและเก็บไว้บนเซิร์ฟเวอร์ของคุณได้ รวมถึงหลังจากแพ็กเกจสิ้นสุดลงแล้วด้วย สีเพิ่มเติมแต่ละสีของรถที่คุณมีอยู่แล้วจะใช้เมชเดิมโดยเปลี่ยนเท็กซ์เจอร์ และการเผยแพร่จะทำให้โมเดลได้รับ URL ที่ไม่ต้องใช้คีย์และโค้ดสำหรับฝังโดยไม่มีค่าใช้จ่าย