AR و VR ونموذج ثلاثي الأبعاد بتنسيق HTML

مطوي في مكان ما في ملاحظات إصدار Safari Technology Preview 161 هو سطر يبدو غير ضار حول دعم عنصر وسمات HTML جديدة:

دعم إضافي ل <model src> والشرف <source type> صفات ([البريد الإلكتروني محمي])

في أي وقت أرى ذكرًا لبعض العناصر التي لا أتعرف عليها ، يذهب عقلي مباشرة إلى ذلك هاه! جديد بالنسبة لي ، ولكن ربما أخبار قديمة لأي شخص آخر. أنا أعلم أنه وضع سيء ، حيث يمكن أن يكون بسهولة:

• حسنًا ، يبدو وكأنه تجربة ملكية.
• واو ، شيء جديد حقًا!

الحقيقة هي أنه نوعًا ما الثلاثة.

إنه مفهوم متطور

كما هو الحال في ، أول شيء يبدو رسميًا إلى حد ما وجدته <model> لم يكن في مواصفات W3C ولكن في ريبو WebKit للمفسرين. كل ما هو موجود في README هو ملاحظة عملاقة من عام 2021 تقول "إن <model> تم نقل العنصر إلى نظام إدارة الويب الشامل ". كنت على وشك القفز لكن عيني لفتت انتباهي HistoryAndEvolution.md الملف الذي يحتوي على ملخص لطيف للسياق المبكر في ملف <model> مفهوم:

• <model> العنصر ولد من الرغبة في اتخاذ الخطوة التالية وتحسين تجربة تكامل Safari مع أنظمة iOS نظرة سريعة AR ميزة.

اضطررت إلى إلقاء نظرة على صفحة البداية من Apple للحصول على نظرة سريعة للواقع المعزز. هل تعرف الميزة الجديدة التي تمتلكها بعض المتاجر حيث يمكنك تبديل عرض ثلاثي الأبعاد لمنتج في منزلك باستخدام كاميرا هاتفك؟ هذا هو نوع الأشياء التي نتحدث عنها ، و تربط Apple دراسة حالة لطيفة من متحف متروبوليتان للفنون.

كما أفهمها من هذا السياق المحدود:

• إسقاط أ <model> عنصر في المستند.
• أضف ملف مصدر خارجي ، على سبيل المثال <model src="assets/example.usdz">.

الاقتراح الأصلي من مجموعة لجنة الويب الشاملة

هذا هو الفريق البحث جعل الواقع الافتراضي (VR) والواقع المعزز (AR) جزءًا من الويب. قامت Apple بربط الريبو الخاص بهم ، لذلك قمت بالقفزة وذهبت مباشرة إلى الشرح. هذه ليست المواصفات أو أي شيء ، ولكن الاقتراح الأصلي. تعريف أفضل بكثير للعنصر!

يسمح HTML بعرض العديد من أنواع الوسائط من خلال عناصر مثل <img>, <picture>الطرق أو <video>، ولكنها لا توفر طريقة تعريفية لعرض المحتوى ثلاثي الأبعاد مباشرةً. يعد تضمين محتوى ثلاثي الأبعاد داخل الصفحة أمرًا مرهقًا نسبيًا ويعتمد على البرمجة النصية لملف <canvas> جزء. نعتقد أن الوقت قد حان لوضع النماذج ثلاثية الأبعاد على قدم المساواة مع أنواع الوسائط الأخرى المدعومة بالفعل.

[...]

HTML <model> يهدف element إلى السماح لموقع ويب بتضمين نماذج تفاعلية ثلاثية الأبعاد بشكل ملائم مثل أي وسائط مرئية أخرى. من المتوقع أن يتم إنشاء النماذج بواسطة أدوات تأليف ثلاثية الأبعاد أو يتم إنشاؤها ديناميكيًا ، ولكن يتم استخدامها كمورد مستقل بواسطة الخادم.

المثال الأساسي يجمع هذا معًا. إنه حقًا يشعر وكأنه <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، الخ.

يعود إلى أبعد من ذلك

أول ذكر للنمذجة ثلاثية الأبعاد وجدتها كان منشور كيث كلارك 2018 الذي يصمم فيه نموذجًا أوليًا لعنصر مخصص يسمى <x-model>. ويصفه بأنه "عنصر نائب يوفر الوصول إلى DOM و CSSOM" حيث يتم التحميل والعرض في three.js.

يتبع فكرة Keith ملف <model-viewer> شارك المكون Joe Medley في عام 2020 (و تحديث إليه). حتى أن هناك ملف الصفحة الرئيسية لذلك ومن الممتع سحب نيل أرمسترونج في الفضاء.

ربما مجرد تجربة؟

أعني ، لم يتم توضيح مسودة المواصفات. يبدو أن شركة Apple مستعدة للعب الكرة بفضل إعلان Safari TP 161. هذا منطقي تماما ما مدى تفاؤل شركة آبل في الواقع المعزز ككل. (نظارات آبل، أي واحد؟)

يبدو أن Google تضع قدمها في الباب ، وإن كان ذلك على جانب مكونات الويب للأشياء. من السهل معرفة كيف يمكن أن يكون هناك تضارب في المصالح بين ما تريده Apple و Google من الواقع المعزز على الويب.

هذه كلها مجرد ملاحظاتي من محاولة التملص من كل شيء. يجب أن يكون هناك فارق بسيط أكثر بكثير مما أعرفه عنها قليلاً حتى الآن. أنا متأكد من أن شخصًا أكثر ذكاءً يمكنه ربط القوس بشكل أكثر إتقانًا <model> في التعليقات. 😉

وبينما نتحدث عن Safari Technology Preview ، 162 أفرج عنه للتو في ذلك اليوم وتمكن تداخل CSS و بنية اللون النسبي لـ CSS.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/