AR, VR และโมเดลสำหรับ 3 มิติใน HTML

ซุกตัวอยู่ที่ไหนสักแห่งใน บันทึกประจำรุ่นของ Safari Technology Preview 161 เป็นบรรทัดที่ดูเหมือนไม่มีพิษมีภัยเกี่ยวกับการสนับสนุนองค์ประกอบและแอตทริบิวต์ HTML ใหม่:

เพิ่มการสนับสนุนสำหรับ <model src> และให้เกียรติ <source type> คุณลักษณะ ([ป้องกันอีเมล])

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

• อืม ดูเหมือนการทดลองบางอย่างที่เป็นกรรมสิทธิ์
• ว้าว ของใหม่จริงๆ!

ความจริงก็คือมันเป็นทั้งสามอย่าง

เป็นแนวคิดที่กำลังพัฒนา

เช่นเดียวกับในสิ่งแรกที่ฟังดูเป็นทางการที่ฉันพบ <model> ไม่ได้อยู่ในสเป็ค W3C แต่อยู่ใน repo ของ WebKit สำหรับผู้อธิบาย. ทั้งหมดที่อยู่ใน README คือโน้ตยักษ์จากปี 2021 ที่ว่า “The <model> องค์ประกอบได้ย้ายไปที่ Immersive Web CG” ฉันกำลังจะกระโดดข้ามไปแต่สายตาไปสะดุดเข้ากับ HistoryAndEvolution.md ไฟล์ที่มีบริบทเริ่มต้นที่ดีในไฟล์ <model> แนวคิด:

พื้นที่ <model> ธาตุ เกิดจากความปรารถนาที่จะก้าวไปอีกขั้นและปรับปรุงประสบการณ์การรวม Safari เข้ากับ iOS AR ดูด่วน ลักษณะ

ฉันต้องดูที่หน้าสแปลชของ Apple สำหรับ AR Quick Look คุณทราบคุณสมบัติใหม่ที่ร้านค้าบางแห่งมีซึ่งคุณสามารถเปลี่ยนการเรนเดอร์ 3 มิติของผลิตภัณฑ์ในบ้านของคุณเองโดยใช้กล้องในโทรศัพท์ของคุณหรือไม่? นั่นคือสิ่งที่เรากำลังพูดถึงและ Apple เชื่อมโยงกรณีศึกษาที่ดีจากพิพิธภัณฑ์ศิลปะเมโทรโพลิแทน.

ตามที่ฉันเข้าใจจากบริบทที่จำกัดนี้:

• วาง <model> องค์ประกอบในเอกสาร
• เพิ่มไฟล์ต้นฉบับภายนอก เช่น <model src="assets/example.usdz">.

ข้อเสนอเดิมมาจากกลุ่ม Immersive Web Committee

นั่นคือทีม ทำให้ Virtual Reality (VR) และ Augmented Reality (AR) เป็นส่วนหนึ่งของเว็บ Apple เชื่อมโยง repo ของพวกเขา ดังนั้นฉันจึงกระโดดและไป ตรงไปยังผู้อธิบาย. นี่ไม่ใช่สเป็คหรืออะไร แต่เป็นข้อเสนอดั้งเดิม คำจำกัดความขององค์ประกอบที่ดีกว่ามาก!

HTML อนุญาตให้แสดงสื่อหลายประเภทผ่านองค์ประกอบต่างๆ เช่น <img>, <picture>,หรือ  <video>แต่ไม่ได้มีลักษณะที่เปิดเผยเพื่อแสดงเนื้อหา 3D โดยตรง การฝังเนื้อหา 3 มิติภายในหน้านั้นค่อนข้างยุ่งยากและต้องอาศัยการเขียนสคริปต์ <canvas> องค์ประกอบ. เราเชื่อว่าถึงเวลาแล้วที่จะต้องวางโมเดล 3 มิติให้เท่าเทียมกับประเภทสื่ออื่นๆ ที่สนับสนุนอยู่แล้ว

