เว็บไซต์ควรใช้ 3 มิติเมื่อไร
ฉากเรียลไทม์คุ้มค่ากับต้นทุนเมื่อสิ่งที่ผู้เข้าชมทำส่งผลต่อสิ่งที่ได้เรียนรู้ เช่น หมุนสินค้าเพื่อดูว่าประกอบกันอย่างไร เดินสำรวจอาคารหรือภูมิประเทศ เปรียบเทียบสถานที่แบบเคียงข้างกัน หรือสำรวจระบบที่เข้าใจง่ายขึ้นเมื่อเห็นเป็นภาพในพื้นที่ หากมุมมองและลำดับคงที่ วิดีโอหรือชุดภาพเฟรมที่เรนเดอร์ไว้จะผลิตและทดสอบง่ายกว่า และยังให้อารมณ์แบบภาพยนตร์ได้
3 มิติมักเหมาะกับการโชว์สินค้า การเล่าเรื่องเชิงพื้นที่และสถาปัตยกรรม การสื่อสารด้านวิทยาศาสตร์และงานวิจัย และโลกของแบรนด์แบบอิมเมอร์ซีฟสำหรับการเปิดตัว หากโมชันและการเล่าเรื่องตามการเลื่อนหน้าจอก็เพียงพอโดยไม่ต้องมีฉากให้เดินสำรวจ ครีเอทีฟดีเวลลอปเมนต์จะเป็นทางเลือกที่เบากว่า ส่วนแผนที่และแดชบอร์ดที่สร้างจากข้อมูลจัดอยู่ในงานแสดงข้อมูลเป็นภาพ
โปรเจกต์เว็บไซต์ 3 มิติประกอบด้วยอะไรบ้าง
ข้อเสนอจะระบุว่างานส่งมอบใดอยู่ในขอบเขต ใครเป็นผู้สร้างหรือจัดหาแอสเซ็ต 3 มิติ และแต่ละรายการจะได้รับการตรวจรับอย่างไร
- บรีฟการเล่าเรื่องและการโต้ตอบ: ผู้เข้าชมสำรวจอะไร ตามลำดับใด และทำอะไรต่อ
- แผนแอสเซ็ต 3 มิติ ครอบคลุมโมเดลที่คุณจัดหาให้ แอสเซ็ตที่ซื้อลิขสิทธิ์ หรือการสร้างโมเดลใหม่ โดยเตรียมเป็นไฟล์ glTF แบบบีบอัด
- ต้นแบบบนเบราว์เซอร์ที่ควบคุมด้วยเมาส์ การสัมผัส และคีย์บอร์ด บนโทรศัพท์และเดสก์ท็อปที่ตกลงกันไว้
- เนื้อหา HTML ที่อ่านได้ และเส้นทางแบบลดการเคลื่อนไหวที่เล่าเรื่องเดียวกัน
- การตรวจรับด้านประสิทธิภาพ อุปกรณ์ และระบบสำรอง พร้อมส่งมอบไฟล์ต้นฉบับและใบอนุญาตของแอสเซ็ต
Janus Observatory: อินเทอร์เฟซ 3 มิติสำหรับอนาคตที่เป็นไปได้สิบแบบ
Janus Observatory เป็นโปรเจกต์ที่พัฒนาร่วมกับ Blue Marble Space ซึ่ง Dardo เปลี่ยนโครงสร้างงานวิจัยเชิงสมมติให้เป็นการเดินทางบนเบราว์เซอร์สไตล์ภาพยนตร์ อนาคตสิบแบบทำให้เกิดปัญหาการนำทางทันที รายการธรรมดาจะทำให้แนวคิดเชิงพื้นที่หายไป ส่วนลำดับ 3 มิติยาวเพียงช่วงเดียวก็ทำให้เปรียบเทียบได้ยาก ประสบการณ์จึงแบ่งเป็นชั้น ๆ ช่วงเปิดแบบภาพยนตร์สร้างบรรยากาศ แอตลาสแสดงภาพรวมทั้งชุด และหอสังเกตการณ์รองรับการอ่านอย่างใกล้ชิด พร้อมเส้นทางย้อนกลับที่ไม่ต้องดูช่วงเปิดซ้ำ
ชั้น 3 มิติสร้างความรู้สึกถึงขนาดและความต่างระหว่างโลกต่าง ๆ ขณะที่ป้ายกำกับ สถานะการนำทาง และคำอธิบายที่เป็นข้อความทำหน้าที่ส่งข้อเท็จจริงนอกฉากที่เรนเดอร์ เกณฑ์การตรวจรับคือผู้เข้าชมสามารถบอกได้ว่าตอนนี้อยู่โลกไหน กลับไปที่แอตลาสได้ และไปต่อได้หลังระบบสำรองการเรนเดอร์ทำงาน ซึ่งอัตราเฟรมเพียงอย่างเดียวตอบไม่ได้ งานสร้างถูกควบคุมด้วยงบขนาดบันเดิลและการทดสอบคุณภาพบนเบราว์เซอร์ และมีการตรวจการเปลี่ยนแปลงของภาพทุกครั้งที่ปล่อยเวอร์ชัน สถานการณ์เหล่านี้เป็นการสำรวจ ไม่ใช่การพยากรณ์ และไม่มีการอ้างผลการเรียนรู้หรือการมีส่วนร่วมที่วัดได้
ประสิทธิภาพและ SEO สำหรับเว็บไซต์ 3 มิติ
เสิร์ชเอนจินอ่านสิ่งที่วาดอยู่ในแคนวาสไม่ได้ จึงเรนเดอร์พาดหัว เนื้อหา ลิงก์ และเมทาดาทาเป็น HTML ก่อนที่ฉากจะโหลด ภาพโปสเตอร์ทำหน้าที่แทนฉากไว้ก่อน มีการจองพื้นที่ไว้เพื่อไม่ให้เลย์เอาต์ขยับ และโค้ด 3 มิติจะโหลดหลังจากเนื้อหาแรกปรากฏ เมื่อสถานะใดของประสบการณ์ควรค้นเจอได้ในการค้นหา สถานะนั้นจะมี URL ของตัวเอง
ประสิทธิภาพวัดจากแอสเซ็ตจริงและอุปกรณ์เป้าหมาย ไม่ใช่สัญญาอัตราเฟรมที่ใช้ได้กับทุกเครื่อง เราบันทึกลำดับการโหลด การโต้ตอบที่เป็นตัวแทน การใช้หน่วยความจำเมื่อเกี่ยวข้อง และการลดคุณภาพภาพที่ยอมรับได้บนโทรศัพท์ที่แรงน้อยกว่า โดยมุ่งสู่เกณฑ์ Core Web Vitals ของ Google เราไม่รับประกันอันดับ แต่จะดูแลให้ชั้น 3 มิติไม่ขวางระหว่างเนื้อหาของคุณกับครอว์เลอร์
ระบบสำรอง การลดการเคลื่อนไหว และการเข้าถึง
ผู้เข้าชมควรเข้าใจข้อเสนอได้เสมอ แม้จะลดการเคลื่อนไหว บริบทกราฟิกหายไป หรืออุปกรณ์รองรับฉากไม่ไหว ระบบสำรองอาจเป็นภาพนิ่ง วิดีโอสั้น หรือเลย์เอาต์เนื้อหาทั่วไป และต้องเปิดทางให้ตัดสินใจต่อได้ ไม่ใช่แสดงข้อผิดพลาด เมื่อลดการเคลื่อนไหว การบินของกล้องจะเปลี่ยนเป็นการตัดภาพหรือขั้นตอนที่ผู้เข้าชมควบคุมเอง และส่วนที่โต้ตอบได้จะมีการควบคุมด้วยคีย์บอร์ดและโฟกัสที่มองเห็นได้
อะไรเป็นตัวกำหนดค่าใช้จ่ายของเว็บไซต์ 3 มิติ
ค่าใช้จ่ายของเว็บไซต์ 3 มิติขึ้นกับการผลิตแอสเซ็ตต้นฉบับ จำนวนฉากและสถานะการโต้ตอบที่แตกต่างกัน แอนิเมชัน การเขียนโปรแกรมกราฟิก การรองรับอุปกรณ์ และการทดสอบ โมเดลสินค้าที่คุณมีให้กับสภาพแวดล้อมที่สร้างเองเป็นจุดเริ่มต้นที่ต่างกันมาก แม้ทั้งคู่จะไปอยู่ในหน้าเดียวกัน ใบเสนอราคาจึงแยกอาร์ตไดเรกชัน การสร้างโมเดลหรือแอสเซ็ตที่ซื้อลิขสิทธิ์ แอนิเมชัน การเขียนโปรแกรม เนื้อหา เสียง และการสนับสนุนช่วงเปิดตัว
ก้าวสำคัญแรกคือชิ้นงานเล็กที่ใช้งานได้จริงบนโทรศัพท์และเบราว์เซอร์เดสก์ท็อปที่ตกลงกันไว้ พร้อมข้อความจริง แอสเซ็ตตัวแทนหนึ่งชิ้น และการโต้ตอบจริง ช่วยให้เห็นปัญหาด้านการนำทาง ขนาดไฟล์ และเวลาเฟรมก่อนผลิตส่วนที่เหลือ ข้อเสนอยังระบุด้วยว่าใครเปลี่ยนเนื้อหาและโมเดลได้หลังเปิดตัว Dardo เป็นทีมสามคนในโบโกตา นำโดยผู้ก่อตั้ง Nicolás Cerón ทำงานเป็นภาษาอังกฤษหรือสเปนในเวลาโซนตะวันออกและตอนกลางของสหรัฐฯ
คำถามก่อนตัดสินใจเลือก
ทำเว็บไซต์ 3D ราคาเท่าไร
ขึ้นอยู่กับการผลิตแอสเซ็ตและจำนวนฉากเป็นหลัก เราจะเสนอราคางาน 3D เมื่อทราบว่ามีโมเดลอยู่แล้วหรือไม่ ต้องใช้ฉากที่แตกต่างกันกี่ฉาก ต้องมีสถานะการโต้ตอบกี่แบบ และต้องรองรับอุปกรณ์ใดบ้าง ช่วงงบประมาณในแบบฟอร์มสอบถาม ตั้งแต่ต่ำกว่า 5,000 USD ไปจนถึง 60,000 USD ขึ้นไป ช่วยให้เราประเมินขนาดของข้อเสนอแรกได้
เว็บไซต์ 3D แย่ต่อ SEO หรือไม่
ไม่แย่ หากเนื้อหาอยู่ใน HTML เสิร์ชเอนจินอ่านสิ่งที่วาดอยู่ใน WebGL canvas ไม่ได้ ดังนั้นหัวข้อ เนื้อหา ลิงก์ และเมทาดาทาต้องแสดงผลเป็นเนื้อหาของหน้าตามปกติ แล้วค่อยโหลดฉากตามมา เมื่อสร้างด้วยวิธีนี้ หน้า 3D ก็ถูกcrawlได้เหมือนหน้าอื่น ความเสี่ยงที่เหลือคือการโหลดช้าและเลย์เอาต์ขยับ ซึ่งเราทดสอบก่อนเปิดตัว
เว็บไซต์ Three.js ใช้งานบนมือถือได้ไหม
ได้ หากสร้างฉากสำหรับมือถือโดยเฉพาะ ไม่ใช่ย่อส่วนมาจากเดโมบนเดสก์ท็อป นั่นหมายถึงโมเดลและเท็กซ์เจอร์ที่บีบอัดแล้ว การจำกัดความละเอียดการเรนเดอร์ การเรนเดอร์เฉพาะเมื่อมีการเปลี่ยนแปลง และเวอร์ชันที่เบากว่าสำหรับอุปกรณ์ที่ประสิทธิภาพต่ำ เราทดสอบบนโทรศัพท์ที่ตกลงกันไว้ตั้งแต่ส่วนงานแรกที่ใช้งานได้ เพื่อให้ข้อจำกัดบนมือถือเป็นส่วนหนึ่งของการออกแบบ ไม่ใช่เรื่องที่เซอร์ไพรส์คุณตอนเปิดตัว
เว็บไซต์ 3D แบบโต้ตอบต้องใช้ WebGL เสมอไปหรือไม่
ไม่เสมอไป เทคนิคขึ้นอยู่กับงานที่ต้องการ หากผู้ใช้ต้องเปลี่ยนมุมมองหรือหมุนจัดการวัตถุ กราฟิก WebGL แบบเรียลไทม์มักเป็นทางเลือกที่เหมาะสม ส่วนเรื่องเล่าที่ตายตัวสามารถใช้เฟรมที่เรนเดอร์ไว้หรือวิดีโอ ร่วมกับเลเยอร์เนื้อหาที่เบากว่า ซึ่งผลิตถูกกว่าและรักษาความเร็วได้ง่ายกว่า บางครั้งภาพหลายเลเยอร์กับการเคลื่อนไหวที่พิถีพิถันก็เพียงพอ
ใครเป็นผู้สร้างโมเดล 3D
ได้ทั้งสองฝ่าย และข้อเสนอจะระบุไว้ว่าเป็นฝ่ายใด คุณอาจส่งโมเดลสินค้าที่มีอยู่แล้วซึ่งต้องปรับให้เหมาะกับเว็บ เราอาจใช้แอสเซ็ตที่มีลิขสิทธิ์ หรือขอบเขตงานอาจรวมการสร้างโมเดลใหม่ แต่ละแนวทางส่งผลต่อต้นทุนและเวลา ไม่ว่าจะมาจากแหล่งใด เราจะตกลงเรื่องรูปแบบไฟล์ งบประมาณโพลิกอนและเท็กซ์เจอร์ รวมถึงผู้ถือสิทธิ์ในไฟล์ต้นฉบับสุดท้ายและไลเซนส์
สร้างเว็บไซต์ 3D ใช้เวลานานเท่าไร
ไม่มีระยะเวลาที่แน่นอน ขึ้นอยู่กับการผลิตแอสเซ็ต จำนวนฉาก และรอบการตรวจทาน เรากำหนดตารางเวลาในข้อเสนอหลังจากประเมินขอบเขตของส่วนงานแรกที่ใช้งานได้ เพราะส่วนนั้นจะเผยให้เห็นสิ่งที่มักทำให้กำหนดการเลื่อน เช่น โมเดลที่หนัก หรือการโต้ตอบที่ต้องคิดใหม่สำหรับระบบสัมผัส หากมีวันเปิดตัวที่ต้องการ แจ้งให้เราทราบตั้งแต่ต้น เพื่อวางแผนแบ่งช่วงงานให้สอดคล้อง
เพิ่มฉาก 3D ลงในเว็บไซต์เดิมของเราได้ไหม
ส่วนใหญ่ได้ ส่วน 3D เพียงส่วนเดียว เช่น ตัวดูสินค้าหรือฉากเปิด สามารถเพิ่มลงในเว็บไซต์เดิมได้ หากสแต็กของเว็บรองรับการโหลดฉากหลังจากเนื้อหาของหน้า เราจะตรวจสอบเว็บที่ใช้อยู่ก่อน จากนั้นกำหนดขอบเขตของฉาก ระบบสำรอง และงบประสิทธิภาพ เป็นงานที่แยกเป็นชิ้นและตรวจรับได้ด้วยตัวเอง
