طرح الإصدار 1.1

نماذج ثلاثية الأبعاد لصفحة الويب بنفس سهولة كتابة HTML.

جو ميدلي

روب كوخمان

أصبحت التصاميم الثلاثية الأبعاد أكثر صلة من أي وقت مضى. يجلب بائعو التجزئة تجارب التسوق في المتجر إلى منازل العملاء. تصمم المتاحف نماذج ثلاثية الأبعاد من أعمالها الفنية متاحة للجميع على الويب. لسوء الحظ، قد يكون من الصعب إضافة تصميم ثلاثي الأبعاد إلى موقع ويب بطريقة توفر تجربة مستخدم رائعة بدون معرفة عميقة بالتقنيات ثلاثية الأبعاد أو اللجوء إلى استضافة محتوى ثلاثي الأبعاد على موقع تابع لجهة خارجية. يهدف مكوّن الويب <model-viewer>، الذي تم إطلاقه في أوائل عام 2019، إلى تسهيل عملية وضع نماذج ثلاثية الأبعاد على الويب، مثل كتابة بضعة أسطر من ترميز HTML. منذ ذلك الحين، يعمل الفريق على معالجة الملاحظات والطلبات الواردة من المجتمع. وكانت تتويج هذا العمل إلى الإصدار 1.0 من <model-viewer> الذي تم إطلاقه في وقت سابق من هذا العام. نعلن الآن عن إطلاق الإصدار 1.1 من <model-viewer>. يمكنك قراءة ملاحظات الإصدار في GitHub.

ما هي الميزات الجديدة منذ العام الماضي؟

يتضمّن الإصدار 1.1 دعمًا مدمجًا للواقع المعزز (AR) على الويب، وتحسينات على السرعة والدقة، وغيرها من الميزات المطلوبة بشكل متكرر.

الواقع المعزّز

إن عرض تصميم ثلاثي الأبعاد على لوحة فارغة يُعد أمرًا رائعًا، ولكن إمكانية عرضه في مساحتك أفضل. بالنسبة إلى الأجهزة الثلاثية الأبعاد والواقع المعزّز في المتصفّح داخل المتصفّح Chrome، يتوافق Android مع الواقع المعزز باستخدام WebXR .

عرض توضيحي لقدرة الواقع المعزّز <model-viewer>.

وعندما تصبح العلامة جاهزة، ستتمكّن من استخدامها من خلال إضافة سمة ar إلى العلامة <model-viewer>. تتيح لك السمات الأخرى تخصيص تجربة WebXR AR، كما هو موضَّح في نموذج WebXR على modelviewer.dev. ويوضّح نموذج الرمز البرمجي أدناه الشكل الذي قد يبدو عليه ذلك.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

يبدو شيئًا مثل الفيديو المضمن الذي يتم عرضه أسفل هذا العنوان.

عناصر التحكّم في الكاميرا

توفّر ميزة "<model-viewer>" الآن إمكانية التحكم الكامل في الكاميرا الافتراضية للعرض (من منظور المشاهد). ويشمل ذلك هدف الكاميرا والمدار (الموضع بالنسبة إلى النموذج) ومجال الرؤية. يمكنك أيضًا تفعيل التبديل التلقائي وضبط الحدود على تفاعل المستخدم (مثل الحد الأقصى والحد الأدنى من حقول العرض).

التعليقات التوضيحية

يمكنك أيضًا إضافة تعليقات توضيحية إلى نماذجك باستخدام HTML وCSS. وغالبًا ما تُستخدم هذه الإمكانية لإرفاق" تسميات بأجزاء من النموذج بطريقة تتحرك مع النموذج بينما يتم التلاعب بها. التعليقات التوضيحية قابلة للتخصيص، بما في ذلك مظهرها ومدى إخفائها بالنموذج. تعمل التعليقات التوضيحية أيضًا في الواقع المعزّز.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

بدلة فضاء مع تعليق توضيحي.

راجع صفحة مستندات التعليقات التوضيحية للاطّلاع على مزيد من المعلومات.

المحرِّر

يقدّم الإصدار 1.1 أداة"تعديل" <model-viewer> تتيح لك معاينة النموذج سريعًا، وتجربة إعدادات <model-viewer> المختلفة (مثل التعرّض للضوء ودرجة ليونة الظل)، وإنشاء صورة ملصق، والحصول بشكل تفاعلي على إحداثيات للتعليقات التوضيحية.

تحسينات على العرض والأداء

ويتم تحسين دقة العرض بشكل كبير، خاصةً في البيئات ذات النطاق الديناميكي العالي (HDR). يستخدم <model-viewer> الآن أيضًا مسار عرض مباشر عندما يكون عنصر <model-viewer> واحد فقط في إطار العرض، ما يؤدي إلى تحسين الأداء (خاصةً على متصفّح Firefox). وأخيرًا، أدى تغيير حجم درجة دقة العرض ديناميكيًا إلى تحسين عدد اللقطات في الثانية بشكل كبير. يوضح المثال أدناه بعض هذه التحسينات الحديثة.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

تصميم ثلاثي الأبعاد لخوذة ترتديها.

الثبات

بعد وصول واجهة <model-viewer> إلى الإصدار الرئيسي الأول، يكون الحفاظ على ثبات واجهة برمجة التطبيقات أولوية، لذلك سيتم تجنُّب أي تغييرات قد تؤدي إلى عطل إلى أن يتم إطلاق الإصدار 2.0.

ما هي الخطوات التالية؟

يتضمّن الإصدار 1.0 من <model-viewer> الإمكانات الأكثر طلبًا، لكن الفريق لم ينته بعد. وستتم إضافة المزيد من الميزات، وكذلك التحسينات في الأداء والثبات والوثائق والأدوات. إذا كانت لديك اقتراحات، يُرجى الإبلاغ عن مشكلة في GitHub. نرحب دائمًا بالخبراء المختصين. يمكنك البقاء على تواصل من خلال متابعة <model-viewer> على Twitter والاطّلاع على المحادثة في المنتدى على Spectrum.