เว็บไซต์ 3D: เมื่อไรถึงคุ้มค่า และทำอย่างไรให้โหลดเร็ว

คำตอบสั้น ๆ

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

คู่มือนี้อ้างอิงจากสองโปรเจกต์ของเราเอง ได้แก่ Janus Observatory ประสบการณ์บนเบราว์เซอร์ที่มีโลก 3D สิบโลก และ dardo.studio ซึ่งหน้าแรกเปิดด้วยฉาก 3D แบบเรียลไทม์

เมื่อไร 3D คุ้มค่า

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

เมื่อไรไม่คุ้ม

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

3D วิดีโอ หรือรูปภาพ

WebGL ทำงานบนเบราว์เซอร์สมัยใหม่ทุกตัว WebGPU ใหม่กว่าและเร็วกว่าสำหรับงานบางประเภท แต่การรองรับยังไม่เท่ากัน จึงควรวางแผนทางสำรองไว้ ทางเข้าแบบ 3D ของ dardo.studio ลองใช้ WebGPU ก่อนแล้วถอยกลับไปใช้ WebGL 2 ส่วนหน้าบริการ ผลงาน และติดต่อเป็น HTML ธรรมดาที่ไม่ต้องรอฉาก 3D

สิ่งที่เราเรียนรู้จากการสร้าง Janus Observatory

Janus Observatory เปลี่ยนสถานการณ์อนาคตของโลกสิบแบบที่ได้รับการตีพิมพ์ให้เป็นเรื่องราว 17 บท แอตลาส และหอสังเกตการณ์ พร้อมโลกแบบ low-poly ต้นฉบับสิบโลก และนักดาราศาสตร์ต่างดาวที่ขยับข้อต่อได้ โปรเจกต์นี้ทำงานบนแพ็กเกจฟรีของ Cloudflare Workers ซึ่งจำกัดขนาดของแอปพลิเคชัน รายงานการปล่อยเวอร์ชันของโปรเจกต์เมื่อวันที่ 27 กันยายน 2026 บันทึกสิ่งที่ต้องทำเพื่อให้ยังเร็วอยู่:

• บีบอัดโมเดลและเก็บทางสำรองไว้ โมเดล 3D 59 ตัวส่งเป็นไฟล์ gzip รวม 8.2 MB แทน 15.8 MB ดาวน์โหลดน้อยลง 47.9% เบราว์เซอร์ที่คลายการบีบอัดไม่ได้จะได้ไฟล์ต้นฉบับ
• ถอดรหัสนอก main thread แล้วหยุด การถอดรหัส Meshopt ทำงานบน worker เบื้องหลังตัวเดียว ซึ่งปิดตัวเองหลังว่างงานห้าวินาที
• ตั้งงบประมาณ JavaScript และบังคับใช้ JavaScript เริ่มต้นของหน้าแรกมีขนาด 197,059 ไบต์หลัง gzip เทียบกับงบ 256,000 ไบต์ และบิลด์จะตรวจสอบตัวเลขนี้
• ระวังคำขอที่ถาโถม ลูป prefetch แบบคาดการณ์ล่วงหน้าในสแต็ก Next.js และ OpenNext สร้างคำขอ 11,704 ครั้งในเทรซเบราว์เซอร์ที่ล้มเหลวครั้งหนึ่ง วิธีแก้คือปิด prefetch สำหรับลิงก์เหล่านั้น และตอนนี้การทดสอบกำหนดให้ต้องไม่มีคำขอแบบคาดการณ์ล่วงหน้าเลย
• กำหนดความละเอียดให้คงที่ แทนการไล่ตามเฟรมเรต แคนวาสเรนเดอร์ที่ device pixel ratio คงที่ 1 ถึง 1.5 รายงานยังถอนตัวเลขเฟรมเรตก่อนหน้าที่ขึ้นอยู่กับการลดความละเอียด เราจึงไม่ยกตัวเลขนั้นมา

สร้างให้ทำงานได้โดยไม่ต้องมี 3D

Janus มีกฎข้อหนึ่งที่กำหนดทุกอย่าง คือประสบการณ์หลักต้องทำงานได้โดยไม่มี WebGL และไม่มี AI บันทึกสถานการณ์ทั้งสิบโหลดได้แม้ปิด JavaScript ปุ่มควบคุมทำงานได้โดยไม่มี WebGL และการหมุนด้วยคีย์บอร์ด โฟกัสที่มองเห็นได้ และการลดการเคลื่อนไหว ถูกสร้างไปพร้อมกับแต่ละฟีเจอร์ หน้าการเข้าถึงของโปรเจกต์ระบุปุ่มควบคุม สิ่งที่ใช้แทนภาพสำหรับผู้ที่มองไม่เห็น และข้อจำกัดที่ทราบ เป้าหมายคือ WCAG 2.2 ระดับ AA ตรวจสอบด้วยการทดสอบอัตโนมัติบน Chromium, Firefox และ WebKit

กฎนี้ยังช่วยการค้นหาและผู้ช่วย AI ด้วย เพราะข้อความ ชื่อ และข้อมูลอยู่ใน HTML ไม่ใช่ใน canvas

เช็กลิสต์สำหรับหน้า 3D ที่เร็วและเข้าถึงได้

1. เขียนหน้าเว็บแบบไม่มี 3D ก่อน หากเวอร์ชัน HTML ยังไม่สมเหตุสมผล 3D ก็ช่วยไม่ได้
2. ตัดสินใจว่า 3D อธิบายอะไร และตัดทุกอย่างที่มีไว้แค่ให้ดูน่าประทับใจ
3. ตั้งงบประมาณ สำหรับ JavaScript ขนาดโมเดล และขนาดเท็กซ์เจอร์ก่อนเริ่มสร้างโมเดล และตรวจสอบในบิลด์
4. บีบอัดโมเดล ด้วยเครื่องมืออย่าง meshoptimizer ส่งในรูปแบบ glTF และเก็บไฟล์ที่ไม่บีบอัดไว้เป็นทางสำรองเมื่อคุณพึ่งฟีเจอร์ใหม่ของเบราว์เซอร์อย่าง DecompressionStream
5. โหลดฉากหลังเนื้อหา และโหลดเมื่อใกล้จะถูกมองเห็นเท่านั้น
6. จำกัด pixel ratio เพื่อไม่ให้จอความหนาแน่นสูงเรนเดอร์พิกเซลมากขึ้นสี่เท่า
7. รองรับ prefers-reduced-motion ให้ทุกการโต้ตอบใช้คีย์บอร์ดได้ และใส่ข้อความที่เทียบเท่ากันไว้ข้าง canvas ทุกตัว
8. ทดสอบบนโทรศัพท์ระดับกลางของจริง และบนเบราว์เซอร์มากกว่าหนึ่งเอนจิน จากนั้นติดตาม Core Web Vitals หลังเปิดตัว

ต้นทุนเท่าไร

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

Dardo สร้างเว็บไซต์ 3D อย่างไร

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