AR، VR، و مدلی برای سه بعدی در HTML

جمع شده در جایی در یادداشت های انتشار پیش نمایش فناوری Safari 161 یک خط به ظاهر بی ضرر در مورد پشتیبانی از یک عنصر و ویژگی جدید HTML است:

پشتیبانی اضافه شده برای <model src> و افتخار <source type> ویژگی های ([ایمیل محافظت شده])

هر زمان که اشاره ای به عنصری می بینم که نمی شناسم، ذهنم مستقیماً به سمت آن می رود متعجب! برای من جدید است، اما احتمالاً اخبار قدیمی برای بقیه. می دانم که وضعیت بدنی ضعیفی دارد، همانطور که می تواند به همین راحتی باشد:

• هوم، به نظر یک آزمایش اختصاصی است.
• وای، یک چیز واقعا جدید!

حقیقت این است که هر سه مورد است.

این یک مفهوم در حال تکامل است

همانطور که در، اولین چیزی که تا حدودی رسمی بود که در آن یافتم <model> در مشخصات W3C نبود اما در مخزن WebKit برای توضیح دهندگان. تمام آنچه در README وجود دارد یادداشت غول پیکری از سال 2021 است که «The <model> عنصر به Immersive Web CG منتقل شده است." می خواستم بپرم اما چشمم به آن خیره شد HistoryAndEvolution.md فایلی که خلاصه خوبی از زمینه اولیه در آن دارد <model> مفهوم:

La <model> عنصر از تمایل به برداشتن گام بعدی و بهبود تجربه ادغام سافاری با iOS متولد شد. نگاه سریع AR ویژگی.

من مجبور شدم به صفحه splash اپل برای AR Quick Look نگاه کنم. آیا می‌دانید ویژگی جدیدی که برخی فروشگاه‌ها دارند که در آن می‌توانید رندر سه‌بعدی یک محصول را در خانه خود با استفاده از دوربین تلفن خود جابه‌جا کنید؟ این چیزهایی است که ما در مورد آن صحبت می کنیم، و اپل یک مطالعه موردی خوب از موزه هنر متروپولیتن را پیوند می دهد.

همانطور که من از این زمینه محدود می فهمم:

• a را رها کنید <model> عنصر در سند
• یک فایل منبع خارجی اضافه کنید، به عنوان مثال <model src="assets/example.usdz">.

پیشنهاد اصلی از گروه کمیته وب Immersive است

این تیم است واقعیت مجازی (VR) و واقعیت افزوده (AR) بخشی از وب هستند. اپل مخزن خود را پیوند داد، بنابراین من پرش کردم و رفتم مستقیم به توضیح دهنده. این مشخصات یا چیزی نیست، بلکه پیشنهاد اصلی است. تعریف خیلی بهتر از عنصر!

HTML امکان نمایش بسیاری از انواع رسانه را از طریق عناصری مانند <img>, <picture>، یا <video>، اما روشی برای نمایش مستقیم محتوای سه بعدی ارائه نمی دهد. جاسازی محتوای سه بعدی در یک صفحه نسبتاً دست و پا گیر است و به اسکریپت نویسی متکی است. <canvas> عنصر ما معتقدیم که زمان آن فرا رسیده است که مدل‌های سه بعدی را با سایر انواع رسانه‌ای که قبلاً پشتیبانی شده‌اند، در موقعیتی برابر قرار دهیم.

[...]

HTML <model> هدف عنصر این است که به یک وب سایت اجازه دهد تا مدل های سه بعدی تعاملی را به راحتی مانند هر رسانه تصویری دیگری جاسازی کند. انتظار می‌رود مدل‌ها توسط ابزارهای سه‌بعدی ایجاد شوند یا به‌صورت پویا تولید شوند، اما به‌عنوان یک منبع مستقل توسط سرور خدمت می‌کنند.

مثال اصلی این را جمع می کند. واقعاً این احساس را دارد <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.

ایده کیت توسط <model-viewer> جزء جو مدلی در سال 2020 به اشتراک گذاشته شد (و متعاقب آن به روز رسانی به آن). حتی یک وجود دارد صفحه اصلی برای آن و کشیدن نیل آرمسترانگ در فضا سرگرم کننده است.

احتمالاً فقط یک آزمایش است؟

منظورم این است که مشخصات پیش نویس مشخص نشده است. به نظر می رسد که اپل به لطف اطلاعیه Safari TP 161 مایل به بازی با توپ است. که کاملا منطقی است اپل چقدر نسبت به AR صعودی است در کل. (شیشه اپل، هر کسی؟)

به نظر می‌رسد که گوگل پایش را باز کرده است، البته در بخش Web Components. به راحتی می توان دید که چگونه ممکن است بین آنچه اپل و گوگل از AR در وب می خواهند، تضاد منافع وجود داشته باشد.

اینها همه فقط یادداشت های من از تلاش برای بزرگ کردن همه چیز هستند. باید تفاوت های ظریف بیشتری در آن وجود داشته باشد تا آنچه تاکنون در مورد آن کم می دانم. من مطمئن هستم که شخص باهوش‌تر می‌تواند پاپیون‌های مرتب‌تری به اطراف ببندد <model> در نظرات 😉

و در حالی که ما در حال صحبت از پیش نمایش فناوری سافاری هستیم، 162 به تازگی منتشر شده است و آن را قادر می سازد تودرتو CSS و نحو نسبی رنگ CSS.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/