การบีบอัดไฟล์ GLB ทำอะไรกับไฟล์บ้าง?
การบีบอัดไฟล์ GLB คือการเข้ารหัสเท็กซ์เจอร์และเรขาคณิตใหม่ เพื่อให้โมเดลเดิมใช้จำนวนไบต์น้อยลง ส่วนที่ประหยัดได้ส่วนใหญ่มาจากเท็กซ์เจอร์: ในโมเดลตัวอย่างของ Khronos แปดตัวที่เราวัด ภาพเท็กซ์เจอร์กินพื้นที่ส่วนใหญ่ของทุกไฟล์ที่มีเท็กซ์เจอร์ เครื่องมือบีบอัด GLB นี้ย่อภาพเหล่านั้น เก็บกวาดเรขาคณิต และเขียน .glb ขึ้นใหม่ ทั้งหมดในเบราว์เซอร์ของคุณ
GLB ที่เล็กลงโหลดเร็วขึ้นบนหน้าสินค้า ผ่านขีดจำกัดการอัปโหลดของแพลตฟอร์ม 3D และมาร์เก็ตเพลสได้ และใช้หน่วยความจำบนโทรศัพท์น้อยลง โดยไม่ต้องเปลี่ยนรูปทรง วัสดุ หรือแอนิเมชันของโมเดลเลย
ไบต์ใน GLB ไปอยู่ที่ไหนบ้าง
GLB เก็บข้อมูลสามประเภท ได้แก่ เท็กซ์เจอร์ (ภาพที่ห่อหุ้มโมเดล) เรขาคณิต (ตำแหน่งเวอร์เท็กซ์ นอร์มอล และรายการสามเหลี่ยม) และแอนิเมชัน เท็กซ์เจอร์ถูกเก็บเป็นไฟล์ภาพที่สมบูรณ์ภายใน GLB ซึ่งมักเป็น PNG ขนาด 2048 × 2048 นี่คือเหตุผลที่โมเดลซึ่งมีสามเหลี่ยมเพียงไม่กี่ร้อยรูปยังหนักได้ถึง 8 MB เปิดไฟล์ของคุณในโปรแกรมดู GLB เพื่อดูว่าขนาดไฟล์มาจากส่วนใดก่อนบีบอัด
การเก็บกวาดแบบไม่สูญเสียคุณภาพ กับการบีบอัดแบบสูญเสียคุณภาพ
บางขั้นตอนไม่เปลี่ยนสิ่งที่มองเห็นเลย ได้แก่ การลบข้อมูลซ้ำ การตัดวัสดุและเท็กซ์เจอร์ที่ไม่มีอะไรใช้ทิ้ง และการรวมเวอร์เท็กซ์ที่เหมือนกันทุกประการ ส่วนที่ประหยัดได้มากกว่าเป็นแบบสูญเสียคุณภาพ ได้แก่ เท็กซ์เจอร์ที่เล็กลง เท็กซ์เจอร์ที่เข้ารหัสใหม่เป็น WebP หรือ JPEG และตำแหน่งเวอร์เท็กซ์ที่เก็บด้วยจำนวนบิตน้อยลง การสูญเสียคุณภาพไม่ได้แปลว่าจะดูแย่ลงจนสังเกตได้ แต่เป็นส่วนที่ควรตรวจดู และนั่นคือหน้าที่ของสวิตช์ “ก่อน / หลัง”
วิธีบีบอัดไฟล์ GLB ใน 3 ขั้นตอน
ลากไฟล์ .glb หรือ .gltf มาวาง
คลิก “เลือกไฟล์ 3D” หรือลากไฟล์ .glb มาวางบนพื้นที่แสดงโมเดล สำหรับ .gltf ให้เลือกพร้อมไฟล์ .bin และไฟล์เท็กซ์เจอร์ หรือลากทั้งโฟลเดอร์มาวาง ผลลัพธ์จะเป็น .glb ไฟล์เดียวเสมอ แผงด้านข้างจะแสดงรายการเท็กซ์เจอร์ทั้งหมด พร้อมขนาด รูปแบบ และจำนวนไบต์
เลือก Web, “เข้ากันได้” หรือ “กำหนดเอง”
Web ให้ไฟล์เล็กที่สุดสำหรับเบราว์เซอร์ “เข้ากันได้” ทำให้ไฟล์ไม่มีส่วนขยายใหม่ และ “กำหนดเอง” ให้คุณเลือกขนาด รูปแบบ และคุณภาพของเท็กซ์เจอร์ได้เอง ตารางเท็กซ์เจอร์จะแสดงว่าเท็กซ์เจอร์แต่ละภาพจะกลายเป็นแบบใด ก่อนที่คุณจะกดปุ่มใด ๆ
เปรียบเทียบ แล้วดาวน์โหลด
กด “บีบอัด GLB” เมื่อเสร็จแล้ว พื้นที่แสดงโมเดลจะสลับไปที่ “หลัง” โดยกล้องยังอยู่ตำแหน่งเดิม กด B หรือใช้สวิตช์ “ก่อน / หลัง” เพื่อเปรียบเทียบ แล้วกด “ดาวน์โหลด .glb ที่บีบอัดแล้ว”
เลือกไฟล์ .glb หรือ .gltf พร้อมไฟล์ประกอบ
เลือกพรีเซ็ตตามปลายทางของโมเดล
เปรียบเทียบ “ก่อน” กับ “หลัง” แล้วดาวน์โหลด
เท็กซ์เจอร์: ส่วนที่กินไบต์มากที่สุด
เท็กซ์เจอร์ทุกภาพใน GLB คือไฟล์ภาพเต็มไฟล์ และ GPU จะแตกออกเป็นพิกเซลดิบทันทีที่แสดงโมเดล: เท็กซ์เจอร์ขนาด 2048 × 2048 ใช้หน่วยความจำกราฟิกประมาณ 16 MB โดยยังไม่รวม mipmap ไม่ว่าไฟล์ PNG ของมันจะเล็กแค่ไหน ดังนั้นเมื่อคุณบีบอัด GLB การตั้งค่าเท็กซ์เจอร์จะกำหนดทั้งขนาดของไฟล์ที่ต้องดาวน์โหลด และความหนักในการแสดงผลโมเดล
ปรับขนาดเท็กซ์เจอร์: 4096, 2048, 1024 หรือ 512?
การลดความกว้างและความสูงของเท็กซ์เจอร์ลงครึ่งหนึ่ง จะเหลือพิกเซลเพียงหนึ่งในสี่ บนหน้าเว็บซึ่งโมเดลมักกินพื้นที่แค่บางส่วนของหน้าจอ 1024 px ก็เพียงพอสำหรับสินค้าส่วนใหญ่ 2048 px คุ้มที่จะเก็บไว้สำหรับภาพเด่นและภาพระยะใกล้ ส่วน 512 px เหมาะกับวัตถุประกอบฉากชิ้นเล็ก เครื่องมือบีบอัด GLB นี้ย่อเท็กซ์เจอร์ลงเท่านั้น ไม่ขยายขึ้น และคงสัดส่วนเดิมไว้ หากต้องการปรับขนาดเท็กซ์เจอร์ทีละภาพด้วยตัวเอง ใช้เครื่องมือปรับขนาดรูปภาพ
WebP กับ PNG กับ JPEG ภายใน GLB
PNG และ JPEG เป็นส่วนหนึ่งของ glTF เอง ทุกแอปที่เปิดไฟล์ GLB จึงอ่านได้ WebP มักให้ไฟล์เล็กที่สุด แต่ GLB ที่ใช้ WebP จะประกาศส่วนขยาย EXT_texture_webp และแอปที่เปิดไฟล์ต้องรองรับส่วนขยายนั้น JPEG เก็บความโปร่งใสไม่ได้ เครื่องมือนี้จึงเก็บเท็กซ์เจอร์ไว้เป็น PNG ทุกครั้งที่พิกเซลไม่ได้ทึบแสงทั้งหมด สำหรับข้อดีข้อเสียของแต่ละรูปแบบโดยทั่วไป ดูPNG เป็น WebP
นอร์มอลแมปต้องบีบอัดอย่างนุ่มนวลกว่า
นอร์มอลแมปเก็บทิศทางของพื้นผิวไว้ในสี และรอยเป็นบล็อกที่การบีบอัดแบบสูญเสียคุณภาพทิ้งไว้จะปรากฏเป็นแสงที่ผิดเพี้ยน ไม่ใช่สัญญาณรบกวนสี ทั้งสองพรีเซ็ตจึงกำหนดคุณภาพขั้นต่ำของนอร์มอลแมปไว้สูงกว่า (0.9) นอกจากนี้ WebP และ JPEG ยังเก็บสีด้วยความละเอียดที่ลดลง ซึ่งทำให้เสียความแม่นยำบางส่วนในนอร์มอลแมป และในเท็กซ์เจอร์ที่รวมความหยาบ ความเป็นโลหะ และการบดบังแสงไว้ในแชนเนลแยกกัน หากความแม่นยำนั้นสำคัญ ให้เลือก “กำหนดเอง” แล้วตั้งรูปแบบเท็กซ์เจอร์เป็น “คงเดิม”
เท็กซ์เจอร์ที่มีความโปร่งใส
ใบไม้ รูปลอก (decal) และกระจกมักอาศัยแชนเนลอัลฟา WebP เก็บแชนเนลนี้ไว้ได้ แต่ JPEG ทำไม่ได้ เท็กซ์เจอร์โปร่งใสที่จะถูกแปลงเป็น JPEG จึงถูกบันทึกเป็น PNG แทน ในการวัดของเรา Lantern และ ToyCar ต่างก็คงเท็กซ์เจอร์ไว้เป็น PNG หนึ่งหรือสองภาพด้วยเหตุผลนี้
การบีบอัดเรขาคณิต: meshopt, การควอนไทซ์ และ Draco
เรขาคณิตมักเป็นส่วนที่เล็กกว่าใน GLB แต่ในเมชที่หนาแน่น ไฟล์สแกน และตัวละครที่มีแอนิเมชัน เรขาคณิตอาจกินพื้นที่ส่วนใหญ่ของไฟล์ พรีเซ็ต Web บีบอัดเรขาคณิตด้วย meshopt ส่วนพรีเซ็ตอื่นคงการเข้ารหัสไว้ตามเดิมและทำเพียงเก็บกวาด
การบีบอัดแบบ meshopt ทำอะไร
meshopt เริ่มจากจัดเรียงเวอร์เท็กซ์และสามเหลี่ยมใหม่ ให้ข้อมูลที่อยู่ใกล้กันเรียงติดกัน จากนั้นเก็บตำแหน่ง นอร์มอล และพิกัดเท็กซ์เจอร์เป็นจำนวนเต็มขนาดเล็กแทนเลขทศนิยมแบบ 32 บิต (เรียกว่าการควอนไทซ์ ซึ่งประกาศเป็น KHR_mesh_quantization) และสุดท้ายแพ็กผลลัพธ์ด้วย EXT_meshopt_compression เบราว์เซอร์ถอดรหัสได้เร็วมาก และ three.js, model-viewer และ Babylon.js อ่านได้ทั้งหมด
การรวมเวอร์เท็กซ์และการลบข้อมูลซ้ำ
โปรแกรมส่งออกมักเขียนเวอร์เท็กซ์เดียวกันซ้ำหลายครั้ง ทำ accessor ซ้ำทั้งชุด หรือทิ้งวัสดุและเท็กซ์เจอร์ที่ไม่มีอะไรใช้ไว้ในไฟล์ การรวมเวอร์เท็กซ์ที่เหมือนกันและการตัดข้อมูลที่ไม่ได้ใช้ออกเป็นแบบไม่สูญเสียคุณภาพ และทำงานในทุกพรีเซ็ต ลำพังขั้นตอนนี้อย่างเดียวก็ลดขนาดโมเดล Fox ขนาดเล็กได้ 32%
ทำไมโมเดล Draco จึงคงเรขาคณิตเดิมไว้
Draco เป็นส่วนขยายการบีบอัดเรขาคณิตอีกแบบหนึ่ง ซึ่งมักบีบได้แน่นกว่า meshopt การเขียน Draco กลับลงไฟล์ต้องใช้ตัวเข้ารหัสของ Draco และเมื่อเราถอดรหัสแล้วเก็บเรขาคณิตโดยไม่ใช้ Draco เมชทดสอบใหญ่ขึ้น 4 ถึง 13 เท่า ดังนั้นเมื่อ GLB ใช้ Draco อยู่แล้ว เครื่องมือนี้จะเข้ารหัสใหม่เฉพาะเท็กซ์เจอร์ และคงไบต์อื่นทั้งหมด รวมถึงเรขาคณิต Draco ไว้ตรงตามเดิมทุกประการ การ์ดผลลัพธ์จะแจ้งเมื่อเกิดกรณีนี้
ควรเลือกพรีเซ็ตไหน?
ก่อนบีบอัด GLB ลองคิดก่อนว่าโมเดลจะถูกนำไปใช้ที่ไหนต่อ เพราะพรีเซ็ตที่เหมาะขึ้นอยู่กับปลายทาง การตั้งค่าที่ให้ไฟล์เล็กที่สุดอาศัยส่วนขยาย glTF ที่ไม่ใช่ทุกแอปจะอ่านได้ ข้อความใต้พรีเซ็ตจะแสดงส่วนขยายที่การตั้งค่าปัจจุบันจะเพิ่มลงในไฟล์
สำหรับโปรแกรมดูบนเว็บ: three.js, model-viewer, Babylon.js
เลือก Web พรีเซ็ตนี้ย่อเท็กซ์เจอร์ให้ไม่เกิน 1024 px บันทึกเป็น WebP และบีบอัดเรขาคณิตด้วย meshopt โปรแกรมดูที่ทำงานในเบราว์เซอร์และเอนจินที่สร้างบน three.js หรือ Babylon.js อ่านส่วนขยายทั้งสามที่พรีเซ็ตนี้ใช้ได้ และได้ไฟล์เล็กที่สุดเท่าที่เครื่องมือนี้ทำได้: เล็กลง 48% ถึง 98.8% กับโมเดลตัวอย่างของ Khronos
สำหรับ Blender, Unity และโปรแกรมดูบนเดสก์ท็อป
เลือก เข้ากันได้ พรีเซ็ตนี้คงเท็กซ์เจอร์ไว้ไม่เกิน 2048 px เขียนเท็กซ์เจอร์ทึบแสงเป็น JPEG และเท็กซ์เจอร์โปร่งใสเป็น PNG โดยไม่เพิ่มส่วนขยายใด ๆ เลย เครื่องมือบนเดสก์ท็อปและตัวนำเข้าของเอนจินเกมรองรับ WebP และ meshopt ไม่เท่ากัน ไฟล์ที่ไม่มีส่วนขยายเหล่านี้จึงเป็นทางเลือกที่ปลอดภัย เมื่อคุณควบคุมซอฟต์แวร์ฝั่งปลายทางไม่ได้
เมื่อไรควรใช้ “กำหนดเอง”
ใช้ “กำหนดเอง” เมื่อต้องการคงเท็กซ์เจอร์ไว้ที่ขนาดเดิม คงรูปแบบเดิมไว้สำหรับแมปข้อมูลที่ต้องการความแม่นยำ เพิ่มหรือลดคุณภาพ หรือปิด meshopt ตารางเท็กซ์เจอร์จะอัปเดตทุกครั้งที่คุณเปลี่ยนการตั้งค่า คุณจึงเห็นผลที่จะเกิดขึ้นก่อนบีบอัด
ผลจริงกับโมเดลตัวอย่างของ Khronos
เพื่อให้เห็นว่าคาดหวังได้แค่ไหน เราใช้หน้านี้บีบอัดไฟล์ GLB จากคอลเลกชัน Khronos glTF Sample Assets ไฟล์ต้นฉบับแปดไฟล์ ใน Chrome บนคอมพิวเตอร์เดสก์ท็อป ด้วยพรีเซ็ต Web ไฟล์ทั้งแปดเล็กลงเฉลี่ย 86% และเล็กลง 96% ที่ค่ามัธยฐาน ที่ลดได้มากที่สุดคือ Avocado จาก 7.73 MB เหลือ 0.09 MB เพราะเท็กซ์เจอร์ PNG ขนาด 2048 × 2048 สามภาพกินพื้นที่เกือบทั้งไฟล์ แต่ละโมเดลใช้เวลาประมาณหนึ่งวินาที
พรีเซ็ต “เข้ากันได้” ลดได้น้อยกว่า เพราะคงเท็กซ์เจอร์ไว้ที่ 2048 px และไม่ใช้ WebP แต่ก็ยังลดขนาดโมเดลสี่ในแปดตัวได้ 83% ถึง 93% โมเดลที่ลดได้น้อยที่สุดคือโมเดลที่มีเรขาคณิตมากที่สุด (ToyCar มีสามเหลี่ยมประมาณ 109,000 รูป) หรือมีเท็กซ์เจอร์โปร่งใส ซึ่งยังคงเป็น PNG
ผลการวัด: ต้นฉบับ เทียบกับ Web และ “เข้ากันได้”
| โมเดล | ต้นฉบับ | พรีเซ็ต Web | พรีเซ็ต “เข้ากันได้” |
|---|---|---|---|
| Avocado | 7.73 MB | 0.09 MB (−98.8%) | 0.57 MB (−92.6%) |
| WaterBottle | 8.55 MB | 0.12 MB (−98.6%) | 0.88 MB (−89.7%) |
| BoomBox | 10.12 MB | 0.22 MB (−97.8%) | 1.12 MB (−89.0%) |
| Corset | 12.87 MB | 0.51 MB (−96.0%) | 2.15 MB (−83.3%) |
| Lantern | 9.12 MB | 0.36 MB (−96.0%) | 5.49 MB (−39.8%) |
| SheenChair | 3.93 MB | 0.97 MB (−75.3%) | 1.72 MB (−56.3%) |
| ToyCar | 5.17 MB | 1.30 MB (−74.9%) | 3.92 MB (−24.2%) |
| Fox | 0.16 MB | 0.08 MB (−48.0%) | 0.11 MB (−31.9%) |
การบีบอัดจะทำให้โมเดลเสียหายไหม?
การบีบอัด GLB เปลี่ยนวิธีเก็บข้อมูล ไม่ได้เปลี่ยนตัวโมเดล เมช วัสดุ ชื่อโหนด แอนิเมชัน และฟีเจอร์อื่นของ glTF ยังอยู่ครบ สิ่งที่ควรตรวจคือส่วนขยายที่ไฟล์ใหม่ต้องใช้ และหน้าตาของเท็กซ์เจอร์เมื่อดูใกล้ ๆ
ส่วนขยายที่ไฟล์ผลลัพธ์อาจต้องใช้
พรีเซ็ต Web อาจเพิ่ม EXT_texture_webp, EXT_meshopt_compression และ KHR_mesh_quantization โดยระบุเป็นส่วนขยายที่จำเป็น (required) แอปที่อ่านส่วนขยายเหล่านี้ไม่ได้จึงแจ้งให้ทราบ แทนที่จะแสดงโมเดลที่เพี้ยน พรีเซ็ต “เข้ากันได้” ไม่เพิ่มส่วนขยายใดเลย GLB ที่ใช้ส่วนขยายอื่นอยู่แล้วจะคงส่วนขยายนั้นไว้ หากเครื่องมือนี้ไม่รู้จักส่วนขยายใด จะเปลี่ยนไปเข้ารหัสใหม่เฉพาะเท็กซ์เจอร์ จึงไม่มีการเขียนใหม่ในส่วนที่เครื่องมือไม่เข้าใจ
แอนิเมชัน สกิน และมอร์ฟทาร์เก็ต
แอนิเมชัน ตัวละครที่มีสกิน และมอร์ฟทาร์เก็ตผ่านการบีบอัดมาได้ครบ meshopt ยังบีบอัดคีย์เฟรมของแอนิเมชันด้วย และการควอนไทซ์คงความแม่นยำไว้เพียงพอสำหรับโมเดลขนาดปกติ สำหรับฉากที่ใหญ่มากหรือโมเดลงานวิศวกรรมที่วัดเป็นมิลลิเมตร ให้เปรียบเทียบผลลัพธ์โดยเปิดโครงลวด หรือปิด meshopt ใน “กำหนดเอง”
เท็กซ์เจอร์ KTX2 จะคงไว้ตามเดิม
เท็กซ์เจอร์ที่เก็บเป็น KTX2 อยู่แล้ว (KHR_texture_basisu) ถูกบีบอัดมาสำหรับ GPU และใช้หน่วยความจำน้อยอยู่แล้ว เครื่องมือนี้จึงคงไว้โดยไม่เปลี่ยนแปลง แทนที่จะแปลงกลับเป็นภาพธรรมดา
ทำไมไฟล์ GLB ยังใหญ่อยู่หลังบีบอัด
หากบีบอัด GLB แล้วลดขนาดได้น้อย แผงมักจะแสดงสาเหตุไว้ ไฟล์อาจถูกบีบอัดมาแล้ว: เท็กซ์เจอร์ที่เป็นภาพ WebP หรือ JPEG ขนาดเล็กอยู่แล้วแทบไม่เล็กลงอีก และเครื่องมือจะคงเท็กซ์เจอร์ต้นฉบับไว้ทุกครั้งที่การเข้ารหัสใหม่ไม่ได้ทำให้เล็กลง หากผลลัพธ์ไม่เล็กลงเลย ก็จะไม่มีไฟล์ให้ดาวน์โหลด ซึ่งเป็นความตั้งใจในการออกแบบ
ไฟล์สแกนที่หนาแน่นและโฟโตแกรมเมทรี
วัตถุที่สแกนมาและงานโฟโตแกรมเมทรีมักมีสามเหลี่ยมหลายแสนหรือหลายล้านรูป ในกรณีนี้ส่วนที่กินพื้นที่ไฟล์คือเรขาคณิต ไม่ใช่เท็กซ์เจอร์ meshopt ช่วยได้ แต่ทางแก้ที่แท้จริงคือลดจำนวนสามเหลี่ยม: ลดความละเอียดของเมชในโปรแกรมแก้ไข 3D เช่น modifier Decimate ของ Blender แล้วนำผลลัพธ์มาบีบอัดที่นี่
บีบอัด .gltf ที่มีไฟล์ภายนอก
.gltf เก็บเรขาคณิตและเท็กซ์เจอร์ไว้ในไฟล์แยกกัน เลือกทุกไฟล์หรือลากทั้งโฟลเดอร์มาวาง แล้วเครื่องมือจะแพ็กทุกอย่างเป็น .glb ที่บีบอัดแล้วไฟล์เดียว ส่วน .gltf ที่ใช้ Draco ต้องส่งออกเป็น .glb ก่อน เพราะข้อมูล Draco จะคงไว้ตามเดิมได้เฉพาะภายใน GLB เท่านั้น
คำสั่งที่ให้ผลคล้ายกันบนบรรทัดคำสั่ง
หน้านี้รันไลบรารีโอเพนซอร์ส glTF Transform ในเบราว์เซอร์ของคุณ หากต้องการบีบอัดไฟล์จำนวนมากในไปป์ไลน์การบิลด์ เครื่องมือบรรทัดคำสั่งของไลบรารีนี้ทำงานคล้ายกัน เช่น gltf-transform optimize input.glb output.glb --compress meshopt --texture-compress webp --texture-size 1024
โมเดลของคุณไม่ออกจากอุปกรณ์
เครื่องมือบีบอัด GLB ออนไลน์หลายแห่งอัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ และบางแห่งจำกัดจำนวนไฟล์ที่บีบอัดได้ต่อสัปดาห์ ที่นี่ งานทั้งหมดทำในเวิร์กเกอร์เบื้องหลังภายในแท็บเบราว์เซอร์ของคุณ: โมเดลถูกอ่านจากดิสก์ บีบอัดในหน่วยความจำ และบันทึกกลับเป็นไฟล์ดาวน์โหลดทันที เรื่องนี้สำคัญสำหรับสินค้าที่ยังไม่เปิดตัว งานของลูกค้า และทุกอย่างที่อยู่ภายใต้ข้อตกลงรักษาความลับ (NDA) ปิดแท็บแล้วไม่มีอะไรหลงเหลือ สำหรับเครื่องมืออื่นที่ทำงานแบบเดียวกัน ดูเครื่องมือฟรีทั้งหมดของเรา