แค่ถ่ายรูปหูฟังไว้ใบเดียว ผ่านไปแป๊บเดียวรูปนั้นก็กลายเป็นวัตถุ 3 มิติที่ลากเมาส์หมุนดูได้รอบทิศบนหน้าเว็บ นั่นคือสิ่งที่สกิลชื่อ img2threejs ทำได้ โดยคำว่า "สกิล" ในบริบทนี้หมายถึงชุดคำสั่งและสคริปต์ที่นำไปติดตั้งเพิ่มให้ AI coding agent หรือผู้ช่วยเขียนโค้ดแบบสั่งงานด้วยภาษาคน ทำงานเฉพาะทางได้ ซึ่งงานหลักของสกิลนี้คือรับภาพตัวอย่างของวัตถุมาเพียงภาพเดียว แล้วปั้นมันกลับขึ้นมาใหม่ให้เป็นวัตถุ 3 มิติที่เขียนด้วยโค้ด Three.js ทั้งหมด โดย Three.js เป็นไลบรารีสำหรับแสดงผลภาพ 3 มิติบนเว็บเบราว์เซอร์

จุดเด่นที่ทำให้สกิลนี้แตกต่างชัดเจนอยู่ที่คำว่า "เป็นโค้ด" เพราะผลลัพธ์ที่ได้ไม่ได้มาจากการสแกนวัตถุด้วยภาพถ่ายหลายมุมอย่าง photogrammetry ไม่ได้ไปดึงเมชจากที่อื่นมา และไม่ได้โหลดโมเดลสำเร็จรูปมาแปะ แต่เป็นการสร้างวัตถุขึ้นใหม่ด้วยการประกอบรูปทรงพื้นฐาน เช่น กล่อง ทรงกลม ทรงกระบอก เข้ากับโค้ดคำนวณพื้นผิวและรูปทรงเรขาคณิตที่เขียนขึ้นเองทั้งหมด ทั้งนี้ img2threejs เป็นโปรเจกต์โอเพนซอร์สของ hoainho บน GitHub ภายใต้สัญญาอนุญาต Apache 2.0 ซึ่งทำงานผ่าน AI coding agent อย่าง Claude Code Codex หรือ OpenCode ไม่ใช่เว็บไซต์แบบกดปุ่มเดียวจบ

ทางเดิม: ปั้นเองหรือแบกไฟล์เมชหนักๆ

ปกติหากอยากมีวัตถุ 3 มิติสวยๆ ไว้แสดงบนหน้าเว็บหรือนำไปใช้ทำเกม ทางเลือกมักมีไม่มากนัก ทางหนึ่งคือการนั่งปั้นโมเดลขึ้นมาเองในโปรแกรม 3D ซึ่งเป็นทักษะเฉพาะทางที่กว่าจะได้แต่ละชิ้นต้องใช้เวลานานหลายชั่วโมง ส่วนอีกทางคือการเลือกซื้อหรือดาวน์โหลดไฟล์เมชสำเร็จรูปมาใช้งาน

ไฟล์เมช (mesh) คือไฟล์โมเดล 3 มิติที่บันทึกโครงสร้างและพื้นผิวของวัตถุไว้เป็นก้อนข้อมูลแบบจุดต่อจุด ข้อเสียสำคัญคือมันมักมีขนาดใหญ่หลายเมกะไบต์ เปิดดูโครงสร้างภายในไม่รู้เรื่อง การปรับแก้รายละเอียดเล็กๆ ทำได้ยาก และเมื่อนำขึ้นหน้าเว็บก็ต้องแบกไฟล์ก้อนนั้นไปให้ผู้ใช้ดาวน์โหลดด้วย แต่ img2threejs เลือกเดินคนละทางตั้งแต่แรก เพราะสิ่งที่สกิลนี้สร้างออกมาไม่ใช่ไฟล์โมเดล แต่เป็นชุดโค้ด

img2threejs เปลี่ยนรูปหนึ่งใบเป็นโค้ด Three.js

