You look at a pair of shoes online. The store gives you a front view and a side view. You zoom in hoping to see the text

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

สิ่งนี้เกิดขึ้นหลายล้านครั้งต่อวัน ภาพ 2 มิติ (Flat images) บังคับให้ลูกค้าต้องใช้จินตนาการเพื่อสร้างภาพวัตถุจริงขึ้นมาในหัว ความยุ่งยากที่เกิดขึ้นนี้คืออุปสรรคที่ทำลายโอกาสในการตัดสินใจซื้อ

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

ไม่มีอะไรในตัวสินค้าที่เปลี่ยนไป มีเพียงประสบการณ์เท่านั้นที่เปลี่ยนไป

ทำไมต้องเป็นเบราว์เซอร์?

จนกระทั่งเมื่อไม่นานมานี้ การโต้ตอบแบบนี้จำเป็นต้องใช้แอปพลิเคชันเฉพาะทางหรือปลั๊กอินที่ผู้ใช้ส่วนใหญ่ปฏิเสธที่จะติดตั้ง แต่ Three.js ได้เปลี่ยนสิ่งนั้น มันคือ JavaScript library ที่ทำงานอยู่บน WebGL renderer ที่มีมาให้ในเบราว์เซอร์ และช่วยให้นักพัฒนาสามารถสร้างฉาก 3D โดยใช้โค้ดชุดเดียวกับที่ขับเคลื่อนส่วนอื่นๆ ของหน้าเว็บ ผู้ใช้ไม่ต้องดาวน์โหลดซอฟต์แวร์พิเศษ ไม่ต้องมีหน้าต่างแยก ไม่ต้องมีไฟล์ executable และไม่มีหน้าต่างขออนุญาตใดๆ canvas จะแสดงผลเหมือนกับองค์ประกอบ HTML อื่นๆ

เรื่องนี้สำคัญเพราะการเข้าถึงได้ง่าย (accessibility) คือตัวกำหนดการยอมรับใช้งาน หากลูกค้าสามารถดูผลิตภัณฑ์ 3D บนโทรศัพท์ระหว่างเดินทาง บนแล็ปท็อปเครื่องเก่า หรือบนคอมพิวเตอร์ของบริษัทที่ถูกจำกัดสิทธิ์โดยฝ่าย IT เทคโนโลยีนี้ก็จะเข้าถึงผู้คนได้จริงๆ Three.js เปลี่ยนเบราว์เซอร์ให้กลายเป็นช่องมองภาพที่เป็นสากล (universal viewport)

เมื่อไหร่ที่ 3D จะคุ้มค่ากับการลงทุน

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

การมีส่วนร่วมที่สูงขึ้น (Higher engagement) ฟังดูเหมือนเป็นตัวชี้วัดทางการตลาด แต่มันมีสาเหตุเชิงกลไก เมื่อผู้เข้าชมสามารถโต้ตอบกับฉากได้ ไม่ว่าจะเป็นการหมุน การซูม หรือการสั่งให้เกิดแอนิเมชัน พวกเขาจะกลายเป็นผู้สร้างเนื้อหาด้วยตัวเอง พวกเขาไม่ได้เป็นเพียงผู้รับการนำเสนอแบบตั้งรับอีกต่อไป แต่พวกเขากำลังสำรวจ สภาวะที่ตื่นตัวนี้ทำให้พวกเขาอยู่ในหน้าเว็บนานขึ้นเพราะพวกเขายังมีสิ่งที่อยากทำกับโมเดลนั้นไม่เสร็จ พวกเขาอยากเห็นด้านหลัง พวกเขาอยากเห็นด้านใน การโต้ตอบนี้สร้างวงจรแห่งความอยากรู้อยากเห็น (curiosity loops) ที่ภาพตารางแบบคงที่ (static grids) ไม่สามารถเลียนแบบได้

ความเข้าใจที่ดีขึ้น (Better understanding) เห็นได้ชัดเจนที่สุดในอีคอมเมิร์ซ โซฟาที่แสดงผลเพียงสองมิติบังคับให้ผู้ซื้อต้องอ่านขนาดจากแผ่นข้อมูลจำเพาะ (spec sheet) และจินตนาการความลึกจากเงา โมเดล 3D ช่วยให้พวกเขาสามารถหมุนดูรอบๆ ชิ้นงานและเห็นว่าที่วางแขนนั้นสอบเข้าอย่างไร พวกเขาสามารถวางมันไว้ในห้องโดยใช้ augmented reality ที่สร้างขึ้นบนฉาก Three.js เดียวกัน เพื่อตรวจสอบระยะห่างใต้หน้าต่างโดยไม่ต้องหยิบสายวัดออกมา เมื่อลูกค้าเห็นผลิตภัณฑ์จากทุกมุม พวกเขาจะตัดสินใจได้อย่างมั่นใจ

การเล่าเรื่อง (Storytelling) ไปไกลกว่าแค่เรื่องผลิตภัณฑ์ ผู้ผลิตสามารถแสดงให้เห็นว่าเครื่องยนต์ทำงานผ่านวัฏจักรการเผาไหม้อย่างไรโดยไม่ต้องส่งเครื่องยนต์จริงไปสาธิต สถาปนิกสามารถพาลูกค้าเดินชมผังพื้นก่อนที่จะมีการเทฐานราก การเคลื่อนไหวช่วยอธิบายความสัมพันธ์ที่คำพูดและภาพนิ่งพยายามจะ