[... ]

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

ตัวอย่างพื้นฐานดึงสิ่งนี้เข้าด้วยกัน มันให้ความรู้สึกเหมือน <video> or <picture> องค์ประกอบ:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? ไม่ใช่ประเภทของไฟล์ที่มักข้ามโต๊ะทำงานของฉัน เดาว่าฉันจะต้องจัดการกับไฟล์เหล่านั้นและไฟล์ประเภทอื่น ๆ <model> อาจสนับสนุน ทั้งหมดนี้เป็นเพียงข้อเสนอดั้งเดิมเท่านั้น

ร่างข้อเสนอยังไม่ถูกสรุป

แต่มัน ให้โครงร่างที่ดี สิ่งที่อาจจะไป:

• การเพิ่มโมเดลในเอกสาร
• เปิดใช้งานการโต้ตอบ
• รองรับหลายรูปแบบ
• ให้เนื้อหาสำรอง
• ทำให้สามารถเข้าถึงได้

มีจำนวนมากที่จะคิดออก ส่วนใหญ่มีปัญหาที่เป็นเอกสารที่ต้องแก้ไข อย่างไรก็ตามมันทำให้แสงสว่างมากขึ้น <model> เช่นคุณลักษณะที่เสนอซึ่งทำให้รู้สึกได้ ข้อมูลเพิ่มเติม กดไลก์ <video> เช่น autoplay, controls, loop, muted, posterฯลฯ

มันกลับยิ่งไปกันใหญ่

การกล่าวถึงการสร้างแบบจำลอง 3 มิติแรกสุดที่ฉันพบคือ โพสต์ของ Keith Clark ในปี 2018 ซึ่งเขาสร้างต้นแบบองค์ประกอบแบบกำหนดเองที่เรียกว่า <x-model>. เขาอธิบายว่าเป็น "ตัวยึดที่ให้การเข้าถึง DOM และ CSSOM" ซึ่งการโหลดและการแสดงผลเสร็จสิ้นใน สาม.js.

แนวคิดของ Keith ตามมาด้วย <model-viewer> ส่วนประกอบ Joe Medley แบ่งปันในปี 2020 (และต่อมา ปรับปรุง ไปเลย) มีแม้กระทั่ง หน้าแรกของมัน และมันสนุกที่ได้ลากนีล อาร์มสตรองไปในอวกาศ

อาจเป็นเพียงการทดลอง?

ฉันหมายความว่าข้อมูลจำเพาะร่างไม่ได้ถูกทำให้สมบูรณ์ Apple ดูเหมือนจะเต็มใจที่จะเล่นบอลด้วยการประกาศ Safari TP 161 นั่นสมเหตุสมผลแล้ว Apple เป็นอย่างไรใน AR โดยรวม (แว่นตาแอปเปิ้ล, ใครก็ได้?)

Google ดูเหมือนจะเข้ามามีส่วนร่วมแม้ว่าจะอยู่ด้าน Web Components ก็ตาม เป็นเรื่องง่ายที่จะดูว่าอาจมีผลประโยชน์ทับซ้อนระหว่างสิ่งที่ Apple และ Google ต้องการจาก AR บนเว็บได้อย่างไร

ทั้งหมดนี้เป็นเพียงบันทึกของฉันจากการพยายามค้นหาทุกอย่าง มันต้องมีรายละเอียดปลีกย่อยมากกว่าที่ฉันรู้เพียงเล็กน้อยเกี่ยวกับมันจนถึงตอนนี้ ฉันแน่ใจว่าคนที่ฉลาดกว่าสามารถผูกโบว์ที่เรียบร้อยกว่าได้ <model> ในความคิดเห็น 😉

และในขณะที่เรากำลังพูดถึง Safari Technology Preview 162 เพิ่งออกเมื่อวันก่อน และมันเปิดใช้งาน การซ้อน CSS และ ไวยากรณ์สีสัมพัทธ์ CSS.

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/