เมื่อเราป้อนรูปถ่ายวัตถุอ้างอิงเข้าไปหนึ่งใบ สิ่งที่ img2threejs สร้างออกมาคือฟังก์ชันโรงงาน (factory function) ภาษา TypeScript หนึ่งชุด โดยฟังก์ชันโรงงานหมายถึงโค้ดที่เมื่อถูกเรียกใช้งาน จะสร้างวัตถุชิ้นนั้นขึ้นมาใหม่ทุกครั้ง ซึ่งผลลัพธ์ที่ได้จะคืนค่าเป็น THREE.Group หรือกลุ่มวัตถุ 3 มิติที่รวมเอารูปทรงพื้นฐาน โค้ดคำนวณพื้นผิว และรูปทรงเรขาคณิตที่สร้างด้วยโค้ด มาประกอบเข้าด้วยกันเป็นวัตถุชิ้นเดียวที่มีหน้าตาเหมือนในรูปถ่าย

ลองดูตัวอย่างได้จากแกลเลอรีของตัวโปรเจกต์เอง ทุกโมเดลในนั้นไม่ใช่วิดีโอหรือภาพนิ่ง แต่เป็นโค้ดที่รันสดอยู่ในเบราว์เซอร์ ให้เราลากหมุนดูได้จริงโดยไม่มีไฟล์เมชและไม่มีอะไรต้องดาวน์โหลดเพิ่ม มีตั้งแต่โมเดลหูฟัง Sony WF-1000XM3 พร้อมเคส บ้านจิ๋วสไตล์โดราเอมอน ไปจนถึงหีบสมบัติ (โดยชุดโค้ดสำหรับแสดงแกลเลอรีนี้อยู่ในอีกคลังรีโปชื่อ img2threejs-showcase)

ปั้นทีละขั้น ให้สายตา AI ตรวจทุกด่าน

ความน่าเชื่อถือของผลลัพธ์ไม่ได้เกิดจากการเดารวดเดียว แต่มาจากการปั้นทีละขั้นแบบมีด่านตรวจ img2threejs มีลำดับการทำงานที่ตายตัว โดยเริ่มจากการร่างโครงหยาบๆ ก่อน แล้วค่อยขยับไปวางโครงสร้าง เก็บทรงให้คม ลงรายละเอียดวัสดุ ตกแต่งพื้นผิว จัดวางแสง กำหนดจุดเคลื่อนไหว แล้วปิดท้ายด้วยการปรับแต่งโค้ดให้เบาที่สุด

ที่สำคัญคือแต่ละขั้นตอนจะผ่านไปขั้นถัดไปได้ก็ต่อเมื่อระบบเรนเดอร์ภาพออกมาจริง แล้วนำไปวางคู่กับรูปต้นฉบับให้เป็นภาพเดียว แล้ว "สายตา" ของ AI agent มองภาพคู่นั้นพร้อมประเมินคะแนนจนถึงเกณฑ์ที่กำหนด รวมถึงรายละเอียดเด่นๆ ทุกจุดต้องผ่านเกณฑ์ประเมินของตัวเองด้วย หากคะแนนไม่ถึง มันจะย้อนกลับไปแก้ไขทันที ถ้าบันทึกรายละเอียดพลาดก็แก้ที่สเปก ถ้ารูปทรง วัสดุ หรือแสงยังไม่ตรงก็แก้ที่โค้ด แล้ววนกลับมาเรนเดอร์ภาพใหม่จนกว่าจะผ่านเกณฑ์

ยิ่งไปกว่านั้น ก่อนจะลงมือเขียนโค้ดสักบรรทัด สกิลนี้ยังไล่จดเอกลักษณ์เฉพาะตัวของวัตถุไว้เป็นบัญชีก่อน (ในโค้ดเรียกว่า detailInventory) ตั้งแต่ความเงางาม ขอบมน น็อตหรือหมุด ลายที่เซาะหรือเพนต์ไว้ เส้นขอบ ไปจนถึงคราบและรอยสึกหรอ ทุกรายการในบัญชีนี้ต้องผูกกับชิ้นส่วนหรือเนื้อวัสดุจริงในโมเดล และมีระบบคุมคุณภาพคอยบล็อกไว้ไม่ให้เริ่มสร้างจนกว่าจะลงบัญชีครบถ้วน เท่ากับตัดจบปัญหาตั้งแต่ต้นทางว่าจะไม่เปลืองแรงเรนเดอร์ของที่ยังเก็บรายละเอียดไม่ดีพอ

งานซ้ำให้สคริปต์ โทเคนไว้ให้ AI ตัดสิน

ตรงนี้คือจุดที่สาย vibe coding น่าจะถูกใจเป็นพิเศษ เพราะปกติวงจรเปลี่ยนภาพเป็น 3D (image-to-3D) ที่ใช้ AI มักเสียโทเคนไปกับงานกลไกซ้ำๆ อย่างการอ่านโมเดลทั้งก้อนใหม่ทุกรอบ การไล่ให้คะแนนพิกเซล การตรวจ JSON ด้วยมือ หรือการรันขั้นตอนเดิมซ้ำ (โทเคนคือหน่วยข้อความที่โมเดล AI ใช้ประมวลผลและคิดค่าใช้จ่าย)

img2threejs ถูกออกแบบให้ตรงกันข้าม งานกลไกที่ให้ผลแน่นอนอยู่แล้ว เช่น การตรวจไฟล์ การคุมด่านประเมิน การแพ็กภาพเทียบ และการจัดการสถานะของสายการผลิต จะยกให้สคริปต์ Python รับไปทำจนจบ ส่วนโทเคนของโมเดลจะกันไว้ให้เฉพาะงานที่ต้องอาศัยการคิดวิเคราะห์จริงๆ เพียงสองเรื่อง นั่นคือการมองภาพคู่เทียบเพื่อชี้ว่าผ่านหรือไม่ผ่าน และการลงมือเขียนโค้ด แนวคิดนี้สรุปสั้นๆ ได้ว่า "สคริปต์เป็นคนบังคับกฎ ส่วนโมเดลเป็นคนตัดสิน" และเพราะการสร้างโค้ดถูกล็อกให้ทำทีละด่าน โมเดลจึงไม่ต้องอ่านข้อมูลโมเดลใหม่ทั้งหมดทุกรอบ ทำให้แต่ละก้าวมีความเล็กและแคบลง

สิ่งที่ถูกใจสายลงมือทำอีกอย่างคือ สคริปต์พวกนี้ใช้ Python 3.10 ขึ้นไปแบบไลบรารีมาตรฐานล้วนๆ ไม่ต้อง pip install อะไรเพิ่ม และไม่ต้องพึ่งไลบรารีเสริมอย่าง PIL, numpy หรือ Playwright แม้แต่การอ่านเขียนไฟล์ PNG ก็จัดการด้วยเครื่องมือพื้นฐานที่ติดมากับ Python เอง แนวคิดการโยนงานซ้ำให้สคริปต์แล้วเก็บโทเคนไว้ให้ AI ตัดสินใจแบบนี้ ถือเป็นลายเซ็นเดียวกับสกิลสาย coding agent อีกหลายตัว เช่นเดียวกับที่เคยเล่าไว้ใน book-to-skill แปลงหนังสือทั้งเล่มเป็นสกิลให้ AI agent

ได้เป็นโค้ดที่ diff ได้ ไม่ใช่ไฟล์หนัก

พอจบกระบวนการหนึ่งรอบ สิ่งที่ตกถึงมือจะมีอยู่สามอย่าง อย่างแรกคือไฟล์สเปก JSON ของวัตถุ (ในโค้ดเรียกว่า ObjectSculptSpec) ที่จดโครงสร้างชิ้นส่วน วัสดุ จุดเชื่อมต่อ และประวัติการตรวจของทุกด่านไว้ครบถ้วน อย่างที่สองคือโค้ดโรงงาน TypeScript ที่เรียกใช้แล้วผลิตโมเดลออกมา และอย่างที่สามคือภาพเรนเดอร์พร้อมภาพเทียบต้นฉบับที่บันทึกความเหมือนไว้ทีละขั้น

ทั้งสามอย่างนี้อยู่ในรูปแบบข้อความ ไม่ใช่ไฟล์ไบนารีก้อนใหญ่ ข้อดีที่ตามมาคือเราสามารถเทียบความต่างทีละบรรทัด (diff) ได้ เก็บในระบบ version control ได้ อ่านเข้าใจรู้เรื่อง และนำไปแก้ไขต่อได้เหมือนโค้ดทั่วไป ผิดกับไฟล์เมชขนาดหลายเมกะไบต์ที่เปิดดูโครงสร้างข้างในแทบไม่ได้ความ

ยิ่งไปกว่านั้น โมเดลที่ได้ไม่ใช่ก้อนวัตถุนิ่งๆ เพราะโค้ดที่สร้างออกมามีลำดับชั้นของชิ้นส่วนพร้อมจุดหมุน จุดเชื่อมต่อ และกล่องตรวจจับการชน (ในโค้ดเปิดช่องทางไว้ที่ root.userData.sculptRuntime) เท่ากับว่ามันพร้อมให้นำไปใส่การขยับเคลื่อนไหวต่อได้ทันที โดยไม่ต้องมานั่งแยกชิ้นส่วนเองในภายหลัง

ต้องรู้ก่อนลอง: เก่งของผิวแข็ง

ก่อนจะตื่นเต้นเกินไป มีข้อเท็จจริงสำคัญที่ต้องพูดให้ตรง ข้อแรกคือ img2threejs เป็นสกิลที่ต้องสั่งงานผ่าน AI coding agent ไม่ใช่เว็บแอปที่ใครเปิดขึ้นมาก็กดปุ่มเดียวเสร็จ หากไม่เคยแตะเครื่องมือสาย coding agent มาก่อน จุดเริ่มต้นย่อมชันกว่าการเปิดเว็บอัปโหลดรูปทั่วไป

ข้อสอง มันเก่งกับวัตถุผิวแข็งเป็นหลัก พวกข้าวของเครื่องใช้ อุปกรณ์ หรือสิ่งของที่มีรูปทรงชัดเจน ส่วนพวกตัวละครหรือรูปคนนั้น ผลที่ได้จะออกมาเป็นงานสไตไลซ์ที่จับเค้าโครงไว้ ไม่ถึงขั้นเหมือนภาพถ่ายเป๊ะ ข้อสาม ภาพเพียงภาพเดียวย่อมเห็นวัตถุไม่ครบทุกด้าน ด้านที่หันหลังให้กล้องจึงถูกบังไว้ และไม่มีอะไรการันตีว่ารูปทรงเรขาคณิตจะเป๊ะทุกมุม ตัวสกิลจะเดาด้านที่ถูกบังนั้นโดยสะท้อนเอาจากฝั่งที่กล้องเห็น แทนที่จะเสแสร้งว่ามั่นใจ และมันจะบอกตรงๆ เมื่อผลลัพธ์ออกมาเป็นแบบประมาณ สไตไลซ์ หรือโพลีต่ำ โดยประโยคทำนองว่า "รูปนี้ทำได้ถึงแค่นี้" ถือเป็นคำตอบที่ยอมรับได้ ไม่ใช่ความล้มเหลว

เริ่มจาก clone ลงโฟลเดอร์สกิล

สำหรับคนที่มี Claude Code หรือ Codex เป็นเครื่องมือคู่ใจอยู่แล้ว และอยากได้ของใหม่มาเล่น วิธีเริ่มต้นไม่ยาก แค่ clone โปรเจกต์ลงในโฟลเดอร์สกิลของ agent ตัวนั้น (หากอยากทำความเข้าใจตัว coding agent ก่อน ลองอ่าน Claude Code คืออะไร ประกอบได้)

git clone https://github.com/hoainho/img2threejs.git ~/.claude/skills/img2threejs

จากนั้นใน Claude Code คุณแนบรูปวัตถุที่อยากได้เข้าไปหนึ่งใบ แล้วสั่งงานด้วยคำสั่งเดียว

/img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.

เท่านี้สายการปั้นก็จะเริ่มเดินไปทีละขั้นตามที่เล่าไปข้างต้น สคริปต์ทั้งหมดยังสามารถรันตรงจากบรรทัดคำสั่งได้เองด้วย หากอยากดูว่าแต่ละด่านทำงานอย่างไร เพราะเขียนด้วย Python ล้วนที่ไม่ต้องลงอะไรเพิ่ม

สิ่งที่เมื่อก่อนต้องอาศัยคนปั้น 3D นานหลายชั่วโมง ในวันนี้เริ่มต้นได้จากรูปถ่ายเพียงใบเดียวกับคำสั่งเดียว และเพราะปลายทางของมันคือโค้ด สิ่งที่ตกถึงมือจึงไม่ได้หยุดอยู่แค่โมเดลสวยๆ ที่หมุนดูได้ แต่เป็นของที่สามารถเปิดอ่าน แก้ไข และปั้นต่อเองได้เรื่อยๆ ไม่ใช่ไฟล์สำเร็จรูปที่ปั้นเสร็จแล้วก็แตะต้องอะไรไม่ได้อีก

ที่มา: โปรเจกต์ img2threejs บน GitHub